Separate editors for deploy and develop

components/DeployEditor.tsx

@@ -0,0 +1,100 @@
+import React, { useRef } from "react";
+import { useSnapshot, ref } from "valtio";
+import Editor, { loader } from "@monaco-editor/react";
+import type monaco from "monaco-editor";
+import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
+import NextLink from "next/link";
+
+import Box from "./Box";
+import Container from "./Container";
+import dark from "../theme/editor/amy.json";
+import light from "../theme/editor/xcode_default.json";
+import { state } from "../state";
+
+import EditorNavigation from "./EditorNavigation";
+import Text from "./Text";
+import Link from "./Link";
+
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+
+const DeployEditor = () => {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const snap = useSnapshot(state);
+  const router = useRouter();
+  const { theme } = useTheme();
+  return (
+    <Box
+      css={{
+        flex: 1,
+        display: "flex",
+        position: "relative",
+        flexDirection: "column",
+        backgroundColor: "$mauve3",
+        width: "100%",
+      }}
+    >
+      <EditorNavigation showWat />
+      {snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+      router.isReady ? (
+        <Editor
+          className="hooks-editor"
+          // keepCurrentModel
+          defaultLanguage={snap.files?.[snap.active]?.language}
+          language={snap.files?.[snap.active]?.language}
+          path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
+          value={snap.files?.[snap.active]?.compiledWatContent || ""}
+          beforeMount={(monaco) => {
+            if (!state.editorCtx) {
+              state.editorCtx = ref(monaco.editor);
+              // @ts-expect-error
+              monaco.editor.defineTheme("dark", dark);
+              // @ts-expect-error
+              monaco.editor.defineTheme("light", light);
+            }
+          }}
+          onMount={(editor, monaco) => {
+            editorRef.current = editor;
+            editor.updateOptions({
+              glyphMargin: true,
+              readOnly: true,
+            });
+          }}
+          theme={theme === "dark" ? "dark" : "light"}
+        />
+      ) : (
+        <Container
+          css={{
+            display: "flex",
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {!snap.loading && router.isReady && (
+            <Text
+              css={{
+                mt: "-60px",
+                fontSize: "14px",
+                fontFamily: "$monospace",
+                maxWidth: "300px",
+                textAlign: "center",
+              }}
+            >
+              {`You haven't compiled any files yet, compile files on `}
+              <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+                <Link as="a">develop view</Link>
+              </NextLink>
+            </Text>
+          )}
+        </Container>
+      )}
+    </Box>
+  );
+};
+
+export default DeployEditor;

components/HooksEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
 import Editor, { loader } from "@monaco-editor/react";
 import type monaco from "monaco-editor";
@@ -17,6 +17,7 @@ import Text from "./Text";
 import { MonacoServices } from "@codingame/monaco-languageclient";
 import { createLanguageClient, createWebSocket } from "../utils/languageClient";
 import { listen } from "@codingame/monaco-jsonrpc";
+import ReconnectingWebSocket from "reconnecting-websocket";
 
 loader.config({
   paths: {
@@ -26,9 +27,15 @@ loader.config({
 
 const HooksEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const subscriptionRef = useRef<ReconnectingWebSocket | null>(null);
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
+  useEffect(() => {
+    return () => {
+      subscriptionRef?.current?.close();
+    };
+  }, []);
   return (
     <Box
       css={{
@@ -61,30 +68,39 @@ const HooksEditor = () => {
               );
             }
 
-            monaco.languages.register({
-              id: "c",
-              extensions: [".c", ".h"],
-              aliases: ["C", "c", "H", "h"],
-              mimetypes: ["text/plain"],
-            });
-            MonacoServices.install(monaco, { rootUri: "file://tmp/c" });
-
             // monaco.editor.createModel(value, 'c', monaco.Uri.parse('file:///tmp/c/file.c'))
             // create the web socket
-            const webSocket = createWebSocket(
+            if (!subscriptionRef.current) {
-              process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
+              monaco.languages.register({
-            );
+                id: "c",
-            // listen when the web socket is opened
+                extensions: [".c", ".h"],
-            listen({
+                aliases: ["C", "c", "H", "h"],
-              webSocket,
+                mimetypes: ["text/plain"],
-              onConnection: (connection) => {
+              });
-                // create and start the language client
+              MonacoServices.install(monaco);
-                const languageClient = createLanguageClient(connection);
+              const webSocket = createWebSocket(
-                const disposable = languageClient.start();
+                process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
-                connection.onClose(() => disposable.dispose());
+              );
-                connection.onError((error) => console.log(error));
+              subscriptionRef.current = webSocket;
-              },
+              // listen when the web socket is opened
-            });
+              listen({
+                webSocket: webSocket as WebSocket,
+                onConnection: (connection) => {
+                  // create and start the language client
+                  const languageClient = createLanguageClient(connection);
+                  const disposable = languageClient.start();
+                  connection.onClose(() => {
+                    try {
+                      // disposable.stop();
+                      disposable.dispose();
+                    } catch (err) {
+                      console.log("err", err);
+                    }
+                  });
+                },
+              });
+            }
+
             // // hook editor to global state
             // editor.updateOptions({
             //   minimap: {
@@ -111,7 +127,7 @@ const HooksEditor = () => {
             editor.addCommand(
               monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
               () => {
-                saveFile(editor.getValue());
+                saveFile();
               }
             );
           }}