feat: show SSR output #343
Conversation
| @skirtles-code is attempting to deploy a commit to the vuejs Team on Vercel. A member of the Team first needs to authorize it. |
commit: |
| get: () => store.value.outputMode, | ||
| set: (value) => (store.value.outputMode = value), | ||
| }) | ||
| | ||
| watchEffect(() => { | ||
| if (!modes.value.includes(mode.value)) { | ||
| mode.value = modes.value[0] | ||
| } |
There was a problem hiding this comment.
I switched to using watchEffect because I wanted the value in the store to be updated if the current tab isn't valid. This can happen if SSR mode is turned off when the SSR OUTPUT tab is active. Turning SSR mode back on should stay on the newly active tab, rather than jumping back to SSR OUTPUT.
| const safeContext = {} | ||
| const isSafe = (v) => | ||
| v === null || | ||
| typeof v === 'boolean' || | ||
| typeof v === 'string' || | ||
| Number.isFinite(v) | ||
| const toSafe = (v) => (isSafe(v) ? v : '[' + typeof v + ']') | ||
| for (const prop in rawContext) { | ||
| const value = rawContext[prop] | ||
| safeContext[prop] = isSafe(value) | ||
| ? value | ||
| : Array.isArray(value) | ||
| ? value.map(toSafe) | ||
| : typeof value === 'object' | ||
| ? Object.fromEntries( | ||
| Object.entries(value).map(([k, v]) => [k, toSafe(v)]), | ||
| ) | ||
| : toSafe(value) | ||
| } | ||
| return { ssrHtml: html, ssrContext: safeContext } |
There was a problem hiding this comment.
While this looks like a lot, it's just trying to make the SSR context object safe to pass to postMessage without losing too much information.
| .ssr-output { | ||
| background: var(--bg); | ||
| box-sizing: border-box; | ||
| color: var(--text-light); |
There was a problem hiding this comment.
In light mode the text is a bit lighter than I would like, but there didn't seem to be any other variables available I could use and I was reluctant to introduce a new one.
| if (window.__ssr_promise__) { | ||
| send_ok(await window.__ssr_promise__) | ||
| } else { | ||
| send_ok() | ||
| } |
There was a problem hiding this comment.
This is a bit of a hack, reusing __ssr_promise__ as a way to get the response value. I couldn't see a better alternative. I could have renamed the promise to something more generic, so it wasn't explicitly tied to SSR, but I figured that could be changed later if other use cases like this arise.
| LGTM |
This adds an option to show the SSR output.
My goal was to make it a bit easier to investigate SSR hydration problems by showing the generated HTML directly in the UI.
The new option is disabled by default, but it is enabled in
test/main.ts.I've also exposed the SSR context object, which is populated if teleports or sync watchers are used.