switch to preact

2024-11-05 20:57:30 -08:00
parent ae5a79e151
commit 0a6807831c
4 changed files with 202 additions and 56 deletions
--- a/playground/package-lock.json
+++ b/playground/package-lock.json
@@ -8,7 +8,9 @@
      "name": "playground",
      "version": "0.0.0",
      "dependencies": {
-        "monaco-editor": "^0.52.0"
+        "@preact/signals": "^1.3.0",
+        "monaco-editor": "^0.52.0",
+        "preact": "^10.24.3"
      },
      "devDependencies": {
        "typescript": "~5.6.2",
@@ -406,6 +408,32 @@
        "node": ">=12"
      }
    },
+    "node_modules/@preact/signals": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.0.tgz",
+      "integrity": "sha512-EOMeg42SlLS72dhoq6Vjq08havnLseWmPQ8A0YsgIAqMgWgx7V1a39+Pxo6i7SY5NwJtH4849JogFq3M67AzWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@preact/signals-core": "^1.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact": "10.x"
+      }
+    },
+    "node_modules/@preact/signals-core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
+      "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.24.3",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz",
@@ -780,6 +808,16 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/preact": {
+      "version": "10.24.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
+      "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.24.3",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.3.tgz",
--- a/playground/package.json
+++ b/playground/package.json
@@ -13,6 +13,8 @@
    "vite": "^5.4.10"
  },
  "dependencies": {
-    "monaco-editor": "^0.52.0"
+    "@preact/signals": "^1.3.0",
+    "monaco-editor": "^0.52.0",
+    "preact": "^10.24.3"
  }
 }
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,28 +1,62 @@
+import { effect, signal } from "@preact/signals";
 import { newtConfig, newtTokens } from "./monarch.ts";
 import * as monaco from "monaco-editor";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { h, render } from "preact";

 monaco.languages.register({ id: "newt" });
 monaco.languages.setMonarchTokensProvider("newt", newtTokens);
 monaco.languages.setLanguageConfiguration("newt", newtConfig);

-const newtWorker = new Worker("worker.js")//new URL("worker.js", import.meta.url))
+const newtWorker = new Worker("worker.js"); //new URL("worker.js", import.meta.url))
+
+function run(src: string) {
+  newtWorker.postMessage({ src });
+}
+
+newtWorker.onmessage = (ev) => {
+  console.log("worker sent", ev.data);
+  state.output.value = ev.data.output;
+  state.javascript.value = ev.data.javascript;
+};

 self.MonacoEnvironment = {
-  getWorkerUrl(moduleId, label) {
+  getWorkerUrl(moduleId, _label) {
    console.log("Get worker", moduleId);
    return moduleId;
  },
 };

+const state = {
+  output: signal(""),
+  javascript: signal(""),
+  editor: signal<monaco.editor.IStandaloneCodeEditor | null>(null),
+};
+
 // I keep pressing this.
-document.addEventListener('keydown', (ev) => {
-  if (ev.metaKey && ev.code == 'KeyS') ev.preventDefault();
-})
+document.addEventListener("keydown", (ev) => {
+  if (ev.metaKey && ev.code == "KeyS") ev.preventDefault();
+});

 let value = localStorage.code || "module Main\n";

-let container = document.getElementById("editor")!;
-let result = document.getElementById("result")!;
+// let result = document.getElementById("result")!;
+
+// the editor might handle this itself with the right prodding.
+effect(() => {
+  let text = state.output.value;
+  let editor = state.editor.value;
+  if (editor) processOutput(editor, text);
+});
+
+interface EditorProps {
+  initialValue: string;
+}
+
+function Editor({ initialValue }: EditorProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const container = ref.current!;
    const editor = monaco.editor.create(container, {
      value,
      language: "newt",
@@ -30,64 +64,7 @@ const editor = monaco.editor.create(container, {
      automaticLayout: true,
      minimap: { enabled: false },
    });
-
-let timeout: number | undefined;
-
-function run(src: string) {
-  newtWorker.postMessage({src})
-}
-
-newtWorker.onmessage = (ev) => {
-  console.log('worker sent', ev.data)
-  let {output, javascript} = ev.data
-  processOutput(output);
-}
-
-// Adapted from the vscode extension, but types are slightly different
-// and positions are 1-based.
-const processOutput = (output: string) => {
-  result.innerText = output
-
-  let model = editor.getModel()!
-  let markers: monaco.editor.IMarkerData[] = []
-  let lines = output.split('\n')
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const match = line.match(/(INFO|ERROR) at \((\d+), (\d+)\):\s*(.*)/);
-    if (match) {
-      let [_full, kind, line, col, message] = match;
-      let lineNumber = +line+1
-      let column = +col+1;
-      let start = {column, lineNumber};
-      // we don't have the full range, so grab the surrounding word
-      let endColumn = column + 1
-      let word = model.getWordAtPosition(start)
-      if (word) endColumn = word.endColumn
-
-      // heuristics to grab the entire message:
-      // anything indented
-      // Context:, or Goal: are part of PRINTME
-      // unexpected / expecting appear in parse errors
-      while (
-        lines[i + 1]?.match(/^(  )/)
-      ) {
-        message += "\n" + lines[++i];
-      }
-      const severity = kind === 'ERROR' ? monaco.MarkerSeverity.Error : monaco.MarkerSeverity.Info
-
-      markers.push({
-        severity,
-        message,
-        startLineNumber: lineNumber,
-        endLineNumber: lineNumber,
-        startColumn: column,
-        endColumn,
-      })
-    }
-  }
-  console.log('setMarkers', markers)
-  monaco.editor.setModelMarkers(model, 'newt', markers)
-}
+    state.editor.value = editor;

    editor.onDidChangeModelContent((ev) => {
      console.log("mc", ev);
@@ -96,5 +73,112 @@ editor.onDidChangeModelContent((ev) => {
      timeout = setTimeout(() => run(value), 1000);
      localStorage.code = value;
    });
+    run(initialValue);
+  }, []);

-run(value);
+  return h("div", { id: "editor", ref });
+}
+
+// for extra credit, we could have a read-only monaco
+function JavaScript() {
+  const text = state.javascript.value;
+  return h("div", {id:'javascript'}, text);
+}
+
+function Result() {
+  const text = state.output.value;
+  return h("div", { id: "result" }, text);
+}
+
+const RESULTS = "Output"
+const JAVASCRIPT = "JS"
+
+function Tabs() {
+  const [selected, setSelected] = useState(RESULTS);
+
+  const Tab = (label: string) => {
+    let onClick = () => setSelected(label);
+    let className = "tab";
+    if (label == selected) className += " selected";
+    return h("div", { className, onClick }, label);
+  };
+
+  let body;
+  switch (selected) {
+    case RESULTS:
+      body = h(Result, {});
+      break;
+    case JAVASCRIPT:
+      body = h(JavaScript, {});
+      break;
+    default:
+      body = h("div", {});
+  }
+
+  return h(
+    "div",
+    { className: "tabPanel" },
+    h("div", { className: "tabBar" }, Tab(RESULTS), Tab(JAVASCRIPT)),
+    h("div", { className: "tabBody" }, body)
+  );
+}
+
+function App() {
+  return h(
+    "div",
+    { className: "wrapper" },
+    h(Editor, { initialValue: value }),
+    h(Tabs, {})
+  );
+}
+
+render(h(App, {}), document.getElementById("app")!);
+
+let timeout: number | undefined;
+
+// Adapted from the vscode extension, but types are slightly different
+// and positions are 1-based.
+const processOutput = (
+  editor: monaco.editor.IStandaloneCodeEditor,
+  output: string
+) => {
+  let model = editor.getModel()!;
+  let markers: monaco.editor.IMarkerData[] = [];
+  let lines = output.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const match = line.match(/(INFO|ERROR) at \((\d+), (\d+)\):\s*(.*)/);
+    if (match) {
+      let [_full, kind, line, col, message] = match;
+      let lineNumber = +line + 1;
+      let column = +col + 1;
+      let start = { column, lineNumber };
+      // we don't have the full range, so grab the surrounding word
+      let endColumn = column + 1;
+      let word = model.getWordAtPosition(start);
+      if (word) endColumn = word.endColumn;
+
+      // heuristics to grab the entire message:
+      // anything indented
+      // Context:, or Goal: are part of PRINTME
+      // unexpected / expecting appear in parse errors
+      while (lines[i + 1]?.match(/^(  )/)) {
+        message += "\n" + lines[++i];
+      }
+      const severity =
+        kind === "ERROR"
+          ? monaco.MarkerSeverity.Error
+          : monaco.MarkerSeverity.Info;
+
+      markers.push({
+        severity,
+        message,
+        startLineNumber: lineNumber,
+        endLineNumber: lineNumber,
+        startColumn: column,
+        endColumn,
+      });
+    }
+  }
+  monaco.editor.setModelMarkers(model, "newt", markers);
+};
--- a/playground/style.css
+++ b/playground/style.css
@@ -12,10 +12,32 @@
 }
 .wrapper > div {
  flex: 1 1;
+  width: 100px;
 }
-#result {
+.tabPanel {
+  display: flex;
+  flex-direction: column;
+}
+.tabBar {
+  display:flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 10px 0;
+  border-bottom: solid 1px black;
+}
+.tab {
+  padding: 4px;
+  border: solid 1px transparent;
+}
+.tab.selected {
+  border: solid 1px black;
+  border-bottom: 0px
+}
+
+#result, #javascript {
  overflow: auto;
  font-family: 'Comic Code', monospace;
  font-size: 12px;
  white-space: pre;
+  padding: 5px;
 }