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(` const dom = parseHTML(`
<!doctype html> <!doctype html>
<html lang="en"> <html>
<head></head>
<body> <body>
<div id="app" class="hydrogen"></div> <div id="app" class="hydrogen"></div>
</body> </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); 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.window; vmContext.global.window = dom.window;
@ -41,11 +59,6 @@ async function renderToString(roomData, events, stateEventMap) {
// So we can see logs from the underlying vm // So we can see logs from the underlying vm
vmContext.global.console = console; 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( const hydrogenRenderScriptCode = await readFile(
path.resolve(__dirname, '../shared/hydrogen-vm-render-script.js'), path.resolve(__dirname, '../shared/hydrogen-vm-render-script.js'),
'utf8' 'utf8'
@ -58,7 +71,7 @@ async function renderToString(roomData, events, stateEventMap) {
// (waiting on the promise returned from `hydrogen-render-script.js`) // (waiting on the promise returned from `hydrogen-render-script.js`)
await vmResult; await vmResult;
const documentString = dom.document.querySelector('#app').toString(); const documentString = dom.document.body.toString();
return documentString; return documentString;
} }

11
shared/CalendarView.js
View File

@ -35,6 +35,8 @@ for (let i = 0; i < 7; i++) {
class CalendarView extends TemplateView { class CalendarView extends TemplateView {
render(t, vm) { render(t, vm) {
const date = vm.date; const date = vm.date;
console.log('CalendarView vm', vm);
return t.div({ className: { CalendarView: true } }, [ return t.div({ className: { CalendarView: true } }, [
t.div({ className: { CalendarView_heading: true } }, [ t.div({ className: { CalendarView_heading: true } }, [
t.button( t.button(
@ -44,9 +46,14 @@ class CalendarView extends TemplateView {
}, },
['\u276E'] ['\u276E']
), ),
t.h4({ className: { CalendarView_heading_text: true } }, [ t.map(
(vm) => vm.date,
(date, t) => {
return t.h4({ className: { CalendarView_heading_text: true } }, [
date.toLocaleString('default', { year: 'numeric', month: 'long' }), date.toLocaleString('default', { year: 'numeric', month: 'long' }),
]), ]);
}
),
t.button( t.button(
{ {
className: { CalendarView_heading_nextButton: true }, 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 ArchiveView = require('matrix-public-archive-shared/ArchiveView');
const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView'); const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView');
const roomData = global.INPUT_ROOM_DATA; const roomData = window.matrixPublicArchiveContext.roomData;
assert(roomData); assert(roomData);
const events = global.INPUT_EVENTS; const events = window.matrixPublicArchiveContext.events;
assert(events); assert(events);
const stateEventMap = global.INPUT_STATE_EVENT_MAP; const stateEventMap = window.matrixPublicArchiveContext.stateEventMap;
assert(stateEventMap); assert(stateEventMap);
const config = global.INPUT_CONFIG; const config = window.matrixPublicArchiveContext.config;
assert(config); assert(config);
assert(config.matrixServerUrl); assert(config.matrixServerUrl);
@ -189,11 +189,14 @@ async function mountHydrogen() {
calendarViewModel: { calendarViewModel: {
date: new Date(), date: new Date(),
prevMonth: function () { prevMonth: function () {
console.log('prevMonth');
const prevMonthDate = new Date(this.date); const prevMonthDate = new Date(this.date);
prevMonthDate.setMonth(displayedDate.getMonth() - 1); prevMonthDate.setMonth(displayedDate.getMonth() - 1);
console.log('prevMonthDate', prevMonthDate);
this.date = prevMonthDate; this.date = prevMonthDate;
}, },
nextMOnth: function () { nextMonth: function () {
console.log('nextMonth');
const nextMonthDate = new Date(this.date); const nextMonthDate = new Date(this.date);
nextMonthDate.setMonth(displayedDate.getMonth() + 1); nextMonthDate.setMonth(displayedDate.getMonth() + 1);
this.date = nextMonthDate; this.date = nextMonthDate;