@gears-frontx/react 0.2.0-alpha.0 → 0.2.0-alpha.2

package/dist/index.cjs

@@ -222,7 +222,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/FrontXProvider.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_redux = require("react-redux");
 var import_framework3 = require("@gears-frontx/framework");
 
@@ -259,7 +259,7 @@ var MfeProvider = ({ value, children }) => {
 };
 
 // src/queryClient.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var import_react_query = require("@tanstack/react-query");
 var import_framework2 = require("@gears-frontx/framework");
 
@@ -368,13 +368,23 @@ function createQueryCache(queryClient) {
   };
 }
 
+// src/hooks/useLatest.ts
+var import_react3 = require("react");
+function useLatest(value) {
+  const ref = (0, import_react3.useRef)(value);
+  (0, import_react3.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
 // src/queryClient.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var APP_QUERY_CLIENT_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client");
 var APP_QUERY_CLIENT_RESOLVER_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-resolver");
 var APP_QUERY_CLIENT_ACTIVATOR_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-activator");
-var FrontXQueryClientContext = (0, import_react3.createContext)(void 0);
-var useCommitEffect = typeof globalThis.window === "undefined" ? import_react3.useEffect : import_react3.useLayoutEffect;
+var FrontXQueryClientContext = (0, import_react4.createContext)(void 0);
+var useCommitEffect = typeof globalThis.window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
 function resolveFrontXQueryClient(app) {
   const clientApp = app;
   return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_RESOLVER_SYMBOL]?.();
@@ -399,8 +409,8 @@ function bootstrapFrontXQueryClient(app) {
   return resolveFrontXQueryClient(app);
 }
 function useBootstrappedFrontXQueryClient(app) {
-  const fromApp = (0, import_react3.useMemo)(() => bootstrapFrontXQueryClient(app), [app]);
-  const [eventResolvedClient, setEventResolvedClient] = (0, import_react3.useState)(
+  const fromApp = (0, import_react4.useMemo)(() => bootstrapFrontXQueryClient(app), [app]);
+  const [eventResolvedClient, setEventResolvedClient] = (0, import_react4.useState)(
     void 0
   );
   const queryClient = fromApp ?? (eventResolvedClient?.app === app ? eventResolvedClient.queryClient : void 0);
@@ -442,7 +452,7 @@ function FrontXQueryClientProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FrontXQueryClientContext.Provider, { value: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children }) });
 }
 function useOptionalFrontXQueryClient() {
-  return (0, import_react3.useContext)(FrontXQueryClientContext);
+  return (0, import_react4.useContext)(FrontXQueryClientContext);
 }
 function useRequiredFrontXQueryClient() {
   const queryClient = useOptionalFrontXQueryClient();
@@ -613,21 +623,22 @@ function useFrontXSuspenseInfiniteQuery(options) {
 }
 function useFrontXMutation(options, callbackCtx) {
   useRequiredFrontXQueryClient();
-  const latestRef = import_react3.default.useRef({ options, callbackCtx });
-  latestRef.current = { options, callbackCtx };
-  const fetchAbortControllersRef = import_react3.default.useRef(/* @__PURE__ */ new Set());
-  import_react3.default.useEffect(() => {
-    const fetchAbortControllers = fetchAbortControllersRef.current;
-    return () => {
-      if (latestRef.current.options.abortOnUnmount) {
-        for (const controller of fetchAbortControllers) {
-          controller.abort();
-        }
-        fetchAbortControllers.clear();
+  const latestRef = useLatest({ options, callbackCtx });
+  const fetchAbortControllersRef = import_react4.default.useRef(/* @__PURE__ */ new Set());
+  const abortFetchesOnUnmount = import_react4.default.useEffectEvent(() => {
+    if (options.abortOnUnmount) {
+      for (const controller of fetchAbortControllersRef.current) {
+        controller.abort();
       }
+      fetchAbortControllersRef.current.clear();
+    }
+  });
+  import_react4.default.useEffect(() => {
+    return () => {
+      abortFetchesOnUnmount();
     };
   }, []);
-  const mutationFn = import_react3.default.useCallback((variables, context) => {
+  const mutationFn = import_react4.default.useCallback((variables, context) => {
     const cancelOnSupersede = latestRef.current.options.cancelOnSupersede;
     if (cancelOnSupersede) {
       for (const controller2 of fetchAbortControllersRef.current) {
@@ -648,23 +659,23 @@ function useFrontXMutation(options, callbackCtx) {
     return latestRef.current.options.endpoint.fetch(variables, { signal: controller.signal }).finally(() => {
       fetchAbortControllersRef.current.delete(controller);
     });
-  }, []);
-  const onMutate = import_react3.default.useCallback((variables, _context) => {
+  }, [latestRef]);
+  const onMutate = import_react4.default.useCallback((variables, _context) => {
     const current = latestRef.current;
     if (!current.options.onMutate) {
       return void 0;
     }
     return current.options.onMutate(variables, current.callbackCtx);
-  }, []);
-  const onSuccess = import_react3.default.useCallback((data, variables, context) => {
+  }, [latestRef]);
+  const onSuccess = import_react4.default.useCallback((data, variables, context) => {
     const current = latestRef.current;
     return current.options.onSuccess?.(data, variables, context, current.callbackCtx);
-  }, []);
-  const onError = import_react3.default.useCallback((error, variables, context) => {
+  }, [latestRef]);
+  const onError = import_react4.default.useCallback((error, variables, context) => {
     const current = latestRef.current;
     return current.options.onError?.(error, variables, context, current.callbackCtx);
-  }, []);
-  const onSettled = import_react3.default.useCallback((data, error, variables, context) => {
+  }, [latestRef]);
+  const onSettled = import_react4.default.useCallback((data, error, variables, context) => {
     const current = latestRef.current;
     return current.options.onSettled?.(
       data,
@@ -673,7 +684,7 @@ function useFrontXMutation(options, callbackCtx) {
       context,
       current.callbackCtx
     );
-  }, []);
+  }, [latestRef]);
   const mutation = (0, import_react_query.useMutation)({
     mutationFn,
     onMutate: options.onMutate ? onMutate : void 0,
@@ -709,14 +720,14 @@ var FrontXProvider = ({
   app: providedApp,
   mfeBridge
 }) => {
-  const [stableConfig, setStableConfig] = (0, import_react4.useState)(config);
+  const [stableConfig, setStableConfig] = (0, import_react5.useState)(config);
   if (!shallowEqual(
     stableConfig,
     config
   )) {
     setStableConfig(config);
   }
-  const app = (0, import_react4.useMemo)(() => {
+  const app = (0, import_react5.useMemo)(() => {
     if (providedApp) {
       return providedApp;
     }
@@ -724,7 +735,7 @@ var FrontXProvider = ({
   }, [providedApp, stableConfig]);
   const queryClient = useBootstrappedFrontXQueryClient(app);
   const deferQuerySubtree = hasFrontXQueryClientActivator(app) && queryClient === void 0;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (queryClient || hasFrontXQueryClientActivator(app) || process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" || process.env.VITEST === "true") {
       return;
     }
@@ -732,7 +743,7 @@ var FrontXProvider = ({
       "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition. useApiQuery/useApiMutation will fail without it."
     );
   }, [app, queryClient]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (!providedApp) {
         app.destroy();
@@ -747,7 +758,7 @@ var FrontXProvider = ({
 };
 
 // src/hooks/useCanAccess.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function serializeRecordValue(value) {
   if (value === null) return "n:";
   if (typeof value === "string") return `s:${value}`;
@@ -764,24 +775,23 @@ function accessQueryKey(query) {
 function getAuthRuntime(app) {
   return app.auth ?? null;
 }
+var DENIED_NO_AUTH = { allow: false, isResolving: false };
 function useCanAccess(query) {
   const app = useFrontX();
+  const auth2 = getAuthRuntime(app);
   const stableKey = accessQueryKey(query);
-  const [stableQuery, setStableQuery] = (0, import_react5.useState)(() => query);
-  const [storedKey, setStoredKey] = (0, import_react5.useState)(stableKey);
-  const [result, setResult] = (0, import_react5.useState)({ allow: false, isResolving: true });
-  if (storedKey !== stableKey) {
-    setStoredKey(stableKey);
+  const [stableQuery, setStableQuery] = (0, import_react6.useState)(() => query);
+  const [runState, setRunState] = (0, import_react6.useState)({ auth: auth2, stableKey });
+  const [result, setResult] = (0, import_react6.useState)({ allow: false, isResolving: true });
+  if (runState.auth !== auth2 || runState.stableKey !== stableKey) {
+    setRunState({ auth: auth2, stableKey });
     setStableQuery(query);
     setResult({ allow: false, isResolving: true });
   }
-  (0, import_react5.useEffect)(() => {
-    const auth2 = getAuthRuntime(app);
+  (0, import_react6.useEffect)(() => {
     if (!auth2) {
-      setResult({ allow: false, isResolving: false });
       return;
     }
-    setResult({ allow: false, isResolving: true });
     let alive = true;
     const controller = new AbortController();
     void auth2.canAccess(stableQuery, { signal: controller.signal }).then((decision) => {
@@ -797,8 +807,8 @@ function useCanAccess(query) {
       alive = false;
       controller.abort();
     };
-  }, [app, stableQuery]);
-  return result;
+  }, [auth2, stableQuery]);
+  return auth2 ? result : DENIED_NO_AUTH;
 }
 
 // src/components/CanAccess.tsx
@@ -826,12 +836,12 @@ var import_react_redux3 = require("react-redux");
 var useAppSelector = import_react_redux3.useSelector;
 
 // src/hooks/useTranslation.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useTranslation() {
   const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
-  const version = (0, import_react6.useSyncExternalStore)(
-    (0, import_react6.useCallback)(
+  const version = (0, import_react7.useSyncExternalStore)(
+    (0, import_react7.useCallback)(
       (callback) => {
         return i18nRegistry2.subscribe(callback);
       },
@@ -840,17 +850,17 @@ function useTranslation() {
     () => i18nRegistry2.getVersion(),
     () => i18nRegistry2.getVersion()
   );
-  const language = (0, import_react6.useMemo)(() => {
+  const language = (0, import_react7.useMemo)(() => {
     void version;
     return i18nRegistry2.getLanguage();
   }, [i18nRegistry2, version]);
-  const t = (0, import_react6.useCallback)(
+  const t = (0, import_react7.useCallback)(
     (key, params) => {
       return i18nRegistry2.t(key, params);
     },
     [i18nRegistry2]
   );
-  const setLanguage = (0, import_react6.useCallback)(
+  const setLanguage = (0, import_react7.useCallback)(
     (lang) => {
       if (app.actions.setLanguage) {
         app.actions.setLanguage({ language: lang });
@@ -858,7 +868,7 @@ function useTranslation() {
     },
     [app.actions]
   );
-  const isRTL = (0, import_react6.useMemo)(() => {
+  const isRTL = (0, import_react7.useMemo)(() => {
     void language;
     return i18nRegistry2.isRTL();
   }, [i18nRegistry2, language]);
@@ -871,29 +881,28 @@ function useTranslation() {
 }
 
 // src/hooks/useScreenTranslations.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function isTranslationLoader(input) {
   return typeof input === "function";
 }
 function useScreenTranslations(screensetId, screenId, translations) {
   const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
-  const [loadedLanguage, setLoadedLanguage] = (0, import_react7.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const version = (0, import_react7.useSyncExternalStore)(
-    (0, import_react7.useCallback)(
+  const [loadedLanguage, setLoadedLanguage] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const version = (0, import_react8.useSyncExternalStore)(
+    (0, import_react8.useCallback)(
       (callback) => i18nRegistry2.subscribe(callback),
       [i18nRegistry2]
     ),
     () => i18nRegistry2.getVersion(),
     () => i18nRegistry2.getVersion()
   );
-  const currentLanguage = (0, import_react7.useMemo)(() => {
+  const currentLanguage = (0, import_react8.useMemo)(() => {
     void version;
     return i18nRegistry2.getLanguage();
   }, [i18nRegistry2, version]);
-  const loader = (0, import_react7.useMemo)(() => {
+  const loader = (0, import_react8.useMemo)(() => {
     if (isTranslationLoader(translations)) {
       return translations;
     }
@@ -906,12 +915,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
       return module2.default;
     };
   }, [translations]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!currentLanguage || currentLanguage === loadedLanguage) {
       return;
     }
     let cancelled = false;
-    setIsLoading(true);
     const loadTranslations = async () => {
       try {
         const namespace = `screen.${screensetId}.${screenId}`;
@@ -920,13 +928,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
         i18nRegistry2.register(namespace, currentLanguage, loadedTranslations);
         if (!cancelled) {
           setLoadedLanguage(currentLanguage);
-          setIsLoading(false);
           setError(null);
         }
       } catch (err) {
         if (!cancelled) {
           setError(err instanceof Error ? err : new Error(String(err)));
-          setIsLoading(false);
         }
       }
     };
@@ -935,16 +941,16 @@ function useScreenTranslations(screensetId, screenId, translations) {
       cancelled = true;
     };
   }, [screensetId, screenId, loader, i18nRegistry2, currentLanguage, loadedLanguage]);
-  const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage && !isLoading;
+  const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage;
   return { isLoaded, error };
 }
 
 // src/hooks/useFormatters.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_framework4 = require("@gears-frontx/framework");
 function useFormatters() {
   const { language } = useTranslation();
-  return (0, import_react8.useMemo)(
+  return (0, import_react9.useMemo)(
     () => {
       void language;
       return {
@@ -965,12 +971,12 @@ function useFormatters() {
 }
 
 // src/hooks/useTheme.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useTheme() {
   const app = useFrontX();
   const { themeRegistry } = app;
-  const version = (0, import_react9.useSyncExternalStore)(
-    (0, import_react9.useCallback)(
+  const version = (0, import_react10.useSyncExternalStore)(
+    (0, import_react10.useCallback)(
       (callback) => {
         return themeRegistry.subscribe(callback);
       },
@@ -979,18 +985,18 @@ function useTheme() {
     () => themeRegistry.getVersion(),
     () => themeRegistry.getVersion()
   );
-  const currentTheme = (0, import_react9.useMemo)(() => {
+  const currentTheme = (0, import_react10.useMemo)(() => {
     void version;
     const theme = themeRegistry.getCurrent();
     return theme?.id;
   }, [themeRegistry, version]);
-  const themes2 = (0, import_react9.useMemo)(() => {
+  const themes2 = (0, import_react10.useMemo)(() => {
     return themeRegistry.getAll().map((theme) => ({
       id: theme.id,
       name: theme.name
     }));
   }, [themeRegistry]);
-  const setTheme = (0, import_react9.useCallback)(
+  const setTheme = (0, import_react10.useCallback)(
     (themeId) => {
       if (app.actions.changeTheme) {
         app.actions.changeTheme({ themeId });
@@ -1026,35 +1032,48 @@ function useApiSuspenseInfiniteQuery(options) {
 }
 
 // src/hooks/useApiMutation.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useApiMutation(options) {
   const queryClient = useRequiredFrontXQueryClient();
-  const queryCache2 = (0, import_react10.useMemo)(() => createQueryCache(queryClient), [queryClient]);
-  const callbackCtx = (0, import_react10.useMemo)(() => ({ queryCache: queryCache2 }), [queryCache2]);
+  const queryCache2 = (0, import_react11.useMemo)(() => createQueryCache(queryClient), [queryClient]);
+  const callbackCtx = (0, import_react11.useMemo)(() => ({ queryCache: queryCache2 }), [queryCache2]);
   return useFrontXMutation(options, callbackCtx);
 }
 
 // src/hooks/useApiStream.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useApiStream(descriptor, options) {
   const mode = options?.mode ?? "latest";
   const enabled = options?.enabled ?? true;
-  const [data, setData] = (0, import_react11.useState)(void 0);
-  const [events, setEvents] = (0, import_react11.useState)([]);
-  const [status, setStatus] = (0, import_react11.useState)("idle");
-  const [error, setError] = (0, import_react11.useState)(null);
-  const connectPromiseRef = (0, import_react11.useRef)(null);
-  const connectionIdRef = (0, import_react11.useRef)(null);
-  const disconnectRequestedRef = (0, import_react11.useRef)(false);
-  const descriptorRef = (0, import_react11.useRef)(descriptor);
-  descriptorRef.current = descriptor;
-  const descriptorKey = (0, import_react11.useMemo)(() => JSON.stringify(descriptor.key), [descriptor.key]);
-  (0, import_react11.useEffect)(() => {
+  const [data, setData] = (0, import_react12.useState)(void 0);
+  const [events, setEvents] = (0, import_react12.useState)([]);
+  const [status, setStatus] = (0, import_react12.useState)(() => enabled ? "connecting" : "idle");
+  const [error, setError] = (0, import_react12.useState)(null);
+  const connectPromiseRef = (0, import_react12.useRef)(null);
+  const connectionIdRef = (0, import_react12.useRef)(null);
+  const disconnectRequestedRef = (0, import_react12.useRef)(false);
+  const descriptorRef = useLatest(descriptor);
+  const descriptorKey = (0, import_react12.useMemo)(() => JSON.stringify(descriptor.key), [descriptor.key]);
+  const resetKey = `${descriptorKey}:${mode}`;
+  const [prevResetKey, setPrevResetKey] = (0, import_react12.useState)(resetKey);
+  if (resetKey !== prevResetKey) {
+    setPrevResetKey(resetKey);
     setData(void 0);
     setEvents([]);
     setError(null);
-  }, [descriptorKey, mode]);
-  const disconnect = (0, import_react11.useCallback)(() => {
+  }
+  const connectKey = `${resetKey}:${enabled}`;
+  const [prevConnectKey, setPrevConnectKey] = (0, import_react12.useState)(connectKey);
+  if (connectKey !== prevConnectKey) {
+    setPrevConnectKey(connectKey);
+    if (enabled) {
+      setData(void 0);
+      setEvents([]);
+      setStatus("connecting");
+      setError(null);
+    }
+  }
+  const disconnect = (0, import_react12.useCallback)(() => {
     disconnectRequestedRef.current = true;
     if (connectionIdRef.current) {
       descriptorRef.current.disconnect(connectionIdRef.current);
@@ -1062,19 +1081,14 @@ function useApiStream(descriptor, options) {
       disconnectRequestedRef.current = false;
     }
     setStatus("disconnected");
-  }, []);
-  (0, import_react11.useEffect)(() => {
+  }, [descriptorRef]);
+  (0, import_react12.useEffect)(() => {
     if (!enabled) {
-      setStatus("idle");
       return;
     }
     let cancelled = false;
     disconnectRequestedRef.current = false;
     const d = descriptorRef.current;
-    setData(void 0);
-    setEvents([]);
-    setStatus("connecting");
-    setError(null);
     const connectPromise = d.connect(
       (event) => {
         if (cancelled) return;
@@ -1120,12 +1134,12 @@ function useApiStream(descriptor, options) {
       connectPromiseRef.current = null;
       connectionIdRef.current = null;
     };
-  }, [descriptorKey, enabled, mode]);
-  return { data, events, status, error, disconnect };
+  }, [descriptorKey, enabled, mode, descriptorRef]);
+  return { data, events, status: enabled ? status : "idle", error, disconnect };
 }
 
 // src/hooks/useQueryCache.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useQueryCache() {
   const queryClient = useOptionalFrontXQueryClient();
   if (!queryClient) {
@@ -1133,7 +1147,7 @@ function useQueryCache() {
       "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition."
     );
   }
-  return (0, import_react12.useMemo)(() => createQueryCache(queryClient), [queryClient]);
+  return (0, import_react13.useMemo)(() => createQueryCache(queryClient), [queryClient]);
 }
 
 // src/mfe/hooks/useMfeBridge.ts
@@ -1143,31 +1157,31 @@ function useMfeBridge() {
 }
 
 // src/mfe/hooks/useSharedProperty.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useSharedProperty(propertyTypeId) {
   const { bridge } = useMfeContext();
-  const subscribe = (0, import_react13.useCallback)((callback) => {
+  const subscribe = (0, import_react14.useCallback)((callback) => {
     return bridge.subscribeToProperty(propertyTypeId, () => {
       callback();
     });
   }, [bridge, propertyTypeId]);
-  const getSnapshot = (0, import_react13.useCallback)(() => {
+  const getSnapshot = (0, import_react14.useCallback)(() => {
     const property = bridge.getProperty(propertyTypeId);
     return property?.value;
   }, [bridge, propertyTypeId]);
-  const value = (0, import_react13.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const value = (0, import_react14.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   return value;
 }
 
 // src/mfe/hooks/useHostAction.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useHostAction(actionTypeId) {
   const { bridge } = useMfeContext();
-  return (0, import_react14.useCallback)((payload) => {
+  return (0, import_react15.useCallback)((payload) => {
     const chain = {
       action: {
         type: actionTypeId,
-        target: bridge.domainId,
+        target: bridge.extDomainId,
         payload
       }
     };
@@ -1181,7 +1195,7 @@ function useHostAction(actionTypeId) {
 }
 
 // src/mfe/hooks/useDomainExtensions.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useDomainExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1190,14 +1204,14 @@ function useDomainExtensions(domainId) {
       "useDomainExtensions requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = (0, import_react15.useCallback)(
+  const subscribe = (0, import_react16.useCallback)(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = (0, import_react15.useRef)({ ids: "", extensions: [] });
-  const getSnapshot = (0, import_react15.useCallback)(() => {
+  const cacheRef = (0, import_react16.useRef)({ ids: "", extensions: [] });
+  const getSnapshot = (0, import_react16.useCallback)(() => {
     const extensions = registry.getExtensionsForDomain(domainId);
     const ids = extensions.map((e) => e.id).join(",");
     if (ids !== cacheRef.current.ids) {
@@ -1205,11 +1219,11 @@ function useDomainExtensions(domainId) {
     }
     return cacheRef.current.extensions;
   }, [registry, domainId]);
-  return (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react16.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 }
 
 // src/mfe/hooks/useMountedExtensions.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useMountedExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1218,14 +1232,14 @@ function useMountedExtensions(domainId) {
       "useMountedExtensions requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = (0, import_react16.useCallback)(
+  const subscribe = (0, import_react17.useCallback)(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = (0, import_react16.useRef)({ key: "", extensions: [] });
-  const getSnapshot = (0, import_react16.useCallback)(() => {
+  const cacheRef = (0, import_react17.useRef)({ key: "", extensions: [] });
+  const getSnapshot = (0, import_react17.useCallback)(() => {
     const ids = registry.getMountedExtensions(domainId);
     const resolved = ids.map((id) => registry.getExtension(id)).filter((ext) => ext !== void 0);
     const key = ids.join(",");
@@ -1234,11 +1248,11 @@ function useMountedExtensions(domainId) {
     }
     return cacheRef.current.extensions;
   }, [registry, domainId]);
-  return (0, import_react16.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react17.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 }
 
 // src/mfe/hooks/useRegisteredPackages.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useRegisteredPackages() {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1247,14 +1261,14 @@ function useRegisteredPackages() {
       "useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = (0, import_react17.useCallback)(
+  const subscribe = (0, import_react18.useCallback)(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = (0, import_react17.useRef)({ packages: "", list: [] });
-  const getSnapshot = (0, import_react17.useCallback)(() => {
+  const cacheRef = (0, import_react18.useRef)({ packages: "", list: [] });
+  const getSnapshot = (0, import_react18.useCallback)(() => {
     const list = registry.getRegisteredPackages();
     const packages = list.join(",");
     if (packages !== cacheRef.current.packages) {
@@ -1262,7 +1276,7 @@ function useRegisteredPackages() {
     }
     return cacheRef.current.list;
   }, [registry]);
-  return (0, import_react17.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react18.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 }
 
 // src/mfe/ThemeAwareReactLifecycle.tsx
@@ -1373,7 +1387,7 @@ var ThemeAwareReactLifecycle = class {
 };
 
 // src/mfe/components/ExtensionDomainSlot.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ExtensionDomainSlot(props) {
   const {
@@ -1384,13 +1398,15 @@ function ExtensionDomainSlot(props) {
     onDetached,
     loadingComponent = null
   } = props;
-  const rootRef = (0, import_react18.useRef)(null);
-  const onAttachedRef = (0, import_react18.useRef)(onAttached);
-  const onDetachedRef = (0, import_react18.useRef)(onDetached);
-  onAttachedRef.current = onAttached;
-  onDetachedRef.current = onDetached;
-  const [attached, setAttached] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const rootRef = (0, import_react19.useRef)(null);
+  const emitAttached = (0, import_react19.useEffectEvent)((root) => {
+    onAttached?.(root);
+  });
+  const emitDetached = (0, import_react19.useEffectEvent)(() => {
+    onDetached?.();
+  });
+  const [attached, setAttached] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -1398,11 +1414,11 @@ function ExtensionDomainSlot(props) {
     const mounter = registry.getMounter(domainId);
     mounter.attach(root);
     setAttached(true);
-    onAttachedRef.current?.(root);
+    emitAttached(root);
     return () => {
       void mounter.detach();
       setAttached(false);
-      onDetachedRef.current?.();
+      emitDetached();
     };
   }, [registry, domainId]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(