@squide/firefly 3.0.3 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @squide/firefly
 
+## 4.0.0
+
+### Major Changes
+
+- [#131](https://github.com/gsoft-inc/wl-squide/pull/131) [`7caa44b`](https://github.com/gsoft-inc/wl-squide/commit/7caa44ba81a97d0705caf2f56e6536ae285c920d) Thanks [@patricklafrance](https://github.com/patricklafrance)! - - The `AppRouter` component now requires to define a `RouterProvider` as a child. This change has been made to provide more flexibility on the consumer side about the definition of the React Router router.
+
+  Before:
+
+  ```tsx
+  <AppRouter
+      fallbackElement={...}
+      errorElement={...}
+      waitForMsw={...}
+   />
+  ```
+
+  Now:
+
+  ```tsx
+  <AppRouter
+      fallbackElement={...}
+      errorElement={...}
+      waitForMsw={...}
+  >
+      {(routes, providerProps) => (
+          <RouterProvider router={createBrowserRouter(routes)} {...providerProps} />
+      )}
+  </AppRouter>
+  ```
+
+  - When in development and using React strict mode, the public and protected handler can be called twice. This issue highlighted that the `AppRouter` component doesn't equipe correctly the handlers to dispose of previous HTTP requests if they are called multiple times because of re-renders. Therefore, the handlers now receives an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that should be forwared to the HTTP client initiating the fetch request.
+  - The fix also requires the consumer to provide new properties (`isPublicDataLoaded` and `isProtectedDataLoaded`) indicating whether or not the public and/or protected data has been loaded.
+
+  ```tsx
+  async function fetchPublicData(setFeatureFlags: (featureFlags: FeatureFlags) => void, signal: AbortSignal) {
+      try {
+          const response = await fetch("/api/feature-flags", {
+              signal
+          });
+
+          if (response.ok) {
+              const data = await response.json();
+
+              setFeatureFlags(data);
+          }
+      } catch (error: unknown) {
+          if (!signal.aborted) {
+              throw error;
+          }
+      }
+  }
+
+  const [featureFlags, setFeatureFlags] = useState<FeatureFlags>();
+
+  const handleLoadPublicData = useCallback((signal: AbortSignal) => {
+      return fetchPublicData(setFeatureFlags, signal);
+  }, []);
+
+  <AppRouter
+      onLoadPublicData={handleLoadPublicData}
+      isPublicDataLoaded={!!featureFlags}
+      fallbackElement={...}
+      errorElement={...}
+      waitForMsw={...}
+  >
+      {(routes, providerProps) => (
+          <RouterProvider router={createBrowserRouter(routes)} {...providerProps} />
+      )}
+  </AppRouter>
+  ```
+
+  - Fixed an issue where the deferred registrations could be completed before the protected data has been loaded.
+
+### Patch Changes
+
+- Updated dependencies [[`7caa44b`](https://github.com/gsoft-inc/wl-squide/commit/7caa44ba81a97d0705caf2f56e6536ae285c920d), [`7caa44b`](https://github.com/gsoft-inc/wl-squide/commit/7caa44ba81a97d0705caf2f56e6536ae285c920d)]:
+  - @squide/core@3.2.0
+  - @squide/react-router@4.0.0
+  - @squide/msw@2.0.8
+  - @squide/webpack-module-federation@3.0.3
+  - @squide/webpack-configs@1.1.2
+
 ## 3.0.3
 
 ### Patch Changes

package/dist/AppRouter.d.ts

@@ -1,29 +1,36 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Route } from '@squide/react-router';
 import { RouterProviderProps } from 'react-router-dom';
 
-type OnLoadPublicDataFunction = () => Promise<unknown>;
-type OnLoadProtectedDataFunction = () => Promise<unknown>;
+type OnLoadPublicDataFunction = (signal: AbortSignal) => Promise<unknown>;
+type OnLoadProtectedDataFunction = (signal: AbortSignal) => Promise<unknown>;
 type OnCompleteRegistrationsFunction = () => Promise<unknown>;
 interface BootstrappingRouteProps {
     fallbackElement: ReactElement;
     onLoadPublicData?: OnLoadPublicDataFunction;
     onLoadProtectedData?: OnLoadProtectedDataFunction;
+    isPublicDataLoaded: boolean;
+    isProtectedDataLoaded: boolean;
     onCompleteRegistrations?: OnCompleteRegistrationsFunction;
     waitForMsw: boolean;
     areModulesRegistered: boolean;
     areModulesReady: boolean;
 }
 declare function BootstrappingRoute(props: BootstrappingRouteProps): react_jsx_runtime.JSX.Element;
+type RenderRouterProviderFunction = (routes: Route[], providerProps: Omit<RouterProviderProps, "router">) => ReactElement;
 interface AppRouterProps {
     fallbackElement: ReactElement;
     errorElement: ReactElement;
     onLoadPublicData?: OnLoadPublicDataFunction;
     onLoadProtectedData?: OnLoadProtectedDataFunction;
+    isPublicDataLoaded?: boolean;
+    isProtectedDataLoaded?: boolean;
     onCompleteRegistrations?: OnCompleteRegistrationsFunction;
     waitForMsw: boolean;
-    routerProvidersProps?: Omit<RouterProviderProps, "router">;
+    children: RenderRouterProviderFunction;
 }
-declare function AppRouter(props: AppRouterProps): react_jsx_runtime.JSX.Element;
+declare function AppRouter(props: AppRouterProps): ReactElement<any, string | react.JSXElementConstructor<any>>;
 
-export { AppRouter, type AppRouterProps, BootstrappingRoute, type OnCompleteRegistrationsFunction, type OnLoadProtectedDataFunction, type OnLoadPublicDataFunction };
+export { AppRouter, type AppRouterProps, BootstrappingRoute, type OnCompleteRegistrationsFunction, type OnLoadProtectedDataFunction, type OnLoadPublicDataFunction, type RenderRouterProviderFunction };

package/dist/AppRouter.js

@@ -1 +1 @@
-export { AppRouter, BootstrappingRoute } from './chunk-MKFAFYJH.js';
+export { AppRouter, BootstrappingRoute } from './chunk-QZACR5NK.js';

package/dist/chunk-QZACR5NK.js

@@ -0,0 +1,150 @@
+import { useLogOnceLogger, isNil } from '@squide/core';
+import { useIsMswStarted } from '@squide/msw';
+import { useIsRouteMatchProtected, useRoutes } from '@squide/react-router';
+import { useAreModulesRegistered, useAreModulesReady } from '@squide/webpack-module-federation';
+import { useEffect, useCallback, cloneElement, useMemo } from 'react';
+import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
+import { useLocation, Outlet } from 'react-router-dom';
+import { jsx } from 'react/jsx-runtime';
+
+// src/AppRouter.tsx
+function useLoadPublicData(areModulesRegistered, areModulesReady, isMswStarted, isLoaded, onLoadData) {
+  const logger = useLogOnceLogger();
+  const { showBoundary } = useErrorBoundary();
+  useEffect(() => {
+    if (onLoadData && !isLoaded) {
+      if ((areModulesRegistered || areModulesReady) && isMswStarted) {
+        logger.debugOnce("loading-public-data", "[shell] Loading public data.");
+        const abortController = new AbortController();
+        const result = onLoadData(abortController.signal);
+        if (!isPromise(result)) {
+          throw Error("[squide] An AppRouter onLoadPublicData handler must return a promise object.");
+        }
+        result.then(() => {
+          logger.debugOnce("public-data-loaded", "[shell] Public data has been loaded.");
+        }).catch((error) => {
+          showBoundary(error);
+        });
+        return () => {
+          abortController.abort();
+        };
+      }
+    }
+  }, [areModulesRegistered, areModulesReady, isMswStarted, isLoaded, showBoundary, onLoadData, logger]);
+}
+function useLoadProtectedData(areModulesRegistered, areModulesReady, isMswStarted, isActiveRouteProtected, isLoaded, onLoadData) {
+  const logger = useLogOnceLogger();
+  const { showBoundary } = useErrorBoundary();
+  useEffect(() => {
+    if (onLoadData && !isLoaded) {
+      if ((areModulesRegistered || areModulesReady) && isMswStarted) {
+        if (isActiveRouteProtected) {
+          logger.debugOnce("loading-protected-data", `[shell] Loading protected data as "${location.pathname}" is a protected route.`);
+          const abortController = new AbortController();
+          const result = onLoadData(abortController.signal);
+          if (!isPromise(result)) {
+            throw Error("[squide] An AppRouter onLoadProtectedData handler must return a promise object.");
+          }
+          result.then(() => {
+            logger.debugOnce("protected-data-loaded", "[shell] Protected data has been loaded.");
+          }).catch((error) => {
+            showBoundary(error);
+          });
+          return () => {
+            abortController.abort();
+          };
+        } else {
+          logger.debugOnce("is-a-public-route", `[shell] Not loading protected data as "${location.pathname}" is a public route.`);
+        }
+      }
+    }
+  }, [areModulesRegistered, areModulesReady, isMswStarted, isActiveRouteProtected, isLoaded, showBoundary, onLoadData, logger]);
+}
+function isPromise(value) {
+  return !isNil(value) && !isNil(value.then) && !isNil(value.catch);
+}
+function BootstrappingRoute(props) {
+  const {
+    fallbackElement,
+    onLoadPublicData,
+    onLoadProtectedData,
+    isPublicDataLoaded,
+    isProtectedDataLoaded,
+    onCompleteRegistrations,
+    waitForMsw,
+    areModulesRegistered,
+    areModulesReady
+  } = props;
+  const logger = useLogOnceLogger();
+  const location2 = useLocation();
+  const isMswStarted = useIsMswStarted(waitForMsw);
+  useEffect(() => {
+    if (waitForMsw) {
+      if ((areModulesRegistered || areModulesReady) && !isMswStarted) {
+        logger.debugOnce("waiting-for-msw", `[shell] Modules are ${areModulesReady ? "ready" : "registered"}, waiting for MSW to start...`);
+      } else if (!areModulesRegistered && !areModulesReady && isMswStarted) {
+        logger.debugOnce("waiting-for-modules", "[shell] MSW is started, waiting for the modules...");
+      }
+    }
+  }, [logger, areModulesRegistered, areModulesReady, isMswStarted, waitForMsw]);
+  useLoadPublicData(areModulesRegistered, areModulesReady, isMswStarted, isPublicDataLoaded, onLoadPublicData);
+  const isActiveRouteProtected = useIsRouteMatchProtected(location2, { throwWhenThereIsNoMatch: areModulesReady });
+  useLoadProtectedData(areModulesRegistered, areModulesReady, isMswStarted, isActiveRouteProtected, isProtectedDataLoaded, onLoadProtectedData);
+  useEffect(() => {
+    if (onCompleteRegistrations) {
+      if (areModulesRegistered && isMswStarted && isPublicDataLoaded && (!isActiveRouteProtected || isProtectedDataLoaded)) {
+        if (!areModulesReady) {
+          onCompleteRegistrations();
+        }
+      }
+    }
+  }, [areModulesRegistered, areModulesReady, isMswStarted, isPublicDataLoaded, isProtectedDataLoaded, isActiveRouteProtected, onCompleteRegistrations]);
+  if (!areModulesReady || !isMswStarted || !isPublicDataLoaded || isActiveRouteProtected && !isProtectedDataLoaded) {
+    return fallbackElement;
+  }
+  return /* @__PURE__ */ jsx(Outlet, {});
+}
+function AppRouter(props) {
+  const {
+    fallbackElement,
+    errorElement,
+    onLoadPublicData,
+    onLoadProtectedData,
+    isPublicDataLoaded = true,
+    isProtectedDataLoaded = true,
+    onCompleteRegistrations,
+    waitForMsw,
+    children: renderRouterProvider
+  } = props;
+  const areModulesRegistered = useAreModulesRegistered();
+  const areModulesReady = useAreModulesReady();
+  const routes = useRoutes();
+  const errorRenderer = useCallback(({ error }) => {
+    return cloneElement(errorElement, {
+      error
+    });
+  }, [errorElement]);
+  return useMemo(() => {
+    return renderRouterProvider([
+      {
+        element: /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: errorRenderer, children: /* @__PURE__ */ jsx(
+          BootstrappingRoute,
+          {
+            fallbackElement,
+            onLoadPublicData,
+            onLoadProtectedData,
+            isPublicDataLoaded,
+            isProtectedDataLoaded,
+            onCompleteRegistrations,
+            waitForMsw,
+            areModulesRegistered,
+            areModulesReady
+          }
+        ) }),
+        children: routes
+      }
+    ], {});
+  }, [areModulesRegistered, areModulesReady, routes, onLoadPublicData, onLoadProtectedData, isPublicDataLoaded, isProtectedDataLoaded, onCompleteRegistrations, waitForMsw, errorRenderer, fallbackElement, renderRouterProvider]);
+}
+
+export { AppRouter, BootstrappingRoute };

package/dist/index.d.ts

@@ -2,9 +2,9 @@ export * from '@squide/core';
 export * from '@squide/msw';
 export * from '@squide/react-router';
 export * from '@squide/webpack-module-federation';
-export { AppRouter, AppRouterProps, BootstrappingRoute, OnCompleteRegistrationsFunction, OnLoadProtectedDataFunction, OnLoadPublicDataFunction } from './AppRouter.js';
+export { AppRouter, AppRouterProps, BootstrappingRoute, OnCompleteRegistrationsFunction, OnLoadProtectedDataFunction, OnLoadPublicDataFunction, RenderRouterProviderFunction } from './AppRouter.js';
 export { FireflyRuntime } from './fireflyRuntime.js';
-import 'react/jsx-runtime';
 import 'react';
+import 'react/jsx-runtime';
 import 'react-router-dom';
 import 'msw';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { AppRouter, BootstrappingRoute } from './chunk-MKFAFYJH.js';
+export { AppRouter, BootstrappingRoute } from './chunk-QZACR5NK.js';
 export { FireflyRuntime } from './chunk-6R4K3V6F.js';
 export * from '@squide/core';
 export * from '@squide/msw';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@squide/firefly",
   "author": "Workleap",
-  "version": "3.0.3",
+  "version": "4.0.0",
   "description": "Helpers to facilitate the creation of a shell package with Squide firefly technology stack.",
   "license": "Apache-2.0",
   "repository": {
@@ -88,13 +88,13 @@
     "tsup": "8.0.1",
     "typescript": "5.2.2",
     "webpack": "5.89.0",
-    "@squide/webpack-configs": "1.1.1"
+    "@squide/webpack-configs": "1.1.2"
   },
   "dependencies": {
-    "@squide/core": "3.1.1",
-    "@squide/msw": "2.0.7",
-    "@squide/react-router": "3.0.2",
-    "@squide/webpack-module-federation": "3.0.2"
+    "@squide/core": "3.2.0",
+    "@squide/msw": "2.0.8",
+    "@squide/react-router": "4.0.0",
+    "@squide/webpack-module-federation": "3.0.3"
   },
   "sideEffects": false,
   "engines": {

package/dist/chunk-MKFAFYJH.js

@@ -1,136 +0,0 @@
-import { useLogger, isNil } from '@squide/core';
-import { useIsMswStarted } from '@squide/msw';
-import { useIsRouteMatchProtected, useRoutes } from '@squide/react-router';
-import { useAreModulesRegistered, useAreModulesReady } from '@squide/webpack-module-federation';
-import { useState, useEffect, useCallback, cloneElement, useMemo } from 'react';
-import { useErrorBoundary, ErrorBoundary } from 'react-error-boundary';
-import { useLocation, Outlet, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { jsx } from 'react/jsx-runtime';
-
-// src/AppRouter.tsx
-function isPromise(value) {
-  return !isNil(value) && !isNil(value.then) && !isNil(value.catch);
-}
-function BootstrappingRoute(props) {
-  const {
-    fallbackElement,
-    onLoadPublicData,
-    onLoadProtectedData,
-    onCompleteRegistrations,
-    waitForMsw,
-    areModulesRegistered,
-    areModulesReady
-  } = props;
-  const [isPublicDataLoaded, setIsPublicDataLoaded] = useState(!onLoadPublicData);
-  const [isProtectedDataLoaded, setIsProtectedDataLoaded] = useState(!onLoadProtectedData);
-  const { showBoundary } = useErrorBoundary();
-  const logger = useLogger();
-  const location = useLocation();
-  const isMswStarted = useIsMswStarted(waitForMsw);
-  useEffect(() => {
-    if (waitForMsw) {
-      if ((areModulesRegistered || areModulesReady) && !isMswStarted) {
-        logger.debug(`[shell] Modules are ${areModulesReady ? "ready" : "registered"}, waiting for MSW to start...`);
-      } else if (!areModulesRegistered && !areModulesReady && isMswStarted) {
-        logger.debug("[shell] MSW is started, waiting for the modules...");
-      }
-    }
-  }, [logger, areModulesRegistered, areModulesReady, isMswStarted, waitForMsw]);
-  useEffect(() => {
-    if (onLoadPublicData) {
-      if ((areModulesRegistered || areModulesReady) && isMswStarted) {
-        if (!isPublicDataLoaded) {
-          logger.debug("[shell] Loading public data.");
-          const result = onLoadPublicData();
-          if (!isPromise(result)) {
-            throw Error("[squide] An AppRouter onLoadPublicData handler must return a promise object.");
-          }
-          result.then(() => {
-            setIsPublicDataLoaded(true);
-            logger.debug("[shell] Public data has been loaded.");
-          }).catch((error) => {
-            showBoundary(error);
-          });
-        }
-      }
-    }
-  }, [logger, areModulesRegistered, areModulesReady, isMswStarted, isPublicDataLoaded, showBoundary, onLoadPublicData]);
-  const isActiveRouteProtected = useIsRouteMatchProtected(location, { throwWhenThereIsNoMatch: areModulesReady });
-  useEffect(() => {
-    if (onLoadProtectedData) {
-      if ((areModulesRegistered || areModulesReady) && isMswStarted) {
-        if (isActiveRouteProtected) {
-          if (!isProtectedDataLoaded) {
-            logger.debug(`[shell] Loading protected data as "${location.pathname}" is a protected route.`);
-            const result = onLoadProtectedData();
-            if (!isPromise(result)) {
-              throw Error("[squide] An AppRouter onLoadProtectedData handler must return a promise object.");
-            }
-            result.then(() => {
-              setIsProtectedDataLoaded(true);
-              logger.debug("[shell] Protected data has been loaded.");
-            }).catch((error) => {
-              showBoundary(error);
-            });
-          }
-        } else {
-          logger.debug(`[shell] Not loading protected data as "${location.pathname}" is a public route.`);
-        }
-      }
-    }
-  }, [logger, location, areModulesRegistered, areModulesReady, isMswStarted, isActiveRouteProtected, isProtectedDataLoaded, showBoundary, onLoadProtectedData]);
-  useEffect(() => {
-    if (onCompleteRegistrations) {
-      if (areModulesRegistered && isMswStarted && isPublicDataLoaded) {
-        if (!areModulesReady) {
-          onCompleteRegistrations();
-        }
-      }
-    }
-  }, [areModulesRegistered, areModulesReady, isMswStarted, isPublicDataLoaded, onCompleteRegistrations]);
-  if (!areModulesReady || !isMswStarted || !isPublicDataLoaded || isActiveRouteProtected && !isProtectedDataLoaded) {
-    return fallbackElement;
-  }
-  return /* @__PURE__ */ jsx(Outlet, {});
-}
-function AppRouter(props) {
-  const {
-    fallbackElement,
-    errorElement,
-    onLoadPublicData,
-    onLoadProtectedData,
-    onCompleteRegistrations,
-    waitForMsw,
-    routerProvidersProps = {}
-  } = props;
-  const areModulesRegistered = useAreModulesRegistered();
-  const areModulesReady = useAreModulesReady();
-  const routes = useRoutes();
-  const errorRenderer = useCallback(({ error }) => {
-    return cloneElement(errorElement, {
-      error
-    });
-  }, [errorElement]);
-  const router = useMemo(() => {
-    return createBrowserRouter([
-      {
-        element: /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: errorRenderer, children: /* @__PURE__ */ jsx(
-          BootstrappingRoute,
-          {
-            fallbackElement,
-            onLoadPublicData,
-            onLoadProtectedData,
-            onCompleteRegistrations,
-            waitForMsw,
-            areModulesRegistered,
-            areModulesReady
-          }
-        ) }),
-        children: routes
-      }
-    ]);
-  }, [areModulesRegistered, areModulesReady, routes, onLoadPublicData, onLoadProtectedData, onCompleteRegistrations, waitForMsw, errorRenderer, fallbackElement]);
-  return /* @__PURE__ */ jsx(RouterProvider, { ...routerProvidersProps, router });
-}
-
-export { AppRouter, BootstrappingRoute };