Can we help users distinguish their client and server JS files (and also detect wrong imports in main.wasp)?

[Martinsos]

Before, files has to be in src/client or src/server dirs, which made it clear if they are client or server files. Also, imports in main.wasp started with either @client or @server, and we had checks that would prevent them from importing a client file where server file is expected, and vice versa.

But now, with new restructuring (Wasp v0.12), everything is in src/ and users can mix client and server files as they like. Which is great for bigger projects since it enables organizing by features, but it makes it harder for users to figure out if the file they are looking at is a server (nodejs) or client ("browser" js) file. Also, in main.wasp, we don't know if they imported the wrong file -> for example, they need to provide a JS function for an Action -> it needs to be server code, but if they provide client code, we don't easily know that and can't report a nice error.

This is not a huge deal, as it will error out later, and I doubt this will be happening very often, but still, I do think we lost something on the DX side.

[Martinsos]

Some ideas by @infomiho:

Things we can detect: using jsx or tsx files in server imports :smile: Another thing, imports analysis i.e. seeing wasp/client/* could mean it shouldn't be imported on the server (we already do import analysis in the LSP)

Some ideas by me:

• Somehow marking files -> maybe using .server.js extension for server files, or .client.js for client files. Or .node.js and .web.js. Or .node.js and .browser.js. That would enable me to know, as a Wasp user, when in a file, am I in Nodejs world or in browser world. I wouldn't force this though, of course, but it sounds tempting a bit. And it would make file names longer. Hm.

• One option is also them having a comment at the top of each file, something like /* use server / or / use client */, kind of like NextJS (and some others? React server compnents?) do. But I like it better in the file name, because I can get that info without opening the file.

• Enforce, in Wasp, that there must be exactly one /@client/ or /@server/ part in the file path. Then we can easily, when dealing with ext import in the main.wasp file, determine if it is client or server file. We also can easily determine from the file path of the file which type of file it is. On the other hand, users can still chose at which level they want to group files into client vs server files, so it is still a win compared to what we had before.

So they would have for example:

src/
    user/
        @client/
            pages/
                UserProfile.jsx
                UserProfile.css
            components/
                UserImage.jsx
        @server/
            operations.js
            jobs.js
        utils.js
    @server/
      setup.js
    @client/
      setup.js
      Layout.jsx
    

[sodic]

I've removed the post-0.12.0 label because this is a pretty big non-cleanup change and we agreed we wouldn't be doing it now.

[infomiho]

Remix is doing similar stuff with .server and .client folders: https://remix.run/docs/en/main/file-conventions/-server

[Martinsos]

Related Discord convo, where user by accident imported their JS file with their Action (so server code) directly into their client code and got errors because of it: https://discord.com/channels/686873244791210014/1227612215163486238/1227612215163486238 .