refactor: naming

add: get code by snippet_url
rzk-lang · Oct 3, 2023 · 9bfbb52 · 9bfbb52
1 parent 60f6a19
commit 9bfbb52
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 36 deletions.
diff --git a/rzk-playground/src/App.tsx b/rzk-playground/src/App.tsx
@@ -1,14 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
-import Editor from './editor/Editor';
+import { Editor } from './editor/Editor';
 import { Resizable } from 're-resizable';
 import * as rzk from './rzk';
 import { KeyBindProvider, ShortcutType } from 'react-keybinds';
 
-let typecheckedOnStart = false
+declare let window: Window & typeof globalThis & {
+  rzkTypecheck_: (input: { input: string }) => void
+};
 
-declare let window: Window & typeof globalThis & { rzkTypecheck_: (input: {input: string}) => void };
-
-function App() {
+function Root({ typecheckedOnStartState }:
+  {
+    typecheckedOnStartState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+  }) {
+  const [typecheckedOnStart, setTypecheckedOnStart] = typecheckedOnStartState
   const [windowHeight, setWindowHeight] = useState(window.innerHeight)
 
   useEffect(() => {
@@ -24,6 +28,7 @@ function App() {
   }, []);
 
   const [text, setText] = useState("")
+
   const [output, setOutput] = useState("Starting...");
 
   const typecheck = useCallback(() => {
@@ -35,25 +40,38 @@ function App() {
     }
   }, [text])
 
+  const [rzkTypeCheckAvailable, setRzkTypeCheckAvailable] = useState(false)
+
+  useEffect(() => {
+    function checkRzkTypecheckAvailable() {
+      if (!window.rzkTypecheck_) {
+        window.setTimeout(checkRzkTypecheckAvailable, 100)
+      } else {
+        setRzkTypeCheckAvailable(true)
+      }
+    }
+
+    checkRzkTypecheckAvailable()
+  }, [text])
+
+  // Typecheck when function and text are ready
   useEffect(() => {
     function checkFlag() {
-      if ((!((window).rzkTypecheck_) || (text === "")) && !typecheckedOnStart) {
-        console.warn("something bad")
-        console.warn((window).rzkTypecheck_)
-        window.setTimeout(checkFlag, 100); /* this checks the flag every 100 milliseconds*/
+      if (!typecheckedOnStart && (!rzkTypeCheckAvailable || text === '')) {
+        console.warn("Can't typecheck!")
       } else if (!typecheckedOnStart) {
         typecheck()
-        typecheckedOnStart = true
+        setTypecheckedOnStart(true)
       }
     }
 
     if (!typecheckedOnStart) {
       checkFlag();
     }
-  }, [typecheck, text])
+  }, [typecheck, rzkTypeCheckAvailable, text, setTypecheckedOnStart, typecheckedOnStart])
 
   const [needTypecheck, setNeedTypecheck] = useState(false)
-  
+
   useEffect(() => {
     if (needTypecheck) {
       typecheck()
@@ -77,16 +95,27 @@ function App() {
     ]
     ;
 
+
+  // height of the output panel
   const [outputPanelHeight, setOutputHeight] = useState(windowHeight * 30 / 100)
+
+  // visible height of the editor
   const [editorHeight, setEditorHeight] = useState(windowHeight * 70 / 100)
 
+  const
+    minHeight = 100,
+    maxHeight = windowHeight - 100,
+    width = '100vw',
+    height = '100vh',
+    backgroundColor = '#202028'
+
   return (
     <main>
-      <div style={{ height: '100vh', width: '100vw', backgroundColor: '#202028' }}>
+      <div style={{ height, width, backgroundColor }}>
         <KeyBindProvider shortcuts={KEYBINDINGS}></KeyBindProvider>
-        <div style={{ height: '100vh' }}>
+        <div style={{ height }}>
           <Editor
-            setText={setText}
+            textState={[text, setText]}
             setNeedTypecheck={setNeedTypecheck}
             editorHeight={editorHeight}
           />
@@ -100,27 +129,32 @@ function App() {
           }}
         >
           <Resizable
-            size={{ width: '100vw', height: outputPanelHeight }}
-            minHeight={100}
-            maxHeight={windowHeight - 100}
+            size={{ width, height: outputPanelHeight }}
+            minHeight={minHeight}
+            maxHeight={maxHeight}
             enable={{ top: true }}
-            onResizeStop={(_e, _direction, _ref, d) => {
-              setOutputHeight(outputPanelHeight + d.height)
+            onResizeStop={(_event, _direction, _elementRef, delta) => {
+              setOutputHeight(outputPanelHeight + delta.height)
             }}
-            onResize={(_e, _direction, _ref, d) => {
-              setEditorHeight(window.innerHeight - (outputPanelHeight + d.height))
+            onResize={(_event, _direction, _elementRef, delta) => {
+              setEditorHeight(window.innerHeight - (outputPanelHeight + delta.height))
             }}
             style={{ padding: '20px' }}
           >
             <button id='btnTypecheck' onClick={typecheck}>
               TYPECHECK (SHIFT + ENTER)
             </button>
-            <pre id='message' style={{ fontSize: 16 }}>{output}</pre>
+            <pre style={{ fontSize: 16 }}>{output}</pre>
           </Resizable>
         </div>
       </div>
     </main>
   )
 }
 
+
+function App() {
+  return <Root typecheckedOnStartState={useState(false)} />
+}
+
 export default App
diff --git a/rzk-playground/src/editor/Editor.tsx b/rzk-playground/src/editor/Editor.tsx
@@ -7,30 +7,51 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import { centerCursor } from './cursor-height';
 import { language } from './parser';
 
-export default function Editor({
-    setText,
+async function setInitialText(setText: Dispatch<SetStateAction<string>>) {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has("snippet")) {
+        setText(params.get("snippet")!);
+    } else if (params.has("code")) {
+        setText(params.get("code")!);
+    } else if (params.has("snippet_url")) {
+        const url = params.get("snippet_url")!;
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                Accept: 'text/plain;charset=UTF-8'
+            }
+        })
+
+        if (!response.ok) {
+            console.error(`Could not get code from ${url}`)
+        }
+
+        setText(await response.text())
+    }
+    else {
+        setText(example)
+    }
+}
+
+export function Editor({
+    textState,
     setNeedTypecheck,
     editorHeight
 }: {
-    setText: Dispatch<SetStateAction<string>>,
+    textState: [string, Dispatch<SetStateAction<string>>],
     setNeedTypecheck: React.Dispatch<React.SetStateAction<boolean>>,
     editorHeight: number
 }) {
     const [existsSelection, setExistsSelection] = useState(false)
-    const params = new URLSearchParams(window.location.search);
+    const [text, setText] = textState
 
-    let snippet = example
-    if (params.has("snippet")) {
-        snippet = params.get("snippet")!;
-    } else if (params.has("code")) {
-        snippet = params.get("code")!;
-    }
     return <CodeMirror
-        value={snippet}
+        value={text}
         height={`100vh`}
         width={`100vw`}
-        onCreateEditor={(view) => {
-            setText(snippet)
+        onCreateEditor={async (view) => {
+            await setInitialText(setText)
+
             view.dispatch({ effects: EditorView.scrollIntoView(0) })
         }}
         onUpdate={(update) => {