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

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,

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";

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",

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;
 

samples/subapp2-store/src/subapps/main-body.tsx

@@ -5,6 +5,9 @@ import { reactRouterFeature, Route, Switch } from "@xarc/react-router";
 import { Navigation } from "../components/navigation";
 import { Products } from "../components/products";
 
+
+
+
 const MainBody = props => {
   return <div>Home</div>;
 };
@@ -52,7 +55,7 @@ export const subapp: ReactSubApp = {
     reduxFeature({
       React,
       shareStore: true,
-      reducers: x => x,
+      reducers: true,
       // provider({ Component, props }) {}
       prepare: async initialState => {
         xarcV2.debug("Home (home.tsx) subapp redux prepare, initialState:", initialState);
@@ -107,10 +110,29 @@ export const subapp: ReactSubApp = {
       }
     }),
     // https://reactrouter.com/
-    reactRouterFeature({ React })
+    reactRouterFeature({ React, history: true })
     // TODO: https://react-query.tanstack.com/docs/overview
     // reactQueryFeature({})
     // TODO: https://recoiljs.org/
     // recoilFeature({})
   ]
 };
+
+export const reduxReducers = {
+  number: (store, action) => {
+    if (action.type === "INC_NUMBER") {
+      return {
+        value: store.value + 1
+      };
+    } else if (action.type === "DEC_NUMBER") {
+      return {
+        value: store.value - 1
+      };
+    }
+
+    return store || { value: 999 };
+  },
+  items: s => {
+    return s || { items: [] };
+  }
+};