[fix] shared router history for subapps (#1783)

electrode-io · Jan 14, 2021 · ef16d91 · ef16d91
1 parent b6717f1
commit ef16d91
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 160 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,146 +1,146 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Attach",
-      "port": 9229,
-      "request": "attach",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "pwa-node"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Ignite",
-      "cwd": "${workspaceFolder}/packages/electrode-ignite",
-      "program": "${workspaceFolder}/packages/electrode-ignite/cli/ignite.js",
-      "console": "integratedTerminal"
-    },
-    {
-      "type": "node",
-      "request": "attach",
-      "name": "Attach to Remote 127.0.0.1:9229",
-      "address": "127.0.0.1",
-      "port": 9229,
-      "localRoot": "${workspaceFolder}",
-      "remoteRoot": "${workspaceFolder}"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "electrode-react-webapp Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/electrode-react-webapp",
-      "program": "${workspaceFolder}/packages/electrode-react-webapp/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/electrode-react-webapp/test/spec"
-      ],
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "subapp-react Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/subapp-react",
-      "program": "${workspaceFolder}/packages/subapp-react/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/subapp-react/test/spec"
-      ],
-      "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",
-      "name": "subapp-util Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/subapp-util",
-      "program": "${workspaceFolder}/packages/subapp-util/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/subapp-util/test/spec"
-      ],
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "subapp-server Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/subapp-server",
-      "program": "${workspaceFolder}/packages/subapp-server/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/subapp-server/test/spec"
-      ],
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "subapp-redux Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/subapp-redux",
-      "program": "${workspaceFolder}/packages/subapp-redux/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/subapp-redux/test/spec"
-      ],
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "electrode-redux-router-engine Mocha Tests",
-      "cwd": "${workspaceFolder}/packages/electrode-redux-router-engine",
-      "program": "${workspaceFolder}/packages/electrode-redux-router-engine/node_modules/mocha/bin/_mocha",
-      "args": [
-        "-u",
-        "tdd",
-        "--timeout",
-        "999999",
-        "--colors",
-        "${workspaceFolder}/packages/electrode-redux-router-engine/test/spec"
-      ],
-      "internalConsoleOptions": "openOnSessionStart"
-    }
-  ]
-}
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Attach",
+        "port": 9229,
+        "request": "attach",
+        "skipFiles": ["<node_internals>/**"],
+        "type": "pwa-node"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Ignite",
+        "cwd": "${workspaceFolder}/packages/electrode-ignite",
+        "program": "${workspaceFolder}/packages/electrode-ignite/cli/ignite.js",
+        "console": "integratedTerminal"
+      },
+      {
+        "type": "node",
+        "request": "attach",
+        "name": "Attach to Remote 127.0.0.1:9229",
+        "address": "127.0.0.1",
+        "port": 9229,
+        "localRoot": "${workspaceFolder}",
+        "remoteRoot": "${workspaceFolder}"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "electrode-react-webapp Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/electrode-react-webapp",
+        "program": "${workspaceFolder}/packages/electrode-react-webapp/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/electrode-react-webapp/test/spec"
+        ],
+        "internalConsoleOptions": "openOnSessionStart"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "subapp-react Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/subapp-react",
+        "program": "${workspaceFolder}/packages/subapp-react/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/subapp-react/test/spec"
+        ],
+        "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",
+        "name": "subapp-util Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/subapp-util",
+        "program": "${workspaceFolder}/packages/subapp-util/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/subapp-util/test/spec"
+        ],
+        "internalConsoleOptions": "openOnSessionStart"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "subapp-server Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/subapp-server",
+        "program": "${workspaceFolder}/packages/subapp-server/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/subapp-server/test/spec"
+        ],
+        "internalConsoleOptions": "openOnSessionStart"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "subapp-redux Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/subapp-redux",
+        "program": "${workspaceFolder}/packages/subapp-redux/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/subapp-redux/test/spec"
+        ],
+        "internalConsoleOptions": "openOnSessionStart"
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "electrode-redux-router-engine Mocha Tests",
+        "cwd": "${workspaceFolder}/packages/electrode-redux-router-engine",
+        "program": "${workspaceFolder}/packages/electrode-redux-router-engine/node_modules/mocha/bin/_mocha",
+        "args": [
+          "-u",
+          "tdd",
+          "--timeout",
+          "999999",
+          "--colors",
+          "${workspaceFolder}/packages/electrode-redux-router-engine/test/spec"
+        ],
+        "internalConsoleOptions": "openOnSessionStart"
+      }
+    ]
+  }
diff --git a/packages/xarc-react-router/src/browser/react-router-browser.tsx b/packages/xarc-react-router/src/browser/react-router-browser.tsx
@@ -1,13 +1,13 @@
 import { SubAppDef, SubAppFeatureFactory } from "@xarc/subapp";
 import { Router, BrowserRouter } from "react-router-dom";
-import { createBrowserHistory } from "history";
-
 import { ReactRouterFeatureOptions, _id, _subId } from "../common";
-
+import { createBrowserHistory } from "history";
+let staticHistory;
 /**
  * Implement the component wrapping support for using react router on a subapp
  */
 export function reactRouterFeature(options: ReactRouterFeatureOptions): SubAppFeatureFactory {
+  console.log(`options.history ${options.history}`)
   const { createElement } = options.React; // eslint-disable-line
 
   const id = _id;
@@ -20,13 +20,16 @@ export function reactRouterFeature(options: ReactRouterFeatureOptions): SubAppFe
       let history: any;
       let TheRouter: any;
 
-      if (!options.history) {
+      if (!options.hasOwnProperty("history") || options.history === true) {
+        history = staticHistory || (staticHistory = createBrowserHistory());
+        TheRouter = Router;
+      } else if (!options.history) {
         TheRouter = BrowserRouter;
-      } else {
-        history = options.history === true ? createBrowserHistory() : options.history;
+      }
+      else {
+        history = options.history;
         TheRouter = Router;
       }
-
       subapp._features.reactRouter = {
         id,
         subId,

diff --git a/packages/xarc-react-router/src/common/index.ts b/packages/xarc-react-router/src/common/index.ts
@@ -11,11 +11,13 @@ export type ReactRouterFeatureOptions = {
   /**
    * The browser history object - custom browser history object and control which Router to use.
    *
-   * - If it's falsy, then `BrowserRouter` will be used.
-   * - If it's `true`, then `Router` is used with history from `createBrowserHistory` from https://www.npmjs.com/package/history
-   * - Otherwise it's assumed to be a history object and `Router` will be used with it.
+   * - If it's false, then `BrowserRouter` will be used and it will use its own history.
+   * - Note: BrowserRouter use its own history object and its not shared among other subapps
+   * - If it's `true`, then `Router` is used with history from `createBrowserHistory`
+   *   from https://www.npmjs.com/package/history and the same history object will be shared among all subapps
+   * - Otherwise it's assumed to be a history object and `Router` will be used with it. If its undefined then shared history object will be used for all subapps
    */
-  history?: boolean | BrowserHistory<object>; // eslint-disable-line @typescript-eslint/ban-types
+  history?: boolean | unknown; // eslint-disable-line @typescript-eslint/ban-types
 };
 
 export const _id = "router-provider";

diff --git a/samples/subapp2-store/package.json b/samples/subapp2-store/package.json
@@ -38,7 +38,7 @@
     "@xarc/react-router": "^0.1.0",
     "@xarc/subapp": "^0.1.1",
     "classnames": "^2.2.6",
-    "subapp-web": "^1.0.30"
+    "history": "4.10.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.6",

diff --git a/samples/subapp2-store/src/subapps/bottom.tsx b/samples/subapp2-store/src/subapps/bottom.tsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { Large } from "../components/large";
 import classNames from "classnames";
 import custom from "../styles/bootstrap.css";
-// import AdvGridList from "../components/adv-grid";
+
 
 const { withRouter } = ReactRouter;