@squide/firefly 16.1.12 → 16.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @squide/firefly
 
+## 16.2.1
+
+### Patch Changes
+
+- [#567](https://github.com/workleap/wl-squide/pull/567) [`5f16979`](https://github.com/workleap/wl-squide/commit/5f16979d9e922590fdca39be76e79dde54211efa) Thanks [@patricklafrance](https://github.com/patricklafrance)! - useDeferredRegistrations will now trigger a deferred registration update whenever the data object reference changes, even if no global data has been fetch or no feature flags changed.
+
+## 16.2.0
+
+### Minor Changes
+
+- [#559](https://github.com/workleap/wl-squide/pull/559) [`33b1cd6`](https://github.com/workleap/wl-squide/commit/33b1cd639ef97e9d9fc892918ab6cbd08e6b91e9) Thanks [@patricklafrance](https://github.com/patricklafrance)! - React Router loaders execution is now delayed until MSW is ready.
+
 ## 16.1.12
 
 ### Patch Changes

package/dist/AppRouter.d.ts

@@ -1,17 +1,21 @@
 import { type Route } from "@squide/react-router";
 import { type ReactElement } from "react";
+import { DataStrategyFunction, DataStrategyFunctionArgs, DOMRouterOpts } from "react-router";
 import type { RouterProviderProps } from "react-router/dom";
 import { type AppRouterState } from "./AppRouterReducer.ts";
+import { FireflyRuntime } from "./FireflyRuntime.tsx";
 export interface AppRouterRenderFunctionArgs {
     routes: Route[];
 }
 export interface RenderRouterProviderFunctionArgs {
     rootRoute: ReactElement;
     registeredRoutes: Route[];
+    routerProps: DOMRouterOpts;
     routerProviderProps: Omit<RouterProviderProps, "router">;
 }
 export type RenderRouterProviderFunction = (args: RenderRouterProviderFunctionArgs) => ReactElement;
 export declare function useCanRenderRouter({ areModulesRegistered, areModulesReady: areModulesReadyValue }: AppRouterState): boolean;
+export declare function createWaitForMswDataStrategy(runtime: FireflyRuntime): (args: DataStrategyFunctionArgs<unknown>) => ReturnType<DataStrategyFunction<unknown>>;
 export interface AppRouterProps {
     waitForPublicData?: boolean;
     waitForProtectedData?: boolean;

package/dist/AppRouter.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useLogger } from "@squide/core";
+import { useLogger, useRuntime } from "@squide/core";
 import { useRoutes } from "@squide/react-router";
 import { useEffect, useMemo } from "react";
 import { AppRouterDispatcherContext, AppRouterStateContext } from "./AppRouterContext.js";
@@ -37,7 +37,34 @@ function useCanRenderRouter({ areModulesRegistered, areModulesReady: areModulesR
     // depends on the protected data.
     areModulesRegistered || areModulesReadyValue);
 }
+// This is a custom React Router data strategy (https://reactrouter.com/api/data-routers/createMemoryRouter#optsdatastrategy)
+// to delay the execution of React Router data browser loaders until MSW is ready.
+// The data strategy implemention is copied from React Router default data strategy: https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/router.ts#L5710.
+function createWaitForMswDataStrategy(runtime) {
+    const strategy = async (args)=>{
+        await new Promise((resolve)=>{
+            if (runtime.mswState.isReady) {
+                resolve(null);
+            } else {
+                const handler = ()=>{
+                    runtime.mswState.removeMswReadyListener(handler);
+                    resolve(null);
+                };
+                runtime.mswState.addMswReadyListener(handler);
+            }
+        });
+        const matchesToLoad = args.matches.filter((m)=>m.shouldCallHandler);
+        const keyedResults = {};
+        const results = await Promise.all(matchesToLoad.map((m)=>m.resolve()));
+        results.forEach((result, i)=>{
+            keyedResults[matchesToLoad[i].route.id] = result;
+        });
+        return keyedResults;
+    };
+    return strategy;
+}
 function useRenderRouterProvider(state, renderRouterProvider, strictMode) {
+    const runtime = useRuntime();
     const routes = useRoutes();
     // The value is computed outside of the router provider memo to prevent
     // rendering a new router provider everytime the app router state change.
@@ -49,11 +76,15 @@ function useRenderRouterProvider(state, renderRouterProvider, strictMode) {
                     strictMode: strictMode
                 }),
                 registeredRoutes: routes,
+                routerProps: {
+                    dataStrategy: runtime.isMswEnabled ? createWaitForMswDataStrategy(runtime) : undefined
+                },
                 routerProviderProps: {}
             });
         }
         return null;
     }, [
+        runtime,
         canRenderRouter,
         routes,
         renderRouterProvider,
@@ -83,6 +114,6 @@ function AppRouter(props) {
     });
 }
 
-export { AppRouter, useCanRenderRouter };
+export { AppRouter, createWaitForMswDataStrategy, useCanRenderRouter };
 
 //# sourceMappingURL=AppRouter.js.map

package/dist/AppRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRouter.js","sources":["../src/AppRouter.tsx"],"sourcesContent":["import { useLogger } from \"@squide/core\";\nimport { useRoutes, type Route } from \"@squide/react-router\";\nimport { useEffect, useMemo, type ReactElement } from \"react\";\nimport type { RouterProviderProps } from \"react-router/dom\";\nimport { AppRouterDispatcherContext, AppRouterStateContext } from \"./AppRouterContext.ts\";\nimport { useAppRouterReducer, type AppRouterState } from \"./AppRouterReducer.ts\";\nimport { RootRoute } from \"./RootRoute.tsx\";\nimport { useStrictRegistrationMode } from \"./useStrictRegistrationMode.ts\";\n\nexport interface AppRouterRenderFunctionArgs {\n    routes: Route[];\n}\n\nexport interface RenderRouterProviderFunctionArgs {\n    rootRoute: ReactElement;\n    registeredRoutes: Route[];\n    routerProviderProps: Omit<RouterProviderProps, \"router\">;\n}\n\nexport type RenderRouterProviderFunction = (args: RenderRouterProviderFunctionArgs) => ReactElement;\n\nexport function useCanRenderRouter({ areModulesRegistered, areModulesReady: areModulesReadyValue }: AppRouterState) {\n    return (\n        // Wait until the modules has been registered, but do not wait for the deferred registrations to be registered has they will probably\n        // depends on the protected data.\n        (areModulesRegistered || areModulesReadyValue)\n    );\n}\n\nfunction useRenderRouterProvider(state: AppRouterState, renderRouterProvider: RenderRouterProviderFunction, strictMode: boolean) {\n    const routes = useRoutes();\n\n    // The value is computed outside of the router provider memo to prevent\n    // rendering a new router provider everytime the app router state change.\n    const canRenderRouter = useCanRenderRouter(state);\n\n    return useMemo(() => {\n        if (canRenderRouter) {\n            return renderRouterProvider({\n                rootRoute: <RootRoute strictMode={strictMode} />,\n                registeredRoutes: routes,\n                routerProviderProps: {}\n            });\n        }\n\n        return null;\n    }, [canRenderRouter, routes, renderRouterProvider, strictMode]);\n}\n\nexport interface AppRouterProps {\n    waitForPublicData?: boolean;\n    waitForProtectedData?: boolean;\n    strictMode?: boolean;\n    children: RenderRouterProviderFunction;\n}\n\nexport function AppRouter(props: AppRouterProps) {\n    const {\n        waitForPublicData = false,\n        waitForProtectedData = false,\n        strictMode = true,\n        children: renderRouterProvider\n    } = props;\n    const [state, dispatch] = useAppRouterReducer(waitForPublicData, waitForProtectedData);\n\n    const logger = useLogger();\n\n    useStrictRegistrationMode({\n        isEnabled: strictMode\n    });\n\n    useEffect(() => {\n        logger\n            .withText(\"[squide] AppRouter state has been updated to:\")\n            .withObject(state)\n            .debug();\n    }, [state, logger]);\n\n    const routerProvider = useRenderRouterProvider(state, renderRouterProvider, strictMode);\n\n    return (\n        <AppRouterDispatcherContext.Provider value={dispatch}>\n            <AppRouterStateContext.Provider value={state}>\n                {routerProvider}\n            </AppRouterStateContext.Provider>\n        </AppRouterDispatcherContext.Provider>\n    );\n}\n"],"names":["useLogger","useRoutes","useEffect","useMemo","AppRouterDispatcherContext","AppRouterStateContext","useAppRouterReducer","RootRoute","useStrictRegistrationMode","useCanRenderRouter","areModulesRegistered","areModulesReadyValue","useRenderRouterProvider","state","renderRouterProvider","strictMode","routes","canRenderRouter","AppRouter","props","waitForPublicData","waitForProtectedData","dispatch","logger","routerProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAyC;AACoB;AACC;AAE4B;AACT;AACrC;AAC+B;AAcpE,SAASS,mBAAmB,EAAEC,oBAAoB,EAAE,iBAAiBC,oBAAoB,EAAkB;IAC9G,OACI,qIAAqI;IACrI,iCAAiC;IAChCD,wBAAwBC;AAEjC;AAEA,SAASC,wBAAwBC,KAAqB,EAAEC,oBAAkD,EAAEC,UAAmB;IAC3H,MAAMC,SAASf,SAASA;IAExB,uEAAuE;IACvE,yEAAyE;IACzE,MAAMgB,kBAAkBR,mBAAmBI;IAE3C,OAAOV,OAAOA,CAAC;QACX,IAAIc,iBAAiB;YACjB,OAAOH,qBAAqB;gBACxB,yBAAW,IAACP,SAASA;oBAAC,YAAYQ;;gBAClC,kBAAkBC;gBAClB,qBAAqB,CAAC;YAC1B;QACJ;QAEA,OAAO;IACX,GAAG;QAACC;QAAiBD;QAAQF;QAAsBC;KAAW;AAClE;AASO,SAASG,UAAUC,KAAqB;IAC3C,MAAM,EACFC,oBAAoB,KAAK,EACzBC,uBAAuB,KAAK,EAC5BN,aAAa,IAAI,EACjB,UAAUD,oBAAoB,EACjC,GAAGK;IACJ,MAAM,CAACN,OAAOS,SAAS,GAAGhB,mBAAmBA,CAACc,mBAAmBC;IAEjE,MAAME,SAASvB,SAASA;IAExBQ,yBAAyBA,CAAC;QACtB,WAAWO;IACf;IAEAb,SAASA,CAAC;QACNqB,OACK,QAAQ,CAAC,iDACT,UAAU,CAACV,OACX,KAAK;IACd,GAAG;QAACA;QAAOU;KAAO;IAElB,MAAMC,iBAAiBZ,wBAAwBC,OAAOC,sBAAsBC;IAE5E,qBACI,IAACX,mCAAmC;QAAC,OAAOkB;kBACxC,kBAACjB,8BAA8B;YAAC,OAAOQ;sBAClCW;;;AAIjB"}
+{"version":3,"file":"AppRouter.js","sources":["../src/AppRouter.tsx"],"sourcesContent":["import { useLogger, useRuntime } from \"@squide/core\";\nimport { useRoutes, type Route } from \"@squide/react-router\";\nimport { useEffect, useMemo, type ReactElement } from \"react\";\nimport { DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyResult, DOMRouterOpts } from \"react-router\";\nimport type { RouterProviderProps } from \"react-router/dom\";\nimport { AppRouterDispatcherContext, AppRouterStateContext } from \"./AppRouterContext.ts\";\nimport { useAppRouterReducer, type AppRouterState } from \"./AppRouterReducer.ts\";\nimport { FireflyRuntime } from \"./FireflyRuntime.tsx\";\nimport { RootRoute } from \"./RootRoute.tsx\";\nimport { useStrictRegistrationMode } from \"./useStrictRegistrationMode.ts\";\n\nexport interface AppRouterRenderFunctionArgs {\n    routes: Route[];\n}\n\nexport interface RenderRouterProviderFunctionArgs {\n    rootRoute: ReactElement;\n    registeredRoutes: Route[];\n    routerProps: DOMRouterOpts;\n    routerProviderProps: Omit<RouterProviderProps, \"router\">;\n}\n\nexport type RenderRouterProviderFunction = (args: RenderRouterProviderFunctionArgs) => ReactElement;\n\nexport function useCanRenderRouter({ areModulesRegistered, areModulesReady: areModulesReadyValue }: AppRouterState) {\n    return (\n        // Wait until the modules has been registered, but do not wait for the deferred registrations to be registered has they will probably\n        // depends on the protected data.\n        (areModulesRegistered || areModulesReadyValue)\n    );\n}\n\n// This is a custom React Router data strategy (https://reactrouter.com/api/data-routers/createMemoryRouter#optsdatastrategy)\n// to delay the execution of React Router data browser loaders until MSW is ready.\n// The data strategy implemention is copied from React Router default data strategy: https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/router.ts#L5710.\nexport function createWaitForMswDataStrategy(runtime: FireflyRuntime) {\n    const strategy: (args: DataStrategyFunctionArgs<unknown>) => ReturnType<DataStrategyFunction<unknown>> = async args => {\n        await new Promise(resolve => {\n            if (runtime.mswState.isReady) {\n                resolve(null);\n            } else {\n                const handler = () => {\n                    runtime.mswState.removeMswReadyListener(handler);\n                    resolve(null);\n                };\n\n                runtime.mswState.addMswReadyListener(handler);\n            }\n        });\n\n        const matchesToLoad = args.matches.filter(m => m.shouldCallHandler);\n        const keyedResults: Record<string, DataStrategyResult> = {};\n        const results = await Promise.all(matchesToLoad.map(m => m.resolve()));\n\n        results.forEach((result, i) => {\n            keyedResults[matchesToLoad[i].route.id] = result;\n        });\n\n        return keyedResults;\n    };\n\n    return strategy;\n}\n\nfunction useRenderRouterProvider(state: AppRouterState, renderRouterProvider: RenderRouterProviderFunction, strictMode: boolean) {\n    const runtime = useRuntime() as FireflyRuntime;\n    const routes = useRoutes();\n\n    // The value is computed outside of the router provider memo to prevent\n    // rendering a new router provider everytime the app router state change.\n    const canRenderRouter = useCanRenderRouter(state);\n\n    return useMemo(() => {\n        if (canRenderRouter) {\n            return renderRouterProvider({\n                rootRoute: <RootRoute strictMode={strictMode} />,\n                registeredRoutes: routes,\n                routerProps: {\n                    dataStrategy: runtime.isMswEnabled ? createWaitForMswDataStrategy(runtime) : undefined\n                },\n                routerProviderProps: {}\n            });\n        }\n\n        return null;\n    }, [runtime, canRenderRouter, routes, renderRouterProvider, strictMode]);\n}\n\nexport interface AppRouterProps {\n    waitForPublicData?: boolean;\n    waitForProtectedData?: boolean;\n    strictMode?: boolean;\n    children: RenderRouterProviderFunction;\n}\n\nexport function AppRouter(props: AppRouterProps) {\n    const {\n        waitForPublicData = false,\n        waitForProtectedData = false,\n        strictMode = true,\n        children: renderRouterProvider\n    } = props;\n    const [state, dispatch] = useAppRouterReducer(waitForPublicData, waitForProtectedData);\n\n    const logger = useLogger();\n\n    useStrictRegistrationMode({\n        isEnabled: strictMode\n    });\n\n    useEffect(() => {\n        logger\n            .withText(\"[squide] AppRouter state has been updated to:\")\n            .withObject(state)\n            .debug();\n    }, [state, logger]);\n\n    const routerProvider = useRenderRouterProvider(state, renderRouterProvider, strictMode);\n\n    return (\n        <AppRouterDispatcherContext.Provider value={dispatch}>\n            <AppRouterStateContext.Provider value={state}>\n                {routerProvider}\n            </AppRouterStateContext.Provider>\n        </AppRouterDispatcherContext.Provider>\n    );\n}\n"],"names":["useLogger","useRuntime","useRoutes","useEffect","useMemo","AppRouterDispatcherContext","AppRouterStateContext","useAppRouterReducer","RootRoute","useStrictRegistrationMode","useCanRenderRouter","areModulesRegistered","areModulesReadyValue","createWaitForMswDataStrategy","runtime","strategy","args","Promise","resolve","handler","matchesToLoad","m","keyedResults","results","result","i","useRenderRouterProvider","state","renderRouterProvider","strictMode","routes","canRenderRouter","undefined","AppRouter","props","waitForPublicData","waitForProtectedData","dispatch","logger","routerProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAqD;AACQ;AACC;AAG4B;AACT;AAErC;AAC+B;AAepE,SAASU,mBAAmB,EAAEC,oBAAoB,EAAE,iBAAiBC,oBAAoB,EAAkB;IAC9G,OACI,qIAAqI;IACrI,iCAAiC;IAChCD,wBAAwBC;AAEjC;AAEA,6HAA6H;AAC7H,kFAAkF;AAClF,0LAA0L;AACnL,SAASC,6BAA6BC,OAAuB;IAChE,MAAMC,WAAmG,OAAMC;QAC3G,MAAM,IAAIC,QAAQC,CAAAA;YACd,IAAIJ,QAAQ,QAAQ,CAAC,OAAO,EAAE;gBAC1BI,QAAQ;YACZ,OAAO;gBACH,MAAMC,UAAU;oBACZL,QAAQ,QAAQ,CAAC,sBAAsB,CAACK;oBACxCD,QAAQ;gBACZ;gBAEAJ,QAAQ,QAAQ,CAAC,mBAAmB,CAACK;YACzC;QACJ;QAEA,MAAMC,gBAAgBJ,KAAK,OAAO,CAAC,MAAM,CAACK,CAAAA,IAAKA,EAAE,iBAAiB;QAClE,MAAMC,eAAmD,CAAC;QAC1D,MAAMC,UAAU,MAAMN,QAAQ,GAAG,CAACG,cAAc,GAAG,CAACC,CAAAA,IAAKA,EAAE,OAAO;QAElEE,QAAQ,OAAO,CAAC,CAACC,QAAQC;YACrBH,YAAY,CAACF,aAAa,CAACK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,GAAGD;QAC9C;QAEA,OAAOF;IACX;IAEA,OAAOP;AACX;AAEA,SAASW,wBAAwBC,KAAqB,EAAEC,oBAAkD,EAAEC,UAAmB;IAC3H,MAAMf,UAAUb,UAAUA;IAC1B,MAAM6B,SAAS5B,SAASA;IAExB,uEAAuE;IACvE,yEAAyE;IACzE,MAAM6B,kBAAkBrB,mBAAmBiB;IAE3C,OAAOvB,OAAOA,CAAC;QACX,IAAI2B,iBAAiB;YACjB,OAAOH,qBAAqB;gBACxB,yBAAW,IAACpB,SAASA;oBAAC,YAAYqB;;gBAClC,kBAAkBC;gBAClB,aAAa;oBACT,cAAchB,QAAQ,YAAY,GAAGD,6BAA6BC,WAAWkB;gBACjF;gBACA,qBAAqB,CAAC;YAC1B;QACJ;QAEA,OAAO;IACX,GAAG;QAAClB;QAASiB;QAAiBD;QAAQF;QAAsBC;KAAW;AAC3E;AASO,SAASI,UAAUC,KAAqB;IAC3C,MAAM,EACFC,oBAAoB,KAAK,EACzBC,uBAAuB,KAAK,EAC5BP,aAAa,IAAI,EACjB,UAAUD,oBAAoB,EACjC,GAAGM;IACJ,MAAM,CAACP,OAAOU,SAAS,GAAG9B,mBAAmBA,CAAC4B,mBAAmBC;IAEjE,MAAME,SAAStC,SAASA;IAExBS,yBAAyBA,CAAC;QACtB,WAAWoB;IACf;IAEA1B,SAASA,CAAC;QACNmC,OACK,QAAQ,CAAC,iDACT,UAAU,CAACX,OACX,KAAK;IACd,GAAG;QAACA;QAAOW;KAAO;IAElB,MAAMC,iBAAiBb,wBAAwBC,OAAOC,sBAAsBC;IAE5E,qBACI,IAACxB,mCAAmC;QAAC,OAAOgC;kBACxC,kBAAC/B,8BAA8B;YAAC,OAAOqB;sBAClCY;;;AAIjB"}

package/dist/useCanUpdateDeferredRegistrations.d.ts

@@ -1 +1 @@
-export declare function useCanUpdateDeferredRegistrations(): boolean | 0 | undefined;
+export declare function useCanUpdateDeferredRegistrations(): boolean;

package/dist/useCanUpdateDeferredRegistrations.js

@@ -5,10 +5,21 @@ import { useAppRouterState } from "./AppRouterContext.js";
 ;// CONCATENATED MODULE: ./src/useCanUpdateDeferredRegistrations.ts
 
 function useCanUpdateDeferredRegistrations() {
-    const { areModulesReady, publicDataUpdatedAt, protectedDataUpdatedAt, featureFlagsUpdatedAt, deferredRegistrationsUpdatedAt } = useAppRouterState();
-    return(// Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are
-    // registered, the modules will be marked as ready).
-    areModulesReady && deferredRegistrationsUpdatedAt && (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt || protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt || featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt));
+    const { areModulesReady } = useAppRouterState();
+    return areModulesReady;
+// return !!(
+//     // Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are
+//     // registered, the modules will be marked as ready).
+//     areModulesReady
+//     // Make sure the apps is actually having deferred registrations.
+//     // && deferredRegistrationsUpdatedAt
+//     // // If either the public data or the protected data has been updated, update the deferred registrations.
+//     // && (
+//     //     (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
+//     //     (protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
+//     //     (featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt)
+//     // )
+// );
 }
 
 export { useCanUpdateDeferredRegistrations };

package/dist/useCanUpdateDeferredRegistrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCanUpdateDeferredRegistrations.js","sources":["../src/useCanUpdateDeferredRegistrations.ts"],"sourcesContent":["import { useAppRouterState } from \"./AppRouterContext.ts\";\n\nexport function useCanUpdateDeferredRegistrations() {\n    const {\n        areModulesReady,\n        publicDataUpdatedAt,\n        protectedDataUpdatedAt,\n        featureFlagsUpdatedAt,\n        deferredRegistrationsUpdatedAt\n    } = useAppRouterState();\n\n    return (\n        // Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are\n        // registered, the modules will be marked as ready).\n        areModulesReady\n        // Make sure the apps is actually having deferred registrations.\n        && deferredRegistrationsUpdatedAt\n        // If either the public data or the protected data has been updated, update the deferred registrations.\n        && (\n            (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt) ||\n            (protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt) ||\n            (featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt)\n        )\n    );\n}\n"],"names":["useAppRouterState","useCanUpdateDeferredRegistrations","areModulesReady","publicDataUpdatedAt","protectedDataUpdatedAt","featureFlagsUpdatedAt","deferredRegistrationsUpdatedAt"],"mappings":";;;;;AAA0D;AAEnD,SAASC;IACZ,MAAM,EACFC,eAAe,EACfC,mBAAmB,EACnBC,sBAAsB,EACtBC,qBAAqB,EACrBC,8BAA8B,EACjC,GAAGN,iBAAiBA;IAErB,OACI,yIAAyI;IACzI,oDAAoD;IACpDE,mBAEGI,kCAGC,CAACH,uBAAuBA,sBAAsBG,kCAC7CF,0BAA0BA,yBAAyBE,kCACnDD,yBAAyBA,wBAAwBC,8BAA8B;AAG5F"}
+{"version":3,"file":"useCanUpdateDeferredRegistrations.js","sources":["../src/useCanUpdateDeferredRegistrations.ts"],"sourcesContent":["import { useAppRouterState } from \"./AppRouterContext.ts\";\n\nexport function useCanUpdateDeferredRegistrations() {\n    const {\n        areModulesReady\n        // publicDataUpdatedAt,\n        // protectedDataUpdatedAt,\n        // featureFlagsUpdatedAt,\n        // deferredRegistrationsUpdatedAt\n    } = useAppRouterState();\n\n    return areModulesReady;\n\n    // return !!(\n    //     // Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are\n    //     // registered, the modules will be marked as ready).\n    //     areModulesReady\n    //     // Make sure the apps is actually having deferred registrations.\n    //     // && deferredRegistrationsUpdatedAt\n    //     // // If either the public data or the protected data has been updated, update the deferred registrations.\n    //     // && (\n    //     //     (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt) ||\n    //     //     (protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt) ||\n    //     //     (featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt)\n    //     // )\n    // );\n}\n"],"names":["useAppRouterState","useCanUpdateDeferredRegistrations","areModulesReady"],"mappings":";;;;;AAA0D;AAEnD,SAASC;IACZ,MAAM,EACFC,eAAe,EAKlB,GAAGF,iBAAiBA;IAErB,OAAOE;AAEP,aAAa;AACb,gJAAgJ;AAChJ,2DAA2D;AAC3D,sBAAsB;AACtB,uEAAuE;AACvE,2CAA2C;AAC3C,iHAAiH;AACjH,cAAc;AACd,8FAA8F;AAC9F,oGAAoG;AACpG,+FAA+F;AAC/F,WAAW;AACX,KAAK;AACT"}

package/dist/useDeferredRegistrations.js

@@ -1,5 +1,5 @@
 import { useRuntime } from "@squide/core";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useCanRegisterDeferredRegistrations } from "./useCanRegisterDeferredRegistrations.js";
 import { useCanUpdateDeferredRegistrations } from "./useCanUpdateDeferredRegistrations.js";
 import { useRegisterDeferredRegistrations } from "./useRegisterDeferredRegistrations.js";
@@ -26,6 +26,7 @@ import { useUpdateDeferredRegistrations } from "./useUpdateDeferredRegistrations
 
 function useDeferredRegistrations(data, { onError } = {}) {
     const runtime = useRuntime();
+    // const isExecutedBecauseModulesAreNowReadyRef = useRef(true);
     const canRegisterDeferredRegistrations = useCanRegisterDeferredRegistrations();
     const canUpdateDeferredRegistrations = useCanUpdateDeferredRegistrations();
     const registerDeferredRegistrations = useRegisterDeferredRegistrations();
@@ -46,8 +47,18 @@ function useDeferredRegistrations(data, { onError } = {}) {
         data,
         onError
     ]);
+    const isInitialUpdateDeferredRegistrationsExecution = useRef(true);
     useEffect(()=>{
         if (canUpdateDeferredRegistrations) {
+            // HACK: Skipping the first execution successfully passing the gate because this is due to
+            // the modules being ready, and it's most certainly the same data that has been forwarded earlier to the deferred registration.
+            // Ideally, instead of this hacky ref, it would be a ref tracking the previous data object, and the deferred registration would
+            // only be updated if the current data object != than the previous data object. Sadly, it is not possible because
+            // of the feature flags.
+            if (isInitialUpdateDeferredRegistrationsExecution.current) {
+                isInitialUpdateDeferredRegistrationsExecution.current = false;
+                return;
+            }
             const update = async ()=>{
                 const errors = await updateDeferredRegistrations(data);
                 if (errors.length > 0 && onError) {

package/dist/useDeferredRegistrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDeferredRegistrations.js","sources":["../src/useDeferredRegistrations.ts"],"sourcesContent":["import { useRuntime, type ModuleRegistrationError } from \"@squide/core\";\nimport { useEffect } from \"react\";\nimport { FireflyRuntime } from \"./FireflyRuntime.tsx\";\nimport { useCanRegisterDeferredRegistrations } from \"./useCanRegisterDeferredRegistrations.ts\";\nimport { useCanUpdateDeferredRegistrations } from \"./useCanUpdateDeferredRegistrations.ts\";\nimport { useRegisterDeferredRegistrations } from \"./useRegisterDeferredRegistrations.ts\";\nimport { useUpdateDeferredRegistrations } from \"./useUpdateDeferredRegistrations.ts\";\n\nexport type DeferredRegistrationsErrorCallback = (errors: ModuleRegistrationError[]) => void;\n\nexport interface UseDeferredRegistrationsOptions {\n    onError?: DeferredRegistrationsErrorCallback;\n}\n\nexport function useDeferredRegistrations(data?: unknown, { onError }: UseDeferredRegistrationsOptions = {}) {\n    const runtime = useRuntime() as FireflyRuntime;\n\n    const canRegisterDeferredRegistrations = useCanRegisterDeferredRegistrations();\n    const canUpdateDeferredRegistrations = useCanUpdateDeferredRegistrations();\n\n    const registerDeferredRegistrations = useRegisterDeferredRegistrations();\n    const updateDeferredRegistrations = useUpdateDeferredRegistrations();\n\n    useEffect(() => {\n        if (canRegisterDeferredRegistrations) {\n            const register = async () => {\n                const errors = await registerDeferredRegistrations(data);\n\n                if (errors.length > 0 && onError) {\n                    onError(errors);\n                }\n            };\n\n            register();\n        }\n    }, [canRegisterDeferredRegistrations, registerDeferredRegistrations, data, onError]);\n\n    useEffect(() => {\n        if (canUpdateDeferredRegistrations) {\n            const update = async () => {\n                const errors = await updateDeferredRegistrations(data);\n\n                if (errors.length > 0 && onError) {\n                    onError(errors);\n                }\n            };\n\n            update();\n        }\n    }, [\n        canUpdateDeferredRegistrations,\n        updateDeferredRegistrations,\n        data,\n        onError,\n        // Trigger this closure when the feature flags changed. Using the timestamp because the\n        // actual feature flags are not forwarded to the deferred registrations.\n        runtime.appRouterStore.state.featureFlagsUpdatedAt\n    ]);\n}\n"],"names":["useRuntime","useEffect","useCanRegisterDeferredRegistrations","useCanUpdateDeferredRegistrations","useRegisterDeferredRegistrations","useUpdateDeferredRegistrations","useDeferredRegistrations","data","onError","runtime","canRegisterDeferredRegistrations","canUpdateDeferredRegistrations","registerDeferredRegistrations","updateDeferredRegistrations","register","errors","update"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAwE;AACtC;AAE6D;AACJ;AACF;AACJ;AAQ9E,SAASM,yBAAyBC,IAAc,EAAE,EAAEC,OAAO,EAAmC,GAAG,CAAC,CAAC;IACtG,MAAMC,UAAUT,UAAUA;IAE1B,MAAMU,mCAAmCR,mCAAmCA;IAC5E,MAAMS,iCAAiCR,iCAAiCA;IAExE,MAAMS,gCAAgCR,gCAAgCA;IACtE,MAAMS,8BAA8BR,8BAA8BA;IAElEJ,SAASA,CAAC;QACN,IAAIS,kCAAkC;YAClC,MAAMI,WAAW;gBACb,MAAMC,SAAS,MAAMH,8BAA8BL;gBAEnD,IAAIQ,OAAO,MAAM,GAAG,KAAKP,SAAS;oBAC9BA,QAAQO;gBACZ;YACJ;YAEAD;QACJ;IACJ,GAAG;QAACJ;QAAkCE;QAA+BL;QAAMC;KAAQ;IAEnFP,SAASA,CAAC;QACN,IAAIU,gCAAgC;YAChC,MAAMK,SAAS;gBACX,MAAMD,SAAS,MAAMF,4BAA4BN;gBAEjD,IAAIQ,OAAO,MAAM,GAAG,KAAKP,SAAS;oBAC9BA,QAAQO;gBACZ;YACJ;YAEAC;QACJ;IACJ,GAAG;QACCL;QACAE;QACAN;QACAC;QACA,uFAAuF;QACvF,wEAAwE;QACxEC,QAAQ,cAAc,CAAC,KAAK,CAAC,qBAAqB;KACrD;AACL"}
+{"version":3,"file":"useDeferredRegistrations.js","sources":["../src/useDeferredRegistrations.ts"],"sourcesContent":["import { useRuntime, type ModuleRegistrationError } from \"@squide/core\";\nimport { useEffect, useRef } from \"react\";\nimport { FireflyRuntime } from \"./FireflyRuntime.tsx\";\nimport { useCanRegisterDeferredRegistrations } from \"./useCanRegisterDeferredRegistrations.ts\";\nimport { useCanUpdateDeferredRegistrations } from \"./useCanUpdateDeferredRegistrations.ts\";\nimport { useRegisterDeferredRegistrations } from \"./useRegisterDeferredRegistrations.ts\";\nimport { useUpdateDeferredRegistrations } from \"./useUpdateDeferredRegistrations.ts\";\n\nexport type DeferredRegistrationsErrorCallback = (errors: ModuleRegistrationError[]) => void;\n\nexport interface UseDeferredRegistrationsOptions {\n    onError?: DeferredRegistrationsErrorCallback;\n}\n\nexport function useDeferredRegistrations(data?: unknown, { onError }: UseDeferredRegistrationsOptions = {}) {\n    const runtime = useRuntime() as FireflyRuntime;\n    // const isExecutedBecauseModulesAreNowReadyRef = useRef(true);\n\n    const canRegisterDeferredRegistrations = useCanRegisterDeferredRegistrations();\n    const canUpdateDeferredRegistrations = useCanUpdateDeferredRegistrations();\n\n    const registerDeferredRegistrations = useRegisterDeferredRegistrations();\n    const updateDeferredRegistrations = useUpdateDeferredRegistrations();\n\n    useEffect(() => {\n        if (canRegisterDeferredRegistrations) {\n            const register = async () => {\n                const errors = await registerDeferredRegistrations(data);\n\n                if (errors.length > 0 && onError) {\n                    onError(errors);\n                }\n            };\n\n            register();\n        }\n    }, [canRegisterDeferredRegistrations, registerDeferredRegistrations, data, onError]);\n\n    const isInitialUpdateDeferredRegistrationsExecution = useRef(true);\n\n    useEffect(() => {\n        if (canUpdateDeferredRegistrations) {\n            // HACK: Skipping the first execution successfully passing the gate because this is due to\n            // the modules being ready, and it's most certainly the same data that has been forwarded earlier to the deferred registration.\n            // Ideally, instead of this hacky ref, it would be a ref tracking the previous data object, and the deferred registration would\n            // only be updated if the current data object != than the previous data object. Sadly, it is not possible because\n            // of the feature flags.\n            if (isInitialUpdateDeferredRegistrationsExecution.current) {\n                isInitialUpdateDeferredRegistrationsExecution.current = false;\n                return;\n            }\n\n            const update = async () => {\n                const errors = await updateDeferredRegistrations(data);\n\n                if (errors.length > 0 && onError) {\n                    onError(errors);\n                }\n            };\n\n            update();\n        }\n    }, [\n        canUpdateDeferredRegistrations,\n        updateDeferredRegistrations,\n        data,\n        onError,\n        // Trigger this closure when the feature flags changed. Using the timestamp because the\n        // actual feature flags are not forwarded to the deferred registrations.\n        runtime.appRouterStore.state.featureFlagsUpdatedAt\n    ]);\n}\n"],"names":["useRuntime","useEffect","useRef","useCanRegisterDeferredRegistrations","useCanUpdateDeferredRegistrations","useRegisterDeferredRegistrations","useUpdateDeferredRegistrations","useDeferredRegistrations","data","onError","runtime","canRegisterDeferredRegistrations","canUpdateDeferredRegistrations","registerDeferredRegistrations","updateDeferredRegistrations","register","errors","isInitialUpdateDeferredRegistrationsExecution","update"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAwE;AAC9B;AAEqD;AACJ;AACF;AACJ;AAQ9E,SAASO,yBAAyBC,IAAc,EAAE,EAAEC,OAAO,EAAmC,GAAG,CAAC,CAAC;IACtG,MAAMC,UAAUV,UAAUA;IAC1B,+DAA+D;IAE/D,MAAMW,mCAAmCR,mCAAmCA;IAC5E,MAAMS,iCAAiCR,iCAAiCA;IAExE,MAAMS,gCAAgCR,gCAAgCA;IACtE,MAAMS,8BAA8BR,8BAA8BA;IAElEL,SAASA,CAAC;QACN,IAAIU,kCAAkC;YAClC,MAAMI,WAAW;gBACb,MAAMC,SAAS,MAAMH,8BAA8BL;gBAEnD,IAAIQ,OAAO,MAAM,GAAG,KAAKP,SAAS;oBAC9BA,QAAQO;gBACZ;YACJ;YAEAD;QACJ;IACJ,GAAG;QAACJ;QAAkCE;QAA+BL;QAAMC;KAAQ;IAEnF,MAAMQ,gDAAgDf,MAAMA,CAAC;IAE7DD,SAASA,CAAC;QACN,IAAIW,gCAAgC;YAChC,0FAA0F;YAC1F,+HAA+H;YAC/H,+HAA+H;YAC/H,iHAAiH;YACjH,wBAAwB;YACxB,IAAIK,8CAA8C,OAAO,EAAE;gBACvDA,8CAA8C,OAAO,GAAG;gBACxD;YACJ;YAEA,MAAMC,SAAS;gBACX,MAAMF,SAAS,MAAMF,4BAA4BN;gBAEjD,IAAIQ,OAAO,MAAM,GAAG,KAAKP,SAAS;oBAC9BA,QAAQO;gBACZ;YACJ;YAEAE;QACJ;IACJ,GAAG;QACCN;QACAE;QACAN;QACAC;QACA,uFAAuF;QACvF,wEAAwE;QACxEC,QAAQ,cAAc,CAAC,KAAK,CAAC,qBAAqB;KACrD;AACL"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@squide/firefly",
   "author": "Workleap",
-  "version": "16.1.12",
+  "version": "16.2.1",
   "description": "Squide bundle for the firefly technology stack.",
   "license": "Apache-2.0",
   "repository": {
@@ -49,10 +49,10 @@
     "@workleap-telemetry/core": "^2.0.0",
     "@workleap/logging": "^1.3.6",
     "uuid": "^13.0.0",
-    "@squide/core": "^6.1.14",
     "@squide/env-vars": "^1.4.19",
     "@squide/launch-darkly": "^1.0.10",
     "@squide/msw": "^4.0.17",
+    "@squide/core": "^6.1.14",
     "@squide/react-router": "^8.1.17"
   },
   "devDependencies": {
@@ -63,13 +63,13 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@typescript-eslint/parser": "8.56.1",
-    "@typescript/native-preview": "7.0.0-dev.20260224.1",
+    "@typescript/native-preview": "7.0.0-dev.20260303.1",
     "@vitejs/plugin-react": "5.1.4",
     "@workleap/eslint-configs": "1.1.13",
     "@workleap/rslib-configs": "1.1.7",
     "@workleap/typescript-configs": "3.0.7",
     "eslint": "9.39.2",
-    "happy-dom": "20.7.0",
+    "happy-dom": "20.8.3",
     "typescript": "5.9.3",
     "typescript-eslint": "8.54.0",
     "vitest": "4.0.18"

package/src/AppRouter.tsx

@@ -1,9 +1,11 @@
-import { useLogger } from "@squide/core";
+import { useLogger, useRuntime } from "@squide/core";
 import { useRoutes, type Route } from "@squide/react-router";
 import { useEffect, useMemo, type ReactElement } from "react";
+import { DataStrategyFunction, DataStrategyFunctionArgs, DataStrategyResult, DOMRouterOpts } from "react-router";
 import type { RouterProviderProps } from "react-router/dom";
 import { AppRouterDispatcherContext, AppRouterStateContext } from "./AppRouterContext.ts";
 import { useAppRouterReducer, type AppRouterState } from "./AppRouterReducer.ts";
+import { FireflyRuntime } from "./FireflyRuntime.tsx";
 import { RootRoute } from "./RootRoute.tsx";
 import { useStrictRegistrationMode } from "./useStrictRegistrationMode.ts";
 
@@ -14,6 +16,7 @@ export interface AppRouterRenderFunctionArgs {
 export interface RenderRouterProviderFunctionArgs {
     rootRoute: ReactElement;
     registeredRoutes: Route[];
+    routerProps: DOMRouterOpts;
     routerProviderProps: Omit<RouterProviderProps, "router">;
 }
 
@@ -27,7 +30,40 @@ export function useCanRenderRouter({ areModulesRegistered, areModulesReady: areM
     );
 }
 
+// This is a custom React Router data strategy (https://reactrouter.com/api/data-routers/createMemoryRouter#optsdatastrategy)
+// to delay the execution of React Router data browser loaders until MSW is ready.
+// The data strategy implemention is copied from React Router default data strategy: https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/router.ts#L5710.
+export function createWaitForMswDataStrategy(runtime: FireflyRuntime) {
+    const strategy: (args: DataStrategyFunctionArgs<unknown>) => ReturnType<DataStrategyFunction<unknown>> = async args => {
+        await new Promise(resolve => {
+            if (runtime.mswState.isReady) {
+                resolve(null);
+            } else {
+                const handler = () => {
+                    runtime.mswState.removeMswReadyListener(handler);
+                    resolve(null);
+                };
+
+                runtime.mswState.addMswReadyListener(handler);
+            }
+        });
+
+        const matchesToLoad = args.matches.filter(m => m.shouldCallHandler);
+        const keyedResults: Record<string, DataStrategyResult> = {};
+        const results = await Promise.all(matchesToLoad.map(m => m.resolve()));
+
+        results.forEach((result, i) => {
+            keyedResults[matchesToLoad[i].route.id] = result;
+        });
+
+        return keyedResults;
+    };
+
+    return strategy;
+}
+
 function useRenderRouterProvider(state: AppRouterState, renderRouterProvider: RenderRouterProviderFunction, strictMode: boolean) {
+    const runtime = useRuntime() as FireflyRuntime;
     const routes = useRoutes();
 
     // The value is computed outside of the router provider memo to prevent
@@ -39,12 +75,15 @@ function useRenderRouterProvider(state: AppRouterState, renderRouterProvider: Re
             return renderRouterProvider({
                 rootRoute: <RootRoute strictMode={strictMode} />,
                 registeredRoutes: routes,
+                routerProps: {
+                    dataStrategy: runtime.isMswEnabled ? createWaitForMswDataStrategy(runtime) : undefined
+                },
                 routerProviderProps: {}
             });
         }
 
         return null;
-    }, [canRenderRouter, routes, renderRouterProvider, strictMode]);
+    }, [runtime, canRenderRouter, routes, renderRouterProvider, strictMode]);
 }
 
 export interface AppRouterProps {

package/src/useCanUpdateDeferredRegistrations.ts

@@ -2,24 +2,26 @@ import { useAppRouterState } from "./AppRouterContext.ts";
 
 export function useCanUpdateDeferredRegistrations() {
     const {
-        areModulesReady,
-        publicDataUpdatedAt,
-        protectedDataUpdatedAt,
-        featureFlagsUpdatedAt,
-        deferredRegistrationsUpdatedAt
+        areModulesReady
+        // publicDataUpdatedAt,
+        // protectedDataUpdatedAt,
+        // featureFlagsUpdatedAt,
+        // deferredRegistrationsUpdatedAt
     } = useAppRouterState();
 
-    return (
-        // Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are
-        // registered, the modules will be marked as ready).
-        areModulesReady
-        // Make sure the apps is actually having deferred registrations.
-        && deferredRegistrationsUpdatedAt
-        // If either the public data or the protected data has been updated, update the deferred registrations.
-        && (
-            (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
-            (protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
-            (featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt)
-        )
-    );
+    return areModulesReady;
+
+    // return !!(
+    //     // Do not trigger an update if the deferred registrations has not been registered yet (if there are deferred registrations, once they are
+    //     // registered, the modules will be marked as ready).
+    //     areModulesReady
+    //     // Make sure the apps is actually having deferred registrations.
+    //     // && deferredRegistrationsUpdatedAt
+    //     // // If either the public data or the protected data has been updated, update the deferred registrations.
+    //     // && (
+    //     //     (publicDataUpdatedAt && publicDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
+    //     //     (protectedDataUpdatedAt && protectedDataUpdatedAt > deferredRegistrationsUpdatedAt) ||
+    //     //     (featureFlagsUpdatedAt && featureFlagsUpdatedAt > deferredRegistrationsUpdatedAt)
+    //     // )
+    // );
 }

package/src/useDeferredRegistrations.ts

@@ -1,5 +1,5 @@
 import { useRuntime, type ModuleRegistrationError } from "@squide/core";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { FireflyRuntime } from "./FireflyRuntime.tsx";
 import { useCanRegisterDeferredRegistrations } from "./useCanRegisterDeferredRegistrations.ts";
 import { useCanUpdateDeferredRegistrations } from "./useCanUpdateDeferredRegistrations.ts";
@@ -14,6 +14,7 @@ export interface UseDeferredRegistrationsOptions {
 
 export function useDeferredRegistrations(data?: unknown, { onError }: UseDeferredRegistrationsOptions = {}) {
     const runtime = useRuntime() as FireflyRuntime;
+    // const isExecutedBecauseModulesAreNowReadyRef = useRef(true);
 
     const canRegisterDeferredRegistrations = useCanRegisterDeferredRegistrations();
     const canUpdateDeferredRegistrations = useCanUpdateDeferredRegistrations();
@@ -35,8 +36,20 @@ export function useDeferredRegistrations(data?: unknown, { onError }: UseDeferre
         }
     }, [canRegisterDeferredRegistrations, registerDeferredRegistrations, data, onError]);
 
+    const isInitialUpdateDeferredRegistrationsExecution = useRef(true);
+
     useEffect(() => {
         if (canUpdateDeferredRegistrations) {
+            // HACK: Skipping the first execution successfully passing the gate because this is due to
+            // the modules being ready, and it's most certainly the same data that has been forwarded earlier to the deferred registration.
+            // Ideally, instead of this hacky ref, it would be a ref tracking the previous data object, and the deferred registration would
+            // only be updated if the current data object != than the previous data object. Sadly, it is not possible because
+            // of the feature flags.
+            if (isInitialUpdateDeferredRegistrationsExecution.current) {
+                isInitialUpdateDeferredRegistrationsExecution.current = false;
+                return;
+            }
+
             const update = async () => {
                 const errors = await updateDeferredRegistrations(data);