diff --git a/.vscode/launch.json b/.vscode/launch.json index 334727ba9..deaed51fa 100644 --- 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": ["/**"], - "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": ["/**"], + "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" + } + ] + } \ No newline at end of file diff --git a/packages/xarc-react-router/src/browser/react-router-browser.tsx b/packages/xarc-react-router/src/browser/react-router-browser.tsx index d42cc9f76..b1272d0f7 100644 --- 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 index 16ccf3555..a7431a581 100644 --- 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; // 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 index 49bb1d773..33e4fa503 100644 --- 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 index 5d3f1a46e..36e63083f 100644 --- 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; diff --git a/samples/subapp2-store/src/subapps/main-body.tsx b/samples/subapp2-store/src/subapps/main-body.tsx index 87b0f5e4d..185365aee 100644 --- a/samples/subapp2-store/src/subapps/main-body.tsx +++ b/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
Home
; }; @@ -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: [] }; + } +};