JS-Encoder · Longgererer · May 29, 2024 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@typescript/vfs": "^1.5.0",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.27",
     "autoprefixer": "^10.4.19",
     "codemirror": "^6.0.1",
     "coffeescript": "^2.7.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/utils/editor/compiler/index.ts b/src/utils/editor/compiler/index.ts
@@ -3,6 +3,7 @@ import { BABEL_URL, COFFEESCRIPT_URL, LESS_JS_URL, SASS_JS_URL, STYLUS_JS_URL, T
 import { ModuleKind } from "typescript"
 import { OriginLang, Prep } from "@type/prep"
 import hash from "hash-sum"
+import { switchImport2Destruct } from "@utils/editor/utils/compile"
 
 interface ICompileResultBase {
   /** 是否编译成功 */
@@ -95,8 +96,7 @@ export const compileJSX = async (code: string) => {
 
 // eslint-disable-next-line max-lines-per-function
 export const compileVue = async (code: string): Promise<ICompileCodeMapResult> => {
-  const vue = await import("@vue/compiler-sfc")
-  const { parse, compileScript, rewriteDefault } = vue
+  const { parse, compileStyle, compileScript, rewriteDefault } = await import("@vue/compiler-sfc")
   const descriptor = parse(code).descriptor
   const id = hash(code)
 
@@ -114,7 +114,7 @@ export const compileVue = async (code: string): Promise<ICompileCodeMapResult> =
         message: cssCompileResult.message,
       }
     }
-    styleCodes.push(vue.compileStyle({
+    styleCodes.push(compileStyle({
       scoped,
       source: cssCompileResult.result,
       id: `data-v-${hash(code)}`,
@@ -125,7 +125,15 @@ export const compileVue = async (code: string): Promise<ICompileCodeMapResult> =
   // 解析编译script
   let compiledScript
   try {
-    compiledScript = compileScript(descriptor, { id })
+    compiledScript = compileScript(descriptor, {
+      id,
+      inlineTemplate: true,
+      templateOptions: {
+        compilerOptions: {
+          expressionPlugins: ["typescript", "jsx"],
+        },
+      },
+    })
   } catch (error: any) {
     return {
       success: false,
@@ -136,12 +144,16 @@ export const compileVue = async (code: string): Promise<ICompileCodeMapResult> =
   const mainName = "_sfc_main"
   let scriptCode = rewriteDefault(compiledScript.content, mainName)
   // 取出通过import引入的变量，改为从Vue中取出
-  const importReg = /import [^<]* from ['|"]vue['|"]/
-  const importList = scriptCode.match(importReg)
-  const importStr = importList?.[0] || ""
-  const importContent = importStr.match(/{.+}/)
-  scriptCode = scriptCode.replace(importReg, `const ${importContent} = Vue`)
-
+  const importReg = /(import[\s\S]*?)(['|"]vue['|"]){1}/g
+  scriptCode = scriptCode.replaceAll(importReg, (...args) => {
+    const { modules } = switchImport2Destruct(args[0])
+    const importStr = modules.reduce((acc, { imported, local }, index) => {
+      acc += index ? ", " : ""
+      acc += imported === local ? imported : `${imported}: ${local}`
+      return acc
+    }, "")
+    return `const { ${importStr} } = Vue`
+  })
   // 获取template
   const templateCode = descriptor.template?.content.trim() || ""
 
@@ -156,7 +168,6 @@ export const compileVue = async (code: string): Promise<ICompileCodeMapResult> =
       }).mount("#app")
     </script>
   `.trim()
-
   return {
     success: true,
     result: {

diff --git a/src/utils/editor/themes/dark.ts b/src/utils/editor/themes/dark.ts
@@ -201,7 +201,7 @@ const theme = createTheme({
     },
     {
       tag: tags.special(tags.string),
-      color: "#F11",
+      color: "#c3e88d",
     },
     {
       tag: tags.escape,

diff --git a/src/utils/editor/utils/compile.ts b/src/utils/editor/utils/compile.ts
@@ -0,0 +1,50 @@
+import estraverse from "estraverse"
+import * as espree from "espree"
+
+interface IImportInfo {
+  modules: Array<{ imported: string, local: string }>
+  sourceName: string
+}
+
+/**
+ * 将import语法转化为对象解构赋值形式
+ * example：
+ * import { ref, Fragment as _Fragment } from "vue"
+ * to:
+ * { sourceName: "vue", modules: [{ imported: "ref", local: "ref" }, { imported: "Fragment", local: "_Fragment" }] }
+ */
+export const switchImport2Destruct = (code: string): IImportInfo => {
+  const result: IImportInfo = {
+    modules: [],
+    sourceName: "",
+  }
+
+  const AST: any = espree.parse(code, {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    comment: true,
+    tokens: true,
+    range: true,
+  })
+
+  estraverse.traverse(AST, {
+    enter(node: any) {
+      switch (node.type) {
+        case "ImportDeclaration": {
+          result.sourceName = node.source.value
+          break
+        }
+        case "ImportSpecifier": {
+          result.modules.push({
+            imported: node.imported.name,
+            local: node.local.name,
+          })
+          break
+        }
+        default: {}
+      }
+    },
+  })
+
+  return result
+}
diff --git a/src/utils/editor/utils/loop.ts b/src/utils/editor/utils/loop.ts
@@ -34,7 +34,7 @@ export const processLoop = async (code: string) => {
   // 将代码解析成AST，如果代码语法解析错误，直接返回源代码
   try {
     AST = espree.parse(codeCpy, {
-      ecmaVersion: 2022,
+      ecmaVersion: "latest",
       sourceType: "module",
       comment: true,
       tokens: true,