feat: support passing in compiler-sfc options

Author: yyx990803

src/Repl.vue

@@ -2,7 +2,7 @@
 import SplitPane from './SplitPane.vue'
 import Editor from './editor/Editor.vue'
 import Output from './output/Output.vue'
-import { ReplStore } from './store'
+import { ReplStore, SFCOptions } from './store'
 import { provide, toRef } from 'vue'
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   showCompileOutput?: boolean
   showImportMap?: boolean
   clearConsole?: boolean
+  sfcOptions?: SFCOptions
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
   clearConsole: true
 })
 
+props.store.options = props.sfcOptions
+
 provide('store', props.store)
 provide('autoresize', props.autoResize)
 provide('import-map', toRef(props, 'showImportMap'))

src/store.ts

@@ -2,6 +2,11 @@ import { version, reactive, watchEffect } from 'vue'
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { compileFile } from './transform'
 import { utoa, atou } from './utils'
+import {
+  SFCScriptCompileOptions,
+  SFCAsyncStyleCompileOptions,
+  SFCTemplateCompileOptions
+} from 'vue/compiler-sfc'
 
 const defaultMainFile = 'App.vue'
 
@@ -41,9 +46,16 @@ export interface StoreState {
   vueRuntimeURL: string
 }
 
+export interface SFCOptions {
+  script?: SFCScriptCompileOptions
+  style?: SFCAsyncStyleCompileOptions
+  template?: SFCTemplateCompileOptions
+}
+
 export class ReplStore {
   state: StoreState
   compiler = defaultCompiler
+  options?: SFCOptions
   defaultVueRuntimeURL: string
   pendingCompiler: Promise<any> | null = null
 

src/transform.ts

@@ -178,6 +178,7 @@ export async function compileFile(
     }
 
     const styleResult = await store.compiler.compileStyleAsync({
+      ...store.options?.style,
       source: style.content,
       filename,
       id,
@@ -218,13 +219,15 @@ async function doCompileScript(
         ? ['typescript']
         : undefined
       const compiledScript = store.compiler.compileScript(descriptor, {
-        id,
-        refTransform: true,
         inlineTemplate: true,
+        ...store.options?.script,
+        id,
         templateOptions: {
+          ...store.options?.template,
           ssr,
           ssrCssVars: descriptor.cssVars,
           compilerOptions: {
+            ...store.options?.template?.compilerOptions,
             expressionPlugins
           }
         }
@@ -268,6 +271,7 @@ function doCompileTemplate(
   isTS: boolean
 ) {
   const templateResult = store.compiler.compileTemplate({
+    ...store.options?.template,
     source: descriptor.template!.content,
     filename: descriptor.filename,
     id,
@@ -277,6 +281,7 @@ function doCompileTemplate(
     ssrCssVars: descriptor.cssVars,
     isProd: false,
     compilerOptions: {
+      ...store.options?.template?.compilerOptions,
       bindingMetadata,
       expressionPlugins: isTS ? ['typescript'] : undefined
     }