Initial prototype, refs #1

simonw · May 2, 2022 · 9bdac82 · 9bdac82
commit 9bdac82
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="https://latest.datasette.io/-/static/app.css?cead5a">
+<div style="padding: 1em">
+<h1>Web worker demo</h1>
+
+<script>
+const datasetteWorker = new Worker("/webworker.js");
+
+datasetteWorker.onmessage = (event) => {
+  console.log(event.data);
+  document.getElementById("output").innerHTML = event.data.text;
+  document.getElementById("status").innerHTML = event.data.status;
+};
+</script>
+<form>
+<p><input id="path" type="text" style="width: 80%" value="/"><input type="submit" value="Go"></p>
+</form>
+<p id="status"></p>
+<hr></div>
+
+<div id="output"></div>
+
+<script>
+
+window.onpopstate = function(event) {
+  console.log(event);
+  datasetteWorker.postMessage({path: event.state.path});
+}
+
+document.forms[0].onsubmit = function(ev) {
+  ev.preventDefault();
+  var path = document.getElementById("path").value;
+  history.pushState({path: path}, path, "#" + path);
+  datasetteWorker.postMessage({path});
+}
+// document.forms[0].submit();
+let output = document.getElementById('output');
+output.addEventListener('click', (ev => {
+  ev.stopPropagation();
+  ev.preventDefault();
+  if (ev.srcElement && ev.srcElement.nodeName == "A" && ev.srcElement.href) {
+    let path = ev.srcElement.getAttribute("href");
+    console.log({path});
+    history.pushState({path: path}, path, "#" + path);
+    datasetteWorker.postMessage({path});
+  }
+  console.log(ev);
+}), true);
+</script>
diff --git a/serve.sh b/serve.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+python3 -m http.server 8009
diff --git a/webworker.js b/webworker.js
@@ -0,0 +1,51 @@
+importScripts("https://cdn.jsdelivr.net/pyodide/dev/full/pyodide.js");
+
+async function startDatasette() {
+  self.pyodide = await loadPyodide({indexURL : "https://cdn.jsdelivr.net/pyodide/dev/full/"});
+  await pyodide.loadPackage('micropip');
+  await pyodide.loadPackage('ssl');
+  await pyodide.loadPackage('setuptools'); // For pkg_resources
+  await self.pyodide.runPythonAsync(`
+  # Grab that fixtures.db database
+  from pyodide.http import pyfetch
+  response = await pyfetch("https:/latest.datasette.io/fixtures.db")
+  with open("fixtures.db", "wb") as fp:
+      fp.write(await response.bytes())
+
+  import micropip
+  await micropip.install(
+      "https://s3.amazonaws.com/simonwillison-cors-allowed-public/python_baseconv-1.2.2-py3-none-any.whl",
+      keep_going=True
+  )
+  await micropip.install(
+      "https://s3.amazonaws.com/simonwillison-cors-allowed-public/click_default_group-1.2.2-py3-none-any.whl",
+      keep_going=True
+  )
+  await micropip.install(
+      "https://s3.amazonaws.com/simonwillison-cors-allowed-public/datasette-0.61.1-py3-none-any.whl",
+      keep_going=True
+  )
+  from datasette.app import Datasette
+  ds = Datasette(["fixtures.db"], memory=True)
+  `);
+}
+
+let readyPromise = startDatasette();
+
+self.onmessage = async (event) => {
+  // make sure loading is done
+  await readyPromise;
+  console.log(event, event.data);
+  try {
+    let [status, text] = await self.pyodide.runPythonAsync(
+      `
+      import json
+      response = await ds.client.get(${JSON.stringify(event.data.path)})
+      [response.status_code, response.text]
+      `
+    );
+    self.postMessage({status, text});
+  } catch (error) {
+    self.postMessage({ error: error.message });
+  }
+};