Slightly easier to understand renderHydrogenVmRenderScriptToPageHtml API surface (#170)

server/hydrogen-render/render-hydrogen-vm-render-script-to-page-html.js

@@ -7,11 +7,11 @@ const renderHydrogenToString = require('../hydrogen-render/render-hydrogen-to-st
 const sanitizeHtml = require('../lib/sanitize-html');
 const safeJson = require('../lib/safe-json');
 
-async function renderHydrogenVmRenderScriptToPageHtml(
+async function renderHydrogenVmRenderScriptToPageHtml({
+  pageOptions,
   vmRenderScriptFilePath,
   vmRenderContext,
-  pageOptions
+}) {
-) {
   assert(vmRenderScriptFilePath);
   assert(vmRenderContext);
   assert(pageOptions);

server/routes/content-security-policy-middleware.js

@@ -8,7 +8,7 @@ const matrixServerUrl = config.get('matrixServerUrl');
 assert(matrixServerUrl);
 
 function contentSecurityPolicyMiddleware(req, res, next) {
-  const nonce = crypto.randomBytes(16).toString('hex');
+  const cspNonce = crypto.randomBytes(16).toString('hex');
 
   // Based on https://web.dev/strict-csp/
   const directives = [
@@ -20,7 +20,7 @@ function contentSecurityPolicyMiddleware(req, res, next) {
     // 'unsafe-inline' as a fallback. All recent browsers will ignore 'unsafe-inline' if
     // a CSP nonce or hash is present. (via
     // https://web.dev/strict-csp/#step-4-add-fallbacks-to-support-safari-and-older-browsers)
-    `script-src 'nonce-${nonce}' 'strict-dynamic' https: 'unsafe-inline';`,
+    `script-src 'nonce-${cspNonce}' 'strict-dynamic' https: 'unsafe-inline';`,
     // Hydrogen uses a bunch of inline styles and `style-src-attr` isn't well supported
     // in Firefox to allow it specifically. In the future, when it has better support we
     // should switch to a strict nonce based style directive.
@@ -43,7 +43,7 @@ function contentSecurityPolicyMiddleware(req, res, next) {
   res.set('Content-Security-Policy', directives.join(' '));
 
   // Make this available for down-stream routes to reference and use
-  res.locals.cspNonce = nonce;
+  res.locals.cspNonce = cspNonce;
 
   next();
 }

server/routes/room-directory-routes.js

@@ -65,9 +65,20 @@ router.get(
     const roomDirectoryStylesUrl = urlJoin(basePath, '/css/room-directory.css');
     const jsBundleUrl = urlJoin(basePath, '/js/entry-client-room-directory.es.js');
 
-    const pageHtml = await renderHydrogenVmRenderScriptToPageHtml(
+    const pageHtml = await renderHydrogenVmRenderScriptToPageHtml({
-      path.resolve(__dirname, '../../shared/room-directory-vm-render-script.js'),
+      pageOptions: {
-      {
+        title: `Matrix Public Archive`,
+        styles: [hydrogenStylesUrl, stylesUrl, roomDirectoryStylesUrl],
+        scripts: [jsBundleUrl],
+        locationHref: urlJoin(basePath, req.originalUrl),
+        shouldIndex,
+        cspNonce: res.locals.cspNonce,
+      },
+      vmRenderScriptFilePath: path.resolve(
+        __dirname,
+        '../../shared/room-directory-vm-render-script.js'
+      ),
+      vmRenderContext: {
         rooms,
         roomFetchError: roomFetchError
           ? {
@@ -89,15 +100,7 @@ router.get(
           matrixServerName,
         },
       },
-      {
+    });
-        title: `Matrix Public Archive`,
-        styles: [hydrogenStylesUrl, stylesUrl, roomDirectoryStylesUrl],
-        scripts: [jsBundleUrl],
-        locationHref: urlJoin(basePath, req.originalUrl),
-        shouldIndex,
-        cspNonce: res.locals.cspNonce,
-      }
-    );
 
     res.set('Content-Type', 'text/html');
     res.send(pageHtml);

server/routes/room-routes.js

@@ -868,10 +868,17 @@ router.get(
     const stylesUrl = urlJoin(basePath, '/css/styles.css');
     const jsBundleUrl = urlJoin(basePath, '/js/entry-client-hydrogen.es.js');
 
-    // XXX: The `renderHydrogenVmRenderScriptToPageHtml` API surface is pretty awkward
+    const pageHtml = await renderHydrogenVmRenderScriptToPageHtml({
-    const pageHtml = await renderHydrogenVmRenderScriptToPageHtml(
+      pageOptions: {
-      path.resolve(__dirname, '../../shared/hydrogen-vm-render-script.js'),
+        title: `${roomData.name} - Matrix Public Archive`,
-      {
+        styles: [hydrogenStylesUrl, stylesUrl],
+        scripts: [jsBundleUrl],
+        locationHref: urlJoin(basePath, req.originalUrl),
+        shouldIndex,
+        cspNonce: res.locals.cspNonce,
+      },
+      vmRenderScriptFilePath: path.resolve(__dirname, '../../shared/hydrogen-vm-render-script.js'),
+      vmRenderContext: {
         toTimestamp,
         precisionFromUrl,
         roomData: {
@@ -891,15 +898,7 @@ router.get(
           matrixServerUrl: matrixServerUrl,
         },
       },
-      {
+    });
-        title: `${roomData.name} - Matrix Public Archive`,
-        styles: [hydrogenStylesUrl, stylesUrl],
-        scripts: [jsBundleUrl],
-        locationHref: urlJoin(basePath, req.originalUrl),
-        shouldIndex,
-        cspNonce: res.locals.cspNonce,
-      }
-    );
 
     res.set('Content-Type', 'text/html');
     res.send(pageHtml);