workflow(sfc-playground): support selecting versions

packages/sfc-playground/src/sfcCompiler.ts

@@ -1,22 +1,40 @@
 import { store, File } from './store'
-import {
-  parse,
-  compileTemplate,
-  compileStyleAsync,
-  compileScript,
-  rewriteDefault,
-  SFCDescriptor,
-  BindingMetadata
-} from '@vue/compiler-sfc'
+import { SFCDescriptor, BindingMetadata } from '@vue/compiler-sfc'
+import * as defaultCompiler from '@vue/compiler-sfc'
 
 export const MAIN_FILE = 'App.vue'
 export const COMP_IDENTIFIER = `__sfc__`
 
+/**
+ * The default SFC compiler we are using is built from each commit
+ * but we may swap it out with a version fetched from CDNs
+ */
+let SFCCompiler: typeof defaultCompiler = defaultCompiler
+
 // @ts-ignore
-export const SANDBOX_VUE_URL = import.meta.env.PROD
+const defaultVueUrl = import.meta.env.PROD
   ? '/vue.runtime.esm-browser.js' // to be copied on build
   : '/src/vue-dev-proxy'
 
+export let SANDBOX_VUE_URL = defaultVueUrl
+
+export async function setVersion(version: string) {
+  const compilerUrl = `https://unpkg.com/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
+  const runtimeUrl = `https://cdn.skypack.dev/@vue/runtime-dom@${version}`
+  const [compiler] = await Promise.all([
+    import(/* @vite-ignore */ compilerUrl),
+    import(/* @vite-ignore */ runtimeUrl)
+  ])
+  SFCCompiler = compiler
+  SANDBOX_VUE_URL = runtimeUrl
+  console.info(`Now using Vue version: ${version}`)
+}
+
+export function resetVersion() {
+  SFCCompiler = defaultCompiler
+  SANDBOX_VUE_URL = defaultVueUrl
+}
+
 export async function compileFile({ filename, code, compiled }: File) {
   if (!code.trim()) {
     store.errors = []
@@ -30,7 +48,10 @@ export async function compileFile({ filename, code, compiled }: File) {
   }
 
   const id = await hashId(filename)
-  const { errors, descriptor } = parse(code, { filename, sourceMap: true })
+  const { errors, descriptor } = SFCCompiler.parse(code, {
+    filename,
+    sourceMap: true
+  })
   if (errors.length) {
     store.errors = errors
     return
@@ -121,7 +142,7 @@ export async function compileFile({ filename, code, compiled }: File) {
       return
     }
 
-    const styleResult = await compileStyleAsync({
+    const styleResult = await SFCCompiler.compileStyleAsync({
       source: style.content,
       filename,
       id,
@@ -156,7 +177,7 @@ function doCompileScript(
 ): [string, BindingMetadata | undefined] | undefined {
   if (descriptor.script || descriptor.scriptSetup) {
     try {
-      const compiledScript = compileScript(descriptor, {
+      const compiledScript = SFCCompiler.compileScript(descriptor, {
         id,
         refSugar: true,
         inlineTemplate: true,
@@ -173,7 +194,9 @@ function doCompileScript(
           2
         )} */`
       }
-      code += `\n` + rewriteDefault(compiledScript.content, COMP_IDENTIFIER)
+      code +=
+        `\n` +
+        SFCCompiler.rewriteDefault(compiledScript.content, COMP_IDENTIFIER)
       return [code, compiledScript.bindings]
     } catch (e) {
       store.errors = [e]
@@ -190,7 +213,7 @@ function doCompileTemplate(
   bindingMetadata: BindingMetadata | undefined,
   ssr: boolean
 ) {
-  const templateResult = compileTemplate({
+  const templateResult = SFCCompiler.compileTemplate({
     source: descriptor.template!.content,
     filename: descriptor.filename,
     id,