workflow: add ssr mode in template explorer

packages/template-explorer/src/index.ts

@@ -1,6 +1,7 @@
 import * as m from 'monaco-editor'
-import { compile, CompilerError } from '@vue/compiler-dom'
+import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
-import { compilerOptions, initOptions } from './options'
+import { compile as ssrCompile } from '@vue/compiler-ssr'
+import { compilerOptions, initOptions, ssrMode } from './options'
 import { watch } from '@vue/runtime-dom'
 import { SourceMapConsumer } from 'source-map'
 
@@ -12,14 +13,21 @@ declare global {
   }
 }
 
+interface PersistedState {
+  src: string
+  ssr: boolean
+  options: CompilerOptions
+}
+
 window.init = () => {
   const monaco = window.monaco
-  const persistedState = JSON.parse(
+  const persistedState: PersistedState = JSON.parse(
     decodeURIComponent(window.location.hash.slice(1)) ||
       localStorage.getItem('state') ||
       `{}`
   )
 
+  ssrMode.value = persistedState.ssr
   Object.assign(compilerOptions, persistedState.options)
 
   let lastSuccessfulCode: string = `/* See console for error */`
@@ -28,7 +36,8 @@ window.init = () => {
     console.clear()
     try {
       const errors: CompilerError[] = []
-      const { code, ast, map } = compile(source, {
+      const compileFn = ssrMode.value ? ssrCompile : compile
+      const { code, ast, map } = compileFn(source, {
         filename: 'template.vue',
         ...compilerOptions,
         sourceMap: true,
@@ -69,8 +78,9 @@ window.init = () => {
     // every time we re-compile, persist current state
     const state = JSON.stringify({
       src,
+      ssr: ssrMode.value,
       options: compilerOptions
-    })
+    } as PersistedState)
     localStorage.setItem('state', state)
     window.location.hash = encodeURIComponent(state)
     const res = compileCode(src)

packages/template-explorer/src/options.ts

@@ -1,6 +1,8 @@
-import { h, reactive, createApp } from '@vue/runtime-dom'
+import { h, reactive, createApp, ref } from 'vue'
 import { CompilerOptions } from '@vue/compiler-dom'
 
+export const ssrMode = ref(false)
+
 export const compilerOptions: CompilerOptions = reactive({
   mode: 'module',
   prefixIdentifiers: false,
@@ -12,8 +14,11 @@ export const compilerOptions: CompilerOptions = reactive({
 const App = {
   setup() {
     return () => {
+      const isSSR = ssrMode.value
+      const isModule = compilerOptions.mode === 'module'
       const usePrefix =
         compilerOptions.prefixIdentifiers || compilerOptions.mode === 'module'
+
       return [
         h('h1', `Vue 3 Template Explorer`),
         h(
@@ -24,6 +29,7 @@ const App = {
           },
           `@${__COMMIT__}`
         ),
+
         h('div', { id: 'options' }, [
           // mode selection
           h('span', { class: 'options-group' }, [
@@ -32,7 +38,7 @@ const App = {
               type: 'radio',
               id: 'mode-module',
               name: 'mode',
-              checked: compilerOptions.mode === 'module',
+              checked: isModule,
               onChange() {
                 compilerOptions.mode = 'module'
               }
@@ -42,7 +48,7 @@ const App = {
               type: 'radio',
               id: 'mode-function',
               name: 'mode',
-              checked: compilerOptions.mode === 'function',
+              checked: !isModule,
               onChange() {
                 compilerOptions.mode = 'function'
               }
@@ -50,16 +56,27 @@ const App = {
             h('label', { for: 'mode-function' }, 'function')
           ]),
 
+          // SSR
+          h('input', {
+            type: 'checkbox',
+            id: 'ssr',
+            name: 'ssr',
+            checked: ssrMode.value,
+            onChange(e: Event) {
+              ssrMode.value = (e.target as HTMLInputElement).checked
+            }
+          }),
+          h('label', { for: 'ssr' }, 'SSR'),
+
           // toggle prefixIdentifiers
           h('input', {
             type: 'checkbox',
             id: 'prefix',
-            disabled: compilerOptions.mode === 'module',
+            disabled: isModule || isSSR,
-            checked: usePrefix,
+            checked: usePrefix || isSSR,
             onChange(e: Event) {
               compilerOptions.prefixIdentifiers =
-                (<HTMLInputElement>e.target).checked ||
+                (e.target as HTMLInputElement).checked || isModule
-                compilerOptions.mode === 'module'
             }
           }),
           h('label', { for: 'prefix' }, 'prefixIdentifiers'),
@@ -68,9 +85,10 @@ const App = {
           h('input', {
             type: 'checkbox',
             id: 'hoist',
-            checked: compilerOptions.hoistStatic,
+            checked: compilerOptions.hoistStatic && !isSSR,
+            disabled: isSSR,
             onChange(e: Event) {
-              compilerOptions.hoistStatic = (<HTMLInputElement>e.target).checked
+              compilerOptions.hoistStatic = (e.target as HTMLInputElement).checked
             }
           }),
           h('label', { for: 'hoist' }, 'hoistStatic'),
@@ -79,12 +97,10 @@ const App = {
           h('input', {
             type: 'checkbox',
             id: 'cache',
-            checked: usePrefix && compilerOptions.cacheHandlers,
+            checked: usePrefix && compilerOptions.cacheHandlers && !isSSR,
-            disabled: !usePrefix,
+            disabled: !usePrefix || isSSR,
             onChange(e: Event) {
-              compilerOptions.cacheHandlers = (<HTMLInputElement>(
+              compilerOptions.cacheHandlers = (e.target as HTMLInputElement).checked
-                e.target
-              )).checked
             }
           }),
           h('label', { for: 'cache' }, 'cacheHandlers'),
@@ -93,13 +109,11 @@ const App = {
           h('input', {
             type: 'checkbox',
             id: 'scope-id',
-            disabled: compilerOptions.mode !== 'module',
+            disabled: !isModule,
-            checked:
+            checked: isModule && compilerOptions.scopeId,
-              compilerOptions.mode === 'module' && compilerOptions.scopeId,
             onChange(e: Event) {
               compilerOptions.scopeId =
-                compilerOptions.mode === 'module' &&
+                isModule && (e.target as HTMLInputElement).checked
-                (<HTMLInputElement>e.target).checked
                   ? 'scope-id'
                   : null
             }