feat: show SSR output (#343)

Author: skirtles-code

src/Repl.vue

@@ -19,6 +19,7 @@ export interface Props {
   autoResize?: boolean
   showCompileOutput?: boolean
   showImportMap?: boolean
+  showSsrOutput?: boolean
   showTsConfig?: boolean
   clearConsole?: boolean
   layout?: 'horizontal' | 'vertical'
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   autoResize: true,
   showCompileOutput: true,
   showImportMap: true,
+  showSsrOutput: false,
   showTsConfig: true,
   clearConsole: true,
   layoutReverse: false,
@@ -105,6 +107,7 @@ defineExpose({ reload })
           ref="output"
           :editor-component="editor"
           :show-compile-output="props.showCompileOutput"
+          :show-ssr-output="props.showSsrOutput"
           :ssr="!!props.ssr"
         />
       </template>

src/output/Output.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import { computed, inject, useTemplateRef } from 'vue'
+import SsrOutput from './SsrOutput.vue'
+import { computed, inject, useTemplateRef, watchEffect } from 'vue'
 import {
   type EditorComponentType,
   type OutputModes,
@@ -10,27 +11,32 @@ import {
 const props = defineProps<{
   editorComponent: EditorComponentType
   showCompileOutput?: boolean
+  showSsrOutput?: boolean
   ssr: boolean
 }>()
 
 const { store } = inject(injectKeyProps)!
 const previewRef = useTemplateRef('preview')
-const modes = computed(() =>
-  props.showCompileOutput
-    ? (['preview', 'js', 'css', 'ssr'] as const)
-    : (['preview'] as const),
-)
+const modes = computed(() => {
+  const outputModes: OutputModes[] = ['preview']
+  if (props.showCompileOutput) {
+    outputModes.push('js', 'css', 'ssr')
+  }
+  if (props.ssr && props.showSsrOutput) {
+    outputModes.push('ssr output')
+  }
+  return outputModes
+})
 
 const mode = computed<OutputModes>({
-  get: () =>
-    (modes.value as readonly string[]).includes(store.value.outputMode)
-      ? store.value.outputMode
-      : 'preview',
-  set(value) {
-    if ((modes.value as readonly string[]).includes(store.value.outputMode)) {
-      store.value.outputMode = value
-    }
-  },
+  get: () => store.value.outputMode,
+  set: (value) => (store.value.outputMode = value),
+})
+
+watchEffect(() => {
+  if (!modes.value.includes(mode.value)) {
+    mode.value = modes.value[0]
+  }
 })
 
 function reload() {
@@ -54,8 +60,13 @@ defineExpose({ reload, previewRef })
 
   <div class="output-container">
     <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
+    <SsrOutput
+      v-if="mode === 'ssr output'"
+      :context="store.ssrOutput.context"
+      :html="store.ssrOutput.html"
+    />
     <props.editorComponent
-      v-if="mode !== 'preview'"
+      v-else-if="mode !== 'preview'"
       readonly
       :filename="store.activeFile.filename"
       :value="store.activeFile.compiled[mode]"

src/output/Sandbox.vue

@@ -223,7 +223,8 @@ async function updatePreview() {
       console.info(
         `[@vue/repl] successfully compiled ${ssrModules.length} modules for SSR.`,
       )
-      await proxy.eval([
+      store.value.ssrOutput.html = store.value.ssrOutput.context = ''
+      const response = await proxy.eval([
         `const __modules__ = {};`,
         ...ssrModules,
         `import { renderToString as _renderToString } from 'vue/server-renderer'
@@ -235,15 +236,41 @@ async function updatePreview() {
            app.config.unwrapInjectedRef = true
          }
          app.config.warnHandler = () => {}
-         window.__ssr_promise__ = _renderToString(app).then(html => {
+         const rawContext = {}
+         window.__ssr_promise__ = _renderToString(app, rawContext).then(html => {
            document.body.innerHTML = '<div id="app">' + html + '</div>' + \`${
              previewOptions.value?.bodyHTML || ''
            }\`
+           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 }
          }).catch(err => {
            console.error("SSR Error", err)
          })
         `,
       ])
+
+      if (response) {
+        store.value.ssrOutput.html = String((response as any).ssrHtml ?? '')
+        store.value.ssrOutput.context = (response as any).ssrContext || ''
+      }
     }
 
     // compile code to simulated module system

src/output/SsrOutput.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  html: string
+  context: unknown
+}>()
+</script>
+
+<template>
+  <div class="ssr-output">
+    <strong>HTML</strong>
+    <pre class="ssr-output-pre">{{ html }}</pre>
+    <strong>Context</strong>
+    <pre class="ssr-output-pre">{{ context }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.ssr-output {
+  background: var(--bg);
+  box-sizing: border-box;
+  color: var(--text-light);
+  height: 100%;
+  overflow: auto;
+  padding: 10px;
+  width: 100%;
+}
+
+.ssr-output-pre {
+  font-family: var(--font-code);
+  white-space: pre-wrap;
+}
+</style>

src/output/srcdoc.html

@@ -35,7 +35,8 @@
           const send_message = (payload) =>
             parent.postMessage({ ...payload }, ev.origin)
           const send_reply = (payload) => send_message({ ...payload, cmd_id })
-          const send_ok = () => send_reply({ action: 'cmd_ok' })
+          const send_ok = (response) =>
+            send_reply({ action: 'cmd_ok', args: response })
           const send_error = (message, stack) =>
             send_reply({ action: 'cmd_error', message, stack })
 
@@ -65,7 +66,11 @@
                 scriptEls.push(scriptEl)
                 await done
               }
-              send_ok()
+              if (window.__ssr_promise__) {
+                send_ok(await window.__ssr_promise__)
+              } else {
+                send_ok()
+              }
             } catch (e) {
               send_error(e.message, e.stack)
             }

src/store.ts

@@ -368,6 +368,7 @@ export function useStore(
     showOutput,
     outputMode,
     sfcOptions,
+    ssrOutput: { html: '', context: '' },
     compiler,
     loading,
     vueVersion,
@@ -429,6 +430,10 @@ export type StoreState = ToRefs<{
   showOutput: boolean
   outputMode: OutputModes
   sfcOptions: SFCOptions
+  ssrOutput: {
+    html: string
+    context: unknown
+  }
   /** `@vue/compiler-sfc` */
   compiler: typeof defaultCompiler
   /* only apply for compiler-sfc */
@@ -474,6 +479,7 @@ export type Store = Pick<
   | 'showOutput'
   | 'outputMode'
   | 'sfcOptions'
+  | 'ssrOutput'
   | 'compiler'
   | 'vueVersion'
   | 'locale'

src/types.ts

@@ -13,7 +13,7 @@ export interface EditorEmits {
 }
 export type EditorComponentType = Component<EditorProps>
 
-export type OutputModes = 'preview' | EditorMode
+export type OutputModes = 'preview' | 'ssr output' | EditorMode
 
 export const injectKeyProps: InjectionKey<
   ToRefs<Required<Props & { autoSave: boolean }>>

test/main.ts

@@ -60,6 +60,7 @@ const App = {
         editor: MonacoEditor,
         // layout: 'vertical',
         ssr: true,
+        showSsrOutput: true,
         sfcOptions: {
           script: {
             // inlineTemplate: false