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

package/dist/index.d.cts

@@ -366,10 +366,9 @@ declare function useApiSuspenseInfiniteQuery<TPage = unknown, TError = Error>(op
 /**
  * useApiStream - Declarative SSE streaming hook
  *
- * Accepts a StreamDescriptor from @gears-frontx/api and manages the EventSource
- * lifecycle: connects on mount, disconnects on unmount/descriptor change.
- * Returns the latest event, accumulated events, connection status, and
- * a manual disconnect function.
+ * Accepts a StreamDescriptor from @gears-frontx/api and returns the latest
+ * event, accumulated events, connection status, and a manual disconnect
+ * function.
  *
  * @example
  * ```tsx
@@ -395,17 +394,75 @@ interface ApiStreamOptions {
 }
 /** Return type of useApiStream. */
 interface ApiStreamResult<TEvent> {
-    /** Latest event payload (always set in both modes). */
+    /** Latest event payload, set in both modes — `undefined` until the first event and after each connect attempt resets it. */
     data: TEvent | undefined;
     /** All received events when `mode: 'accumulate'`; empty array in `'latest'` mode. */
     events: TEvent[];
     /** Connection lifecycle status. */
     status: StreamStatus;
-    /** Error if the connection failed. */
+    /** Last connect error — set when a connect attempt rejects, cleared when the next attempt starts. */
     error: Error | null;
     /** Manually close the connection. */
     disconnect: () => void;
 }
+/**
+ * Manages the status lifecycle for a single SSE stream connection.
+ *
+ * **Status values**
+ * - `'idle'` — no connection is being attempted. This is the initial status
+ *   before the first connect effect runs, and it is ordinarily the status
+ *   while `enabled` is `false`. Consumers must not assume `'idle'` means "never
+ *   connected" — a stream that is disabled after having connected returns to
+ *   `'idle'` too, and `data`/`events` from the earlier connection are not
+ *   cleared by that transition alone (they are cleared by mode/key changes,
+ *   see below).
+ * - `'connecting'` — `descriptor.connect()` has been called and its promise
+ *   has not yet settled.
+ * - `'connected'` — set both when `connect()` resolves (unless a disconnect
+ *   was requested while it was pending) and, independently, whenever the
+ *   `onEvent` callback delivers a new event. Because every event re-asserts
+ *   `'connected'`, this status also serves as "still receiving events."
+ * - `'disconnected'` — reached via any of: the descriptor's `onComplete`
+ *   callback firing (the stream ended normally), `connect()` rejecting while
+ *   a disconnect was requested concurrently, or the manual `disconnect()`
+ *   function being called. `disconnect()` has no `enabled` guard: called
+ *   while the stream is disabled it still sets `'disconnected'`, which
+ *   persists until the next connect-effect run.
+ * - `'error'` — `connect()` rejected and no disconnect was requested while it
+ *   was pending. `error` holds the rejection, coerced to an `Error` if it
+ *   wasn't one already.
+ *
+ * **Transitions**
+ * - Mount / `enabled` becomes `true` / `descriptor.key` or `mode` changes:
+ *   `data`, `events`, and `error` are reset, then status goes to
+ *   `'connecting'` and `connect()` is called.
+ * - `enabled` becomes `false` (or starts `false`): status is forced to
+ *   `'idle'` and `connect()` is never called; no other field is reset by
+ *   this transition alone.
+ * - Unmount, `descriptor.key` change, `mode` change, or `enabled` flipping to
+ *   `false` while connected or connecting: the previous connection is torn
+ *   down via `descriptor.disconnect()` once its `connect()` promise settles
+ *   (or immediately skipped if it rejected). All four share the same cleanup
+ *   path: the effect's cleanup runs on every dependency change and on unmount.
+ * - Calling `disconnect()`: if a connection id is already resolved, it is
+ *   disconnected immediately and status becomes `'disconnected'`. If
+ *   `connect()` is still pending, the request is recorded and honored when
+ *   the promise settles — the newly resolved connection is torn down instead
+ *   of being adopted, and status is `'disconnected'`. One caveat:
+ *   `disconnect()` does not cancel the event callback, so a buffered or
+ *   in-flight event landing after the call re-asserts `'connected'` — and in
+ *   the pending-connect case the settle handler tears the connection down
+ *   without touching status, so that stray `'connected'` persists.
+ * - Stream completion while `connect()` is still pending: the current
+ *   implementation lets `onComplete` set `'disconnected'`, then the settle
+ *   handler adopts the connection id and re-asserts `'connected'` anyway.
+ *   This is known current behavior, not a durable guarantee: a pending
+ *   upstream derived-status rewrite is expected to remove this transition.
+ *
+ * `enabled` (default `true`) is the only way to defer connecting past mount;
+ * flipping it back to `true` re-runs the same connect sequence as a fresh
+ * mount would.
+ */
 declare function useApiStream<TEvent>(descriptor: StreamDescriptor<TEvent>, options?: ApiStreamOptions): ApiStreamResult<TEvent>;
 
 /**
@@ -498,7 +555,7 @@ declare const MfeProvider: React__default.FC<MfeProviderProps>;
  *   // bridge.executeActionsChain(chain);
  *   // bridge.subscribeToProperty(propertyTypeId, callback);
  *
- *   return <div>Domain: {bridge.domainId}</div>;
+ *   return <div>Domain: {bridge.extDomainId}</div>;
  * }
  * ```
  */

package/dist/index.d.ts

@@ -366,10 +366,9 @@ declare function useApiSuspenseInfiniteQuery<TPage = unknown, TError = Error>(op
 /**
  * useApiStream - Declarative SSE streaming hook
  *
- * Accepts a StreamDescriptor from @gears-frontx/api and manages the EventSource
- * lifecycle: connects on mount, disconnects on unmount/descriptor change.
- * Returns the latest event, accumulated events, connection status, and
- * a manual disconnect function.
+ * Accepts a StreamDescriptor from @gears-frontx/api and returns the latest
+ * event, accumulated events, connection status, and a manual disconnect
+ * function.
  *
  * @example
  * ```tsx
@@ -395,17 +394,75 @@ interface ApiStreamOptions {
 }
 /** Return type of useApiStream. */
 interface ApiStreamResult<TEvent> {
-    /** Latest event payload (always set in both modes). */
+    /** Latest event payload, set in both modes — `undefined` until the first event and after each connect attempt resets it. */
     data: TEvent | undefined;
     /** All received events when `mode: 'accumulate'`; empty array in `'latest'` mode. */
     events: TEvent[];
     /** Connection lifecycle status. */
     status: StreamStatus;
-    /** Error if the connection failed. */
+    /** Last connect error — set when a connect attempt rejects, cleared when the next attempt starts. */
     error: Error | null;
     /** Manually close the connection. */
     disconnect: () => void;
 }
+/**
+ * Manages the status lifecycle for a single SSE stream connection.
+ *
+ * **Status values**
+ * - `'idle'` — no connection is being attempted. This is the initial status
+ *   before the first connect effect runs, and it is ordinarily the status
+ *   while `enabled` is `false`. Consumers must not assume `'idle'` means "never
+ *   connected" — a stream that is disabled after having connected returns to
+ *   `'idle'` too, and `data`/`events` from the earlier connection are not
+ *   cleared by that transition alone (they are cleared by mode/key changes,
+ *   see below).
+ * - `'connecting'` — `descriptor.connect()` has been called and its promise
+ *   has not yet settled.
+ * - `'connected'` — set both when `connect()` resolves (unless a disconnect
+ *   was requested while it was pending) and, independently, whenever the
+ *   `onEvent` callback delivers a new event. Because every event re-asserts
+ *   `'connected'`, this status also serves as "still receiving events."
+ * - `'disconnected'` — reached via any of: the descriptor's `onComplete`
+ *   callback firing (the stream ended normally), `connect()` rejecting while
+ *   a disconnect was requested concurrently, or the manual `disconnect()`
+ *   function being called. `disconnect()` has no `enabled` guard: called
+ *   while the stream is disabled it still sets `'disconnected'`, which
+ *   persists until the next connect-effect run.
+ * - `'error'` — `connect()` rejected and no disconnect was requested while it
+ *   was pending. `error` holds the rejection, coerced to an `Error` if it
+ *   wasn't one already.
+ *
+ * **Transitions**
+ * - Mount / `enabled` becomes `true` / `descriptor.key` or `mode` changes:
+ *   `data`, `events`, and `error` are reset, then status goes to
+ *   `'connecting'` and `connect()` is called.
+ * - `enabled` becomes `false` (or starts `false`): status is forced to
+ *   `'idle'` and `connect()` is never called; no other field is reset by
+ *   this transition alone.
+ * - Unmount, `descriptor.key` change, `mode` change, or `enabled` flipping to
+ *   `false` while connected or connecting: the previous connection is torn
+ *   down via `descriptor.disconnect()` once its `connect()` promise settles
+ *   (or immediately skipped if it rejected). All four share the same cleanup
+ *   path: the effect's cleanup runs on every dependency change and on unmount.
+ * - Calling `disconnect()`: if a connection id is already resolved, it is
+ *   disconnected immediately and status becomes `'disconnected'`. If
+ *   `connect()` is still pending, the request is recorded and honored when
+ *   the promise settles — the newly resolved connection is torn down instead
+ *   of being adopted, and status is `'disconnected'`. One caveat:
+ *   `disconnect()` does not cancel the event callback, so a buffered or
+ *   in-flight event landing after the call re-asserts `'connected'` — and in
+ *   the pending-connect case the settle handler tears the connection down
+ *   without touching status, so that stray `'connected'` persists.
+ * - Stream completion while `connect()` is still pending: the current
+ *   implementation lets `onComplete` set `'disconnected'`, then the settle
+ *   handler adopts the connection id and re-asserts `'connected'` anyway.
+ *   This is known current behavior, not a durable guarantee: a pending
+ *   upstream derived-status rewrite is expected to remove this transition.
+ *
+ * `enabled` (default `true`) is the only way to defer connecting past mount;
+ * flipping it back to `true` re-runs the same connect sequence as a fresh
+ * mount would.
+ */
 declare function useApiStream<TEvent>(descriptor: StreamDescriptor<TEvent>, options?: ApiStreamOptions): ApiStreamResult<TEvent>;
 
 /**
@@ -498,7 +555,7 @@ declare const MfeProvider: React__default.FC<MfeProviderProps>;
  *   // bridge.executeActionsChain(chain);
  *   // bridge.subscribeToProperty(propertyTypeId, callback);
  *
- *   return <div>Domain: {bridge.domainId}</div>;
+ *   return <div>Domain: {bridge.extDomainId}</div>;
  * }
  * ```
  */

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/FrontXProvider.tsx
-import { useMemo as useMemo2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useEffect as useEffect3, useState as useState2 } from "react";
 import { Provider as ReduxProvider } from "react-redux";
 import {
   createFrontXApp
@@ -41,7 +41,7 @@ var MfeProvider = ({ value, children }) => {
 import React, {
   createContext as createContext3,
   useContext as useContext3,
-  useEffect,
+  useEffect as useEffect2,
   useLayoutEffect,
   useMemo,
   useState
@@ -164,13 +164,23 @@ function createQueryCache(queryClient) {
   };
 }
 
+// src/hooks/useLatest.ts
+import { useEffect, useRef } from "react";
+function useLatest(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
 // src/queryClient.tsx
 import { jsx as jsx2 } from "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 = createContext3(void 0);
-var useCommitEffect = typeof globalThis.window === "undefined" ? useEffect : useLayoutEffect;
+var useCommitEffect = typeof globalThis.window === "undefined" ? useEffect2 : useLayoutEffect;
 function resolveFrontXQueryClient(app) {
   const clientApp = app;
   return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_RESOLVER_SYMBOL]?.();
@@ -409,18 +419,19 @@ function useFrontXSuspenseInfiniteQuery(options) {
 }
 function useFrontXMutation(options, callbackCtx) {
   useRequiredFrontXQueryClient();
-  const latestRef = React.useRef({ options, callbackCtx });
-  latestRef.current = { options, callbackCtx };
+  const latestRef = useLatest({ options, callbackCtx });
   const fetchAbortControllersRef = React.useRef(/* @__PURE__ */ new Set());
+  const abortFetchesOnUnmount = React.useEffectEvent(() => {
+    if (options.abortOnUnmount) {
+      for (const controller of fetchAbortControllersRef.current) {
+        controller.abort();
+      }
+      fetchAbortControllersRef.current.clear();
+    }
+  });
   React.useEffect(() => {
-    const fetchAbortControllers = fetchAbortControllersRef.current;
     return () => {
-      if (latestRef.current.options.abortOnUnmount) {
-        for (const controller of fetchAbortControllers) {
-          controller.abort();
-        }
-        fetchAbortControllers.clear();
-      }
+      abortFetchesOnUnmount();
     };
   }, []);
   const mutationFn = React.useCallback((variables, context) => {
@@ -444,22 +455,22 @@ function useFrontXMutation(options, callbackCtx) {
     return latestRef.current.options.endpoint.fetch(variables, { signal: controller.signal }).finally(() => {
       fetchAbortControllersRef.current.delete(controller);
     });
-  }, []);
+  }, [latestRef]);
   const onMutate = React.useCallback((variables, _context) => {
     const current = latestRef.current;
     if (!current.options.onMutate) {
       return void 0;
     }
     return current.options.onMutate(variables, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onSuccess = React.useCallback((data, variables, context) => {
     const current = latestRef.current;
     return current.options.onSuccess?.(data, variables, context, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onError = React.useCallback((error, variables, context) => {
     const current = latestRef.current;
     return current.options.onError?.(error, variables, context, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onSettled = React.useCallback((data, error, variables, context) => {
     const current = latestRef.current;
     return current.options.onSettled?.(
@@ -469,7 +480,7 @@ function useFrontXMutation(options, callbackCtx) {
       context,
       current.callbackCtx
     );
-  }, []);
+  }, [latestRef]);
   const mutation = useMutation({
     mutationFn,
     onMutate: options.onMutate ? onMutate : void 0,
@@ -520,7 +531,7 @@ var FrontXProvider = ({
   }, [providedApp, stableConfig]);
   const queryClient = useBootstrappedFrontXQueryClient(app);
   const deferQuerySubtree = hasFrontXQueryClientActivator(app) && queryClient === void 0;
-  useEffect2(() => {
+  useEffect3(() => {
     if (queryClient || hasFrontXQueryClientActivator(app) || process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" || process.env.VITEST === "true") {
       return;
     }
@@ -528,7 +539,7 @@ var FrontXProvider = ({
       "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition. useApiQuery/useApiMutation will fail without it."
     );
   }, [app, queryClient]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (!providedApp) {
         app.destroy();
@@ -543,7 +554,7 @@ var FrontXProvider = ({
 };
 
 // src/hooks/useCanAccess.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 function serializeRecordValue(value) {
   if (value === null) return "n:";
   if (typeof value === "string") return `s:${value}`;
@@ -560,24 +571,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] = useState3(() => query);
-  const [storedKey, setStoredKey] = useState3(stableKey);
+  const [runState, setRunState] = useState3({ auth: auth2, stableKey });
   const [result, setResult] = useState3({ allow: false, isResolving: true });
-  if (storedKey !== stableKey) {
-    setStoredKey(stableKey);
+  if (runState.auth !== auth2 || runState.stableKey !== stableKey) {
+    setRunState({ auth: auth2, stableKey });
     setStableQuery(query);
     setResult({ allow: false, isResolving: true });
   }
-  useEffect3(() => {
-    const auth2 = getAuthRuntime(app);
+  useEffect4(() => {
     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) => {
@@ -593,8 +603,8 @@ function useCanAccess(query) {
       alive = false;
       controller.abort();
     };
-  }, [app, stableQuery]);
-  return result;
+  }, [auth2, stableQuery]);
+  return auth2 ? result : DENIED_NO_AUTH;
 }
 
 // src/components/CanAccess.tsx
@@ -667,7 +677,7 @@ function useTranslation() {
 }
 
 // src/hooks/useScreenTranslations.ts
-import { useState as useState4, useEffect as useEffect4, useMemo as useMemo4, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useState as useState4, useEffect as useEffect5, useMemo as useMemo4, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function isTranslationLoader(input) {
   return typeof input === "function";
 }
@@ -675,7 +685,6 @@ function useScreenTranslations(screensetId, screenId, translations) {
   const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
   const [loadedLanguage, setLoadedLanguage] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(false);
   const [error, setError] = useState4(null);
   const version = useSyncExternalStore2(
     useCallback2(
@@ -702,12 +711,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
       return module.default;
     };
   }, [translations]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!currentLanguage || currentLanguage === loadedLanguage) {
       return;
     }
     let cancelled = false;
-    setIsLoading(true);
     const loadTranslations = async () => {
       try {
         const namespace = `screen.${screensetId}.${screenId}`;
@@ -716,13 +724,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);
         }
       }
     };
@@ -731,7 +737,7 @@ 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 };
 }
 
@@ -842,25 +848,38 @@ function useApiMutation(options) {
 }
 
 // src/hooks/useApiStream.ts
-import { useEffect as useEffect5, useMemo as useMemo8, useRef, useState as useState5, useCallback as useCallback4 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef2, useState as useState5, useCallback as useCallback4 } from "react";
 function useApiStream(descriptor, options) {
   const mode = options?.mode ?? "latest";
   const enabled = options?.enabled ?? true;
   const [data, setData] = useState5(void 0);
   const [events, setEvents] = useState5([]);
-  const [status, setStatus] = useState5("idle");
+  const [status, setStatus] = useState5(() => enabled ? "connecting" : "idle");
   const [error, setError] = useState5(null);
-  const connectPromiseRef = useRef(null);
-  const connectionIdRef = useRef(null);
-  const disconnectRequestedRef = useRef(false);
-  const descriptorRef = useRef(descriptor);
-  descriptorRef.current = descriptor;
+  const connectPromiseRef = useRef2(null);
+  const connectionIdRef = useRef2(null);
+  const disconnectRequestedRef = useRef2(false);
+  const descriptorRef = useLatest(descriptor);
   const descriptorKey = useMemo8(() => JSON.stringify(descriptor.key), [descriptor.key]);
-  useEffect5(() => {
+  const resetKey = `${descriptorKey}:${mode}`;
+  const [prevResetKey, setPrevResetKey] = useState5(resetKey);
+  if (resetKey !== prevResetKey) {
+    setPrevResetKey(resetKey);
     setData(void 0);
     setEvents([]);
     setError(null);
-  }, [descriptorKey, mode]);
+  }
+  const connectKey = `${resetKey}:${enabled}`;
+  const [prevConnectKey, setPrevConnectKey] = useState5(connectKey);
+  if (connectKey !== prevConnectKey) {
+    setPrevConnectKey(connectKey);
+    if (enabled) {
+      setData(void 0);
+      setEvents([]);
+      setStatus("connecting");
+      setError(null);
+    }
+  }
   const disconnect = useCallback4(() => {
     disconnectRequestedRef.current = true;
     if (connectionIdRef.current) {
@@ -869,19 +888,14 @@ function useApiStream(descriptor, options) {
       disconnectRequestedRef.current = false;
     }
     setStatus("disconnected");
-  }, []);
-  useEffect5(() => {
+  }, [descriptorRef]);
+  useEffect6(() => {
     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;
@@ -927,8 +941,8 @@ 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
@@ -974,7 +988,7 @@ function useHostAction(actionTypeId) {
     const chain = {
       action: {
         type: actionTypeId,
-        target: bridge.domainId,
+        target: bridge.extDomainId,
         payload
       }
     };
@@ -988,7 +1002,7 @@ function useHostAction(actionTypeId) {
 }
 
 // src/mfe/hooks/useDomainExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef2 } from "react";
+import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef3 } from "react";
 function useDomainExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1003,7 +1017,7 @@ function useDomainExtensions(domainId) {
     },
     [app.store]
   );
-  const cacheRef = useRef2({ ids: "", extensions: [] });
+  const cacheRef = useRef3({ ids: "", extensions: [] });
   const getSnapshot = useCallback7(() => {
     const extensions = registry.getExtensionsForDomain(domainId);
     const ids = extensions.map((e) => e.id).join(",");
@@ -1016,7 +1030,7 @@ function useDomainExtensions(domainId) {
 }
 
 // src/mfe/hooks/useMountedExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef3 } from "react";
+import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef4 } from "react";
 function useMountedExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1031,7 +1045,7 @@ function useMountedExtensions(domainId) {
     },
     [app.store]
   );
-  const cacheRef = useRef3({ key: "", extensions: [] });
+  const cacheRef = useRef4({ key: "", extensions: [] });
   const getSnapshot = useCallback8(() => {
     const ids = registry.getMountedExtensions(domainId);
     const resolved = ids.map((id) => registry.getExtension(id)).filter((ext) => ext !== void 0);
@@ -1045,7 +1059,7 @@ function useMountedExtensions(domainId) {
 }
 
 // src/mfe/hooks/useRegisteredPackages.ts
-import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback9, useRef as useRef4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback9, useRef as useRef5 } from "react";
 function useRegisteredPackages() {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1060,7 +1074,7 @@ function useRegisteredPackages() {
     },
     [app.store]
   );
-  const cacheRef = useRef4({ packages: "", list: [] });
+  const cacheRef = useRef5({ packages: "", list: [] });
   const getSnapshot = useCallback9(() => {
     const list = registry.getRegisteredPackages();
     const packages = list.join(",");
@@ -1180,7 +1194,7 @@ var ThemeAwareReactLifecycle = class {
 };
 
 // src/mfe/components/ExtensionDomainSlot.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect7, useEffectEvent, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function ExtensionDomainSlot(props) {
   const {
@@ -1191,13 +1205,15 @@ function ExtensionDomainSlot(props) {
     onDetached,
     loadingComponent = null
   } = props;
-  const rootRef = useRef5(null);
-  const onAttachedRef = useRef5(onAttached);
-  const onDetachedRef = useRef5(onDetached);
-  onAttachedRef.current = onAttached;
-  onDetachedRef.current = onDetached;
+  const rootRef = useRef6(null);
+  const emitAttached = useEffectEvent((root) => {
+    onAttached?.(root);
+  });
+  const emitDetached = useEffectEvent(() => {
+    onDetached?.();
+  });
   const [attached, setAttached] = useState6(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -1205,11 +1221,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__ */ jsx5(