From 4e881d648747d3bc8bd3bd90fa078ae61bce5af9 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Fri, 4 Feb 2022 01:24:31 -0600
Subject: [PATCH] Working render (without CSS)

See ![](https://user-images.githubusercontent.com/558581/152488518-a93d320e-608e-4bf4-90a6-43787134894f.png)
---
 server/hydrogen-render-script.js |  8 ++++----
 server/server1.js                | 33 +++++++++++++++++++++++---------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/server/hydrogen-render-script.js b/server/hydrogen-render-script.js
index a78fc03..cfec96e 100644
--- a/server/hydrogen-render-script.js
+++ b/server/hydrogen-render-script.js
@@ -82,11 +82,11 @@ async function asdf() {
     },
   });
 
-  console.log('eventsJson', eventsJson);
+  //console.log('eventsJson', eventsJson);
   const eventEntries = eventsJson.map((eventJson) => {
     return makeEventEntryFromEventJson(roomId, eventJson);
   });
-  console.log('eventEntries', eventEntries);
+  //console.log('eventEntries', eventEntries);
 
   // We have to use `timeline._setupEntries([])` because it sets
   // `this._allEntries` in `Timeline` and we don't want to use `timeline.load()`
@@ -96,7 +96,7 @@ async function asdf() {
   timeline.entries.subscribe({ onAdd: () => null, onUpdate: () => null });
   timeline.addEntries(eventEntries);
 
-  console.log('timeline.entries', timeline.entries.length, timeline.entries);
+  //console.log('timeline.entries', timeline.entries.length, timeline.entries);
 
   const tiles = new TilesCollection(timeline.entries, tilesCreator);
   // Trigger onSubscribeFirst -> tiles._populateTiles();
@@ -115,7 +115,7 @@ async function asdf() {
 
   const view = new TimelineView(timelineViewModel);
 
-  console.log('view.mount()', view.mount());
+  //console.log('view.mount()', view.mount());
   app.appendChild(view.mount());
   //app.insertAdjacentHTML('beforeend', view.mount());
 }
diff --git a/server/server1.js b/server/server1.js
index e437dfc..909a0d0 100644
--- a/server/server1.js
+++ b/server/server1.js
@@ -1,6 +1,7 @@
 const vm = require('vm');
 const path = require('path');
 const { readFile } = require('fs').promises;
+const crypto = require('crypto');
 const { parseHTML } = require('linkedom');
 const express = require('express');
 const app = express();
@@ -23,16 +24,28 @@ async function renderToString() {
     </html>
   `);
 
-  // So require(...) works in the vm
-  dom.require = require;
-  // So we can see logs from the underlying vm
-  dom.console = console;
+  if (!dom.crypto) {
+    dom.crypto = crypto.webcrypto;
+  }
+
+  if (!dom.requestAnimationFrame) {
+    dom.requestAnimationFrame = function (cb) {
+      setTimeout(cb, 0);
+    };
+  }
 
   const vmContext = vm.createContext(dom);
   // Make the dom properties available in sub-`require(...)` calls
-  vmContext.global.window = dom;
+  vmContext.global.window = dom.window;
   vmContext.global.document = dom.document;
+  vmContext.global.Node = dom.Node;
   vmContext.global.navigator = dom.navigator;
+  vmContext.global.DOMParser = dom.DOMParser;
+
+  // So require(...) works in the vm
+  vmContext.global.require = require;
+  // So we can see logs from the underlying vm
+  vmContext.global.console = console;
 
   const hydrogenRenderScriptCode = await readFile(
     path.resolve(__dirname, './hydrogen-render-script.js'),
@@ -40,18 +53,20 @@ async function renderToString() {
   );
   const hydrogenRenderScript = new vm.Script(hydrogenRenderScriptCode);
   const vmResult = hydrogenRenderScript.runInContext(vmContext);
+  // Wait for everything to render
+  // (waiting on the promise returned from `hydrogen-render-script.js`)
   await vmResult;
 
-  console.log('vmResult', vmResult);
-
   const documentString = dom.document.toString();
   console.log('documentString', documentString);
+  return documentString;
 }
 
 app.get('/', async function (req, res) {
-  await renderToString();
+  const htmlOutput = await renderToString();
 
-  res.send('Hello World');
+  res.set('Content-Type', 'text/html');
+  res.send(htmlOutput);
 });
 
 app.listen(3050);