simplify svelte plugin #1221
simplify svelte plugin #1221
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/pikapkg/snowpack/376cfex6h |
| const ssrOptions = {}; | ||
| if (isSSR) { | ||
| ssrOptions.generate = 'ssr'; | ||
| ssrOptions.hydratable = true; |
There was a problem hiding this comment.
Ah, I must have misunderstood this. Isn't the idea that hydratable is needed in SSR mode so that it generated hydratable markup, so that the client-side code can hydrate the SSR-generated markup?
There was a problem hiding this comment.
No, hydratable just means that the client-side component is generated with the code necessary to hydrate the server-rendered markup. There aren't any constraints on the markup that it hydrates, it will repair the DOM as necessary
| if (isSSR) { | ||
| ssrOptions.generate = 'ssr'; | ||
| ssrOptions.hydratable = true; | ||
| ssrOptions.css = true; |
There was a problem hiding this comment.
The idea here was that CSS would be applied via JS directly in Svelte, so that you wouldn't need to handle our *.css.proxy.js proxy CSS files in SSR mode. Would love to hear your rationale behind removing this
There was a problem hiding this comment.
The css option doesn't do anything in SSR mode. In DOM mode it causes the generated code to include the styles in the JS so that you don't need to figure out how to extract and serve a .css file — bit of a hack and not really recommended.
Any SSR solution will need to extract CSS, and either serve it as a file, consumed via a <link>, or embedding it in the rendered HTML:
const { html, css } = App.render(props);
return `<!doctype html>
<head>
<style}${css.code}</style>
</head>
<body>
${html}
</body>`;
|
SGTM on both of the above, thanks for simplifying |
Changes
Doesn't change any functionality, just tidies up the Svelte plugin a tiny bit. Previously in SSR mode, the plugin was setting
hydratable: trueandcss: true, but these options have no effect in SSR mode. We can therefore get rid ofssrOptionsaltogether and just toggle thegenerateoption.Testing
Tested manually with a local project
Docs
N/A