Use collected.press’s new websocket API to render local content

Author: RoyalIcing

Makefile

@@ -10,9 +10,6 @@ latest:
 
 dev: install
 	@CF_ACCOUNT_ID=$(CF_ACCOUNT_ID) CF_ZONE_ID=$(CF_ZONE_ID) npm start
-
-miniflare: install
-	npx miniflare@latest --live-reload
 
 production: sha.js
 	@CF_ACCOUNT_ID=$(CF_ACCOUNT_ID) CF_ZONE_ID=$(CF_ZONE_ID) wrangler publish
@@ -49,7 +46,7 @@ define sha256_file
 endef
 
 AWS_ENV := AWS_ACCESS_KEY_ID=$(AWS_ACCESS_KEY_ID) AWS_SECRET_ACCESS_KEY=$(AWS_SECRET_ACCESS_KEY)
-FILES := pages/machines.client.js pages/machines.md
+FILES := pages/machines.client.js pages/machines.md pages/parsing.md
 FILE := pages/machines.client.js
 DIGEST_HEX := $(call sha256_file,$(FILE))
 MIME_TYPE := application/javascript
@@ -79,3 +76,7 @@ tmp/sha/$(REGENERATED_DEV_SHA) tmp/sha/$(YIELDMACHINE_SHA):
 
 sha.js: tmp/sha/$(REGENERATED_DEV_SHA) tmp/sha/$(YIELDMACHINE_SHA)
 	@echo "export const sha = '$(REGENERATED_DEV_SHA)'; export const yieldmachineSha = '$(YIELDMACHINE_SHA)';" > sha.js
+
+tmp/pages-txt/parsing.txt:
+	@mkdir -p tmp/pages-txt
+	@cp pages/parsing.md tmp/pages-txt/parsing.txt

collected-press-local.js

@@ -0,0 +1,8 @@
+const http = require("http");
+const host = 'localhost';
+const port = 8000;
+
+function handler(req, res) {
+    res.writeHead(200);
+    res.end("My first server!");
+};

index.js

@@ -3,13 +3,15 @@ import { parse, mustEnd } from 'yieldparser';
 import { toCode } from 'scalemodel';
 import { IconElementHandler } from './view/icons';
 import { sha, yieldmachineSha } from './sha';
+import * as PageContent from "./pages";
 
 let devSHAs = {};
 if (PRODUCTION_LIKE !== '1') {
   devSHAs = require('./sha.dev').devSHAs;
 }
 
 const config = Object.freeze({
+  // TODO: for development, we could start a local server `npx collected-press --port 8989 ./`
   pressGitHubURL: new URL(`https://collected.press/1/github/RoyalIcing/regenerated.dev@${sha}/`),
   pressS3URL: new URL(`https://staging.collected.press/1/s3/object/us-west-2/collected-workspaces/`),
   jsdelivrURL: new URL(`https://cdn.jsdelivr.net/gh/RoyalIcing/regenerated.dev@${sha}/`),
@@ -47,7 +49,7 @@ const ExternalScripts = {
   },
 }
 
-function *PrismScript() {
+function* PrismScript() {
   return;
   yield html`<!-- Prism syntax highlighting -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-core.min.js" integrity="sha512-hqRrGU7ys5tkcqxx5FIZTBb7PkO2o3mU6U5+qB9b55kgMlBUT4J2wPwQfMCxeJW1fC8pBxuatxoH//z0FInhrA==" crossorigin="anonymous"></script>
@@ -124,7 +126,7 @@ function* PathParser() {
     yield mustEnd;
     return { type: 'press', url: new URL("readme.md", config.pressYieldmachineURL), title: 'Yield Machine' };
   }
-  
+
   return yield [Home, ArticleModule, ArticlePage, YieldmachinePage];
 }
 
@@ -298,6 +300,124 @@ async function renderPage(event, requestURL, contentURL, clientURL, title) {
   );
 }
 
+// From: https://developers.cloudflare.com/workers/learning/using-websockets/#writing-a-websocket-client
+async function websocket(url) {
+  // Make a fetch request including `Upgrade: websocket` header.
+  // The Workers Runtime will automatically handle other requirements
+  // of the WebSocket protocol, like the Sec-WebSocket-Key header.
+  const response = await fetch(url, {
+    headers: {
+      Upgrade: 'websocket',
+    },
+  });
+
+  // If the WebSocket handshake completed successfully, then the
+  // response has a `webSocket` property.
+  let ws = response.webSocket;
+  if (!ws) {
+    throw new Error("server didn't accept WebSocket");
+  }
+
+  // Call accept() to indicate that you'll be handling the socket here
+  // in JavaScript, as opposed to returning it on to a client.
+  await ws.accept();
+
+  // Now you can send and receive messages like before.
+  return ws;
+}
+
+class CollectedPressRenderer {
+  constructor() {
+    this.requestedIDs = new Set();
+    this.replies = new Map();
+  }
+
+  async start() {
+    if (this.ws) {
+      console.log("READY STATE", this.ws.readyState)
+      if (this.ws.readyState <= 1) {
+        return this.ws
+      }
+    }
+
+    const ws = await websocket('https://collected.press/1/ws')
+    // const ws = await websocket('http://localhost:4321/1/ws')
+    ws.addEventListener('message', event => {
+      console.log("RECEIVED", event)
+      try {
+        const data = (typeof event.data === "string") ? event.data : (new TextDecoder()).decode(event.data)
+        const reply = JSON.parse(data);
+        const id = reply.id;
+        if (typeof id === 'string' && this.requestedIDs.has(id)) {
+          this.replies.set(id, reply);
+        }
+      }
+      finally { }
+      // console.log(event.data);
+    });
+    this.ws = ws;
+    return ws;
+  }
+
+  async send(id, method, params) {
+    const ws = await this.start();
+
+    const message = {
+      jsonrpc: "2.0",
+      id,
+      method,
+      params
+    };
+    this.requestedIDs.add(id);
+    ws.send(JSON.stringify(message));
+  }
+
+  async renderMarkdown(source) {
+    const id = crypto.randomUUID()
+    await this.send(id, "renderMarkdown", {
+      type: "text/markdown",
+      source
+    });
+
+    const aborter = new AbortController();
+    setTimeout(() => {
+      aborter.abort()
+    }, 5000);
+
+    return new Promise((resolve, reject) => {
+      let succeeded = false;
+      // aborter.signal.addEventListener('close', () => {
+      //   console.log("CLOSE!")
+      //   aborter.abort()
+      // }, { signal: aborter.signal });
+      // aborter.signal.addEventListener('error', () => {
+      //   console.log("CLOSE ERROR!")
+      //   aborter.abort()
+      // }, { signal: aborter.signal });
+      aborter.signal.addEventListener('abort', () => {
+        // We get an error unless we close, so we always restart the WebSocket!
+        // It’s a bit unfortunate as the whole point is that the connection is left open.
+        this.ws?.close()
+        
+        if (!succeeded) {
+          reject(Error("Timed out"));
+        }
+      })
+
+      this.ws.addEventListener('message', () => {
+        if (this.replies.has(id)) {
+          resolve(this.replies.get(id));
+          succeeded = true;
+          console.log('ID', id, aborter.signal.aborted)
+          aborter.abort();
+        }
+      }, { signal: aborter.signal });
+    });
+  }
+}
+
+let collectedPressRenderer = null;
+
 /**
  * Respond with results
  * @param {Request} request
@@ -308,13 +428,29 @@ async function handleRequest(request, event) {
   const { pathname } = url;
   const { success, result } = parsePath(pathname);
 
+  if (!success) {
+    return notFoundResponse(url);
+  }
+
+  function pressURL(path) {
+    if (PRODUCTION_LIKE === '1') {
+      pressGitHubURL(path)
+    } else {
+      pressS3URL(`text/markdown/${devSHAs[path]}`)
+    }
+  }
+
   console.log('Go!')
   const render = renderPage.bind(null, event, url)
   console.log(result, devSHAs)
 
-  if (!success) {
-    return notFoundResponse(url);
-  } else if (result.type === 'home') {
+  if (collectedPressRenderer === null) {
+    collectedPressRenderer = new CollectedPressRenderer()
+    await collectedPressRenderer.start()
+  }
+
+
+  if (result.type === 'home') {
     if (url.searchParams.has('icons')) {
       const res = await render(pressGitHubURL("pages/home.md"), undefined, 'JavaScript Regenerated');
       const rewriter = new HTMLRewriter();
@@ -327,7 +463,24 @@ async function handleRequest(request, event) {
     /* return new Response('<!doctype html><html lang=en><meta charset=utf-8><meta name=viewport content="width=device-width"><p>Hello!</p>', { headers: { 'content-type': contentTypes.html } }); */
   } else if (result.type === 'article') {
     if (result.slug === 'parsing') {
-      return render(pressGitHubURL("pages/parsing.md"), jsdelivrURL("pages/parsing.client.js"), 'JavaScript Regenerated: Parsing')
+      if (PRODUCTION_LIKE === '1') {
+        return render(pressGitHubURL("pages/parsing.md"), jsdelivrURL("pages/parsing.client.js"), 'JavaScript Regenerated: Parsing')
+      } else {
+        const pageContent = PageContent.Parsing;
+        // const resultHTML = await collectedPressRenderer.renderMarkdown(pageContent).then(result => result?.result?.html)
+        const [stream, promise] = streamStyledHTML(() => [
+          // renderHTML([html`<title>`, title, html`</title>`]),
+          `<body>`,
+          renderBanner(),
+          `<main>`,
+          collectedPressRenderer.renderMarkdown(pageContent).then(result => result?.result?.html).catch(error => "Error loading from collected.press: " + error.message),
+          `</main>`,
+          // fetchContentHTML(pressGitHubURL("pages/_footer.md")),
+        ])
+        event.waitUntil(promise);
+        return new Response(stream, { headers: { ...secureHTMLHeaders, 'content-type': contentTypes.html } });
+        // return new Response(resultHTML ?? "Error!", { headers: { ...secureHTMLHeaders, 'content-type': contentTypes.html } });
+      }
     } else if (result.slug === 'routing') {
       return render(pressGitHubURL("pages/routing.md"), undefined, 'JavaScript Regenerated: Routing')
     } else if (result.slug === 'pattern-matching') {
@@ -372,5 +525,5 @@ async function handleRequest(request, event) {
   } else {
     return notFoundResponse(url);
   }
-    /* return new Response(result.slug, { headers: { 'content-type': contentTypes.html } }); */
+  /* return new Response(result.slug, { headers: { 'content-type': contentTypes.html } }); */
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "worker",
+  "name": "regenerated.dev",
   "version": "1.0.0",
   "description": "A template for kick starting a Cloudflare Workers project",
   "main": "index.js",
@@ -12,14 +12,12 @@
   "author": "Patrick Smith <pgwsmith@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@cloudflare/wrangler": "^1.19.3",
-    "@playwright/test": "^1.15.0",
+    "@playwright/test": "^1.22.2",
     "aws4fetch": "^1.0.13",
-    "miniflare": "^1.4.1",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "wrangler": "^2.0.6"
   },
   "dependencies": {
-    "parcook": "^0.2.0",
     "scalemodel": "^0.1.0",
     "yieldcss": "^0.1.0",
     "yieldmarkup": "^0.2.0",

package.json

@@ -0,0 +1,24 @@
+# Apply
+
+```js
+function* Numbers() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+apply(Numbers, []); // [1, 2, 3]
+
+function* Concat(head, tail) {
+  yield* head;
+  yield* tail;
+}
+
+apply(Concat, [[1, 2], [3, 4]]); // [1, 2, 3, 4]
+```
+
+```js
+function apply(f, a) {
+  return Array.from(f.apply(null, a));
+}
+```

pages/apply.md

@@ -0,0 +1,3 @@
+// export * as ParsingDebug from "./parsing.txt"
+// console.log("ParsingDebug", ParsingDebug)
+export { default as Parsing } from "../tmp/pages-txt/parsing.txt"

pages/index.js

@@ -7,7 +7,7 @@ import {
   cond,
   always,
   accumulate,
-} from 'https://cdn.jsdelivr.net/npm/yieldmachine@0.4.10/dist/yieldmachine.mjs';
+} from 'https://cdn.jsdelivr.net/npm/yieldmachine@0.4.12/dist/yieldmachine.module.js';
 
 function ClickedState(button) {
   function* Initial() {

pages/machines.client.js

@@ -2,13 +2,17 @@
 
 Library used: [yieldparser](https://github.com/JavaScriptRegenerated/yieldparser)
 
-## IP Address
+## Examples
+
+### IP Address
 
 <form class="Y">
 <label for=parsing-ip-address-input>Enter text to parse:</label> <input id=parsing-ip-address-input type=text value="1.2.3.4">
 <output id=parsing-ip-address-output><pre><code class="target language-json"></code></pre></output>
 </form>
 
+----
+
 ```js
 import { parse } from 'yieldparser';
 

pages/parsing.md

@@ -1 +1 @@
-export const devSHAs = { 'pages/machines.client.js': 'fd6e5535c0006de4f0d02f9828acc2606f1b911cad3daf0bc3e42f12b4cc2f02', 'pages/machines.md': '06cb35a52fd2f62f177b1ad956d5b931dc46f45d54bdca7a6122daaa22865c7b' }
+export const devSHAs = { 'pages/machines.client.js': 'a9a2aeea6a689f636148919e1dc9c0406d45f4645d43aff8141c076350170294', 'pages/machines.md': '06cb35a52fd2f62f177b1ad956d5b931dc46f45d54bdca7a6122daaa22865c7b' }

sha.dev.js

@@ -1,7 +1,6 @@
 name = "regenerated-dev"
+main = "index.js"
 compatibility_date = "2021-09-26"
-type = "webpack"
-zone_id = ""
 kv_namespaces = []
 workers_dev = true