@react-navigation/core 8.0.0-alpha.25 → 8.0.0-alpha.27

package/src/useOnAction.tsx

@@ -1,16 +1,14 @@
 import type {
   NavigationAction,
-  NavigationRoute,
   NavigationState,
-  ParamListBase,
-  PartialRoute,
   PartialState,
   Router,
   RouterConfigOptions,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { getLoaderForState } from './DataLoading';
+import { ConsumedParamsContext } from './ConsumedParamsContext';
+import { getLoaderForStateChange } from './DataLoading';
 import {
   type ChildActionListener,
   type ChildBeforeRemoveListener,
@@ -32,40 +30,6 @@ type Options<State extends NavigationState> = {
   emitter: NavigationEventEmitter<EventMapCore<any>>;
 };
 
-type MaybePartialRoute =
-  | NavigationRoute<ParamListBase, string>
-  | PartialRoute<NavigationRoute<ParamListBase, string>>;
-
-const didFocusedRouteChange = (
-  currentState: NavigationState | PartialState<NavigationState>,
-  nextState: NavigationState | PartialState<NavigationState>
-) => {
-  let currentFocusedRoute: MaybePartialRoute | undefined =
-    currentState.routes[currentState.index ?? 0];
-
-  let nextFocusedRoute: MaybePartialRoute | undefined =
-    nextState.routes[nextState.index ?? 0];
-
-  let changed = currentFocusedRoute?.key !== nextFocusedRoute?.key;
-
-  while (
-    !changed &&
-    currentFocusedRoute?.state != null &&
-    nextFocusedRoute?.state != null &&
-    currentFocusedRoute.state !== nextFocusedRoute.state
-  ) {
-    currentFocusedRoute =
-      currentFocusedRoute.state.routes[currentFocusedRoute.state.index ?? 0];
-
-    nextFocusedRoute =
-      nextFocusedRoute.state.routes[nextFocusedRoute.state.index ?? 0];
-
-    changed = currentFocusedRoute?.key !== nextFocusedRoute?.key;
-  }
-
-  return changed;
-};
-
 /**
  * Hook to handle actions for a navigator, including state updates and bubbling.
  *
@@ -93,6 +57,7 @@ export function useOnAction<State extends NavigationState>({
   } = React.use(NavigationBuilderContext);
 
   const tree = React.use(StaticTreeContext);
+  const consumedParams = React.use(ConsumedParamsContext);
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
@@ -146,8 +111,13 @@ export function useOnAction<State extends NavigationState>({
 
             onDispatchAction(action, false);
 
-            if (tree && didFocusedRouteChange(state, result)) {
-              const loader = getLoaderForState(tree, result);
+            if (tree) {
+              const loader = getLoaderForStateChange(
+                tree,
+                result,
+                state,
+                consumedParams
+              );
 
               loader?.();
             }
@@ -194,6 +164,7 @@ export function useOnAction<State extends NavigationState>({
     [
       actionListeners,
       beforeRemoveListeners,
+      consumedParams,
       emitter,
       getState,
       key,

package/src/useOnPreventRemove.tsx

@@ -39,9 +39,10 @@ export const shouldPreventRemove = (
       .filter(([, route]) => route.key != null)
   );
 
-  const visitedRouteKeys: Set<string> =
-    // @ts-expect-error: add this property to mark that we've already emitted this action
-    action[VISITED_ROUTE_KEYS] ?? new Set<string>();
+  const visitedRouteKeys =
+    VISITED_ROUTE_KEYS in action && action[VISITED_ROUTE_KEYS] instanceof Set
+      ? action[VISITED_ROUTE_KEYS]
+      : new Set<string>();
 
   const beforeRemoveAction = {
     ...action,

package/src/useRouteCache.tsx

@@ -41,10 +41,7 @@ export function useRouteCache<State extends NavigationState>(
       // FIXME: since the state is updated with mutation, the route object cannot be frozen
       // As a workaround, loop through the object and make the properties readonly
       // Only needed once per proxy - skip if we're reusing a previously-frozen one
-      for (const key in proxy) {
-        // @ts-expect-error: this is fine since we are looping through the object
-        const value = proxy[key];
-
+      for (const [key, value] of Object.entries(proxy)) {
         Object.defineProperty(proxy, key, {
           enumerable: true,
           configurable: true,

package/src/useSyncState.tsx

@@ -26,9 +26,10 @@ const createStore = <T,>(getInitialState: () => T) => {
 
   const setState = (newState: T) => {
     state = deepFreeze(newState);
-    didUpdate = true;
 
-    if (!isBatching) {
+    if (isBatching) {
+      didUpdate = true;
+    } else {
       listeners.forEach((listener) => listener());
     }
   };

package/src/utilities.tsx

@@ -26,6 +26,25 @@ export type NoExcessObject<Provided, Allowed> = Record<
   never
 >;
 
+/**
+ * Check an object captured as a generic type against an allowed type,
+ * e.g. an object returned from a callback isn't checked for excess properties.
+ */
+export type NoExcessCallbackReturn<
+  Provided extends {},
+  Allowed extends {},
+> = Allowed & Provided & NoExcessObject<Provided, Allowed>;
+
+/**
+ * Apply excess property checking to a value,
+ * or to the return value if the value is a function.
+ */
+export type NoExcessValue<Provided, Allowed extends {}> = Provided extends (
+  ...args: never[]
+) => infer Return
+  ? (...args: never[]) => Allowed & NoExcessObject<Return, Allowed>
+  : NoExcessObject<Provided, Allowed>;
+
 /**
  * We get a union type when using keyof, but we want an intersection instead.
  * https://stackoverflow.com/a/50375286/1665026