feat: compile panel & ast panel

Author: zhangmo8

src/components/Editor/CodeMirror/index.tsx

@@ -1,20 +1,20 @@
 import { type CompletionSource, autocompletion } from "@codemirror/autocomplete"
 import { javascript } from "@codemirror/lang-javascript"
+import { EditorState, type Extension } from "@codemirror/state"
 import { EditorView, basicSetup } from "codemirror"
-import { type FC, useLayoutEffect, useRef } from "react"
+import { type FC, useEffect, useLayoutEffect, useRef } from "react"
 
 import { replJSXCompletion } from "./autocompletion"
 import { vitesse } from "./theme"
 
 import "./styles.css"
 
-import type { Extension } from "@codemirror/state"
-
 interface Props {
   code: string
   autoComplete?: CompletionSource[]
   cmExtensions?: Extension[]
   onChange?: (code: string) => void
+  readonly?: boolean
 }
 
 const CodeMirror: FC<Props> = (props) => {
@@ -30,6 +30,8 @@ const CodeMirror: FC<Props> = (props) => {
     autocompletion({
       override: [replJSXCompletion, ...(props.autoComplete || [])],
     }),
+    EditorView.editable.of(!props.readonly || true),
+    EditorState.readOnly.of(props.readonly || false),
     ...(props.cmExtensions || []),
   ]
 
@@ -50,6 +52,19 @@ const CodeMirror: FC<Props> = (props) => {
     }
   }, [])
 
+  useEffect(() => {
+    const cur = editorRef.current?.state.doc.toString() || ""
+    if (props.code !== cur) {
+      editorRef.current?.dispatch({
+        changes: {
+          from: 0,
+          to: cur.length,
+          insert: props.code,
+        },
+      })
+    }
+  }, [props.code])
+
   return <div className="editor-container" ref={containerRef} />
 }
 

src/components/Output/Preview/index.tsx

@@ -2,7 +2,6 @@ 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"
 
@@ -25,7 +24,6 @@ const Preview: React.FC<Props> = ({ code, className }) => {
     }
 
     try {
-      const { transformedCode } = await transformCode(code)
       const iframeDoc = iframeRef.current.contentDocument
       if (!iframeDoc) {
         logger.warn(
@@ -41,7 +39,7 @@ const Preview: React.FC<Props> = ({ code, className }) => {
         .replace(
           "<!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->",
           `<div id="root"></div>
-          <script type="module">${transformedCode}</script>`,
+          <script type="module">${code}</script>`,
         )
 
       iframeDoc.write(htmlContent)

src/components/Output/index.tsx

@@ -1,7 +1,10 @@
-import { useContext, useMemo, useState } from "react"
-import Preview from "./Preview"
+import { useCallback, useContext, useEffect, useMemo, useState } from "react"
 
+import CodeMirror from "@/components/Editor/CodeMirror"
+import { type OutputCode, transformCode } from "@/hooks/swc"
 import { ReplContext } from "@/store"
+
+import Preview from "./Preview"
 import "./styles.css"
 
 const outputTabs = [
@@ -12,10 +15,16 @@ const outputTabs = [
 
 const Output = () => {
   const { state } = useContext(ReplContext)
-  const { defaultCode = "", code = "", showAST, showCompile } = state
+  const { code = "", showAST, showCompile } = state
   const [activeTab, setActiveTab] =
     useState<(typeof outputTabs)[number]["value"]>("preview")
 
+  const [outputCode, setOutputCode] = useState<OutputCode>({
+    transformedCode: "",
+    compiledCode: "",
+    ast: "",
+  })
+
   const tabs = useMemo(() => {
     return outputTabs.filter((tab) => {
       if (!showAST && tab.value === "ast") return false
@@ -24,6 +33,16 @@ const Output = () => {
     })
   }, [showAST, showCompile])
 
+  const transformOutput = useCallback(async (code: string) => {
+    const _code = await transformCode(code)
+    setOutputCode(_code)
+  }, [])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    transformOutput(code)
+  }, [code])
+
   return (
     <div className="repl-output-container">
       <div className="repl-output-tabs">
@@ -40,18 +59,20 @@ const Output = () => {
       </div>
       <div className="repl-output-content">
         <Preview
-          code={code || defaultCode}
+          code={outputCode?.transformedCode}
           className={`repl-output-panel ${activeTab === "preview" && "repl-output-panel-active"}`}
         />
         <div
-          className={`repl-output-panel ${activeTab === "compile" && "repl-output-panel-active"}`}
-        >
-          Compile output coming soon
-        </div>
-        <div
-          className={`repl-output-panel ${activeTab === "ast" && "repl-output-panel-active"}`}
+          className={`repl-output-panel ${activeTab !== "preview" && "repl-output-panel-active"}`}
         >
-          AST output coming soon
+          <CodeMirror
+            readonly
+            code={
+              activeTab === "compile"
+                ? outputCode?.compiledCode
+                : outputCode?.ast
+            }
+          />
         </div>
       </div>
     </div>

src/hooks/swc.ts

@@ -93,6 +93,12 @@ const SWC_PREVIEW_CONFIG: Options = {
 
 let swcInstance: typeof swc | null = null
 
+export interface OutputCode {
+  transformedCode: string
+  compiledCode: string
+  ast: string
+}
+
 export async function initSwc() {
   if (!swcInstance) {
     try {
@@ -109,23 +115,24 @@ export async function initSwc() {
   return swcInstance
 }
 
-export async function transformCode(
-  code: string,
-): Promise<{ transformedCode: string; compiledCode: string }> {
+export async function transformCode(code: string): Promise<OutputCode> {
   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),
-    ])
+    const transformedCode = instance.transformSync(
+      code,
+      SWC_PREVIEW_CONFIG,
+    ).code
+    const compiledCode = instance.transformSync(code, SWC_COMPILER_CONFIG).code
+    const ast = JSON.stringify(await parse(code), null, 2)
 
     return {
-      transformedCode: res[0].code,
-      compiledCode: res[1].code,
+      transformedCode,
+      compiledCode,
+      ast,
     }
   } catch (error) {
     logger.error("Transform error:", error)