From e71781dcabc8bb222bfdc5f2a626264bc3061e94 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 4 Feb 2020 15:59:37 -0500 Subject: [PATCH] workflow: add ssr mode in template explorer --- packages/template-explorer/src/index.ts | 20 ++++++--- packages/template-explorer/src/options.ts | 52 ++++++++++++++--------- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/packages/template-explorer/src/index.ts b/packages/template-explorer/src/index.ts index 02b4d2fe..6fc650fb 100644 --- a/packages/template-explorer/src/index.ts +++ b/packages/template-explorer/src/index.ts @@ -1,6 +1,7 @@ import * as m from 'monaco-editor' -import { compile, CompilerError } from '@vue/compiler-dom' -import { compilerOptions, initOptions } from './options' +import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom' +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) diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts index 867903d7..9dd21c80 100644 --- a/packages/template-explorer/src/options.ts +++ b/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', - checked: usePrefix, + disabled: isModule || isSSR, + checked: usePrefix || isSSR, onChange(e: Event) { compilerOptions.prefixIdentifiers = - (e.target).checked || - compilerOptions.mode === 'module' + (e.target as HTMLInputElement).checked || isModule } }), 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 = (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, - disabled: !usePrefix, + checked: usePrefix && compilerOptions.cacheHandlers && !isSSR, + disabled: !usePrefix || isSSR, onChange(e: Event) { - compilerOptions.cacheHandlers = (( - e.target - )).checked + compilerOptions.cacheHandlers = (e.target as HTMLInputElement).checked } }), h('label', { for: 'cache' }, 'cacheHandlers'), @@ -93,13 +109,11 @@ const App = { h('input', { type: 'checkbox', id: 'scope-id', - disabled: compilerOptions.mode !== 'module', - checked: - compilerOptions.mode === 'module' && compilerOptions.scopeId, + disabled: !isModule, + checked: isModule && compilerOptions.scopeId, onChange(e: Event) { compilerOptions.scopeId = - compilerOptions.mode === 'module' && - (e.target).checked + isModule && (e.target as HTMLInputElement).checked ? 'scope-id' : null }