Consistent column width. Auto parsing. Date default.

src/content.config.ts

@@ -9,6 +9,7 @@ export const examples = defineCollection({
         title: z.string(),
         grammar: z.string(),
         input: z.string(),
+        highlighted: z.boolean().optional()
     })
 });
 

src/examples/date.json

@@ -1,5 +1,6 @@
 {
   "title": "Date",
   "grammar": "date  = year '-' month '-' day\nyear  = [1-2][0-9]*3\nmonth = '0'[1-9] / '1'[0-2]\nday   = [0-3][0-9]\n\n# A simple example to play around with.\n# More examples in menu at top.\n\n# This Dingus is only a toy web-page.\n# To try your own pPEG grammars use\n# the peg-play.mjs command line tool,\n# that lets you work on your own files.",
-  "input": "2021-02-03"
+  "input": "2021-02-03",
+  "highlighted": true
 }

src/pages/index.astro

@@ -3,33 +3,49 @@ import Layout from '../layouts/Layout.astro';
 
 import {getCollection} from "astro:content"
 
-const examples = (await getCollection("examples")).map(c => c.data)
+const collection = await getCollection("examples")
+const examples = collection.map(c => c.data)
+const initialExample = examples.find(e => e.highlighted)?.title
 ---
 
 <script>
     import {ppeg} from "ppegjs"
 
     window.load = () => {
-        const selected = document.getElementById<HTMLSelectElement>('examples').value
-        const option = document.getElementById(`option-${selected}`)
+        const selected = document.querySelector<HTMLSelectElement>('#examples')!.value
+        const option = document.querySelector<HTMLOptionElement>(`#option-${selected}`)!
         const grammar = option.dataset.grammar
         const input = option.dataset.input
-        document.getElementById('grammar').textContent = grammar;
-        document.getElementById('input').textContent = input;
+        document.querySelector<HTMLDivElement>('#grammar')!.textContent = grammar ?? "";
+        document.querySelector<HTMLDivElement>('#input')!.textContent = input ?? "";
         window.run()
     }
 
     window.run = () => {
-        const grammar = document.getElementById('grammar')
+        const grammar = document.querySelector<HTMLDivElement>('#grammar')!
         const parser = ppeg.compile(grammar.textContent)
-        const input = document.getElementById('input')
-        const parse = parser.parse(input.innerText) //textContent),
-        const output = document.getElementById('output');
-        const showJson = document.getElementById<HTMLCheckboxElement>('json').checked
+        const input = document.querySelector<HTMLDivElement>('#input')!
+        const parse = parser.parse(input.innerText)
+        const output = document.querySelector<HTMLDivElement>('#output')!;
+        const showJson = document.querySelector<HTMLInputElement>('#json')!.checked
         if (parse.ok) output.textContent = parse.show_ptree(showJson);
         else output.textContent = parse.show_err();
     }
 
+    function debounce(fn: Function, delay: number = 300) {
+        let timeoutId: ReturnType<typeof setTimeout>;
+
+        return function (this: any, ...args: any[]) {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => fn.apply(this, args), delay);
+        };
+    }
+
+
+    window.autoparse = debounce(window.run)
+
     window.load()
 </script>
 
@@ -42,7 +58,7 @@ const examples = (await getCollection("examples")).map(c => c.data)
                 "grammar input  output"
                 "footer  footer footer";
             grid-template-rows: auto 1fr auto;
-            grid-template-columns: 3fr 2fr 2fr;
+            grid-template-columns: 1fr 1fr 1fr;
             width: 100%;
             height: 100vh;
             padding: 1em;
@@ -131,18 +147,17 @@ const examples = (await getCollection("examples")).map(c => c.data)
                 <select name="examples" id="examples" onchange="load()">
                     {examples.map(({title, grammar, input}) =>
                             <option id={`option-${title}`} value={title} data-grammar={grammar}
-                                    data-input={input}>{title}</option>)}
+                                    data-input={input} selected={title == initialExample}>{title}</option>)}
                 </select>
                 </span>
         </div>
-        <div id='grammar' contenteditable='true'></div>
+        <div id='grammar' contenteditable='true' oninput="autoparse()"></div>
     </div>
     <div class='input'>
         <div class='header'>
             <label for="input">Input</label>
-            <button onclick="run()">Parse..</button>
         </div>
-        <div id='input' contenteditable='true'></div>
+        <div id='input' contenteditable='true' oninput="autoparse()"></div>
     </div>
     <div class='output'>
         <div class='header'>Parse Tree