-
Notifications
You must be signed in to change notification settings - Fork 394
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: add playground for SSR reproductions #3601
base: master
Are you sure you want to change the base?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
"@lwc/rollup-plugin": "3.0.0", |
<script> | ||
window.lwcRuntimeFlags = window.lwcRuntimeFlags || {}; | ||
window.lwcRuntimeFlags.ENABLE_LIGHT_DOM_COMPONENTS = true; | ||
</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Without a "build" script, NX doesn't actually build this project. Should it have a prod-mode
buildlike the other
playground`?
"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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These could be else if
or switch
es 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?