Pass data by window which is also serialized on the client
This commit is contained in:
parent
a75b12a608
commit
0aab8383c5
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 } }, [
|
||||
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 },
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue