feat: use esbuild to support ts for codegen

Author: Justineo

package.json

@@ -48,6 +48,7 @@
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
+    "esbuild-wasm": "^0.19.2",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^8.7.1",

pnpm-lock.yaml

@@ -5,14 +5,16 @@ import {
   watch,
   onBeforeUnmount,
   defineProps,
-  defineEmits
+  defineEmits,
+  onMounted
 } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import "highlight.js/styles/github.css";
 import hljs from "highlight.js/lib/core";
 import javascript from "highlight.js/lib/languages/javascript";
 import typescript from "highlight.js/lib/languages/typescript";
 import hljsVuePlugin from "@highlightjs/vue-plugin";
+import { initialize, transform } from "esbuild-wasm";
 
 import { getImportsFromOption } from "./utils/codegen";
 
@@ -56,37 +58,76 @@ watch(
     }
 
     setTimeout(() => {
+      if (initializing.value) {
+        return;
+      }
       source.value?.focus();
     });
   }
 );
 
+const initializing = ref(true);
 const optionCode = ref("");
-const importCode = computed(() => {
-  if (optionCode.value.trim() === "") {
-    return "/* Paste your option code first */";
-  }
+const transformedCode = ref("");
+const transformErrors = ref([]);
+
+onMounted(async () => {
+  await initialize({
+    wasmURL: "https://cdn.jsdelivr.net/npm/[email protected]/esbuild.wasm"
+  });
+
+  initializing.value = false;
+  source.value?.focus();
+});
 
-  let option = null;
+watch(optionCode, async val => {
   try {
-    option = JSON.parse(optionCode.value);
+    transformedCode.value = await transform(`(${val})`, { loader: "ts" });
+    transformErrors.value = [];
   } catch (e) {
-    try {
-      option = eval(`(${optionCode.value})`);
-    } catch (e) {
-      return `/* Unable to parse \`option\` code */
-// ${e.message}
+    transformErrors.value = e.errors;
+  }
+});
+
+function formatError(errors) {
+  return errors
+    .map(({ text, location: { lineText, line, column, length } }) => {
+      const digit = Math.ceil(Math.log10(line)) || 1;
+      lineText = line === 1 ? lineText.slice(1) : lineText;
+      lineText =
+        line === optionCode.value.split("\n").length
+          ? lineText.slice(0, -1)
+          : lineText;
+      column = line === 1 ? column - 1 : column;
+
+      return `/* ${text} */
+
+// ${line} | ${lineText}
+// ${" ".repeat(digit)} | ${" ".repeat(column)}${"~".repeat(length)}
 `;
-    }
+    })
+    .join("\n\n");
+}
+
+const importCode = computed(() => {
+  if (optionCode.value.trim() === "") {
+    return "// Paste your option code first";
+  }
+
+  if (transformErrors.value.length) {
+    return formatError(transformErrors.value);
   }
 
   try {
-    return getImportsFromOption(option, {
+    return getImportsFromOption(eval(transformedCode.value.code), {
       renderer: renderer.value,
       ...codegenOptions.value
     });
   } catch (e) {
-    return `/* Invalid ECharts option */`;
+    return `/* Invalid ECharts option */
+
+// ${e.message}
+`;
   }
 });
 
@@ -169,7 +210,12 @@ onBeforeUnmount(() => {
           ref="source"
           class="option-code"
           v-model="optionCode"
-          placeholder="Paste your option code here..."
+          :placeholder="
+            initializing
+              ? 'Initializing...'
+              : 'Paste your option code (TS/JS literal) here...'
+          "
+          :disabled="initializing"
           autofocus
         ></textarea>
         <code-highlight