kaleidawave · kaleidawave · Aug 29, 2024 · Jun 24, 2024 · Aug 29, 2024 · Aug 29, 2024
diff --git a/src/playground/assets/index.css b/src/playground/assets/index.css
@@ -42,6 +42,20 @@ hr {
     margin: 40px 0;
 }
 
+button {
+    margin: 20px 0;
+    padding: 6px 20px;
+    font-family: inherit;
+    background: none;
+    color: inherit;
+    border: 3px solid white;
+    border-radius: 6px;
+}
+
+button:hover {
+    cursor: pointer;
+}
+
 @media (max-width: 700px) {
     header {
         flex-direction: column;

diff --git a/src/playground/index.html b/src/playground/index.html
@@ -5,21 +5,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ezno Playground</title>
+    <!-- Vite doesn't rewrite them :( https://github.com/vitejs/vite/issues/7362 -->
+    <!-- Also maybe they should be in the parent directory? -->
+    <meta property="twitter:image" content="/ezno/playground/assets/banner.png">
+    <meta property="og:image" content="/ezno/playground/assets/banner.png">
+
     <link rel="stylesheet" href="assets/index.css">
-    <meta property="twitter:image" content="assets/banner.png">
-    <meta property="og:image" content="assets/banner.png">
     <link rel="icon" href="assets/ezno.svg">
 </head>
 
 <body>
     <header>
         <img src="assets/ezno.svg" alt="EZNO" height="40px">
         <p>
-            Playground for the Ezno type checker. See what Ezno supports <a
-               href="https://github.com/kaleidawave/ezno/blob/main/checker/specification/specification.md">in its
-                specification</a>.
-            This is built using the <a href="https://www.npmjs.com/package/ezno">WASM JS build</a>, the native CLI tool
-            can be <a href="https://github.com/kaleidawave/ezno/releases">downloaded from the latest release</a>.
+            Playground for the Ezno type checker.
+            <a href="https://kaleidawave.github.io/posts/the-quest-continues/#there-is-a-new-web-based-playground">See
+                the announcement post for examples</a>
+            and see <a
+               href="https://github.com/kaleidawave/ezno/blob/main/checker/specification/specification.md">specification.md</a>
+            for what Ezno supports.
+            This playground uses the <a href="https://www.npmjs.com/package/ezno">WASM JS build of Ezno</a>. The native
+            CLI tool can be <a href="https://github.com/kaleidawave/ezno/releases">downloaded from the latest
+                release</a>.
         </p>
     </header>
     <main>
@@ -30,14 +37,20 @@ <h3>Diagnostics</h3>
             </ol>
         </div>
         <button id="share">Share</button>
+        <details>
+            <summary>More:</summary>
+            <div id="version"></div>
+            <div id="time"></div>
+        </details>
     </main>
     <footer>
         <hr>
         <p>
             If you encounter any issues, please document them <a href="https://github.com/kaleidawave/ezno/">on the GH
                 issue tracker</a>. If diagnostics don't update then a crash has occurred (check browser logs for
             reason). Editor built with <a
-               href="https://codemirror.net/">codemirror</a>
+               href="https://codemirror.net/">codemirror</a>. Saving/sharing system <a
+               href="https://www.val.town/v/kaleidawave/savedNamedPlaygrounds">on val.town</a>.
         </p>
     </footer>
     <script type="module" src="./main.js"></script>

diff --git a/src/playground/main.js b/src/playground/main.js
@@ -1,17 +1,18 @@
 import { EditorView, keymap, hoverTooltip } from "@codemirror/view";
 import { EditorState, Text } from "@codemirror/state";
 import { linter } from "@codemirror/lint";
-import { defaultKeymap, indentWithTab } from "@codemirror/commands";
+import { defaultKeymap, indentWithTab, toggleLineComment } from "@codemirror/commands";
 import { parser as jsParser } from "@lezer/javascript";
 import { tags } from "@lezer/highlight";
 import { HighlightStyle, syntaxHighlighting, LanguageSupport, LRLanguage } from "@codemirror/language";
 import { init as init_ezno, check_with_options, get_version } from "ezno";
-import lz from "lz-string";
 
 const diagnosticsEntry = document.querySelector(".diagnostics");
 const editorParent = document.querySelector("#editor");
 const shareButton = document.querySelector("#share");
 
+const timeOutput = document.querySelector("#time");
+
 const myHighlightStyle = HighlightStyle.define([
   { tag: tags.keyword, color: '#C792EA' },
   { tag: tags.comment, color: '#8b949e' },
@@ -38,26 +39,26 @@ const theme = EditorView.theme({
 
 const STORE = "https://kaleidawave-savednamedplaygrounds.web.val.run"
 
-
 let text = "const x: 2 = 3;";
+let initialText = text;
 
 const { searchParams } = new URL(location);
-const code = searchParams.get("code");
 const id = searchParams.get("id");
+const raw = searchParams.get("raw-example");
 
-if (code) {
-  text = lz.decompressFromEncodedURIComponent(code);
-  setup()
-} else if (id) {
+if (id) {
   fetch(STORE + `?id=${id}`, { method: "GET" }).then(res => res.json()).then((result) => {
     if (result.content) {
-      text = result.content
+      initialText = text = result.content
       setup()
     } else if (result.error) {
       alert(`Error getting code for id '${result.error}'`)
     }
   })
 } else {
+  if (raw) {
+    initialText = raw;
+  }
   setup()
 }
 
@@ -72,7 +73,10 @@ async function setup() {
     return linter((args) => {
       text = args.state.doc.text.join("\n");
       try {
+        const start = performance.now();
         currentState = check_with_options(ROOT_PATH, (_) => text, { lsp_mode: true, store_type_mappings: true });
+        const elapsed = performance.now() - start;
+        timeOutput.innerText = `Parsed & checked in ${Math.trunc(elapsed)}ms`;
 
         diagnosticsEntry.innerHTML = "";
         for (const diagnostic of currentState.diagnostics) {
@@ -94,15 +98,15 @@ async function setup() {
   }
 
   function getHover() {
-    const cursor = hoverTooltip((view, pos, side) => {
+    const cursor = hoverTooltip((_view, pos, _side) => {
       if (currentState) {
         const type = currentState.get_type_at_position(ROOT_PATH, pos);
         if (typeof type !== "undefined") {
           return {
             pos,
             end: pos,
             above: true,
-            create(view) {
+            create(_view) {
               let dom = document.createElement("div")
               dom.textContent = type
               // TODO!
@@ -137,13 +141,13 @@ async function setup() {
     return [cursor, cursorTooltipBaseTheme]
   }
 
-  let editor = new EditorView({
+  const _editor = new EditorView({
     state: EditorState.create({
       doc: Text.of([text]),
       extensions: [
-        keymap.of([...defaultKeymap, indentWithTab]),
+        keymap.of([...defaultKeymap, indentWithTab,]), //toggleLineComment
         EditorState.tabSize.of(4),
-        new LanguageSupport(LRLanguage.define({ parser: jsParser.configure({ dialect: "ts" }) }), [getLinter()]),
+        new LanguageSupport(LRLanguage.define({ parser: jsParser.configure({ dialect: "ts" }), languageData: { commentTokens: { line: "// " } } }), [getLinter()]),
         syntaxHighlighting(myHighlightStyle),
         getHover(),
         theme,
@@ -154,29 +158,31 @@ async function setup() {
 
   console.log("Editor ready")
   console.log(`Running ezno@${get_version()}`)
+  document.querySelector("#version").innerText = `Running ezno@${get_version()}`;
 
   shareButton.addEventListener("click", () => {
     const url = new URL(location);
-    const text = editor.state.doc.toString();
-    const lzCompressCode = lz.compressToEncodedURIComponent(text);
-    // TODO arbitrary length
-    console.debug(`lzCompressCode.length=${lzCompressCode.length}`);
-    if (lzCompressCode.length < 120) {
-      url.searchParams.set("code", lzCompressCode);
-      history.pushState({}, "", url);
-    } else {
+
+    if (text !== initialText) {
+      // This + `if` statement prevents spam
+      initialText = text;
+
       fetch(STORE, {
         method: "POST",
         body: JSON.stringify({ content: text })
       }).then(res => res.json()).then((result) => {
         if (result.id) {
           url.searchParams.set("id", result.id);
           history.pushState({}, "", url);
+          navigator.clipboard.writeText(url.toString()).then(() => {
+            alert("Share URL copied to clipboard")
+          });
         } else if (result.error) {
           alert(`Error sharing code '${result.error}'`)
         }
       })
+    } else {
+      alert("Sharing existing code")
     }
-    // TODO also copy to clipboard and popup
   })
 }
diff --git a/src/playground/package-lock.json b/src/playground/package-lock.json
diff --git a/src/playground/package.json b/src/playground/package.json
@@ -20,7 +20,6 @@
     "@codemirror/view": "^6.23.0",
     "@lezer/highlight": "^1.2.0",
     "@lezer/javascript": "^1.4.13",
-    "ezno": "=0.0.21",
-    "lz-string": "^1.5.0"
+    "ezno": "^0.0.22"
   }
-}
+}