theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workflow: add ssr mode in template explorer

Browse Source
This commit is contained in:
Evan You 2020-02-04 15:59:37 -05:00
parent 98e3e03fd1
commit e71781dcab
2 changed files with 48 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/template-explorer/src/index.ts
View File

@ -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)

52
packages/template-explorer/src/options.ts
View File

@ -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 =
(<HTMLInputElement>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 = (<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,
disabled: !usePrefix,
checked: usePrefix && compilerOptions.cacheHandlers && !isSSR,
disabled: !usePrefix || isSSR,
onChange(e: Event) {
compilerOptions.cacheHandlers = (<HTMLInputElement>(
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' &&
(<HTMLInputElement>e.target).checked
isModule && (e.target as HTMLInputElement).checked
? 'scope-id'
: null
}