Repository: single-spa/single-spa-layout
Pull request #74 (2020-09-28 21:22:01)

Change serverLayout to be part of renderOptions object.
I think this API will be simpler - just one argument that's an object with properties, instead of multiple arguments. It's a breaking change, but I don't think anyone is using it yet except me.


Patch:
diff --git a/src/server/renderServerResponseBody.js b/src/server/renderServerResponseBody.js
index 4b02f47..6e4965a 100644
--- a/src/server/renderServerResponseBody.js
+++ b/src/server/renderServerResponseBody.js
@@ -22,6 +22,7 @@ const GT_REGEX = />/g;
 
 /**
  * @typedef {{
+ * serverLayout: import('./constructServerLayout').ServerLayout;
  * urlPath: string;
  * renderApplication(props: import('single-spa').AppProps) => import('stream').Readable | string;
  * renderFragment?(name: string) => import('stream').Readable | string;
@@ -41,15 +42,12 @@ const GT_REGEX = />/g;
  * applicationProps: Array<import('single-spa').AppProps>;
  * }} ServerResponseBodyResult
  *
- * @param {import('./constructServerLayout').ServerLayout} serverLayout
  * @param {RenderOptions} renderOptions
  * @returns {import('stream').Readable}
  */
-export function renderServerResponseBody(serverLayout, renderOptions) {
-  if (!serverLayout || !renderOptions) {
-    throw Error(
-      `single-spa-layout (server): must provide serverLayout and renderOptions`
-    );
+export function renderServerResponseBody(renderOptions) {
+  if (!renderOptions) {
+    throw Error(`single-spa-layout (server): must provide renderOptions`);
   }
 
   const applicationProps = [];
@@ -59,10 +57,9 @@ export function renderServerResponseBody(serverLayout, renderOptions) {
   });
 
   serializeChildNodes({
-    node: serverLayout.parsedDocument,
+    node: renderOptions.serverLayout.parsedDocument,
     output,
     renderOptions,
-    serverLayout,
     applicationProps,
     inRouterElement: false,
   });
@@ -181,9 +178,9 @@ function isRouterContent(node) {
  * @param {SerializeArgs} serializeArgs
  */
 function serializeRouterContent(args) {
-  const { serverLayout, renderOptions } = args;
+  const { renderOptions } = args;
   const matchedRoutes = matchRoute(
-    serverLayout.resolvedRoutes,
+    renderOptions.serverLayout.resolvedRoutes,
     renderOptions.urlPath
   );
   serializeChildNodes({


Test patch:
diff --git a/test/node-only/renderServerResponseBody-node.test.js b/test/node-only/renderServerResponseBody-node.test.js
index cceb857..cd904c7 100644
--- a/test/node-only/renderServerResponseBody-node.test.js
+++ b/test/node-only/renderServerResponseBody-node.test.js
@@ -15,14 +15,15 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
       const {
         bodyStream: readable,
         applicationProps,
-      } = renderServerResponseBody(layout, {
+      } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
@@ -63,11 +64,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           const fragStream = new stream.Readable({
@@ -115,11 +117,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           if (name === "importmap") {
@@ -160,11 +163,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           if (name === "importmap") {
@@ -210,11 +214,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           if (name === "importmap") {
@@ -260,11 +265,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           if (name === "importmap") {
@@ -315,13 +321,14 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
       let renderedFragments = [];
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           renderedFragments.push(name);
@@ -364,11 +371,12 @@ describe(`renderServerResponseBody`, () => {
         )
         .toString();
 
-      const layout = constructServerLayout({
+      const serverLayout = constructServerLayout({
         html,
       });
 
-      const { bodyStream: readable } = renderServerResponseBody(layout, {
+      const { bodyStream: readable } = renderServerResponseBody({
+        serverLayout,
         urlPath: "/app1",
         renderFragment(name) {
           return `
@@ -404,13 +412,13 @@ describe(`renderServerResponseBody`, () => {
       )
       .toString();
 
-    const layout = constructServerLayout({
+    const serverLayout = constructServerLayout({
       html,
     });
 
     const { bodyStream: readable, applicationProps } = renderServerResponseBody(
-      layout,
       {
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
@@ -441,13 +449,13 @@ describe(`renderServerResponseBody`, () => {
       )
       .toString();
 
-    const layout = constructServerLayout({
+    const serverLayout = constructServerLayout({
       html,
     });
 
     const { bodyStream: readable, applicationProps } = renderServerResponseBody(
-      layout,
       {
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
@@ -478,13 +486,13 @@ describe(`renderServerResponseBody`, () => {
       )
       .toString();
 
-    const layout = constructServerLayout({
+    const serverLayout = constructServerLayout({
       html,
     });
 
     const { bodyStream: readable, applicationProps } = renderServerResponseBody(
-      layout,
       {
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
@@ -517,13 +525,13 @@ describe(`renderServerResponseBody`, () => {
       )
       .toString();
 
-    const layout = constructServerLayout({
+    const serverLayout = constructServerLayout({
       html,
     });
 
     const { bodyStream: readable, applicationProps } = renderServerResponseBody(
-      layout,
       {
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
@@ -554,13 +562,13 @@ describe(`renderServerResponseBody`, () => {
       )
       .toString();
 
-    const layout = constructServerLayout({
+    const serverLayout = constructServerLayout({
       html,
     });
 
     const { bodyStream: readable, applicationProps } = renderServerResponseBody(
-      layout,
       {
+        serverLayout,
         urlPath: "/app1",
         renderApplication(props) {
           const { name } = props;
diff --git a/test/single-spa-layout.test-d.ts b/test/single-spa-layout.test-d.ts
index 2537a4e..c927c24 100644
--- a/test/single-spa-layout.test-d.ts
+++ b/test/single-spa-layout.test-d.ts
@@ -143,7 +143,8 @@ constructServerLayout({
 expectError(constructServerLayout());
 
 expectType<stream.Readable>(
-  renderServerResponseBody(serverLayout, {
+  renderServerResponseBody({
+    serverLayout,
     urlPath: "/app1",
     renderApplication(props) {
       return new stream.Readable();
@@ -151,7 +152,8 @@ expectType<stream.Readable>(
   })
 );
 
-renderServerResponseBody(serverLayout, {
+renderServerResponseBody({
+  serverLayout,
   urlPath: "/app1",
   renderApplication(props) {
     return new stream.Readable();