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

package/src/useOptionsGetters.tsx

@@ -31,8 +31,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
   }, [navigation, onOptionsChange]);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     optionsRef.current = options;
+  }, [options]);
+
+  React.useEffect(() => {
     optionsChangeListener();
 
     return navigation?.addListener('focus', optionsChangeListener);

package/src/usePreventRemove.tsx

@@ -23,15 +23,24 @@ export function usePreventRemove(
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();
 
-  const { setPreventRemove } = usePreventRemoveContext();
+  const { setPreventRemove, notifyPreventRemove } = usePreventRemoveContext();
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     setPreventRemove(id, routeKey, preventRemove);
+
     return () => {
       setPreventRemove(id, routeKey, false);
     };
   }, [setPreventRemove, id, routeKey, preventRemove]);
 
+  React.useEffect(() => {
+    notifyPreventRemove();
+
+    return () => {
+      notifyPreventRemove();
+    };
+  }, [id, routeKey, preventRemove, notifyPreventRemove]);
+
   const beforeRemoveListener = useLatestCallback<
     EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
   >((e) => {

package/src/useRoute.tsx

@@ -22,11 +22,9 @@ type AllRouteNames<ParamList extends {}> =
   | KeyOf<ParamList>
   | AllNestedRouteNames<NestedParamLists<ParamList>>;
 
-type AllNestedRouteNames<ParamLists> =
-  // Distributes over the union of nested param lists
-  ParamLists extends infer ParamList extends {}
-    ? AllRouteNames<ParamList>
-    : never;
+type AllNestedRouteNames<ParamLists> = ParamLists extends {}
+  ? AllRouteNames<ParamLists>
+  : never;
 
 /**
  * Hook to access the route prop of the parent screen anywhere.

package/src/useRouteCache.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { isRecordEqual } from './isRecordEqual';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<string, RouteProp<ParamListBase>>;
-
 /**
  * Utilities such as `getFocusedRouteNameFromRoute` need to access state.
  * So we need a way to suppress the warning for those use cases.
@@ -21,9 +19,12 @@ export function useRouteCache<State extends NavigationState>(
   routes: State['routes']
 ) {
   // Cache object which holds route objects for each screen
-  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+  const cache = React.useMemo(
+    () => ({ current: new Map<string, RouteProp<ParamListBase>>() }),
+    []
+  );
 
-  cache.current = routes.reduce((acc, route) => {
+  const next = routes.reduce((acc, route) => {
     const previous = cache.current.get(route.key);
     const { state, ...routeWithoutState } = route;
 
@@ -53,16 +54,23 @@ export function useRouteCache<State extends NavigationState>(
       }
     }
 
-    Object.defineProperty(proxy, CHILD_STATE, {
-      enumerable: false,
-      configurable: true,
-      value: state,
-    });
+    // @ts-expect-error: this isn't in type definitions coz we want this private
+    if (proxy[CHILD_STATE] !== state) {
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        configurable: true,
+        value: state,
+      });
+    }
 
     acc.set(route.key, proxy);
 
     return acc;
-  }, new Map() as RouteCache);
+  }, new Map<string, RouteProp<ParamListBase>>());
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
 
-  return Array.from(cache.current.values());
+  return Array.from(next.values());
 }

package/src/useScheduleUpdate.tsx

@@ -4,17 +4,18 @@ import { NavigationBuilderContext } from './NavigationBuilderContext';
 
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
- * However, navigation state is in the root component and React won't let us update it from a child.
- * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
- * It lets all subsequent updates access the latest state so it stays correct.
- * Then we call setState during after the component updates.
+ * However, navigation state is in the root component and React won't let us update it from a child during render.
+ * The render could also be interrupted in concurrent mode, so we need to update after commit.
+ * So we queue the update in an insertion effect and flush it in a layout effect.
+ * Insertion effects run before layout effects, so every navigator in the tree has queued its update before we flush.
+ * This lets nested updates be applied from the root down without clobbering each other.
  */
 export function useScheduleUpdate(callback: () => void) {
   const { scheduleUpdate, flushUpdates } = React.use(NavigationBuilderContext);
 
-  // FIXME: This is potentially unsafe
-  // However, since we are using sync store, it might be fine
-  scheduleUpdate(callback);
+  React.useInsertionEffect(() => {
+    scheduleUpdate(callback);
+  });
 
   React.useLayoutEffect(flushUpdates);
 }

package/src/useSyncState.tsx

@@ -100,7 +100,11 @@ export function useSyncState<T>(getInitialState: () => T) {
 
     if (pendingUpdates.length !== 0) {
       store.batchUpdates(() => {
-        // Flush all the pending updates
+        // Updates are queued child-first as insertion effects run bottom-up.
+        // The root navigator replaces the whole state while nested navigators merge into it.
+        // So we apply them root-first to avoid the root clobbering nested updates.
+        pendingUpdates.reverse();
+
         for (const update of pendingUpdates) {
           update();
         }

package/src/utilities.tsx

@@ -15,6 +15,17 @@ export type KeysOf<T> = T extends {} ? keyof T : never;
  */
 export type KeyOf<T extends {}> = Extract<keyof T, string>;
 
+/**
+ * TS only checks object literals for excess properties when they are not generic.
+ * When an object is captured as a generic type, unknown keys are not caught.
+ * This builds a type from the provided object where any key not in the allowed type has the type `never`.
+ * Checking the provided object against this type then produces an error for each unknown key.
+ */
+export type NoExcessObject<Provided, Allowed> = Record<
+  Exclude<keyof Provided, keyof Allowed>,
+  never
+>;
+
 /**
  * We get a union type when using keyof, but we want an intersection instead.
  * https://stackoverflow.com/a/50375286/1665026
@@ -25,8 +36,6 @@ export type UnionToIntersection<U> = (
   ? I
   : never;
 
-export type UnknownToUndefined<T> = unknown extends T ? undefined : T;
-
 /**
  * Exclude undefined from a type.
  * Similar to NonNullable but only excludes undefined, not null.
@@ -39,6 +48,23 @@ export type RequiredKeys<T extends object> = {
   [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
 }[keyof T];
 
+type OptionalKeys<T extends object> = Exclude<keyof T, RequiredKeys<T>>;
+
+/**
+ * Remove `| undefined` from the object type,
+ * and adjust the optionality of the keys based on the original type.
+ */
+export type NotUndefinedObject<
+  T extends object | undefined,
+  O extends object = NotUndefined<T>,
+> = undefined extends T
+  ? {
+      [K in RequiredKeys<O>]: O[K];
+    } & {
+      [K in OptionalKeys<O>]?: O[K] | undefined;
+    }
+  : T;
+
 export type UndefinedIfAllOptional<T> = T extends object
   ? RequiredKeys<T> extends never
     ? T | undefined
@@ -173,46 +199,15 @@ type QueryParamRequiredKeys<Params, Parse> = Exclude<
   QueryParamOptionalKeys<Params, Parse>
 >;
 
-/**
- * Infer the path string from a linking config.
- */
-export type InferPath<T> = T extends { path: infer P extends string }
-  ? P
-  : never;
-
-/**
- * Infer the parse functions from a linking config.
- */
-export type InferParse<T> = T extends { parse: infer P } ? P : {};
-
 export type InferParamsFromLinking<T> = T extends {
   path: infer P extends string;
+  parse: infer Parse;
 }
-  ? UndefinedIfAllOptional<
-      ExtractParamsType<ExtractParamStrings<P>, InferParse<T>>
-    >
-  : T extends string
-    ? UndefinedIfAllOptional<
-        ExtractParamsType<ExtractParamStrings<T>, undefined>
-      >
-    : undefined;
-
-/**
- * Infer the params type from a screen component or nested navigator.
- */
-export type InferScreenParams<T> =
-  T extends React.ComponentType<{ route: { params: infer P } }>
-    ? P
-    : T extends { config: { screens: infer Screens } }
-      ? import('./types').NavigatorScreenParams<{
-          [K in keyof Screens]: Screens[K] extends React.ComponentType<{
-            route: { params: infer P };
-          }>
-            ? P
-            : Screens[K] extends { screen: infer S }
-              ? S extends React.ComponentType<{ route: { params: infer P } }>
-                ? P
-                : undefined
-              : undefined;
-        }>
+  ? UndefinedIfAllOptional<ExtractParamsType<ExtractParamStrings<P>, Parse>>
+  : T extends {
+        path: infer P extends string;
+      }
+    ? UndefinedIfAllOptional<ExtractParamStrings<P>>
+    : T extends string
+      ? UndefinedIfAllOptional<ExtractParamStrings<T>>
       : undefined;

package/src/validatePathConfig.tsx

@@ -1,24 +1,39 @@
-const formatToList = (items: Record<string, string>) =>
-  Object.entries(items)
-    .map(([key, value]) => `- ${key} (${value})`)
-    .join('\n');
+const ROOT_VALIDATION_LIST = [
+  '- path (string)',
+  '- initialRouteName (string)',
+  '- screens (object)',
+].join('\n');
 
-export function validatePathConfig(config: unknown, root = true) {
-  const validation = {
-    path: 'string',
-    initialRouteName: 'string',
-    screens: 'object',
-    ...(root
-      ? null
-      : {
-          alias: 'array',
-          exact: 'boolean',
-          stringify: 'object',
-          parse: 'object',
-          shared: 'boolean',
-        }),
-  };
+const NESTED_VALIDATION_LIST = [
+  ROOT_VALIDATION_LIST,
+  '- alias (array)',
+  '- exact (boolean)',
+  '- stringify (object)',
+  '- parse (object)',
+  '- shared (boolean)',
+].join('\n');
+
+const getValidationType = (key: string, root: boolean) => {
+  switch (key) {
+    case 'path':
+    case 'initialRouteName':
+      return 'string';
+    case 'screens':
+      return 'object';
+    case 'alias':
+      return root ? undefined : 'array';
+    case 'exact':
+    case 'shared':
+      return root ? undefined : 'boolean';
+    case 'stringify':
+    case 'parse':
+      return root ? undefined : 'object';
+    default:
+      return undefined;
+  }
+};
 
+export function validatePathConfig(config: unknown, root = true) {
   if (typeof config !== 'object' || config === null) {
     throw new Error(
       `Expected the configuration to be an object, but got ${JSON.stringify(
@@ -27,58 +42,71 @@ export function validatePathConfig(config: unknown, root = true) {
     );
   }
 
-  const validationErrors = Object.fromEntries(
-    Object.keys(config)
-      .map((key) => {
-        if (key in validation) {
-          const type = validation[key as keyof typeof validation];
-          // @ts-expect-error: we know the key exists
-          const value = config[key];
-
-          if (value !== undefined) {
-            if (type === 'array') {
-              if (!Array.isArray(value)) {
-                return [key, `expected 'Array', got '${typeof value}'`];
-              }
-            } else if (typeof value !== type) {
-              return [key, `expected '${type}', got '${typeof value}'`];
-            }
-          }
-        } else {
-          return [key, 'extraneous'];
-        }
-
-        return null;
-      })
-      .filter(Boolean) as [string, string][]
-  );
-
-  if (Object.keys(validationErrors).length) {
+  const pathConfig = config as Record<string, unknown>;
+
+  let validationErrors: string[] | undefined;
+
+  for (const key in pathConfig) {
+    const type = getValidationType(key, root);
+
+    if (type === undefined) {
+      (validationErrors ??= []).push(`- ${key} (extraneous)`);
+      continue;
+    }
+
+    const value = pathConfig[key];
+
+    if (value === undefined) {
+      continue;
+    }
+
+    if (type === 'array') {
+      if (!Array.isArray(value)) {
+        (validationErrors ??= []).push(
+          `- ${key} (expected 'Array', got '${typeof value}')`
+        );
+      }
+    } else if (typeof value !== type) {
+      (validationErrors ??= []).push(
+        `- ${key} (expected '${type}', got '${typeof value}')`
+      );
+    }
+  }
+
+  if (validationErrors) {
     throw new Error(
-      `Found invalid properties in the configuration:\n${formatToList(
-        validationErrors
-      )}\n\nYou can only specify the following properties:\n${formatToList(
-        validation
-      )}\n\nIf you want to specify configuration for screens, you need to specify them under a 'screens' property.\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+      `Found invalid properties in the configuration:\n${validationErrors.join(
+        '\n'
+      )}\n\nYou can only specify the following properties:\n${
+        root ? ROOT_VALIDATION_LIST : NESTED_VALIDATION_LIST
+      }\n\nIf you want to specify configuration for screens, you need to specify them under a 'screens' property.\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
     );
   }
 
+  const path = pathConfig.path;
+
   if (
     root &&
-    'path' in config &&
-    typeof config.path === 'string' &&
-    config.path.includes(':')
+    'path' in pathConfig &&
+    typeof path === 'string' &&
+    path.includes(':')
   ) {
     throw new Error(
-      `Found invalid path '${config.path}'. The 'path' in the top-level configuration cannot contain patterns for params.`
+      `Found invalid path '${path}'. The 'path' in the top-level configuration cannot contain patterns for params.`
     );
   }
 
-  if ('screens' in config && config.screens) {
-    Object.entries(config.screens).forEach(([_, value]) => {
+  const screens = pathConfig.screens;
+
+  if (screens && typeof screens === 'object') {
+    const screenConfig = screens as Record<string, unknown>;
+
+    for (const name in screenConfig) {
+      const value = screenConfig[name];
+
       if (typeof value !== 'string') {
         validatePathConfig(value, false);
       }
-    });
+    }
   }
 }