Add persistence to online sandbox editor

babel.config.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = { presets: ["@babel/preset-env"] };

docs/_includes/base-layout.html

@@ -16,6 +16,11 @@
         <link rel="stylesheet" href="{{ stylesheet | url }}" />
       {% endfor %}
     {% endif %}
+    {% if modules %}
+      {% for module in modules %}
+        <script type="module" src="{{ module | url }}"></script>
+      {% endfor %}
+    {% endif %}
     {% if scripts %}
       {% for script in scripts %}
         <script src="{{ script | url }}"></script>

docs/css/content.css

@@ -92,7 +92,7 @@
   text-align: center;
   color: white; background-color: black;
 }
-#content h2.suggestion .step-title { margin-left: 2.5em; }
+#content h2.suggestion .step-title { margin-left: 1rem; }
 
 #content textarea.code {
   width: 100%; height: 20em;

docs/css/layout-online.css

@@ -58,3 +58,17 @@
 }
 
 #content { display: none; position: absolute; top: 4em; left: 0; right: 0; bottom: 0; }
+
+.suggestion {
+  display: flex;
+  flex-direction: row;
+}
+.suggestion .step-title {
+  flex: 1 1 auto;
+}
+.suggestion #copy-link {
+  justify-self: flex-end;
+}
+#copy-link {
+  margin-right: 4px;
+}

docs/js/online.js

@@ -1,3 +1,5 @@
+import {getSandboxInitialState, getEncodedSandboxUrl, saveSandboxStateToStorage} from './sandbox.js'
+
 $(document).ready(function() {
   var KB      = 1024;
   var MS_IN_S = 1000;
@@ -143,6 +145,14 @@ $(document).ready(function() {
       var result = false;
     }
 
+    // Now save the grammar to local storage so it will be persisted.
+    // Note: we are persisting regardless of whether there is an error
+    // or not, since saving invalid grammars is also potentially useful.
+    saveSandboxStateToStorage({
+      grammar: editor.getValue(),
+      input: input.getValue(),
+    });
+
     doLayout();
     return result;
   }
@@ -181,6 +191,14 @@ $(document).ready(function() {
       var result = false;
     }
 
+    // Now save the grammar to local storage so it will be persisted.
+    // Note: we are persisting regardless of whether there is an error
+    // or not, since saving invalid parse results is also potentially useful.
+    saveSandboxStateToStorage({
+      grammar: editor.getValue(),
+      input: input.getValue(),
+    });
+
     doLayout();
     return result;
   }
@@ -229,12 +247,30 @@ $(document).ready(function() {
 
     });
 
+  $("#copy-link").click(function () {
+    const grammar = editor.getValue();
+    const fragment = getEncodedSandboxUrl({
+      grammar,
+      input: input.getValue(),
+    });
+    // set the fragment for the current page without navigating away
+    window.history.replaceState(null, null, fragment);
+    // copy the link to the clipboard
+    if ('clipboard' in navigator) {
+      navigator.clipboard.writeText(window.location.href);
+    }
+  })
+
   doLayout();
   $(window).resize(doLayout);
 
   $("#loader").hide();
   $("#content").show();
 
+  const sandboxState = getSandboxInitialState(new URL(location.href));
+  editor.setValue(sandboxState.grammar);
+  input.setValue(sandboxState.input);
+
   $("#grammar, #parser-var, #option-cache").removeAttr("disabled");
 
   rebuildGrammar();

docs/js/sandbox.js

@@ -0,0 +1,113 @@
+import LZString from "../vendor/lz-string/lz-string.js";
+
+/**
+ * @typedef {Object} SandboxState
+ * @property {string} grammar
+ * @property {string} input
+ */
+
+// The key used to store the sandbox in local/session storage
+export const stateStorageKey = `sandbox-code`;
+
+/**
+ * @param {SandboxState} state
+ */
+export const saveSandboxStateToStorage = (state) => {
+  localStorage.setItem(stateStorageKey, JSON.stringify(state));
+};
+
+/**
+ * @typedef {SandboxState} SandboxExample
+ * @property {string} name
+ */
+
+/** @type {Array<SandboxState>} */
+export const examples = [
+  {
+    name: "Simple arithmetic grammar",
+    grammar: `
+// Simple Arithmetics Grammar
+// ==========================
+//
+// Accepts expressions like "2 * (3 + 4)" and computes their value.
+
+Expression
+  = head:Term tail:(_ ("+" / "-") _ Term)* {
+      return tail.reduce(function(result, element) {
+        if (element[1] === "+") { return result + element[3]; }
+        if (element[1] === "-") { return result - element[3]; }
+      }, head);
+    }
+
+Term
+  = head:Factor tail:(_ ("*" / "/") _ Factor)* {
+      return tail.reduce(function(result, element) {
+        if (element[1] === "*") { return result * element[3]; }
+        if (element[1] === "/") { return result / element[3]; }
+      }, head);
+    }
+
+Factor
+  = "(" _ expr:Expression _ ")" { return expr; }
+  / Integer
+
+Integer "integer"
+  = _ [0-9]+ { return parseInt(text(), 10); }
+
+_ "whitespace"
+  = [ \\t\\n\\r]*`,
+    input: `2 * (3 + 4)`,
+  },
+];
+
+/**
+ * @param {URL} url
+ * @returns {SandboxState}
+ */
+export function getSandboxInitialState(url) {
+  if (url.hash.startsWith("#state/")) {
+    const state = url.hash.substring(7);
+    try {
+      const decodedState = JSON.parse(
+        LZString.decompressFromEncodedURIComponent(state)
+      );
+      return decodedState;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  const storedStateRaw = localStorage.getItem(stateStorageKey);
+  if (storedStateRaw !== null) {
+    try {
+      /** @type {SandboxState} */
+      const storedState = JSON.parse(storedStateRaw);
+      return storedState;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return {
+    grammar: examples[0].grammar,
+    input: examples[0].input,
+  };
+}
+
+/**
+ * @param {SandboxState} state
+ * @param {URL | string | undefined} baseUrl
+ * @returns {string}
+ */
+export function getEncodedSandboxUrl(state, baseUrl = undefined) {
+  const encodedState = LZString.compressToEncodedURIComponent(
+    JSON.stringify(state)
+  );
+  if (baseUrl) {
+    return `${
+      typeof baseUrl === "string" ? baseUrl : baseUrl.toString()
+    }#state/${encodedState}`;
+  } else {
+    return `#state/${encodedState}`;
+  }
+}

docs/online.html

@@ -8,14 +8,18 @@
   "/vendor/codemirror/codemirror.css",
   "/vendor/codemirror/lint.css"
 ]
+modules: [
+  "/vendor/lz-string/lz-string.js",
+  "/js/sandbox.js",
+  "/js/online.js"
+]
 scripts: [
   "https://unpkg.com/[email protected]/dist/jquery.min.js",
   "https://unpkg.com/[email protected]/dist/FileSaver.min.js",
   "https://unpkg.com/[email protected]/dist/inspect.js",
   "/vendor/peggy/peggy.min.js",
   "/vendor/codemirror/codemirror.js",
-  "/vendor/codemirror/lint.js",
-  "/js/online.js"
+  "/vendor/codemirror/lint.js"
 ]
 ---
 
@@ -34,43 +38,15 @@
                         <h2 class="suggestion top">
                             <span class="step-number">1</span>
                             <div class="step-title">Write your Peggy grammar</div>
+                            <button id="copy-link">Copy link</button>
                         </h2>
                     </td>
                 </tr>
                 <tr>
                     <td>
                         <div class="textarea-wrapper">
                             <textarea class="code" id="grammar" autocomplete="off" autocorrect="off"
-                                autocapitalize="off" spellcheck="false" disabled>// Simple Arithmetics Grammar
-// ==========================
-//
-// Accepts expressions like "2 * (3 + 4)" and computes their value.
-
-Expression
-  = head:Term tail:(_ ("+" / "-") _ Term)* {
-      return tail.reduce(function(result, element) {
-        if (element[1] === "+") { return result + element[3]; }
-        if (element[1] === "-") { return result - element[3]; }
-      }, head);
-    }
-
-Term
-  = head:Factor tail:(_ ("*" / "/") _ Factor)* {
-      return tail.reduce(function(result, element) {
-        if (element[1] === "*") { return result * element[3]; }
-        if (element[1] === "/") { return result / element[3]; }
-      }, head);
-    }
-
-Factor
-  = "(" _ expr:Expression _ ")" { return expr; }
-  / Integer
-
-Integer "integer"
-  = _ [0-9]+ { return parseInt(text(), 10); }
-
-_ "whitespace"
-  = [ \t\n\r]*</textarea>
+                                autocapitalize="off" spellcheck="false" disabled></textarea>
                         </div>
                     </td>
                 </tr>
@@ -95,7 +71,7 @@ <h2 class="suggestion top">
                     <td>
                         <div class="textarea-wrapper">
                             <textarea class="code" id="input" autocomplete="off" autocorrect="off" autocapitalize="off"
-                                spellcheck="false" disabled>2 * (3 + 4)</textarea>
+                                spellcheck="false" disabled></textarea>
                         </div>
                     </td>
                 </tr>
@@ -134,4 +110,4 @@ <h2 class="suggestion">
             </table>
         </td>
     </tr>
-</table>
+</table>

jest.config.js

@@ -17,5 +17,9 @@ module.exports = {
   ],
   "transform": {
     "^.+\\.ts$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
   },
+  "transformIgnorePatterns": [
+    "/test/cli/fixtures/bad",
+  ],
 };