feat(template-explorer): add vapor option

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,

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'),
+            ]),
           ]),
         ]),
       ]