playground: add an option for URL hash persistence

src/bc-datalog-playground.ts

@@ -19,6 +19,7 @@ import {
 export class BCDatalogPlayground extends LitElement {
   @property() code = "";
   @property() showBlocks = false;
+  @property() fromHash = false;
   @state() blocks: Array<{ code: string; externalKey: string | null }> = [];
   @state() private started = false;
 
@@ -40,6 +41,26 @@ export class BCDatalogPlayground extends LitElement {
         return { code, externalKey };
       })
       .filter(({ code }, i) => i === 0 || code !== "");
+    setTimeout(() => this.updateFromHash(), 0);
+  }
+
+  updateFromHash() {
+    if (!this.fromHash) return;
+    let hashContents;
+    try {
+      hashContents = JSON.parse(atob(window.location.hash.substr(1)));
+    } catch (e) {
+      console.error({ e });
+    }
+    const [code, blocks] = hashContents;
+    this.code = code;
+    this.blocks = blocks;
+  }
+
+  updateHash() {
+    if (!this.fromHash) return;
+    const ser = [this.code, this.blocks];
+    window.location.hash = btoa(JSON.stringify(ser));
   }
 
   firstUpdated() {
@@ -50,6 +71,7 @@ export class BCDatalogPlayground extends LitElement {
     const newBlocks = [...this.blocks];
     newBlocks.push({ code: "", externalKey: null });
     this.blocks = newBlocks;
+    this.updateHash();
   }
 
   onUpdatedBlock(blockId: number, e: { detail: { code: string } }) {
@@ -59,6 +81,7 @@ export class BCDatalogPlayground extends LitElement {
       externalKey: newBlocks[blockId].externalKey,
     };
     this.blocks = newBlocks;
+    this.updateHash();
   }
 
   onUpdatedExternalKey(blockId: number, e: InputEvent) {
@@ -69,10 +92,12 @@ export class BCDatalogPlayground extends LitElement {
       externalKey: newValue !== "" ? newValue : null,
     };
     this.blocks = newBlocks;
+    this.updateHash();
   }
 
   onUpdatedCode(e: { detail: { code: string } }) {
     this.code = e.detail.code;
+    this.updateHash();
   }
 
   render() {