Fix subapp namespacing issues (#1795)

- pass namespace for the generated markBundlesLoaded script - allow namespace as option for bundleAsset script id so that app can be run in standalone mode as well as integration mode. - use the correct state while calling xarc.setBundle - State can be either 0 or 1 instead of boolean - use setBundle instead of directly touching runtimeInfo.bundles - add/update tests for the same.
electrode-io · Jan 27, 2021 · 1c37fc7 · 1c37fc7
1 parent a684d0a
commit 1c37fc7
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 8 deletions.
diff --git a/packages/subapp-web/lib/init.js b/packages/subapp-web/lib/init.js
@@ -47,6 +47,8 @@ module.exports = function setup(setupContext) {
     ? Fs.readFileSync(Path.join(__dirname, distDir, "webpack4-jsonp.js")).toString()
     : "";
 
+  const namespace = _.get(setupContext, "routeOptions.namespace");
+
   let inlineRuntimeJS = "";
   let runtimeEntryPoints = [];
   if (process.env.NODE_ENV === "production") {
@@ -63,10 +65,14 @@ module.exports = function setup(setupContext) {
         .replace(/\/\/#\ssourceMappingURL=.*$/, "") +
       "/*rt*/";
 
-    inlineRuntimeJS += `\nwindow.xarcV1.markBundlesLoaded(${JSON.stringify(runtimeEntryPoints)});`;
+    inlineRuntimeJS += `\nwindow.xarcV1.markBundlesLoaded(${JSON.stringify(runtimeEntryPoints)}${
+      namespace ? ", " + JSON.stringify(namespace) : ""
+    });`;
   }
 
-  const webSubAppJs = `<script id="bundleAssets" type="application/json">
+  const scriptId = namespace ? namespace : "bundle";
+
+  const webSubAppJs = `<script id="${scriptId}Assets" type="application/json">
 ${JSON.stringify(bundleAssets)}
 </script>
 <script>/*LJ*/${loadJs}/*LJ*/

diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
@@ -331,12 +331,16 @@ ${stack}`,
       };
 
       const processSubapp = async () => {
+        const namespace = setupContext.routeOptions.namespace;
+
         context.user.numOfSubapps++;
         const { bundles, scripts, preLoads } = await prepareSubAppSplitBundles(context);
         outputSpot.add(`${comment}`);
         if (bundles.length > 0) {
           outputSpot.add(`${scripts}
-<script>${xarc}.markBundlesLoaded(${JSON.stringify(bundles)});</script>
+<script>${xarc}.markBundlesLoaded(${JSON.stringify(bundles)}${
+            namespace ? ", " + JSON.stringify(namespace) : ""
+          });</script>
 `);
         }
         if (preLoads.length > 0) {

diff --git a/packages/subapp-web/src/index.js b/packages/subapp-web/src/index.js
@@ -23,7 +23,7 @@ export function loadSubApp(info, renderStart, options) {
 
   // mark the subapp's webpack bundle as loaded
   if (!xarc.getBundle(name, ns)) {
-    xarc.setBundle(name, true, ns);
+    xarc.setBundle(name, 1, ns);
   }
 
   // subapp already loaded, do nothing and return the info

diff --git a/packages/subapp-web/src/subapp-web.js b/packages/subapp-web/src/subapp-web.js
@@ -1,6 +1,6 @@
 // xarc subapp client side lib version 1
 // load into window.xarcV1 as a global
-(function(w) {
+(function (w) {
   if (!w._wml) {
     w._wml = {};
   }
@@ -379,7 +379,7 @@
         loadjs(new_assets, id, {
           success: () => {
             console.log(`loaded asset for ${name} (id: ${id}) - ${assets}`);
-            runtimeInfo.bundles[id]++;
+            xv1.setBundle(id, 1, namespace);
             afterLoad();
           },
           error: () => {

diff --git a/packages/subapp-web/test/spec/index.spec.js b/packages/subapp-web/test/spec/index.spec.js
@@ -11,7 +11,7 @@ const expect = chai.expect;
 
 let clock;
 
-describe("subapp-web", function() {
+describe("subapp-web", function () {
   beforeEach(() => {
     const dom = new JSDOM("");
     clock = sinon.useFakeTimers();
@@ -161,7 +161,7 @@ describe("subapp-web", function() {
 
     expect(xarc.rt.bundles).to.deep.equal({
       "test-namespace": {
-        testsubapp: true
+        testsubapp: 1
       }
     });
     expect(subApp._started).to.exist;

diff --git a/packages/subapp-web/test/spec/init.spec.js b/packages/subapp-web/test/spec/init.spec.js
@@ -41,6 +41,34 @@ describe("init", function () {
     expect(initJs).contains(`<script>/*LJ*/`);
   });
 
+  it("should return assets as JSON script and loadJs for a given namespace", () => {
+    // point subapp-util to look for subapps under a test dir
+    process.env.APP_SRC_DIR = "test/subapps";
+
+    const initToken = init({
+      routeOptions: {
+        namespace: "testNameSpace",
+        __internals: {
+          subApps: [
+            {
+              subapp: {
+                name: "mainbody"
+              }
+            }
+          ]
+        },
+        cdn: {},
+        stats: Path.join(__dirname, "../data/prod-stats.json")
+      }
+    });
+
+    const context = { user: {} };
+    const initJs = initToken.process(context);
+    expect(context.user.assets).to.be.ok;
+    expect(initJs).contains(`<script id="testNameSpaceAssets" type="application/json">`);
+    expect(initJs).contains(`<script>/*LJ*/`);
+  });
+
   it("it should load runtime.bundle.js inline and mark includedBundles.runtime to true", () => {
     resetCdn();
     process.env.NODE_ENV = "production";
@@ -78,4 +106,45 @@ describe("init", function () {
       runFinally(() => process.chdir(originalWd))
     );
   });
+
+  it("it should load runtime.bundle.js inline and mark includedBundles.runtime to true for a given namespace", () => {
+    resetCdn();
+    process.env.NODE_ENV = "production";
+    const originalWd = process.cwd();
+    process.chdir(Path.join(__dirname, "../subapps"));
+    process.env.APP_SRC_DIR = "subapp1/..";
+
+    const initToken = init({
+      routeOptions: {
+        namespace: "testNameSpace",
+        __internals: {
+          subApps: [
+            {
+              subapp: {
+                name: "mainbody"
+              }
+            }
+          ]
+        },
+        cdn: {},
+        prodBundleBase: "/js",
+        stats: Path.join(__dirname, "../data/prod-stats.json")
+      }
+    });
+
+    return asyncVerify(
+      () => {
+        const context = { user: {} };
+        const initJs = initToken.process(context);
+        expect(Object.keys(context.user.includedBundles).length).to.equal(1);
+        const loadedBundles = Object.keys(context.user.includedBundles);
+        const markLoadedStr = `markBundlesLoaded(${JSON.stringify(
+          loadedBundles
+        )}, "testNameSpace")`;
+        expect(initJs).to.contain(markLoadedStr);
+        expect(initJs).to.contain("/* placeholder */");
+      },
+      runFinally(() => process.chdir(originalWd))
+    );
+  });
 });