more work to support subapp inlining subapp (#1524)

electrode-io · Feb 7, 2020 · a985431 · a985431
1 parent 3cda7f2
commit a985431
Show file tree

Hide file tree

Showing 36 changed files with 957 additions and 28 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -53,6 +53,24 @@
       ],
       "internalConsoleOptions": "openOnSessionStart"
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "subapp-pbundle Mocha Tests",
+      "cwd": "${workspaceFolder}/packages/subapp-pbundle",
+      "env": { "BABEL_ENV": "-src-node" },
+      "program": "${workspaceFolder}/packages/subapp-pbundle/node_modules/mocha/bin/_mocha",
+      "args": [
+        "-u",
+        "tdd",
+        "--timeout",
+        "999999",
+        "--colors",
+        "${workspaceFolder}/packages/subapp-pbundle/test/spec"
+      ],
+      "internalConsoleOptions": "openOnSessionStart"
+    },
+
     {
       "type": "node",
       "request": "launch",

diff --git a/packages/subapp-pbundle/lib/framework-lib.js b/packages/subapp-pbundle/lib/framework-lib.js
@@ -54,6 +54,22 @@ class FrameworkLib {
     return "";
   }
 
+  handleSSRSync() {
+    const { subApp, options } = this.ref;
+
+    assert(this._prepared, "subapp's data must've been prepared to run handleSSRSync");
+
+    if (!this.StartComponent) {
+      return `<!-- serverSideRendering ${subApp.name} has no StartComponent -->`;
+    } else if (subApp.__redux) {
+      return this.doReduxBundlerSSR();
+    } else if (options.serverSideRendering === true) {
+      return this.doSSR();
+    }
+
+    return "";
+  }
+
   renderTo(element, options) {
     if (options.streaming) {
       throw new Error("render to stream is not yet supported for preact");
@@ -109,14 +125,13 @@ class FrameworkLib {
     return this._initialProps;
   }
 
-  async doSSR() {
-    return await this.renderTo(this.createTopComponent(this._initialProps), this.ref.options);
+  doSSR() {
+    return this.renderTo(this.createTopComponent(this._initialProps), this.ref.options);
   }
 
   async prepareReduxData() {
     const { subApp, subAppServer, context } = this.ref;
     const { request } = context.user;
-    const container = request.container || (request.container = {});
 
     // subApp.reduxReducers || subApp.reduxCreateStore) {
     // if sub app has reduxReducers or reduxCreateStore then assume it's using
@@ -133,6 +148,8 @@ class FrameworkLib {
 
     if (!reduxData) {
       reduxData = { initialState: {} };
+    } else {
+      this.store = reduxData.store;
     }
 
     this.initialState = reduxData.initialState || reduxData;
@@ -142,28 +159,41 @@ class FrameworkLib {
       this.initialStateStr = JSON.stringify(this.initialState);
     }
     // next we take the initial state and create redux store from it
-    this.store =
-      reduxData.store ||
-      (subApp.reduxCreateStore && (await subApp.reduxCreateStore(this.initialState, container)));
+    return await this.prepareReduxStore();
+  }
+
+  async prepareReduxStore() {
+    const { subApp, context } = this.ref;
+
+    // next we take the initial state and create redux store from it
+    if (!this.store && subApp.reduxCreateStore) {
+      const storeContainer =
+        context.user.xarcReduxStoreContainer || (context.user.xarcReduxStoreContainer = {});
+
+      this.store = await subApp.reduxCreateStore(this.initialState, storeContainer);
+    }
+
     assert(
       this.store,
-      `redux subapp ${subApp.name} didn't provide store, reduxCreateStore, or reducers`
+      `redux subapp ${subApp.name} didn't provide store, reduxCreateStore, or redux bundles`
     );
 
-    const reduxStoreReady = subAppServer.reduxStoreReady || subApp.reduxStoreReady;
+    const reduxStoreReady = this.ref.subAppServer.reduxStoreReady || subApp.reduxStoreReady;
 
     if (reduxStoreReady) {
       await reduxStoreReady({ store: this.store });
     }
+
+    return this.store;
   }
 
-  async doReduxBundlerSSR() {
+  doReduxBundlerSSR() {
     const { options } = this.ref;
 
     if (options.serverSideRendering === true) {
       assert(Provider, "subapp-web: react-redux Provider not available");
       // finally render the element with Redux Provider and the store created
-      return await this.renderTo(
+      return this.renderTo(
         preact.createElement(Provider, { store: this.store }, this.createTopComponent()),
         options
       );

diff --git a/packages/subapp-pbundle/test/spec/redux-bundler.spec.js b/packages/subapp-pbundle/test/spec/redux-bundler.spec.js
@@ -0,0 +1,23 @@
+"use strict";
+
+const { reduxBundlerLoadSubApp } = require("../../lib/redux-bundler");
+
+describe("redux-bundler load subapp", function() {
+  it("should initialize reduxCreateStore if it's not provided", () => {
+    const subapp = reduxBundlerLoadSubApp({
+      name: `test-${Date.now()}-1`
+    });
+    expect(subapp.__redux).to.equal(true);
+    expect(subapp._genReduxCreateStore).to.equal("subapp");
+    expect(subapp.reduxCreateStore).to.be.ok;
+  });
+
+  it("should keep user provided reduxCreateStore", () => {
+    const subapp = reduxBundlerLoadSubApp({
+      name: `test-${Date.now()}-2`,
+      reduxCreateStore: () => {}
+    });
+    expect(subapp.__redux).to.equal(true);
+    expect(subapp._genReduxCreateStore).to.equal(undefined);
+  });
+});
diff --git a/packages/subapp-pbundle/test/spec/ssr-framework.spec.js b/packages/subapp-pbundle/test/spec/ssr-framework.spec.js
@@ -1,10 +1,12 @@
+/** @jsx h */
+
 "use strict";
 
-/** @jsx h */
-// const url = require("url");
 const { h } = require("preact"); // eslint-disable-line
 const lib = require("../../lib");
 
+const { expectErrorHas, asyncVerify } = require("run-verify");
+
 describe("SSR Preact framework", function() {
   it("should setup React framework", () => {
     expect(lib.preact).to.be.ok;
@@ -141,4 +143,42 @@ describe("SSR Preact framework", function() {
     expect(res).contains(`<div>IS_SSR: true HAS_REQUEST: yes</div>`);
     expect(request.foo).equals("bar");
   });
+
+  it("handlePrepare should throw error if trying to use react router", () => {
+    const framework = new lib.FrameworkLib({
+      subApp: {
+        useReactRouter: true
+      },
+      subAppServer: {}
+    });
+    return asyncVerify(
+      expectErrorHas(
+        async () => await framework.handlePrepare(),
+        "react router is not yet supported"
+      )
+    );
+  });
+
+  it("handlePrepare should prepare redux data and store", async () => {
+    const framework = new lib.FrameworkLib({
+      subApp: {
+        __redux: true,
+        reduxCreateStore() {
+          return { testStore: true };
+        }
+      },
+      subAppServer: {
+        StartComponent: () => {},
+        async prepare() {
+          return { hello: "world" };
+        }
+      },
+      context: {
+        user: {}
+      }
+    });
+
+    const store = await framework.handlePrepare();
+    expect(store.testStore).to.equal(true);
+  });
 });
diff --git a/packages/subapp-server/src/index-page.jsx b/packages/subapp-server/src/index-page.jsx
@@ -6,6 +6,7 @@ const RenderSubApps = (props, context) => {
   const { routeOptions } = context.user;
   const { subApps } = routeOptions.__internals;
 
+  const elementId = props.inline ? undefined : `subapp-${subapp.name}-${ix}`;
   return (
     subApps &&
     subApps.length > 0 &&
@@ -19,7 +20,7 @@ const RenderSubApps = (props, context) => {
           Object.assign(
             {
               _concurrent: true,
-              elementId: `subapp-${subapp.name}-${ix}`,
+              elementId,
               timestamp: true,
               streaming: false,
               async: true,

diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
@@ -201,14 +201,18 @@ module.exports = function setup(setupContext, { props: options }) {
         // add the div for the Node and the SSR content to it, and add JS to start the
         // sub app on load.
         let elementId = "";
-        if (options.elementId) {
+        if (!options.inline && options.elementId) {
           elementId = `elementId:"${options.elementId}",\n `;
           outputSpot.add(`<div id="${options.elementId}">`);
           outputSpot.add(ssrContent); // must add by itself since this could be a stream
           outputSpot.add(`</div>`);
         } else {
-          outputSpot.add("<!-- no elementId for starting subApp on load -->\n");
-          outputSpot.add(ssrContent);
+          outputSpot.add("<!-- inline or no elementId for starting subApp on load -->");
+          if (ssrContent) {
+            outputSpot.add("\n");
+            outputSpot.add(ssrContent);
+            outputSpot.add("\n");
+          }
         }
 
         let dynInitialState = "";
@@ -227,11 +231,13 @@ ${initialStateStr}
           initialStateScript = `JSON.parse(document.getElementById("${dataId}").innerHTML)`;
         }
 
+        const inlineStr = options.inline ? `inline:${options.inline},\n ` : "";
+        const groupStr = options.group ? `group:"${options.group}",\n ` : "";
         outputSpot.add(`
 ${dynInitialState}<script>${xarc}.startSubAppOnLoad({
  name:"${name}",
  ${elementId}serverSideRendering:${Boolean(options.serverSideRendering)},
- clientProps:${clientProps},
+ ${inlineStr}${groupStr}clientProps:${clientProps},
  initialState:${initialStateScript}
 });</script>
 `);
@@ -280,15 +286,32 @@ ${stack}
           const lib = util.getFramework(ref);
           ssrInfo.awaitData = lib.handlePrepare();
 
-          ssrInfo.renderSSR = async () => {
-            try {
-              outputSSRContent(await lib.handleSSR(ref), lib.initialStateStr);
-            } catch (err) {
-              handleError(err);
-            } finally {
-              closeOutput();
-            }
-          };
+          ssrInfo.defer = true;
+
+          if (!options.inline) {
+            ssrInfo.renderSSR = async () => {
+              try {
+                outputSSRContent(await lib.handleSSR(ref), lib.initialStateStr);
+              } catch (err) {
+                handleError(err);
+              } finally {
+                closeOutput();
+              }
+            };
+          } else {
+            ssrInfo.saveSSRInfo = () => {
+              try {
+                // output load without SSR content
+                outputSSRContent("", lib.initialStateStr);
+                ssrInfo.lib = lib;
+                _.set(request.app, ["xarcInlineSSR", name], ssrInfo);
+              } catch (err) {
+                handleError(err);
+              } finally {
+                closeOutput();
+              }
+            };
+          }
         } else {
           outputSSRContent("");
         }
@@ -305,7 +328,7 @@ ${stack}
         } catch (err) {
           handleError(err);
         } finally {
-          if (!ssrInfo.renderSSR) {
+          if (!ssrInfo.defer) {
             closeOutput();
           }
         }

diff --git a/packages/subapp-web/lib/start.js b/packages/subapp-web/lib/start.js
@@ -27,13 +27,16 @@ module.exports = function setup() {
               // and then wait for it to complete data prepare
               // awaitData should be available once ready is awaited
               await info.awaitData;
+              if (info.saveSSRInfo) {
+                info.saveSSRInfo();
+              }
             },
             { concurrency }
           );
 
           // finally kick off rendering for every subapp in the group
           await xaa.map(
-            queue,
+            queue.filter(x => x.renderSSR),
             async ({ renderSSR }) => {
               if (renderSSR) await renderSSR();
             },

diff --git a/samples/poc-subapp-pbx/.browserslistrc b/samples/poc-subapp-pbx/.browserslistrc
@@ -0,0 +1,4 @@
+# Browsers that we support
+last 2 versions
+ie >= 11
+> 5%
diff --git a/samples/poc-subapp-pbx/.editorconfig b/samples/poc-subapp-pbx/.editorconfig
@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/samples/poc-subapp-pbx/.eslintrc.js b/samples/poc-subapp-pbx/.eslintrc.js
@@ -0,0 +1,11 @@
+var path = require("path");
+var archetype = require("electrode-archetype-react-app/config/archetype");
+var archetypeEslint = path.join(archetype.config.eslint, ".eslintrc-react");
+
+function dotify(p) {
+  return path.isAbsolute(p) ? p : "." + path.sep + p;
+}
+
+module.exports = {
+  extends: dotify(path.relative(__dirname, archetypeEslint))
+};
diff --git a/samples/poc-subapp-pbx/.gitattributes b/samples/poc-subapp-pbx/.gitattributes
@@ -0,0 +1 @@
+* text=auto