chore: add playground for SSR reproductions #3601
Conversation
| "@rollup/plugin-replace": "^5.0.2", | ||
| "express": "^4.18.2", | ||
| "html-entities": "^2.3.3", | ||
| "lwc": "^3.0.0", |
There was a problem hiding this comment.
These should be exact versions instead of ^ versions so that Lerna can link them up correctly, and so we know exactly what version someone has when they file repros. This is how we do it in the other playground:
Line 12 in 5799575
| <script> | ||
| window.lwcRuntimeFlags = window.lwcRuntimeFlags || {}; | ||
| window.lwcRuntimeFlags.ENABLE_LIGHT_DOM_COMPONENTS = true; | ||
| </script> |
There was a problem hiding this comment.
This script isn't needed, light DOM is GA now.
| async function buildResponse(props) { | ||
| globalThis.lwc = engineServer; | ||
|
|
||
| const cmp = (await import(`${compiledComponentPath}?cacheBust=${Date.now()}`)).default; |
There was a problem hiding this comment.
I know the goal here is to bust the cache (presumably during watch mode?), but this does introduce a memory leak. Unfortunately I'm not aware of any good workaround for this in ESM mode.
There was a problem hiding this comment.
I'll leave a comment here to that effect. I considered moving back to CommonJS but that broke other things and would be misaligned with the other playground.
| "type": "module", | ||
| "description": "Playground project to experiment with LWC.", | ||
| "scripts": { | ||
| "dev": "node ./server.js", |
There was a problem hiding this comment.
Without a "build" script, NX doesn't actually build this project. Should it have a prod-mode buildlike the otherplayground`?
| "scripts": { | ||
| "dev": "node ./server.js", | ||
| "csr-dev": "rollup -c --watch", | ||
| "ssr:playground": "cd .. && yarn run build && cd ssr-playground && yarn run dev" |
There was a problem hiding this comment.
These two scripts don't do anything in StackBlitz, right? Do we need them?
| import Parent from "x/parent"; | ||
|
|
||
| const elm = createElement("x-parent", { is: Parent }); | ||
| elm.tabIndex = 1; |
There was a problem hiding this comment.
Why set the tabindex here? Also typically a11y audits will warn about 1) tabindex greater than 0, and 2) tabindex without aria-label.
| if (event.code === 'ERROR') { | ||
| // eslint-disable-next-line no-console | ||
| console.error(event.error); | ||
| } | ||
| if (event.code === 'START') { | ||
| // eslint-disable-next-line no-console | ||
| process.stdout.write('Compiling...'); | ||
| } | ||
| if (event.code === 'END') { | ||
| // eslint-disable-next-line no-console | ||
| console.log(' done!'); | ||
| } |
There was a problem hiding this comment.
These could be else if or switches to improve readability a bit,
| input: 'src/entry-client-ssr.js', | ||
| output: { | ||
| file: 'dist/entry-rehydrate.js', | ||
| format: 'cjs' |
There was a problem hiding this comment.
This is written as cjs but consumed in a <script>. Can we use esm and <script type="module">?
| return res.sendFile(path.resolve(__dirname, './static/csr.html')); | ||
| }); | ||
|
|
||
| app.get('*', (req, res) => { |
There was a problem hiding this comment.
| app.get('*', (req, res) => { | |
| app.get('/', (req, res) => { |
* accepts localhost:3000/foobar; I think we should probably be stricter.
| import lwc from '@lwc/rollup-plugin'; | ||
| import replace from '@rollup/plugin-replace'; | ||
| import alias from '@rollup/plugin-alias'; | ||
| import simpleRollupConfig from'./rollup.config.js'; |
There was a problem hiding this comment.
If we remove csr-dev then we can potentially move this into this file, and have one single rollup.config.js file.
Details
This adds an
ssr-playground/as a complement to the existingplayground/that is CSR-only.You can try it out here.
Does this pull request introduce a breaking change?
Does this pull request introduce an observable change?