feat: Pick away from Logger and SWC

zhangmo8 · zhangmo8 · commit 1601148334c9 · 2024-12-13T10:28:24.000+08:00
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
     "@lezer/highlight": "^1.2.1",
+    "@swc/wasm-typescript-esm": "^1.10.1",
     "@swc/wasm-web": "^1.10.1",
     "@types/codemirror": "^5.60.15",
     "@types/node": "^22.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Preview/index.tsx b/src/components/Preview/index.tsx
@@ -1,140 +1,34 @@
-import initSwc, { transformSync } from "@swc/wasm-web"
 import type React from "react"
 import { useCallback, useEffect, useRef } from "react"
 
 import { useImportMap } from "@/hooks/impormap"
+import { transformCode } from "@/hooks/swc"
+import logger from "@/utils/logger"
 import basicTemplate from "./basic.html?raw"
 
 interface Props {
   value: string
 }
 
 const Preview: React.FC<Props> = ({ value }) => {
-  const hasSwcInstance = useRef<boolean>(false)
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
   // function reload() {
   //   iframeRef.current?.contentWindow?.location.reload()
   // }
 
-  async function swcMount() {
-    try {
-      // 使用更可靠的方式初始化 SWC
-      await initSwc({
-        async instantiateWasm(info, receiveInstance) {
-          try {
-            const response = await fetch(
-              "/node_modules/@swc/wasm-web/wasm_bg.wasm",
-            )
-            const wasmBytes = await response.arrayBuffer()
-            return WebAssembly.instantiate(wasmBytes, info).then((instance) => {
-              receiveInstance(instance)
-              return instance
-            })
-          } catch (e) {
-            console.error("Failed to instantiate WebAssembly:", e)
-            throw e
-          }
-        },
-      })
-      hasSwcInstance.current = true
-      executeCode()
-    } catch (error) {
-      console.error("React-Repl: Error in load swc:", error)
-      if (iframeRef.current?.contentDocument) {
-        iframeRef.current.contentDocument.body.innerHTML = `<pre style="color: red;">Failed to initialize SWC: ${error}</pre>`
-      }
-    }
-  }
-
-  function executeCode() {
+  async function executeCode() {
     if (!iframeRef.current) {
-      console.warn("React-Repl: iframe element is not yet available")
-      return
-    }
-
-    if (!hasSwcInstance.current) {
-      console.warn("React-Repl: swc instance is not yet available")
+      logger.warn("iframe element is not yet available")
       return
     }
 
     try {
-      const transformed = transformSync(value, {
-        jsc: {
-          parser: {
-            syntax: "ecmascript",
-            jsx: true,
-          },
-          target: "es2016",
-          loose: false,
-          minify: {
-            compress: {
-              arguments: false,
-              arrows: true,
-              booleans: true,
-              booleans_as_integers: false,
-              collapse_vars: true,
-              comparisons: true,
-              computed_props: true,
-              conditionals: true,
-              dead_code: true,
-              directives: true,
-              drop_console: false,
-              drop_debugger: true,
-              evaluate: true,
-              expression: false,
-              hoist_funs: false,
-              hoist_props: true,
-              hoist_vars: false,
-              if_return: true,
-              join_vars: true,
-              keep_classnames: false,
-              keep_fargs: true,
-              keep_fnames: false,
-              keep_infinity: false,
-              loops: true,
-              negate_iife: true,
-              properties: true,
-              reduce_funcs: false,
-              reduce_vars: false,
-              side_effects: true,
-              switches: true,
-              typeofs: true,
-              unsafe: false,
-              unsafe_arrows: false,
-              unsafe_comps: false,
-              unsafe_Function: false,
-              unsafe_math: false,
-              unsafe_symbols: false,
-              unsafe_methods: false,
-              unsafe_proto: false,
-              unsafe_regexp: false,
-              unsafe_undefined: false,
-              unused: true,
-              const_to_let: true,
-              pristine_globals: true,
-            },
-            mangle: {
-              toplevel: false,
-              keep_classnames: false,
-              keep_fnames: false,
-              keep_private_props: false,
-              ie8: false,
-              safari10: false,
-            },
-          },
-        },
-        module: {
-          type: "es6",
-        },
-        minify: true,
-        isModule: true,
-      }).code
-
+      const { transformedCode } = await transformCode(value)
       const iframeDoc = iframeRef.current.contentDocument
       if (!iframeDoc) {
-        console.warn(
-          "React-Repl: iframe contentDocument is not available - this might happen if the iframe is not loaded or due to cross-origin restrictions",
+        logger.warn(
+          "iframe contentDocument is not available - this might happen if the iframe is not loaded or due to cross-origin restrictions",
         )
         return
       }
@@ -146,15 +40,13 @@ const Preview: React.FC<Props> = ({ value }) => {
         .replace(
           "<!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->",
           `<div id="root"></div>
-          <script type="module">${transformed}</script>`,
+          <script type="module">${transformedCode}</script>`,
         )
 
-      console.log("htmlContent", htmlContent)
-
       iframeDoc.write(htmlContent)
       iframeDoc.close()
     } catch (error) {
-      console.error("React-Repl: Error in executeCode:", error)
+      logger.error("Error in executeCode:", error)
       const iframeDoc = iframeRef.current?.contentDocument
       if (iframeDoc) {
         iframeDoc.body.innerHTML = `<pre style="color: red;">${error}</pre>`
@@ -169,13 +61,6 @@ const Preview: React.FC<Props> = ({ value }) => {
     }
   }, [])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    if (!hasSwcInstance.current) {
-      swcMount()
-    }
-  }, [])
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     executeCode()
diff --git a/src/hooks/swc.ts b/src/hooks/swc.ts
@@ -0,0 +1,154 @@
+import logger from "@/utils/logger"
+import * as swc from "@swc/wasm-web"
+import type { Options } from "@swc/wasm-web"
+
+const SWC_COMPILER_CONFIG: Options = {
+  jsc: {
+    parser: {
+      syntax: "ecmascript",
+      jsx: true,
+    },
+    target: "es2016",
+    loose: false,
+    minify: {
+      compress: false,
+      mangle: false,
+    },
+  },
+  module: {
+    type: "es6",
+  },
+  minify: false,
+  isModule: true,
+}
+
+const SWC_PREVIEW_CONFIG: Options = {
+  jsc: {
+    parser: {
+      syntax: "ecmascript",
+      jsx: true,
+    },
+    target: "es5",
+    loose: false,
+    minify: {
+      compress: {
+        arguments: false,
+        arrows: true,
+        booleans: true,
+        booleans_as_integers: false,
+        collapse_vars: true,
+        comparisons: true,
+        computed_props: true,
+        conditionals: true,
+        dead_code: true,
+        directives: true,
+        drop_console: false,
+        drop_debugger: true,
+        evaluate: true,
+        expression: false,
+        hoist_funs: false,
+        hoist_props: true,
+        hoist_vars: false,
+        if_return: true,
+        join_vars: true,
+        keep_classnames: false,
+        keep_fargs: true,
+        keep_fnames: false,
+        keep_infinity: false,
+        loops: true,
+        negate_iife: true,
+        properties: true,
+        reduce_funcs: false,
+        reduce_vars: false,
+        side_effects: true,
+        switches: true,
+        typeofs: true,
+        unsafe: false,
+        unsafe_arrows: false,
+        unsafe_comps: false,
+        unsafe_math: false,
+        unsafe_symbols: false,
+        unsafe_methods: false,
+        unsafe_proto: false,
+        unsafe_regexp: false,
+        unsafe_undefined: false,
+        unused: true,
+      },
+      mangle: {
+        toplevel: false,
+        keep_classnames: false,
+        keep_fnames: false,
+        keep_private_props: false,
+        ie8: false,
+        safari10: false,
+      },
+    },
+  },
+  module: {
+    type: "es6",
+  },
+  minify: true,
+  isModule: true,
+}
+
+let swcInstance: typeof swc | null = null
+
+export async function initSwc() {
+  if (!swcInstance) {
+    try {
+      if (!swcInstance) {
+        await swc.default()
+        swcInstance = swc
+        logger.log("SWC initialized successfully")
+      }
+    } catch (error) {
+      logger.error("Failed to initialize SWC:", error)
+      throw error
+    }
+  }
+  return swcInstance
+}
+
+export async function transformCode(
+  code: string,
+): Promise<{ transformedCode: string; compiledCode: string }> {
+  try {
+    const instance = await initSwc()
+    if (!instance) {
+      throw new Error("SWC instance not initialized")
+    }
+
+    const res = await Promise.all([
+      instance.transform(code, SWC_PREVIEW_CONFIG),
+      instance.transform(code, SWC_COMPILER_CONFIG),
+    ])
+
+    return {
+      transformedCode: res[0].code,
+      compiledCode: res[1].code,
+    }
+  } catch (error) {
+    logger.error("Transform error:", error)
+    throw error
+  }
+}
+
+export async function parse(code: string) {
+  try {
+    const instance = await initSwc()
+    if (!instance) {
+      throw new Error("SWC instance not initialized")
+    }
+
+    const AST = instance.parseSync(code, {
+      syntax: "ecmascript",
+      jsx: true,
+      target: "es2016",
+    })
+
+    return AST
+  } catch (error) {
+    logger.error("Parse error:", error)
+    throw error
+  }
+}
diff --git a/src/template/hello.tsx b/src/template/hello.tsx
@@ -1,10 +1,19 @@
-import React from "react"
+import React, { useState } from "react"
 import { createRoot } from "react-dom/client";
 
 export default function App() {
+  const [count, setCount] = useState(0)
+
+  const onClick = () => {
+    setCount(count + 1)
+  }
   return (
     <div>
       <h1>Hello World</h1>
+      <div style={{display: 'flex', gap: '10px'}}>
+        <span>Count: {count}</span>
+        <button type="button" onClick={onClick}> + 1</button>
+      </div>
     </div>
   )
 }
diff --git a/src/utils/logger.ts b/src/utils/logger.ts
