@react-navigation/core 7.0.0-alpha.1 → 7.0.0-alpha.11

package/src/useOnPreventRemove.tsx

@@ -5,7 +5,7 @@ import type {
 import * as React from 'react';
 
 import {
-  ChildBeforeRemoveListener,
+  type ChildBeforeRemoveListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationRouteContext';

package/src/useOptionsGetters.tsx

@@ -39,8 +39,8 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
   }, [navigation, options, optionsChangeListener]);
 
   const getOptionsFromListener = React.useCallback(() => {
-    for (let key in optionsGettersFromChildRef.current) {
-      if (optionsGettersFromChildRef.current.hasOwnProperty(key)) {
+    for (const key in optionsGettersFromChildRef.current) {
+      if (key in optionsGettersFromChildRef.current) {
         const result = optionsGettersFromChildRef.current[key]?.();
 
         // null means unfocused route

package/src/usePreventRemove.tsx

@@ -14,7 +14,7 @@ import { useRoute } from './useRoute';
  * @param preventRemove Boolean indicating whether to prevent screen from being removed.
  * @param callback Function which is executed when screen was prevented from being removed.
  */
-export function UNSTABLE_usePreventRemove(
+export function usePreventRemove(
   preventRemove: boolean,
   callback: (options: { data: { action: NavigationAction } }) => void
 ) {

package/src/useRouteCache.tsx

@@ -1,13 +1,10 @@
-import type {
-  NavigationState,
-  ParamListBase,
-  Route,
-} from '@react-navigation/routers';
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { isRecordEqual } from './isRecordEqual';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<Route<string>, RouteProp<ParamListBase>>;
+type RouteCache = Map<string, RouteProp<ParamListBase>>;
 
 /**
  * Utilites such as `getFocusedRouteNameFromRoute` need to access state.
@@ -32,21 +29,25 @@ export function useRouteCache<State extends NavigationState>(
   }
 
   cache.current = routes.reduce((acc, route) => {
-    const previous = cache.current.get(route);
+    const previous = cache.current.get(route.key);
+    const { state, ...routeWithoutState } = route;
 
-    if (previous) {
+    let proxy;
+
+    if (previous && isRecordEqual(previous, routeWithoutState)) {
       // If a cached route object already exists, reuse it
-      acc.set(route, previous);
+      proxy = previous;
     } else {
-      const { state, ...proxy } = route;
+      proxy = routeWithoutState;
+    }
 
-      Object.defineProperty(proxy, CHILD_STATE, {
-        enumerable: false,
-        value: state,
-      });
+    Object.defineProperty(proxy, CHILD_STATE, {
+      enumerable: false,
+      configurable: true,
+      value: state,
+    });
 
-      acc.set(route, proxy);
-    }
+    acc.set(route.key, proxy);
 
     return acc;
   }, new Map() as RouteCache);

package/src/useSyncState.tsx

@@ -1,74 +1,46 @@
 import * as React from 'react';
 
-const UNINTIALIZED_STATE = {};
+const createStore = <T,>(getInitialState: () => T) => {
+  const listeners: (() => void)[] = [];
 
-/**
- * This is definitely not compatible with concurrent mode, but we don't have a solution for sync state yet.
- */
-export function useSyncState<T>(initialState?: (() => T) | T) {
-  const stateRef = React.useRef<T>(UNINTIALIZED_STATE as any);
-  const isSchedulingRef = React.useRef(false);
-  const isMountedRef = React.useRef(true);
+  let state: T = getInitialState();
 
-  React.useEffect(() => {
-    isMountedRef.current = true;
+  const getState = () => state;
 
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  if (stateRef.current === UNINTIALIZED_STATE) {
-    stateRef.current =
-      // @ts-expect-error: initialState is a function, but TypeScript doesn't think so
-      typeof initialState === 'function' ? initialState() : initialState;
-  }
-
-  const [trackingState, setTrackingState] = React.useState(stateRef.current);
-
-  const getState = React.useCallback(() => stateRef.current, []);
+  const setState = (newState: T) => {
+    state = newState;
+    listeners.forEach((listener) => listener());
+  };
 
-  const setState = React.useCallback((state: T) => {
-    if (state === stateRef.current || !isMountedRef.current) {
-      return;
-    }
+  const subscribe = (callback: () => void) => {
+    listeners.push(callback);
 
-    stateRef.current = state;
-
-    if (!isSchedulingRef.current) {
-      setTrackingState(state);
-    }
-  }, []);
-
-  const scheduleUpdate = React.useCallback((callback: () => void) => {
-    isSchedulingRef.current = true;
-
-    try {
-      callback();
-    } finally {
-      isSchedulingRef.current = false;
-    }
-  }, []);
+    return () => {
+      const index = listeners.indexOf(callback);
 
-  const flushUpdates = React.useCallback(() => {
-    if (!isMountedRef.current) {
-      return;
-    }
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  };
 
-    // Make sure that the tracking state is up-to-date.
-    // We call it unconditionally, but React should skip the update if state is unchanged.
-    setTrackingState(stateRef.current);
-  }, []);
+  return {
+    getState,
+    setState,
+    subscribe,
+  };
+};
 
-  // If we're rendering and the tracking state is out of date, update it immediately
-  // This will make sure that our updates are applied as early as possible.
-  if (trackingState !== stateRef.current) {
-    setTrackingState(stateRef.current);
-  }
+export function useSyncState<T>(getInitialState: () => T) {
+  const store = React.useRef(createStore(getInitialState)).current;
 
-  const state = stateRef.current;
+  const state = React.useSyncExternalStore(
+    store.subscribe,
+    store.getState,
+    store.getState
+  );
 
   React.useDebugValue(state);
 
-  return [state, getState, setState, scheduleUpdate, flushUpdates] as const;
+  return [state, store.getState, store.setState] as const;
 }

package/src/validatePathConfig.tsx

@@ -1,28 +1,72 @@
-const formatToList = (items: string[]) =>
-  items.map((key) => `- ${key}`).join('\n');
+const formatToList = (items: Record<string, string>) =>
+  Object.entries(items)
+    .map(([key, value]) => `- ${key} (${value})`)
+    .join('\n');
 
-export function validatePathConfig(config: any, root = true) {
-  const validKeys = ['initialRouteName', 'screens'];
+export function validatePathConfig(config: unknown, root = true) {
+  const validation = {
+    path: 'string',
+    initialRouteName: 'string',
+    screens: 'object',
+    ...(root
+      ? null
+      : {
+          exact: 'boolean',
+          stringify: 'object',
+          parse: 'object',
+        }),
+  };
 
-  if (!root) {
-    validKeys.push('path', 'exact', 'stringify', 'parse');
+  if (typeof config !== 'object' || config === null) {
+    throw new Error(
+      `Expected the configuration to be an object, but got ${JSON.stringify(
+        config
+      )}.`
+    );
   }
 
-  const invalidKeys = Object.keys(config).filter(
-    (key) => !validKeys.includes(key)
+  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 (typeof value !== type) {
+            return [key, `expected '${type}', got '${typeof value}'`];
+          }
+        } else {
+          return [key, 'extraneous'];
+        }
+
+        return null;
+      })
+      .filter(Boolean) as [string, string][]
   );
 
-  if (invalidKeys.length) {
+  if (Object.keys(validationErrors).length) {
     throw new Error(
       `Found invalid properties in the configuration:\n${formatToList(
-        invalidKeys
-      )}\n\nDid you forget to specify them under a 'screens' property?\n\nYou can only specify the following properties:\n${formatToList(
-        validKeys
-      )}\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+        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.`
+    );
+  }
+
+  if (
+    root &&
+    'path' in config &&
+    typeof config.path === 'string' &&
+    config.path.includes(':')
+  ) {
+    throw new Error(
+      `Found invalid path '${config.path}'. The 'path' in the top-level configuration cannot contain patterns for params.`
     );
   }
 
-  if (config.screens) {
+  if ('screens' in config && config.screens) {
     Object.entries(config.screens).forEach(([_, value]) => {
       if (typeof value !== 'string') {
         validatePathConfig(value, false);

package/lib/commonjs/fromEntries.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fromEntries = fromEntries;
-// Object.fromEntries is not available in older iOS versions
-function fromEntries(entries) {
-  return entries.reduce((acc, _ref) => {
-    let [k, v] = _ref;
-    if (acc.hasOwnProperty(k)) {
-      throw new Error(`A value for key '${k}' already exists in the object.`);
-    }
-    acc[k] = v;
-    return acc;
-  }, {});
-}
-//# sourceMappingURL=fromEntries.js.map

package/lib/commonjs/fromEntries.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fromEntries","entries","reduce","acc","k","v","hasOwnProperty","Error"],"sourceRoot":"../../src","sources":["fromEntries.tsx"],"mappings":";;;;;;AAAA;AACO,SAASA,WAAW,CAAsBC,OAA4B,EAAE;EAC7E,OAAOA,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,WAAa;IAAA,IAAX,CAACC,CAAC,EAAEC,CAAC,CAAC;IAChC,IAAIF,GAAG,CAACG,cAAc,CAACF,CAAC,CAAC,EAAE;MACzB,MAAM,IAAIG,KAAK,CAAE,oBAAmBH,CAAE,iCAAgC,CAAC;IACzE;IAEAD,GAAG,CAACC,CAAC,CAAC,GAAGC,CAAC;IACV,OAAOF,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAiB;AACxB"}

package/lib/commonjs/useScheduleUpdate.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ScheduleUpdateContext = void 0;
-exports.useScheduleUpdate = useScheduleUpdate;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const MISSING_CONTEXT_ERROR = "Couldn't find a schedule context.";
-const ScheduleUpdateContext = /*#__PURE__*/React.createContext({
-  scheduleUpdate() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  flushUpdates() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  }
-});
-
-/**
- * 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.
- */
-exports.ScheduleUpdateContext = ScheduleUpdateContext;
-function useScheduleUpdate(callback) {
-  const {
-    scheduleUpdate,
-    flushUpdates
-  } = React.useContext(ScheduleUpdateContext);
-  scheduleUpdate(callback);
-  React.useEffect(flushUpdates);
-}
-//# sourceMappingURL=useScheduleUpdate.js.map

package/lib/commonjs/useScheduleUpdate.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["MISSING_CONTEXT_ERROR","ScheduleUpdateContext","React","createContext","scheduleUpdate","Error","flushUpdates","useScheduleUpdate","callback","useContext","useEffect"],"sourceRoot":"../../src","sources":["useScheduleUpdate.tsx"],"mappings":";;;;;;;AAAA;AAA+B;AAAA;AAE/B,MAAMA,qBAAqB,GAAG,mCAAmC;AAE1D,MAAMC,qBAAqB,gBAAGC,KAAK,CAACC,aAAa,CAGrD;EACDC,cAAc,GAAG;IACf,MAAM,IAAIC,KAAK,CAACL,qBAAqB,CAAC;EACxC,CAAC;EACDM,YAAY,GAAG;IACb,MAAM,IAAID,KAAK,CAACL,qBAAqB,CAAC;EACxC;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AANA;AAOO,SAASO,iBAAiB,CAACC,QAAoB,EAAE;EACtD,MAAM;IAAEJ,cAAc;IAAEE;EAAa,CAAC,GAAGJ,KAAK,CAACO,UAAU,CACvDR,qBAAqB,CACtB;EAEDG,cAAc,CAACI,QAAQ,CAAC;EAExBN,KAAK,CAACQ,SAAS,CAACJ,YAAY,CAAC;AAC/B"}

package/lib/module/fromEntries.js

@@ -1,12 +0,0 @@
-// Object.fromEntries is not available in older iOS versions
-export function fromEntries(entries) {
-  return entries.reduce((acc, _ref) => {
-    let [k, v] = _ref;
-    if (acc.hasOwnProperty(k)) {
-      throw new Error(`A value for key '${k}' already exists in the object.`);
-    }
-    acc[k] = v;
-    return acc;
-  }, {});
-}
-//# sourceMappingURL=fromEntries.js.map

package/lib/module/fromEntries.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fromEntries","entries","reduce","acc","k","v","hasOwnProperty","Error"],"sourceRoot":"../../src","sources":["fromEntries.tsx"],"mappings":"AAAA;AACA,OAAO,SAASA,WAAW,CAAsBC,OAA4B,EAAE;EAC7E,OAAOA,OAAO,CAACC,MAAM,CAAC,CAACC,GAAG,WAAa;IAAA,IAAX,CAACC,CAAC,EAAEC,CAAC,CAAC;IAChC,IAAIF,GAAG,CAACG,cAAc,CAACF,CAAC,CAAC,EAAE;MACzB,MAAM,IAAIG,KAAK,CAAE,oBAAmBH,CAAE,iCAAgC,CAAC;IACzE;IAEAD,GAAG,CAACC,CAAC,CAAC,GAAGC,CAAC;IACV,OAAOF,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAiB;AACxB"}

package/lib/module/useScheduleUpdate.js

@@ -1,27 +0,0 @@
-import * as React from 'react';
-const MISSING_CONTEXT_ERROR = "Couldn't find a schedule context.";
-export const ScheduleUpdateContext = /*#__PURE__*/React.createContext({
-  scheduleUpdate() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  flushUpdates() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  }
-});
-
-/**
- * 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.
- */
-export function useScheduleUpdate(callback) {
-  const {
-    scheduleUpdate,
-    flushUpdates
-  } = React.useContext(ScheduleUpdateContext);
-  scheduleUpdate(callback);
-  React.useEffect(flushUpdates);
-}
-//# sourceMappingURL=useScheduleUpdate.js.map

package/lib/module/useScheduleUpdate.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","MISSING_CONTEXT_ERROR","ScheduleUpdateContext","createContext","scheduleUpdate","Error","flushUpdates","useScheduleUpdate","callback","useContext","useEffect"],"sourceRoot":"../../src","sources":["useScheduleUpdate.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,MAAMC,qBAAqB,GAAG,mCAAmC;AAEjE,OAAO,MAAMC,qBAAqB,gBAAGF,KAAK,CAACG,aAAa,CAGrD;EACDC,cAAc,GAAG;IACf,MAAM,IAAIC,KAAK,CAACJ,qBAAqB,CAAC;EACxC,CAAC;EACDK,YAAY,GAAG;IACb,MAAM,IAAID,KAAK,CAACJ,qBAAqB,CAAC;EACxC;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,iBAAiB,CAACC,QAAoB,EAAE;EACtD,MAAM;IAAEJ,cAAc;IAAEE;EAAa,CAAC,GAAGN,KAAK,CAACS,UAAU,CACvDP,qBAAqB,CACtB;EAEDE,cAAc,CAACI,QAAQ,CAAC;EAExBR,KAAK,CAACU,SAAS,CAACJ,YAAY,CAAC;AAC/B"}

package/lib/typescript/src/fromEntries.d.ts

@@ -1,2 +0,0 @@
-export declare function fromEntries<K extends string, V>(entries: (readonly [K, V])[]): Record<K, V>;
-//# sourceMappingURL=fromEntries.d.ts.map

package/lib/typescript/src/fromEntries.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fromEntries.d.ts","sourceRoot":"","sources":["../../../src/fromEntries.tsx"],"names":[],"mappings":"AACA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,gBAS5E"}

package/lib/typescript/src/useScheduleUpdate.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export declare const ScheduleUpdateContext: React.Context<{
-    scheduleUpdate: (callback: () => void) => void;
-    flushUpdates: () => void;
-}>;
-/**
- * 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.
- */
-export declare function useScheduleUpdate(callback: () => void): void;
-//# sourceMappingURL=useScheduleUpdate.d.ts.map

package/lib/typescript/src/useScheduleUpdate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScheduleUpdate.d.ts","sourceRoot":"","sources":["../../../src/useScheduleUpdate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,qBAAqB;+BACL,MAAM,IAAI,KAAK,IAAI;kBAChC,MAAM,IAAI;EAQxB,CAAC;AAEH;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,QAQrD"}

package/src/fromEntries.tsx

@@ -1,11 +0,0 @@
-// Object.fromEntries is not available in older iOS versions
-export function fromEntries<K extends string, V>(entries: (readonly [K, V])[]) {
-  return entries.reduce((acc, [k, v]) => {
-    if (acc.hasOwnProperty(k)) {
-      throw new Error(`A value for key '${k}' already exists in the object.`);
-    }
-
-    acc[k] = v;
-    return acc;
-  }, {} as Record<K, V>);
-}

package/src/useScheduleUpdate.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-const MISSING_CONTEXT_ERROR = "Couldn't find a schedule context.";
-
-export const ScheduleUpdateContext = React.createContext<{
-  scheduleUpdate: (callback: () => void) => void;
-  flushUpdates: () => void;
-}>({
-  scheduleUpdate() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  flushUpdates() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-});
-
-/**
- * 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.
- */
-export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.useContext(
-    ScheduleUpdateContext
-  );
-
-  scheduleUpdate(callback);
-
-  React.useEffect(flushUpdates);
-}