fix: pass props to subapps through lazyloaded subapp (#1949)

* [minor] pass props in lazyloadsubapp * [minor] lazyloadsubapp accept props --------- Co-authored-by: Shubham sharma <[email protected]>
electrode-io · Mar 2, 2023 · 43da556 · 43da556
1 parent 36d4359
commit 43da556
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/packages/subapp-server/test/spec/fastify-plugin.spec.js b/packages/subapp-server/test/spec/fastify-plugin.spec.js
@@ -2,14 +2,14 @@
 
 const { fastifyPlugin } = require("../../lib/fastify-plugin");
 const Path = require("path");
-const { runFinally, asyncVerify, runTimeout } = require("run-verify");
+const { runFinally, runVerify, runTimeout } = require("run-verify");
 const http = require("http");
 
 describe("fastify-plugin", function () {
   it("loads server from file system", async () => {
     const server = await require("@xarc/fastify-server")({
       deferStart: true,
-      connection: { port: 0, host: "localhost" }
+      connection: { port: 3011, host: "localhost" }
     });
 
     const srcDir = Path.join(__dirname, "../data/fastify-plugin-test");
@@ -28,7 +28,7 @@ describe("fastify-plugin", function () {
       stats: Path.join(__dirname, "../data/fastify-plugin-test/stats.json")
     };
 
-    return asyncVerify(
+    return runVerify(
       runTimeout(4500),
       () => fastifyPlugin(server, opt),
       () => server.start(),
@@ -71,7 +71,7 @@ describe("fastify-plugin", function () {
       stats: Path.join(__dirname, "../data/fastify-plugin-test/stats.json")
     };
 
-    return asyncVerify(
+    return runVerify(
       runTimeout(4500),
       () => fastifyPlugin(server, opt),
       () => server.start(),
@@ -108,20 +108,30 @@ describe("fastify-plugin", function () {
       }
     });
 
-    asyncVerify(
+    return runVerify(
       () => fastifyPlugin(server, {}),
       () => server.start(),
-      () => {
-        http.get("http://localhost:3002/", res => {
-          expect(res.statusCode).to.equal(200);
-          let data = "";
-          res.on("data", chunk => (data += chunk));
-          res.on("done", () => {
-            expect(data.to.contain("Hello World"));
+      async () => {
+        const res = await server.inject({
+          method: "GET",
+          url: `http://localhost:3002/`
+        });
+        expect(res.statusCode).to.equal(200);
+        let data = "";
+        res.on("data", chunk => (data += chunk));
+        res.on("done", () => {
+          expect(data.to.contain("Hello World"));
+        });
+        http.get("http://localhost:3002/", response => {
+          expect(response.statusCode).to.equal(200);
+          let d = "";
+          response.on("data", chunk => (d += chunk));
+          response.on("done", () => {
+            expect(d.to.contain("Hello World"));
           });
         });
       },
       runFinally(() => server.close())
     );
-  });
+  }).timeout(5000);
 });
diff --git a/packages/subapp-web/src/index.js b/packages/subapp-web/src/index.js
@@ -91,6 +91,9 @@ export function loadSubApp(info, renderStart, options) {
   subApp.start = (instance, options, info) => {
     instance = instance || subApp.preStart(instance, options, info);
     info = info || subApp.info;
+    if (!instance.props) {
+      instance.props = options.props;
+    }
     // if user provided a start function, then user is expected to
     // have reference to info
     const callStart = () => {
@@ -184,7 +187,7 @@ export function isLoaded(name) {
   return Boolean(xarc.getSubApp(name));
 }
 
-export function lazyLoadSubApp({ name, id, timeout = 15000, onLoad, onError, fallback, ns }) {
+export function lazyLoadSubApp({ name, id, timeout = 15000, onLoad, onError, fallback, ns, props }) {
   // TODO: timeout and callback
   const lname = name.toLowerCase();
 
@@ -194,7 +197,7 @@ export function lazyLoadSubApp({ name, id, timeout = 15000, onLoad, onError, fal
     } else {
       const element = document.getElementById(id);
       if (element && subApp.start) {
-        return subApp.start(instance, { id });
+        return subApp.start(instance, { id, props });
       }
     }
   };

diff --git a/samples/poc-subapp-redux/src/components/deals.jsx b/samples/poc-subapp-redux/src/components/deals.jsx
@@ -14,22 +14,23 @@ class SubApp extends React.Component {
     if (typeof window === "undefined") {
       return "";
     }
-    const { name } = this.props;
+    const { name, ...rest } = this.props;
 
     const subapp = xarc.getSubApp(name);
     if (xarc.getBundle(name) && subapp) {
       return (
         <div className="col-sm-4">
           <div className="panel panel-primary">
-            <div className="panel-body">{subapp.start(null, { props: this.props })}</div>
+            <div className="panel-body">{subapp.start(null, { props: rest })}</div>
           </div>
         </div>
       );
     } else {
       const onLoad = () => this.setState({ ready: true });
       dynamicLoadSubApp({
         name: "Deal",
-        onLoad
+        onLoad,
+        props: rest
       });
 
       // if not, return loadingComponent
@@ -39,9 +40,9 @@ class SubApp extends React.Component {
 }
 
 const DealSubApp = props => {
-  const { id } = props;
+  const { id, ...rest } = props;
 
-  dynamicLoadSubApp({ name: "Deal", id });
+  dynamicLoadSubApp({ name: "Deal", id, props: rest });
 
   return (
     <div className="col-sm-4">
@@ -94,7 +95,7 @@ Deals.propTypes = {
 };
 
 const mapStateToProps = state => {
-  return { value: state.number.value };
+  return { value: state.number };
 };
 
 const ReduxDeals = connect(mapStateToProps, dispatch => ({ dispatch }))(Deals);