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 {getSandboxInitialContents, getEncodedSandboxUrl, saveSandboxCodeToStorage} from './sandbox.js'
+
 $(document).ready(function() {
   var KB      = 1024;
   var MS_IN_S = 1000;
@@ -143,6 +145,11 @@ $(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.
+    saveSandboxCodeToStorage(grammar);
+
     doLayout();
     return result;
   }
@@ -229,12 +236,26 @@ $(document).ready(function() {
 
     });
 
+  $("#copy-link").click(function () {
+    const grammar = editor.getValue();
+    const fragment = getEncodedSandboxUrl(grammar);
+    // 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 grammarContents = getSandboxInitialContents(new URL(location.href));
+  editor.setValue(grammarContents);
+
   $("#grammar, #parser-var, #option-cache").removeAttr("disabled");
 
   rebuildGrammar();

docs/js/sandbox.js

@@ -0,0 +1,77 @@
+import LZString from "../vendor/lz-string/lz-string.js";
+
+// The key used to store the sandbox in local/session storage
+export const codeStorageKey = `sandbox-code`;
+
+export const saveSandboxCodeToStorage = (code) => {
+  localStorage.setItem(codeStorageKey, code);
+}
+
+// The example grammar to use when there is no saved code in the URL or local storage
+export const exampleGrammar = `
+// 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]*
+`;
+
+/**
+ * @param {URL} url
+ * @returns {string | null}
+ */
+export function getSandboxInitialContents(url) {
+  if (url.hash.startsWith("#code/")) {
+    const code = url.hash.substring(6);
+    const decodedCode = LZString.decompressFromEncodedURIComponent(code);
+    return decodedCode;
+  }
+
+  const storedCode = localStorage.getItem(codeStorageKey);
+  if (storedCode) {
+    return storedCode;
+  }
+
+  return exampleGrammar;
+}
+
+/**
+ * @param {string} code
+ * @param {URL | string | undefined} baseUrl
+ * @returns {string}
+ */
+export function getEncodedSandboxUrl(code, baseUrl = undefined) {
+  const encodedCode = LZString.compressToEncodedURIComponent(code);
+  if (baseUrl) {
+    return `${
+      typeof baseUrl === "string" ? baseUrl : baseUrl.toString()
+    }#code/${encodedCode}`;
+  } else {
+    return `#code/${encodedCode}`;
+  }
+}

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>
@@ -134,4 +110,4 @@ <h2 class="suggestion">
             </table>
         </td>
     </tr>
-</table>
+</table>

docs/test/sandbox.spec.ts

@@ -0,0 +1,80 @@
+import {
+  getSandboxInitialContents,
+  exampleGrammar,
+  saveSandboxCodeToStorage,
+  getEncodedSandboxUrl,
+} from "../js/sandbox";
+
+// Jest can implement localStorage using jsdom, but that is way overkill
+// for this simple test suite, so we'll just use a simple in-memory
+// mock implementation of local storage for now.
+class LocalStorageMock {
+  store: Record<string, string> = {};
+
+  clear() {
+    this.store = {};
+  }
+
+  getItem(key: string) {
+    return this.store[key] || null;
+  }
+
+  setItem(key: string, value: string) {
+    this.store[key] = String(value);
+  }
+
+  removeItem(key: string) {
+    delete this.store[key];
+  }
+}
+
+Object.defineProperty(globalThis, "localStorage", {
+  value: new LocalStorageMock(),
+});
+
+describe("getSandboxInitialContents", () => {
+  it("returns example grammar when nothing is stored locally or in the URL", () => {
+    const url = new URL("https://peggyjs.org/online");
+    expect(getSandboxInitialContents(url)).toEqual(exampleGrammar);
+  });
+  it("returns stored grammar when it is in local storage", () => {
+    saveSandboxCodeToStorage("stored grammar");
+    const url = new URL("https://peggyjs.org/online");
+    expect(getSandboxInitialContents(url)).toEqual("stored grammar");
+  });
+  it("returns grammar stored in URL", () => {
+    const url = new URL(
+      "https://peggyjs.org/online#code/OYJwhgthYgBAzgFwPYgKYBNYEsB2sBVAJQBkg"
+    );
+    expect(getSandboxInitialContents(url)).toEqual("grammar stored in URL");
+  });
+  it("returns grammar in URL over stored grammar", () => {
+    const url = new URL(
+      "https://peggyjs.org/online#code/OYJwhgthYgBAzgFwPYgKYBNYEsB2sBVAJQBkg"
+    );
+    saveSandboxCodeToStorage("stored grammar");
+    expect(getSandboxInitialContents(url)).toEqual("grammar stored in URL");
+  });
+});
+
+describe("getEncodedSandboxUrl", () => {
+  it("returns just a fragment if there is no base URL", () => {
+    const grammar = "grammar stored in URL";
+    expect(getEncodedSandboxUrl(grammar)).toEqual(
+      "#code/OYJwhgthYgBAzgFwPYgKYBNYEsB2sBVAJQBkg"
+    );
+  });
+  it("prepends base URL if it exists", () => {
+    const grammar = "grammar stored in URL";
+    const url = "https://peggyjs.org/online";
+    expect(getEncodedSandboxUrl(grammar, url)).toEqual(
+      "https://peggyjs.org/online#code/OYJwhgthYgBAzgFwPYgKYBNYEsB2sBVAJQBkg"
+    );
+  });
+  it("works with getSandboxInitialContents", () => {
+    const baseUrl = new URL("https://peggyjs.org/online");
+    const grammar = "grammar which will be stored in URL";
+    const url = new URL(getEncodedSandboxUrl(grammar, baseUrl));
+    expect(getSandboxInitialContents(url)).toEqual(grammar);
+  });
+});

jest.config.js

@@ -9,6 +9,7 @@ module.exports = {
   ],
   "roots": [
     "<rootDir>/test",
+    "<rootDir>/docs/test",
   ],
   "testMatch": [
     "**/*.spec.js",
@@ -17,5 +18,9 @@ module.exports = {
   ],
   "transform": {
     "^.+\\.ts$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
   },
+  "transformIgnorePatterns": [
+    "/test/cli/fixtures/bad",
+  ],
 };