support join SubApp and DynSubApp as a single component

packages/subapp-web/lib/index.js

@@ -7,6 +7,7 @@ const { registerSubApp } = require("subapp-util");
 const { default: makeSubAppSpec } = require("../dist/node/make-subapp-spec");
 
 const { setupFramework } = require("./util");
+const lazyLoadSubApp = () => {};
 
 module.exports = {
   // isomorphic functions
@@ -16,8 +17,10 @@ module.exports = {
 
   setupFramework,
 
-  // dynamic load subapp is only for client side
-  dynamicLoadSubApp: () => {},
+  // lazy load subapp is only for client side
+  lazyLoadSubApp,
+  dynamicLoadSubApp: lazyLoadSubApp,
+
   getBrowserHistory: () => undefined,
 
   // server side template token processing modules

packages/subapp-web/src/index.js

@@ -109,29 +109,47 @@ export function loadSubApp(info, renderStart, options) {
     }
   };
 
+  const findInstanceInGroup = (groupInfo, group, name) => {
+    return groupInfo.queue.find(x => {
+      if (x.options.name === name && x.options.group === group && x.options.inline) {
+        return x.instance;
+      }
+      return undefined;
+    });
+  };
+
+  const findFirstGroup = ({ name }) => {
+    for (let k in xarc.rt.groups) {
+      const groupInfo = xarc.rt.groups[k];
+      return findInstanceInGroup(groupInfo, groupInfo.group, name);
+    }
+  };
+
   subApp.inline = ({ group, props }) => {
-    const groupInfo = xarc.rt.groups[group];
     const fail = msg => {
       console.error(msg);
       return `<!--
 ****** ${msg}
 -->`;
     };
 
-    if (!groupInfo) {
-      return fail(`subApp inline unable to find group ${group}`);
-    }
+    let found;
 
-    const found = groupInfo.queue.find(x => {
-      if (x.options.name === subApp.info.name && x.options.group === group && x.options.inline) {
-        return x.instance;
+    if (group) {
+      const groupInfo = xarc.rt.groups[group];
+      if (!groupInfo) {
+        return fail(`subApp inline unable to find group ${group}`);
       }
-      return undefined;
-    });
-
-    if (!found) {
-      return fail(`subApp inline unable to find instance in group ${group} \
+      found = findInstanceInGroup(groupInfo, group, subApp.info.name);
+      if (!found) {
+        return fail(`subApp inline unable to find instance in group ${group} \
 for subapp ${subApp.info.name}`);
+      }
+    } else {
+      found = findFirstGroup(props);
+      if (!found) {
+        return fail(`subApp inline unable to find a group with instance for subApp ${name}`);
+      }
     }
 
     return subApp.start(found.instance, Object.assign({}, found.options, { props }), found.info);
@@ -151,7 +169,7 @@ export function getSubAppComponent({ name, timeout = 15000, onReady, onError, fa
 
 export function waitForSubApp(name, timeout = 15000) {
   return new Promise((resolve, reject) => {
-    dynamicLoadSubApp({
+    lazyLoadSubApp({
       name,
       onLoad: () => resolve(),
       onError: () => reject(),
@@ -164,7 +182,7 @@ export function isLoaded(name) {
   return Boolean(xarc.getSubApp(name));
 }
 
-export function dynamicLoadSubApp({ name, id, timeout = 15000, onLoad, onError, fallback }) {
+export function lazyLoadSubApp({ name, id, timeout = 15000, onLoad, onError, fallback }) {
   // TODO: timeout and callback
   const lname = name.toLowerCase();
 
@@ -206,7 +224,7 @@ export function dynamicLoadSubApp({ name, id, timeout = 15000, onLoad, onError,
       }
 
       if (timeout > 50 && Date.now() - startTime > timeout) {
-        return onError(new Error("dynamicLoadSubApp Timeout"));
+        return onError(new Error("lazyLoadSubApp Timeout"));
       }
 
       return load(50);
@@ -218,6 +236,8 @@ export function dynamicLoadSubApp({ name, id, timeout = 15000, onLoad, onError,
   return fallback;
 }
 
+export { lazyLoadSubApp as dynamicLoadSubApp };
+
 export function getBrowserHistory() {
   if (!xarc.rt.history) xarc.rt.history = createBrowserHistory();
   return xarc.rt.history;

packages/subapp-web/test/spec/index.spec.js

@@ -33,34 +33,37 @@ describe("subapp-web", function() {
     delete global.document;
   });
 
-  it("dynamicLoadSubApp should return inline if no id or onLoad are specified and both subapp and bundle are available", () => {
+  it("lazyLoadSubApp should return inline if no id or onLoad are specified and both subapp and bundle are available", () => {
     require("../../src/subapp-web");
     const xarc = require("../../src/xarc").default;
     const index = require("../../src/index");
     require("../../src/subapp-web");
-    xarc.setSubApp("phantom-subapp", {start: () => "test string"});
+    xarc.setSubApp("phantom-subapp", { start: () => "test string" });
     xarc.setBundle("phantom-subapp", {});
-    const ret = index.dynamicLoadSubApp({name: "phantom-subapp"});
+    const ret = index.lazyLoadSubApp({ name: "phantom-subapp" });
     expect(ret).to.equal("test string");
   });
 
-  it("dynamicLoadSubApp should run onLoad if it is specified but not id and both subapp and bundle are available", async () => {
+  it("lazyLoadSubApp should run onLoad if it is specified but not id and both subapp and bundle are available", async () => {
     let called = false;
     mockRequire("../../src/xarc", {
       getBundle: () => true,
       getSubApp: () => true,
       startSubApp: () => Promise.resolve()
     });
     const index = require("../../src/index");
-    index.dynamicLoadSubApp({name: "phantom-subapp", onLoad: () => {
-      called = true;
-    }});
+    index.lazyLoadSubApp({
+      name: "phantom-subapp",
+      onLoad: () => {
+        called = true;
+      }
+    });
     expect(called).to.equal(false);
     await clock.runAll();
     expect(called).to.equal(true);
   });
 
-  it("dynamicLoadSubApp should call loadSubAppBundles if the bundle is not available", async () => {
+  it("lazyLoadSubApp should call loadSubAppBundles if the bundle is not available", async () => {
     let called = false;
     global.window = {};
     mockRequire("../../src/xarc", {
@@ -70,11 +73,11 @@ describe("subapp-web", function() {
       }
     });
     const index = require("../../src/index");
-    index.dynamicLoadSubApp({name: "phantom-subapp"});
+    index.lazyLoadSubApp({ name: "phantom-subapp" });
     expect(called).to.equal(true);
   });
 
-  it("dynamicLoadSubApp should run subapp.start if id is specified", async () => {
+  it("lazyLoadSubApp should run subapp.start if id is specified", async () => {
     let called = false;
     global.window = {};
     global.document = {
@@ -90,7 +93,7 @@ describe("subapp-web", function() {
       startSubApp: () => Promise.resolve()
     });
     const index = require("../../src/index");
-    index.dynamicLoadSubApp({name: "phantom-subapp", id: "test-id"});
+    index.lazyLoadSubApp({ name: "phantom-subapp", id: "test-id" });
     expect(called).to.equal(false);
     await clock.runAll();
     expect(called).to.equal(true);
@@ -152,9 +155,11 @@ describe("subapp-web", function() {
     require("../../src/subapp-web");
     const xarc = require("../../src/xarc").default;
     const index = require("../../src/index");
-    index.setupFramework(class {
-      renderStart() {}
-    });
+    index.setupFramework(
+      class {
+        renderStart() {}
+      }
+    );
     const subAppInfo = {
       name: "testsubapp",
       Component: () => "asdf"
@@ -168,16 +173,22 @@ describe("subapp-web", function() {
       preStartCalled = true;
       return {};
     };
-    subApp.preRender = () => { preRenderCalled = true; };
-    subApp.signalReady = () => { signalReadyCalled = true; };
-    subApp.start = () => { startCalled = true; };
+    subApp.preRender = () => {
+      preRenderCalled = true;
+    };
+    subApp.signalReady = () => {
+      signalReadyCalled = true;
+    };
+    subApp.start = () => {
+      startCalled = true;
+    };
     expect(preStartCalled).to.equal(false);
     expect(preRenderCalled).to.equal(false);
     expect(signalReadyCalled).to.equal(false);
     expect(startCalled).to.equal(false);
     await clock.runAll();
     clock.restore();
-    return new Promise((accept) => {
+    return new Promise(accept => {
       setTimeout(() => {
         expect(preStartCalled).to.equal(true);
         expect(preRenderCalled).to.equal(true);
@@ -198,7 +209,7 @@ describe("subapp-web", function() {
     };
     index.loadSubApp(subAppInfo);
     const subApp = xarc.getSubApp("testsubapp");
-    const instance = subApp.getInstance({id: "testid"});
+    const instance = subApp.getInstance({ id: "testid" });
     expect(instance).to.exist;
   });