Use .server.js and .client.js to assert the JavaScript environment

[brillout]

Description

Now that the V1 design removes the filename suffixes such as .page.server.js and .page.client.js, we can use .server.js and .client.js for another purpose.

I suggest we use these to assert where the file is loaded.

// /some/where/SomeClientOnlyComponent.client.js

// The file ends with `.client.js` and is therefore guaranteed to never load on the server-side
export function SomeClientOnlyComponent() {
   // ...
}

// /some/where/secrets.server.js

// The file ends with `.server.js` and is therefore guaranteed to never load on the client-side
export const databaseConnection = {
  password: '4H34CXA3cMa'
}

[dajinchu]

Is there a way to do this manually in the meantime? Does checking typeof window at the top of a file cover it? Or is it more nuanced. Thanks

[brillout]

Yes you can try to implement a Vite plugin that does this. AFAICT it should be relatively straigthforward to implement. Keep me updated if you do, as I'm curious about what you end up with.

[dajinchu]

Wrote a simple plugin. It's pretty dumb but gets the job done for us. It just checks for substring ".server" in import statements.

https://gist.github.com/dajinchu/2c03ec791ad135e481dbb96bd3538121

Wrote another version using resolveId instead of transform but transform gives a nice error message showing where the import happened.

[brillout]

a nice error message showing where the import happened.

Good idea 👌. (And the dependency on es-module-lexer should be fine.)

I'll additionally implement the "dumber" version with an internal assertion, increasing the safety of this feature.

[usk94]

Hi @brillout. I am going to start working on this issue, and I plan to follow this approach for both the server and the client side, is this correct?

It just checks for substring ".server" in import statements.

[brillout]

Yes, I think this approach makes a lot of sense 👍

…

On Tue 28. Nov 2023 at 14:33, Yusaku Inoue ***@***.***> wrote: Hi @brillout <https://github.com/brillout>. I am going to start working on this issue, and I plan to follow this approach for both the server and the client side, is this correct? It just checks for substring ".server" in import statements. — Reply to this email directly, view it on GitHub <#744 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRUN6JS6GHLNP23Z6QTYGXR3FAVCNFSM6AAAAAAWJGFAP2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRZHA2TKOBSGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>