@react-navigation/core 8.0.0-alpha.0 → 8.0.0-alpha.10

package/src/useNavigationCache.tsx

@@ -17,7 +17,7 @@ type Options<
   ScreenOptions extends {},
   EventMap extends Record<string, any>,
 > = {
-  state: State;
+  routes: State['routes'];
   getState: () => State;
   navigation: NavigationHelpers<ParamListBase> &
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
@@ -65,76 +65,15 @@ export function useNavigationCache<
   EventMap extends Record<string, any>,
   ActionHelpers extends Record<string, (...args: any) => void>,
 >({
-  state,
+  routes,
   getState,
   navigation,
   setOptions,
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
-  const { stackRef } = React.useContext(NavigationBuilderContext);
-
-  const base = React.useMemo((): NavigationItem<
-    State,
-    ScreenOptions,
-    EventMap,
-    ActionHelpers
-  > &
-    ActionHelpers => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { emit, ...rest } = navigation;
-
-    const actions = {
-      ...router.actionCreators,
-      ...CommonActions,
-    };
-
-    const dispatch = () => {
-      throw new Error(
-        'Actions cannot be dispatched from a placeholder screen.'
-      );
-    };
-
-    const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
-      (acc, name) => {
-        acc[name] = dispatch;
-
-        return acc;
-      },
-      {}
-    ) as ActionHelpers;
-
-    // @ts-expect-error: type of getParent does not match
-    return {
-      ...rest,
-      ...helpers,
-      addListener: () => {
-        // Event listeners are not supported for placeholder screens
-
-        return () => {
-          // Empty function
-        };
-      },
-      removeListener: () => {
-        // Event listeners are not supported for placeholder screens
-      },
-      dispatch,
-      getParent: (routeName) => {
-        if (routeName !== undefined) {
-          throw new Error(
-            'Getting parent by route name is not supported from a placeholder screen.'
-          );
-        }
-
-        return parentNavigationHelpers;
-      },
-      setOptions: () => {
-        throw new Error('Options cannot be set from a placeholder screen.');
-      },
-      isFocused: () => false,
-    };
-  }, [parentNavigationHelpers, navigation, router.actionCreators]);
+  const parentNavigationHelpers = React.use(NavigationContext);
+  const { stackRef } = React.use(NavigationBuilderContext);
 
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
@@ -149,10 +88,10 @@ export function useNavigationCache<
       >,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [base, getState, parentNavigationHelpers, navigation, setOptions, emitter]
+    [getState, parentNavigationHelpers, navigation, setOptions, emitter]
   );
 
-  cache.current = state.routes.reduce<
+  cache.current = routes.reduce<
     NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
   >((acc, route) => {
     const previous = cache.current[route.key];
@@ -213,8 +152,11 @@ export function useNavigationCache<
         {}
       );
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { emit, ...rest } = navigation;
+
       acc[route.key] = {
-        ...base,
+        ...rest,
         ...helpers,
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
@@ -239,7 +181,7 @@ export function useNavigationCache<
           }));
         },
         isFocused: () => {
-          const state = base.getState();
+          const state = rest.getState();
 
           if (state.routes[state.index].key !== route.key) {
             return false;
@@ -255,8 +197,5 @@ export function useNavigationCache<
     return acc;
   }, {});
 
-  return {
-    base,
-    navigations: cache.current,
-  };
+  return cache.current;
 }

package/src/useNavigationHelpers.tsx

@@ -41,7 +41,7 @@ export function useNavigationHelpers<
   router,
   stateRef,
 }: Options<State, Action>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {

package/src/useNavigationIndependentTree.tsx

@@ -3,5 +3,5 @@ import * as React from 'react';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 
 export function useNavigationIndependentTree() {
-  return React.useContext(NavigationIndependentTreeContext);
+  return React.use(NavigationIndependentTreeContext);
 }

package/src/useNavigationState.tsx

@@ -35,8 +35,8 @@ type NavigationStateForNested<
 export function useNavigationState<
   const T,
   const Navigator = RootNavigator,
-  const RouteName extends
-    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+  const RouteName extends keyof NavigationListForNested<Navigator> =
+    keyof NavigationListForNested<Navigator>,
 >(
   routeName: RouteName,
   selector: (state: NavigationStateForNested<Navigator, RouteName>) => T
@@ -117,8 +117,9 @@ export function NavigationStateListenerProvider({
   children: React.ReactNode;
 }) {
   const listeners = React.useRef<(() => void)[]>([]);
+  const stateRef = React.useRef(state);
 
-  const getState = useLatestCallback(() => state);
+  const getState = useLatestCallback(() => stateRef.current);
 
   const subscribe = useLatestCallback((callback: () => void) => {
     listeners.current.push(callback);
@@ -128,7 +129,8 @@ export function NavigationStateListenerProvider({
     };
   });
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
+    stateRef.current = state;
     listeners.current.forEach((callback) => callback());
   }, [state]);
 

package/src/useOnAction.tsx

@@ -16,11 +16,11 @@ import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import { shouldPreventRemove, useOnPreventRemove } from './useOnPreventRemove';
 
-type Options = {
-  router: Router<NavigationState, NavigationAction>;
-  key?: string;
-  getState: () => NavigationState;
-  setState: (state: NavigationState | PartialState<NavigationState>) => void;
+type Options<State extends NavigationState> = {
+  router: Router<State, NavigationAction>;
+  key?: string | undefined;
+  getState: () => State;
+  setState: (state: State | PartialState<State>) => void;
   actionListeners: ChildActionListener[];
   beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>;
   routerConfigOptions: RouterConfigOptions;
@@ -36,7 +36,7 @@ type Options = {
  *
  * When the action handler handles as action, it returns `true`, otherwise `false`.
  */
-export function useOnAction({
+export function useOnAction<State extends NavigationState>({
   router,
   getState,
   setState,
@@ -45,13 +45,13 @@ export function useOnAction({
   beforeRemoveListeners,
   routerConfigOptions,
   emitter,
-}: Options) {
+}: Options<State>) {
   const {
     onAction: onActionParent,
     onRouteFocus: onRouteFocusParent,
     addListener: addListenerParent,
     onDispatchAction,
-  } = React.useContext(NavigationBuilderContext);
+  } = React.use(NavigationBuilderContext);
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);

package/src/useOnGetState.tsx

@@ -14,8 +14,8 @@ type Options = {
 };
 
 export function useOnGetState({ getState, getStateListeners }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
   const key = route ? route.key : 'root';
 
   const getRehydratedState = React.useCallback(() => {

package/src/useOnPreventRemove.tsx

@@ -78,8 +78,8 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
   const routeKey = route?.key;
 
   React.useEffect(() => {

package/src/useOnRouteFocus.tsx

@@ -7,11 +7,11 @@ import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 
-type Options<Action extends NavigationAction> = {
-  router: Router<NavigationState, Action>;
-  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
-  key?: string;
+type Options<State extends NavigationState, Action extends NavigationAction> = {
+  router: Router<State, Action>;
+  getState: () => State;
+  setState: (state: State) => void;
+  key?: string | undefined;
 };
 
 /**
@@ -19,13 +19,11 @@ type Options<Action extends NavigationAction> = {
  * Focus action needs to be treated specially, coz when a nested route is focused,
  * the parent navigators also needs to be focused.
  */
-export function useOnRouteFocus<Action extends NavigationAction>({
-  router,
-  getState,
-  key: sourceRouteKey,
-  setState,
-}: Options<Action>) {
-  const { onRouteFocus: onRouteFocusParent } = React.useContext(
+export function useOnRouteFocus<
+  State extends NavigationState,
+  Action extends NavigationAction,
+>({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
+  const { onRouteFocus: onRouteFocusParent } = React.use(
     NavigationBuilderContext
   );
 

package/src/useOptionsGetters.tsx

@@ -17,8 +17,8 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
-  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
+  const { onOptionsChange } = React.use(NavigationBuilderContext);
+  const { addOptionsGetter: parentAddOptionsGetter } = React.use(
     NavigationStateContext
   );
 

package/src/usePreventRemoveContext.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PreventRemoveContext } from './PreventRemoveContext';
 
 export function usePreventRemoveContext() {
-  const value = React.useContext(PreventRemoveContext);
+  const value = React.use(PreventRemoveContext);
 
   if (value == null) {
     throw new Error(

package/src/useRegisterNavigator.tsx

@@ -9,7 +9,7 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  */
 export function useRegisterNavigator() {
   const [key] = React.useState(() => nanoid());
-  const container = React.useContext(SingleNavigatorContext);
+  const container = React.use(SingleNavigatorContext);
 
   if (container === undefined) {
     throw new Error(

package/src/useScheduleUpdate.tsx

@@ -10,9 +10,7 @@ import { NavigationBuilderContext } from './NavigationBuilderContext';
  * Then we call setState during after the component updates.
  */
 export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { scheduleUpdate, flushUpdates } = React.use(NavigationBuilderContext);
 
   // FIXME: This is potentially unsafe
   // However, since we are using sync store, it might be fine

package/src/useStateForPath.tsx

@@ -9,7 +9,7 @@ import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStat
  * @returns Minimal state to build a path for the current route.
  */
 export function useStateForPath() {
-  const state = React.useContext(NavigationFocusedRouteStateContext);
+  const state = React.use(NavigationFocusedRouteStateContext);
 
   return state;
 }

package/src/utilities.tsx

@@ -66,6 +66,24 @@ type ExtractSegmentParam<Segment extends string> =
       ? { [K in StripRegex<Param>]: string }
       : {};
 
+export type StandardSchemaValidationResult<Output> =
+  | { value: Output; issues?: undefined }
+  | { value?: undefined; issues: readonly unknown[] };
+
+export type StandardSchemaV1<Input = unknown, Output = Input> = {
+  readonly '~standard': {
+    readonly version: 1;
+    readonly vendor: string;
+    readonly validate: (
+      value: Input
+    ) =>
+      | StandardSchemaValidationResult<Output>
+      | Promise<StandardSchemaValidationResult<Output>>;
+  };
+};
+
+export type QueryParamInput = string | string[] | null | undefined;
+
 /**
  * Extract path params from a path string.
  * e.g. `/foo/:userId/:postId` -> `{ userId: string; postId: string }`
@@ -78,17 +96,67 @@ export type ExtractParamStrings<Path extends string> =
     : ExtractSegmentParam<Path>;
 
 /**
- * Extract the parsed params type from base params and parse functions.
- * Applies the return type of parse functions to the corresponding params.
+ * Get the type of params based on the `parse` config and the path pattern.
  */
 export type ExtractParamsType<Params, Parse> = {
+  /**
+   * Base param types from path pattern
+   * Refine the type based on standard schema, then parse function
+   * Otherwise, use the type from path pattern
+   */
   [K in keyof Params]: K extends keyof Parse
-    ? Parse[K] extends (value: string) => infer R
+    ? Parse[K] extends StandardSchemaV1<unknown, infer R>
       ? R
-      : Params[K]
+      : Parse[K] extends (value: string) => infer R
+        ? R
+        : Params[K]
     : Params[K];
+} & {
+  /**
+   * Optional param types not in path pattern (for query params)
+   */
+  [K in QueryParamOptionalKeys<Params, Parse>]?: QueryParamValue<Parse[K]>;
+} & {
+  /**
+   * Required param types not in path pattern (for query params)
+   */
+  [K in QueryParamRequiredKeys<Params, Parse>]: QueryParamValue<Parse[K]>;
 };
 
+type QueryParamValue<ParseValue> =
+  ParseValue extends StandardSchemaV1<unknown, infer R>
+    ? R
+    : ParseValue extends (value: string) => infer R
+      ? R
+      : never;
+
+/**
+ * For schema, it's optional if the output has `undefined`, otherwise required
+ * For parse function, it's always optional as it can't say if it's required or not
+ */
+type QueryParamOptionalKeys<Params, Parse> = {
+  [K in Exclude<keyof Parse, keyof Params>]: Parse[K] extends StandardSchemaV1<
+    unknown,
+    infer R
+  >
+    ? undefined extends R
+      ? K
+      : never
+    : Parse[K] extends (value: string) => unknown
+      ? K
+      : never;
+}[Exclude<keyof Parse, keyof Params>];
+
+/**
+ * Exclude optional keys to get required keys
+ * For schema, it's required if the output doesn't have `undefined`, otherwise optional
+ * It doesn't include parse functions (as they are always optional)
+ */
+type QueryParamRequiredKeys<Params, Parse> = Exclude<
+  Exclude<keyof Parse, keyof Params>,
+  QueryParamOptionalKeys<Params, Parse>
+>;
+
 /**
  * Infer the path string from a linking config.
  */