diff --git a/packages/template-explorer/src/index.ts b/packages/template-explorer/src/index.ts index fb16a9bf4..96619b5a3 100644 --- a/packages/template-explorer/src/index.ts +++ b/packages/template-explorer/src/index.ts @@ -1,6 +1,10 @@ import type * as m from 'monaco-editor' import type { CompilerError } from '@vue/compiler-dom' -import { type CompilerOptions, compile } from '@vue/compiler-vapor' +import { compile } from '@vue/compiler-dom' +import { + type CompilerOptions, + compile as vaporCompile, +} from '@vue/compiler-vapor' // import { compile as ssrCompile } from '@vue/compiler-ssr' import { @@ -8,6 +12,7 @@ import { defaultOptions, initOptions, ssrMode, + vaporMode, } from './options' import { toRaw, watchEffect } from '@vue/runtime-dom' import { SourceMapConsumer } from 'source-map-js' @@ -75,7 +80,9 @@ window.init = () => { console.clear() try { const errors: CompilerError[] = [] - const compileFn = /* ssrMode.value ? ssrCompile : */ compile + const compileFn = /* ssrMode.value ? ssrCompile : */ ( + vaporMode.value ? vaporCompile : compile + ) as typeof vaporCompile const start = performance.now() const { code, ast, map } = compileFn(source, { ...compilerOptions, diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts index 581bffc43..6cf682adf 100644 --- a/packages/template-explorer/src/options.ts +++ b/packages/template-explorer/src/options.ts @@ -3,6 +3,7 @@ import type { CompilerOptions } from '@vue/compiler-vapor' import { BindingTypes } from '@vue/compiler-core' export const ssrMode = ref(false) +export const vaporMode = ref(true) export const defaultOptions: CompilerOptions = { mode: 'module', @@ -222,6 +223,18 @@ const App = { }), h('label', { for: 'compat' }, 'v2 compat mode'), ]), + + h('li', [ + h('input', { + type: 'checkbox', + id: 'vapor', + checked: vaporMode.value, + onChange(e: Event) { + vaporMode.value = (e.target as HTMLInputElement).checked + }, + }), + h('label', { for: 'vapor' }, 'vapor'), + ]), ]), ]), ]