navigate from react-router available in redux-saga context (#922)

Author: jancajthaml

bootstrap/src/component/Entrypoint.jsx

@@ -19,7 +19,7 @@ const Sink = (props) => {
   return <Module name={entrypoint}>{children}</Module>;
 };
 
-const router = createBrowserRouter([{ path: "*", element: <Sink />, errorElement: <Yank /> }], { basename: "/" });
+export const router = createBrowserRouter([{ path: "*", element: <Sink />, errorElement: <Yank /> }], { basename: "/" });
 
 const Entrypoint = (props) => {
   const entrypoint = useSelector(getEntrypoint);

bootstrap/src/component/Main.jsx

@@ -8,7 +8,7 @@ import { constants, getStore, manualCleanup } from "@lastui/rocker/platform";
 import { getIsInitialized, getLanguage } from "../selector";
 import setupStore from "../store";
 
-import Entrypoint from "./Entrypoint";
+import Entrypoint, { router } from "./Entrypoint";
 import Globalisation from "./Globalisation";
 
 const FullyInitializedGate = (props) => {
@@ -27,7 +27,7 @@ const Main = (props) => {
 
   const manualInit = useCallback(() => {
     try {
-      const store = setupStore(props.fetchContext, props.reduxMiddlewares);
+      const store = setupStore(router, props.fetchContext, props.reduxMiddlewares);
       store.dispatch({
         type: constants.SET_LANGUAGE,
         payload: {

bootstrap/src/component/__tests__/Main.test.jsx

@@ -47,7 +47,7 @@ const mockStore = configureStore([])((actions) => {
 
 setStore(mockStore);
 
-jest.mock("../../store", () => (fetchContext) => {
+jest.mock("../../store", () => (_router, fetchContext, _bootstrapMiddlewares) => {
   fetchContext();
   return mockStore;
 });

bootstrap/src/store/__test__/index.test.js

@@ -3,16 +3,26 @@ import setupStore from "..";
 describe("store", () => {
   const ORIGINAL_NODE_ENV = process.env.NODE_ENV;
 
+  const fetchContext = jest.fn();
+  const mockRouter = { navigate: jest.fn() };
+
+  beforeAll(() => {
+    mockRouter.navigate.mockClear();
+    fetchContext.mockClear();
+  });
+
   afterAll(() => {
     process.env.NODE_ENV = ORIGINAL_NODE_ENV;
     delete top.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
     delete global.BUILD_ID;
   });
 
   it("initialises properly", async () => {
-    const fetchContext = jest.fn();
-    const store = await setupStore(fetchContext);
+    const store = await setupStore(mockRouter, fetchContext);
     expect(store).toBeDefined();
+
+    expect(fetchContext).toHaveBeenCalled();
+    expect(mockRouter.navigate).toHaveBeenCalled();
   });
 
   it("accepts middlewares provided via bootstrap", async () => {
@@ -21,8 +31,7 @@ describe("store", () => {
       spy(action);
       return next(action);
     };
-    const fetchContext = jest.fn();
-    const store = await setupStore(fetchContext, [customMiddleware]);
+    const store = await setupStore(mockRouter, fetchContext, [customMiddleware]);
     expect(store).toBeDefined();
 
     const action = { type: "test-probe" };
@@ -36,7 +45,7 @@ describe("store", () => {
     top.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.mockReturnValue(() => {});
     process.env.NODE_ENV = "development";
     const fetchContext = jest.fn();
-    const store = await setupStore(fetchContext, []);
+    const store = await setupStore(mockRouter, fetchContext, []);
     expect(store).toBeDefined();
     expect(top.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__).toHaveBeenCalledWith(expect.objectContaining({ name: "rocker-xxx" }));
   });

bootstrap/src/store/index.js

@@ -15,11 +15,14 @@ import {
 import { runtimeReducer } from "../reducer";
 import { watchRefresh, watchFetchContext, watchBootstrap } from "../saga";
 
-export default (fetchContext, bootstrapMiddlewares) => {
+export default (router, fetchContext, bootstrapMiddlewares) => {
   const dynamicMiddleware = createDynamicMiddleware();
   const loaderMiddleware = createLoaderMiddleware();
   const { sagaMiddleware, runSaga } = createSagaMiddleware({
     context: {
+      async navigate(to, options) {
+        await router.navigate(to, options);
+      },
       async fetchContext() {
         const ctx = await fetchContext();
         return {

jest/__mocks__/platform.js

@@ -46,6 +46,9 @@ module.exports = {
     if (options?.context?.fetchContext) {
       options.context.fetchContext();
     }
+    if (options?.context?.navigate) {
+      options.context.navigate();
+    }
     const channel = ReduxSaga.stdChannel();
     return {
       sagaMiddleware: (_store) => (next) => (action) => next(action),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastui/rocker",
-  "version": "0.19.18",
+  "version": "0.19.19",
   "license": "Apache-2.0",
   "author": "[email protected]",
   "homepage": "https://github.com/lastui/rocker#readme",

webpack/config/module/development.js

@@ -284,7 +284,7 @@ config.plugins.push(
               fragment._source._sourceMapAsObject.sourcesContent.forEach((sourceCode) => {
                 const ast = parser.parse(sourceCode, {
                   sourceType: "module",
-                  plugins: ["jsx"],
+                  plugins: ["jsx", "typescript"],
                 });
 
                 traverse(ast, {