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

Pass data by window which is also serialized on the client

This commit is contained in:
Eric Eastwood 2022-02-14 23:20:25 -06:00
parent a75b12a608
commit 0aab8383c5
3 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
server/render-hydrogen-to-string.js
View File

@ -14,7 +14,8 @@ async function renderToString(roomData, events, stateEventMap) {
const dom = parseHTML(`
<!doctype html>
<html lang="en">
<html>
<head></head>
<body>
<div id="app" class="hydrogen"></div>
</body>
@ -27,6 +28,23 @@ async function renderToString(roomData, events, stateEventMap) {
};
}
// Define this for the SSR context
dom.window.matrixPublicArchiveContext = {
roomData,
events,
stateEventMap,
config,
};
// Serialize it for when we run this again client-side
dom.document.body.insertAdjacentHTML(
'beforeend',
`
<script type="text/javascript">
window.matrixPublicArchiveContext = ${JSON.stringify(dom.window.matrixPublicArchiveContext)}
</script>
`
);
const vmContext = vm.createContext(dom);
// Make the dom properties available in sub-`require(...)` calls
vmContext.global.window = dom.window;
@ -41,11 +59,6 @@ async function renderToString(roomData, events, stateEventMap) {
// So we can see logs from the underlying vm
vmContext.global.console = console;
vmContext.global.INPUT_ROOM_DATA = roomData;
vmContext.global.INPUT_EVENTS = events;
vmContext.global.INPUT_STATE_EVENT_MAP = stateEventMap;
vmContext.global.INPUT_CONFIG = config;
const hydrogenRenderScriptCode = await readFile(
path.resolve(__dirname, '../shared/hydrogen-vm-render-script.js'),
'utf8'
@ -58,7 +71,7 @@ async function renderToString(roomData, events, stateEventMap) {
// (waiting on the promise returned from `hydrogen-render-script.js`)
await vmResult;
const documentString = dom.document.querySelector('#app').toString();
const documentString = dom.document.body.toString();
return documentString;
}

13
shared/CalendarView.js
View File

@ -35,6 +35,8 @@ for (let i = 0; i < 7; i++) {
class CalendarView extends TemplateView {
render(t, vm) {
const date = vm.date;
console.log('CalendarView vm', vm);
return t.div({ className: { CalendarView: true } }, [
t.div({ className: { CalendarView_heading: true } }, [
t.button(
@ -44,9 +46,14 @@ class CalendarView extends TemplateView {
},
['\u276E']
),
t.h4({ className: { CalendarView_heading_text: true } }, [
date.toLocaleString('default', { year: 'numeric', month: 'long' }),
]),
t.map(
(vm) => vm.date,
(date, t) => {
return t.h4({ className: { CalendarView_heading_text: true } }, [
date.toLocaleString('default', { year: 'numeric', month: 'long' }),
]);
}
),
t.button(
{
className: { CalendarView_heading_nextButton: true },

13
shared/hydrogen-vm-render-script.js
View File

@ -18,13 +18,13 @@ const {
const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView');
const roomData = global.INPUT_ROOM_DATA;
const roomData = window.matrixPublicArchiveContext.roomData;
assert(roomData);
const events = global.INPUT_EVENTS;
const events = window.matrixPublicArchiveContext.events;
assert(events);
const stateEventMap = global.INPUT_STATE_EVENT_MAP;
const stateEventMap = window.matrixPublicArchiveContext.stateEventMap;
assert(stateEventMap);
const config = global.INPUT_CONFIG;
const config = window.matrixPublicArchiveContext.config;
assert(config);
assert(config.matrixServerUrl);
@ -189,11 +189,14 @@ async function mountHydrogen() {
calendarViewModel: {
date: new Date(),
prevMonth: function () {
console.log('prevMonth');
const prevMonthDate = new Date(this.date);
prevMonthDate.setMonth(displayedDate.getMonth() - 1);
console.log('prevMonthDate', prevMonthDate);
this.date = prevMonthDate;
},
nextMOnth: function () {
nextMonth: function () {
console.log('nextMonth');
const nextMonthDate = new Date(this.date);
nextMonthDate.setMonth(displayedDate.getMonth() + 1);
this.date = nextMonthDate;