close #15: implement shareable URLs

Author: evanw

code.js

@@ -74,6 +74,13 @@
     });
   }
 
+  function resetLoadingState() {
+    promptText.style.display = 'block';
+    toolbar.style.display = 'none';
+    statusBar.style.display = 'none';
+    canvas.style.display = 'none';
+  }
+
   function showLoadingError(text) {
     promptText.style.display = 'block';
     toolbar.style.display = 'none';
@@ -465,6 +472,7 @@
     toolbar.style.display = 'flex';
     statusBar.style.display = 'flex';
     canvas.style.display = 'block';
+    updateHash(code, map);
     const sm = parseSourceMap(map);
 
     // Populate the file picker
@@ -1531,6 +1539,87 @@
     // Older browsers
     darkMedia.addListener(onDarkModeChange)
   }
+
+  ////////////////////////////////////////////////////////////////////////////////
+  // Shareable URLs
+
+  const utf8ToUTF16 = x => decodeURIComponent(escape(x));
+  const utf16ToUTF8 = x => unescape(encodeURIComponent(x));
+
+  function loadFromHash() {
+    try {
+      // Reads a string in length-prefix form separated by a null character. This
+      // format is used because it's simple and also more compact than JSON.
+      const readBuffer = () => {
+        const zero = hash.indexOf('\0');
+        if (zero < 0) throw 'No null character';
+        const start = zero + 1;
+        const end = start + (0 | hash.slice(0, zero));
+        const buffer = hash.slice(start, end);
+        if (end > hash.length) throw 'Invalid length';
+        hash = hash.slice(end);
+        return buffer;
+      };
+
+      // Extract the length-prefixed data
+      let hash = atob(location.hash.slice(1));
+      const code = readBuffer();
+      const map = readBuffer();
+      if (hash !== '') throw 'Unexpected extra data';
+
+      finishLoading(utf8ToUTF16(code), utf8ToUTF16(map));
+    } catch (e) {
+      // Clear out an invalid hash and reset the UI
+      if (location.hash !== '') {
+        try {
+          history.replaceState({}, '', location.pathname);
+        } catch (e) {
+        }
+      }
+      resetLoadingState();
+    }
+  }
+
+  function updateHash(code, map) {
+    try {
+      const btoaLength = n => 4 * ((n + 2) / 3 | 0)
+      const kMaxURLDisplayChars = 32 * 1024; // Chrome limits URLs to 32kb in size
+      const url = new URL(location.href);
+      url.hash = '#'; // Clear the data in the hash but leave the hash prefix
+      const urlLength = url.href.length;
+
+      // Do a cheap check to see if the URL will be too long
+      let codeLength = `${code.length}\0`;
+      let mapLength = `${map.length}\0`;
+      let finalLength = urlLength + btoaLength(codeLength.length + code.length + mapLength.length + map.length)
+      if (finalLength >= kMaxURLDisplayChars) throw 'URL estimate too long';
+
+      // Do the expensive check to see if the URL will be too long
+      code = utf16ToUTF8(code);
+      map = utf16ToUTF8(map);
+      codeLength = `${code.length}\0`;
+      mapLength = `${map.length}\0`;
+      finalLength = urlLength + btoaLength(codeLength.length + code.length + mapLength.length + map.length)
+      if (finalLength >= kMaxURLDisplayChars) throw 'URL too long';
+
+      // Only pay the cost of building the string now that we know it'll work
+      const hash = '#' + btoa(`${codeLength}${code}${mapLength}${map}`);
+      if (location.hash !== hash) {
+        history.pushState({}, '', hash);
+      }
+    } catch (e) {
+      // Push an empty hash instead if it's too big for a URL
+      if (location.hash !== '') {
+        try {
+          history.pushState({}, '', location.pathname);
+        } catch (e) {
+        }
+      }
+    }
+  }
+
+  loadFromHash();
+  addEventListener('popstate', () => loadFromHash());
 })();
 
 const exampleJS = `// Generated by CoffeeScript 2.5.1