chore: output component

Author: zhangmo8

biome.json

@@ -24,7 +24,8 @@
     "ignore": [
       "node_modules/**",
       "dist/**",
-      ".vscode/**"
+      ".vscode/**",
+      "src/template"
     ]
   },
   "formatter": {

src/Repl.tsx

@@ -1,25 +1,20 @@
-import CodeMirror from "./components/CodeMirror"
-import Preview from "./components/Preview"
+import type { FC } from "react"
+
+import EditorContainer from "./components/Editor"
+import Output from "./components/Output"
 import SplitPane from "./components/SplitPanel"
 
-import Hello from "./template/hello?raw"
+import { ReplProvider } from "./ReplProvider"
+import type { ReplState } from "./store"
 
 import "./repl.css"
-import { useState } from "react"
-
-export const ReplReact = () => {
-  const [code, setCode] = useState(Hello)
-
-  const handleCodeChange = (newCode: string) => {
-    setCode(newCode)
-  }
 
+export const Repl: FC<ReplState> = (props) => {
   return (
-    <main className="react-repl">
-      <SplitPane
-        left={<CodeMirror value={code} onChange={handleCodeChange} />}
-        right={<Preview value={code} />}
-      />
-    </main>
+    <ReplProvider config={props}>
+      <main className="react-repl">
+        <SplitPane left={<EditorContainer />} right={<Output />} />
+      </main>
+    </ReplProvider>
   )
 }

src/ReplProvider.tsx

@@ -0,0 +1,21 @@
+import { type FC, type PropsWithChildren, useState } from "react"
+import { DEFAULT_REPL_STATE, ReplContext, type ReplState } from "./store"
+
+interface Props extends PropsWithChildren {
+  config?: ReplState
+}
+
+export const ReplProvider: FC<Props> = ({ children, config = {} }) => {
+  const value: ReplState = {
+    ...DEFAULT_REPL_STATE,
+    ...config,
+  }
+
+  const [state, setState] = useState<ReplState>(value)
+
+  return (
+    <ReplContext.Provider value={{ state, setState }}>
+      {children}
+    </ReplContext.Provider>
+  )
+}

src/components/CodeMirror/autocompletion.ts renamed to src/components/Editor/CodeMirror/autocompletion.ts

@@ -1,4 +1,4 @@
-import { autocompletion } from "@codemirror/autocomplete"
+import { type CompletionSource, autocompletion } from "@codemirror/autocomplete"
 import { javascript } from "@codemirror/lang-javascript"
 import { EditorView, basicSetup } from "codemirror"
 import { type FC, useLayoutEffect, useRef } from "react"
@@ -8,8 +8,12 @@ import { vitesse } from "./theme"
 
 import "./styles.css"
 
+import type { Extension } from "@codemirror/state"
+
 interface Props {
-  value: string
+  code: string
+  autoComplete?: CompletionSource[]
+  cmExtensions?: Extension[]
   onChange?: (code: string) => void
 }
 
@@ -24,15 +28,16 @@ const CodeMirror: FC<Props> = (props) => {
       jsx: true,
     }),
     autocompletion({
-      override: [replJSXCompletion],
+      override: [replJSXCompletion, ...(props.autoComplete || [])],
     }),
+    ...(props.cmExtensions || []),
   ]
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useLayoutEffect(() => {
     if (containerRef.current && !editorRef.current) {
       editorRef.current = new EditorView({
-        doc: props.value,
+        doc: props.code,
         extensions,
         parent: containerRef.current,
         dispatch(tr) {

src/components/CodeMirror/index.tsx renamed to src/components/Editor/CodeMirror/index.tsx

@@ -1,5 +1,21 @@
+import { ReplContext } from "@/store"
+import { useContext } from "react"
+
+import CodeMirror from "./CodeMirror"
+
 const EditorContainer = () => {
-  return <div>EditorContainer</div>
+  const { state, setState } = useContext(ReplContext)
+  const { code = "" } = state
+
+  const onChange = (code: string) => {
+    setState({ ...state, code })
+  }
+
+  return (
+    <div>
+      <CodeMirror code={code} onChange={onChange} />
+    </div>
+  )
 }
 
 export default EditorContainer

src/components/CodeMirror/styles.css renamed to src/components/Editor/CodeMirror/styles.css

@@ -7,10 +7,11 @@ import logger from "@/utils/logger"
 import basicTemplate from "./basic.html?raw"
 
 interface Props {
-  value: string
+  className?: string
+  code: string
 }
 
-const Preview: React.FC<Props> = ({ value }) => {
+const Preview: React.FC<Props> = ({ code, className }) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
   // function reload() {
@@ -24,7 +25,7 @@ const Preview: React.FC<Props> = ({ value }) => {
     }
 
     try {
-      const { transformedCode } = await transformCode(value)
+      const { transformedCode } = await transformCode(code)
       const iframeDoc = iframeRef.current.contentDocument
       if (!iframeDoc) {
         logger.warn(
@@ -66,10 +67,10 @@ const Preview: React.FC<Props> = ({ value }) => {
     executeCode()
 
     return cleanup
-  }, [value])
+  }, [code])
 
   return (
-    <div className="react-repl-iframe-container">
+    <div className={`react-repl-iframe-container ${className}`}>
       <iframe
         ref={iframeRef}
         title="preview"