make matcherTag dynamically generate from grammar

bablr-lang · Dec 16, 2024 · bd5aaee · bd5aaee
1 parent 7b31d70
commit bd5aaee
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 50 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,13 @@
+const base = require('@bablr/eslint-config-base');
+const pluginSyntaxJSX = require('@babel/plugin-syntax-jsx').default;
+
+module.exports = {
+  ...base,
+  parserOptions: {
+    ...base.parserOptions,
+    babelOptions: {
+      ...base.parserOptions.babelOptions,
+      plugins: [...base.parserOptions.babelOptions.plugins, pluginSyntaxJSX],
+    },
+  },
+};
diff --git a/eslint.config.js b/eslint.config.js
diff --git a/package.json b/package.json
@@ -14,20 +14,22 @@
     "@astrojs/solid-js": "^4.4.3",
     "@astrojs/starlight": "^0.28.2",
     "@bablr/agast-vm-helpers": "^0.5.1",
+    "@bablr/agast-helpers": "^0.5.2",
     "@bablr/boot": "^0.6.3",
-    "@bablr/helpers": "^0.20.4",
-    "@bablr/eslint-config-base": "github:bablr-lang/eslint-config-base#49f5952efed27f94ee9b94340eb1563c440bf64e",
+    "@bablr/helpers": "^0.20.5",
     "@bablr/io-vm-web": "^0.2.0",
     "@bablr/language-en-cstml": "^0.7.0",
     "astro": "^4.15.5",
     "bablr": "^0.6.1",
-    "eslint": "^8.32.0",
-    "eslint-import-resolver-enhanced-resolve": "^1.0.5",
-    "eslint-plugin-import": "^2.27.5",
     "solid-js": "^1.9.3"
   },
   "devDependencies": {
+    "@bablr/eslint-config-base": "github:bablr-lang/eslint-config-base#49f5952efed27f94ee9b94340eb1563c440bf64e",
+    "eslint": "^8.32.0",
+    "eslint-import-resolver-enhanced-resolve": "^1.0.5",
+    "eslint-plugin-import": "^2.27.5",
     "@flydotio/dockerfile": "^0.5.8",
+    "@babel/plugin-syntax-jsx": "^7.25",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1"
   }

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
@@ -1,9 +1,10 @@
 import { streamParse, Context, AgastContext } from "bablr/enhanceable";
-import { debugEnhancers } from "@bablr/helpers/enhancers";
+import { debugEnhancers, generateProductions } from "@bablr/helpers/enhancers";
 import { buildFullyQualifiedSpamMatcher } from "@bablr/helpers/builders";
 import { printPrettyCSTML } from "@bablr/helpers/stream";
-import { createSignal } from "solid-js";
+import { createSignal, For } from "solid-js";
 import { evaluateIO } from "@bablr/io-vm-web";
+import { printType } from "@bablr/agast-helpers/print";
 import { defaultLanguageInput } from "./language.js";
 import * as helpers from "@bablr/helpers";
 
@@ -26,14 +27,23 @@ export default function App() {
     )()(helpers);
   };
 
-  const [languageInput, setLanguageInput] = createSignal(null);
+  const [languageInput, setLanguageInput] = createSignal(defaultLanguageInput);
+
+  const productions = () => {
+    return generateProductions(language().grammar);
+  };
 
   let enhancers = {};
 
   enhancers = { ...debugEnhancers, enhancers };
 
-  const ctx = () =>
-    Context.from(AgastContext.create(), language(), enhancers.bablrProduction);
+  const ctx = () => {
+    return Context.from(
+      AgastContext.create(),
+      language(),
+      enhancers.bablrProduction,
+    );
+  };
 
   return (
     <>
@@ -46,22 +56,9 @@ export default function App() {
             "align-items": "center",
           }}
         >
-          <form
+          <div
             id="input-form"
             style={{ display: "flex", "flex-flow": "column" }}
-            onSubmit={(e) => {
-              e.preventDefault();
-              console.log("submitting");
-              setTags(
-                streamParse(
-                  ctx(),
-                  matcher(),
-                  input(),
-                  {},
-                  { enhancers, emitEffects: true },
-                ),
-              );
-            }}
           >
             <label for="#experiment-input" style={{ "text-align": "center" }}>
               Input
@@ -71,21 +68,42 @@ export default function App() {
               style={{ display: "inline-flex", gap: "1rem", padding: "10px" }}
             >
               <label for="#matcher-tag">Matcher: </label>
-              <input
+              <select
                 id="matcher-tag"
-                ref={(el) => setMatcherTag(el.value)}
-                value={matcherTag()}
                 onInput={(e) => {
                   setMatcherTag(e.currentTarget.value);
                 }}
               >
-                doctypetag
-              </input>
+                <For
+                  each={[
+                    ...new Set(
+                      [...productions()]
+                        .filter(
+                          ({ 0: key }) => key !== Symbol.for("@bablr/fragment"),
+                        )
+                        .map(({ 0: key }) => {
+                          let string = key;
+                          if (typeof string === "symbol") {
+                            string = `[${printType(string)}]`;
+                          }
+                          return string;
+                        }),
+                    ),
+                  ].sort()}
+                >
+                  {(key) => {
+                    return (
+                      <option selected={key === matcherTag()} value={key}>
+                        {key}
+                      </option>
+                    );
+                  }}
+                </For>
+              </select>
             </div>
             <textarea
               id="experiment-input"
               value={input()}
-              ref={(el) => setInput(el.value)}
               onInput={(e) => setInput(e.currentTarget.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey) {
@@ -94,9 +112,26 @@ export default function App() {
                   form.requestSubmit();
                 }
               }}
-            ></textarea>
-          </form>
-          <button id="form-eval" type="submit" form="input-form">
+            >
+              {input()}
+            </textarea>
+          </div>
+          <button
+            id="form-eval"
+            onClick={(e) => {
+              e.preventDefault();
+              console.log("submitting");
+              setTags(
+                streamParse(
+                  ctx(),
+                  matcher(),
+                  input(),
+                  {},
+                  { enhancers, emitEffects: true },
+                ),
+              );
+            }}
+          >
             eval
           </button>
         </div>
@@ -120,11 +155,9 @@ export default function App() {
           </label>
           <textarea
             id="experiment-grammar"
-            value={languageInput()}
-            ref={(el) => setLanguageInput(el.value)}
             onInput={(e) => setLanguageInput(e.currentTarget.value)}
           >
-            {defaultLanguageInput}
+            {languageInput()}
           </textarea>
         </div>
       </div>