fix: removing the require for the CDN, added some themes

signorecello · Nov 27, 2023 · dc413dd · dc413dd
1 parent 9fde9df
commit dc413dd
Show file tree

Hide file tree

Showing 14 changed files with 2,343 additions and 26 deletions.
diff --git a/packages/playground/declarations.d.ts b/packages/playground/declarations.d.ts
diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/playground/index.tsx b/packages/playground/index.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { NoirEditor } from "./src/index";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <NoirEditor
+    height="300px"
+    baseUrl={
+      process.env.NODE_ENV === "development"
+        ? window.location.host
+        : "https://noir-playground.netlify.app"
+    }
+  />,
+);
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -18,6 +18,7 @@
     "types": "./dist/index.d.ts",
     "scripts": {
         "build": "tsc && vite build",
+        "build:watch": "tsc && vite build -w",
         "dev": "vite",
         "preview": "vite preview",
         "publish": "yarn build && yarn npm publish --access public"

diff --git a/packages/playground/src/components/editor/NoirEditor.tsx b/packages/playground/src/components/editor/NoirEditor.tsx
@@ -12,13 +12,14 @@ import { ProofData } from "@noir-lang/types";
 import { ResultBox } from "../resultBox/result";
 import { editor } from "monaco-editor";
 
+type editorType = editor.IStandaloneCodeEditor;
+
 function NoirEditor(props: NoirEditorProps) {
   const editorRef = useRef<HTMLDivElement>(null);
 
   const { monaco, loaded } = useMonaco();
 
-  const [monacoEditor, setMonacoEditor] =
-    useState<editor.IStandaloneCodeEditor | null>(null); // To track the editor instance
+  const [monacoEditor, setMonacoEditor] = useState<editorType | null>(null); // To track the editor instance
   const [code, setCode] = useState<string | undefined>();
   const [proof, setProof] = useState<ProofData | null>(null);
 

diff --git a/packages/playground/src/hooks/loadGrammar.tsx b/packages/playground/src/hooks/loadGrammar.tsx
@@ -1,3 +1,4 @@
+import themes from "../themes/index";
 import tmLanguage from "../syntax/noir.tmLanguage.json";
 import { Registry } from "monaco-textmate";
 import { wireTmGrammars } from "monaco-editor-textmate";
@@ -6,10 +7,22 @@ import initNoirWasm from "@noir-lang/noir_wasm";
 import initNoirC from "@noir-lang/noirc_abi";
 import initACVM from "@noir-lang/acvm_js";
 import { loadWASM } from "onigasm";
-import loader from "@monaco-editor/loader";
-import lightTheme from "../syntax/lightTheme.json";
 import { useEffect, useState } from "react";
 
+import { loader } from "@monaco-editor/react";
+import * as monacoEditor from "monaco-editor";
+
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    console.log(label);
+    return new editorWorker();
+  },
+};
+
+loader.config({ monaco: monacoEditor });
+
 export const useMonaco = () => {
   const [monaco, setMonaco] = useState<typeof import("monaco-editor")>();
   const [loaded, setLoaded] = useState(false);
@@ -20,7 +33,19 @@ export const useMonaco = () => {
 
     const promArray = [];
     promArray.push(
-      loadWASM(new URL("onigasm/lib/onigasm.wasm", import.meta.url).toString()),
+      loadWASM(
+        new URL("onigasm/lib/onigasm.wasm", import.meta.url).toString(),
+      ).catch((error) => {
+        if (
+          error.message !==
+          "Onigasm#init has been called and was succesful, subsequent calls are not allowed once initialized"
+        ) {
+          // If it's not the specific error we're expecting, rethrow it
+          throw error;
+        }
+        // Otherwise, ignore the error as onigasm is already initialized
+        console.log("Onigasm already initialized, skipping re-initialization.");
+      }),
     );
     promArray.push(
       initNoirWasm(
@@ -48,6 +73,15 @@ export const useMonaco = () => {
     );
     promArray.push(
       loader.init().then((monaco) => {
+        Object.keys(themes).forEach((theme: string) => {
+          monaco.editor.defineTheme(
+            theme as keyof typeof themes,
+            themes[
+              theme as keyof typeof themes
+            ] as monacoEditor.editor.IStandaloneThemeData,
+          );
+        });
+        monaco.languages.register({ id: "noir" });
         setMonaco(monaco);
       }),
     );
@@ -57,14 +91,7 @@ export const useMonaco = () => {
   useEffect(() => {
     if (!monaco || loaded || !promises) return;
 
-    monaco.editor.defineTheme("noirLight", {
-      base: "vs",
-      inherit: true,
-      colors: lightTheme.colors,
-      rules: lightTheme.rules,
-    });
-    monaco.languages.register({ id: "noir" });
-    monaco.editor.setTheme("noirLight");
+    monaco.editor.setTheme("solarizedLight");
     const registry = new Registry({
       getGrammarDefinition: async () => {
         return {
@@ -76,10 +103,12 @@ export const useMonaco = () => {
 
     const grammars = new Map();
     grammars.set("noir", "main.nr");
+    console.log("editor loaded");
 
-    Promise.all([...promises, wireTmGrammars(monaco, registry, grammars)]).then(
-      () => setLoaded(true),
-    );
+    Promise.all([...promises]).then(() => {
+      wireTmGrammars(monaco, registry, grammars);
+      setLoaded(true);
+    });
   }, [monaco, promises]);
 
   return { monaco, loaded };

diff --git a/packages/playground/src/syntax/onigasm.wasm b/packages/playground/src/syntax/onigasm.wasm