Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Working render (without CSS) 

See ![](https://user-images.githubusercontent.com/558581/152488518-a93d320e-608e-4bf4-90a6-43787134894f.png)
This commit is contained in:
Eric Eastwood 2022-02-04 01:24:31 -06:00
parent 3a54d3b652
commit 4e881d6487
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
server/hydrogen-render-script.js
View File

@ -82,11 +82,11 @@ async function asdf() {
}, },
}); });
console.log('eventsJson', eventsJson); //console.log('eventsJson', eventsJson);
const eventEntries = eventsJson.map((eventJson) => { const eventEntries = eventsJson.map((eventJson) => {
return makeEventEntryFromEventJson(roomId, eventJson); return makeEventEntryFromEventJson(roomId, eventJson);
}); });
console.log('eventEntries', eventEntries); //console.log('eventEntries', eventEntries);
// We have to use `timeline._setupEntries([])` because it sets // We have to use `timeline._setupEntries([])` because it sets
// `this._allEntries` in `Timeline` and we don't want to use `timeline.load()` // `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.entries.subscribe({ onAdd: () => null, onUpdate: () => null });
timeline.addEntries(eventEntries); 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); const tiles = new TilesCollection(timeline.entries, tilesCreator);
// Trigger onSubscribeFirst -> tiles._populateTiles(); // Trigger onSubscribeFirst -> tiles._populateTiles();
@ -115,7 +115,7 @@ async function asdf() {
const view = new TimelineView(timelineViewModel); const view = new TimelineView(timelineViewModel);
console.log('view.mount()', view.mount()); //console.log('view.mount()', view.mount());
app.appendChild(view.mount()); app.appendChild(view.mount());
//app.insertAdjacentHTML('beforeend', view.mount()); //app.insertAdjacentHTML('beforeend', view.mount());
} }

33
server/server1.js
View File

@ -1,6 +1,7 @@
const vm = require('vm'); const vm = require('vm');
const path = require('path'); const path = require('path');
const { readFile } = require('fs').promises; const { readFile } = require('fs').promises;
const crypto = require('crypto');
const { parseHTML } = require('linkedom'); const { parseHTML } = require('linkedom');
const express = require('express'); const express = require('express');
const app = express(); const app = express();
@ -23,16 +24,28 @@ async function renderToString() {
</html> </html>
`); `);
// So require(...) works in the vm if (!dom.crypto) {
dom.require = require; dom.crypto = crypto.webcrypto;
// So we can see logs from the underlying vm }
dom.console = console;
if (!dom.requestAnimationFrame) {
dom.requestAnimationFrame = function (cb) {
setTimeout(cb, 0);
};
}
const vmContext = vm.createContext(dom); const vmContext = vm.createContext(dom);
// Make the dom properties available in sub-`require(...)` calls // 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.document = dom.document;
vmContext.global.Node = dom.Node;
vmContext.global.navigator = dom.navigator; 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( const hydrogenRenderScriptCode = await readFile(
path.resolve(__dirname, './hydrogen-render-script.js'), path.resolve(__dirname, './hydrogen-render-script.js'),
@ -40,18 +53,20 @@ async function renderToString() {
); );
const hydrogenRenderScript = new vm.Script(hydrogenRenderScriptCode); const hydrogenRenderScript = new vm.Script(hydrogenRenderScriptCode);
const vmResult = hydrogenRenderScript.runInContext(vmContext); const vmResult = hydrogenRenderScript.runInContext(vmContext);
// Wait for everything to render
// (waiting on the promise returned from `hydrogen-render-script.js`)
await vmResult; await vmResult;
console.log('vmResult', vmResult);
const documentString = dom.document.toString(); const documentString = dom.document.toString();
console.log('documentString', documentString); console.log('documentString', documentString);
return documentString;
} }
app.get('/', async function (req, res) { 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); app.listen(3050);