expo-router 1.2.0 → 1.2.2

package/_root.tsx

@@ -1,13 +1,14 @@
+/// <reference path="metro-require.d.ts" />
+
 import "@expo/metro-runtime";
-import React from "react";
 
 import { ExpoRoot } from "expo-router";
+import React from "react";
 
 import { getNavigationConfig } from "./src/getLinkingConfig";
 import { getRoutes } from "./src/getRoutes";
 
-// @ts-expect-error: Not sure
-const ctx = require.context(process.env.EXPO_ROUTER_APP_ROOT);
+const ctx = require.context(process.env.EXPO_ROUTER_APP_ROOT!);
 
 // Must be exported or Fast Refresh won't update the context >:[
 export default function ExpoRouterRoot() {

package/metro-require.d.ts

@@ -0,0 +1,52 @@
+// Based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/webpack-env/index.d.ts
+// Adds support for the runtime `require.context` method.
+// https://github.com/facebook/metro/pull/822/
+
+declare var module: NodeModule;
+
+declare namespace __MetroModuleApi {
+  interface RequireContext {
+    /** Return the keys that can be resolved. */
+    keys(): string[];
+    (id: string): any;
+    <T>(id: string): T;
+    /** **Unimplemented:** Return the module identifier for a user request. */
+    resolve(id: string): string;
+    /** **Unimplemented:** Readable identifier for the context module. */
+    id: string;
+  }
+
+  interface RequireFunction {
+    /**
+     * Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.
+     */
+    (path: string): any;
+    <T>(path: string): T;
+
+    /**
+     * **Experimental:** Import all modules in a given directory. This module dynamically updates when the files in a directory are added or removed.
+     *
+     * **Enabling:** This feature can be enabled by setting the `transformer.unstable_allowRequireContext` property to `true` in your Metro configuration.
+     *
+     * @param path File path pointing to the directory to require.
+     * @param recursive Should search for files recursively. Optional, default `true` when `require.context` is used.
+     * @param filter Filename filter pattern for use in `require.context`. Optional, default `.*` (any file) when `require.context` is used.
+     * @param mode Mode for resolving dynamic dependencies. Defaults to `sync`.
+     */
+    context(
+      path: string,
+      recursive?: boolean,
+      filter?: RegExp,
+      mode?: "sync" | "eager" | "weak" | "lazy" | "lazy-once"
+    ): RequireContext;
+  }
+}
+
+/**
+ * Declare process variable
+ */
+declare namespace NodeJS {
+  interface Require extends __MetroModuleApi.RequireFunction {}
+}
+
+declare var require: NodeRequire;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-router",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "files": [
@@ -13,7 +13,8 @@
     "drawer.ts",
     "stack.ts",
     "tabs.ts",
-    "head.ts"
+    "head.ts",
+    "metro-require.d.ts"
   ],
   "repository": {
     "url": "https://github.com/expo/router.git",
@@ -62,6 +63,7 @@
   },
   "devDependencies": {
     "@react-navigation/drawer": "^6.6.2",
+    "@types/url-parse": "^1.4.8",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "react-native-gesture-handler": "~2.9.0",
@@ -71,12 +73,13 @@
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "1.0.0",
+    "@expo/metro-runtime": "1.1.0",
     "@radix-ui/react-slot": "^1.0.0",
     "@react-navigation/bottom-tabs": "~6.5.7",
     "@react-navigation/native": "~6.1.6",
     "@react-navigation/native-stack": "~6.9.12",
     "expo-splash-screen": "*",
+    "query-string": "7.1.3",
     "react-helmet-async": "^1.3.0",
     "url": "^0.11.0"
   }

package/src/LocationProvider.tsx

@@ -156,7 +156,7 @@ export function getNormalizedStatePath({
         prev[key] = decodeURIComponent(value as string);
       }
       return prev;
-    }, {}),
+    }, {} as SearchParams),
   };
 }
 

package/src/NavigationContainer.tsx

@@ -7,7 +7,7 @@ import { RootNavigationRef } from "./useRootNavigation";
 import { useRootRouteNodeContext } from "./useRootRouteNodeContext";
 import { SplashScreen } from "./views/Splash";
 
-const navigationRef = createNavigationContainerRef();
+const navigationRef = createNavigationContainerRef<Record<string, unknown>>();
 
 /** Get the root navigation container ref. */
 export function getNavigationContainerRef() {

package/src/fork/getPathFromState.ts

@@ -39,6 +39,8 @@ type CustomRoute = Route<string> & {
   state?: State;
 };
 
+const DEFAULT_SCREENS: PathConfigMap<object> = {};
+
 const getActiveRoute = (state: State): { name: string; params?: object } => {
   const route =
     typeof state.index === "number"
@@ -118,22 +120,20 @@ function encodeURIComponentPreservingBrackets(str: string) {
  */
 export default function getPathFromState<ParamList extends object>(
   state: State,
-  // @ts-expect-error: non-standard options
   _options?: Options<ParamList> & {
     preserveGroups?: boolean;
     preserveDynamicRoutes?: boolean;
-  } = {}
+  }
 ): string {
   return getPathDataFromState(state, _options).path;
 }
 
 export function getPathDataFromState<ParamList extends object>(
   state: State,
-  // @ts-expect-error: non-standard options
-  _options?: Options<ParamList> & {
+  _options: Options<ParamList> & {
     preserveGroups?: boolean;
     preserveDynamicRoutes?: boolean;
-  } = {}
+  } = { screens: DEFAULT_SCREENS }
 ) {
   if (state == null) {
     throw Error(
@@ -143,13 +143,10 @@ export function getPathDataFromState<ParamList extends object>(
 
   const { preserveGroups, preserveDynamicRoutes, ...options } = _options;
 
-  if (_options) {
-    validatePathConfig(options);
-  }
+  validatePathConfig(options);
 
-  const screens = options?.screens;
   // Expo Router disallows usage without a linking config.
-  if (!screens) {
+  if (Object.is(options.screens, DEFAULT_SCREENS)) {
     throw Error(
       "You must pass a 'screens' object to 'getPathFromState' to generate a path."
     );
@@ -158,7 +155,7 @@ export function getPathDataFromState<ParamList extends object>(
   return getPathFromResolvedState(
     state,
     // Create a normalized configs object which will be easier to use
-    createNormalizedConfigs(screens),
+    createNormalizedConfigs(options.screens),
     { preserveGroups, preserveDynamicRoutes }
   );
 }
@@ -515,7 +512,7 @@ function getParamsWithConventionsCollapsed({
   routeName: string;
   params: object;
 }): Record<string, string> {
-  const processedParams = { ...params };
+  const processedParams: Record<string, string> = { ...params };
 
   // Remove the params present in the pattern since we'll only use the rest for query string
 

package/src/fork/getStateFromPath.ts

@@ -472,6 +472,7 @@ const createNormalizedConfigs = (
 
   parentScreens.push(screen);
 
+  // @ts-expect-error
   const config = routeConfig[screen];
 
   if (typeof config === "string") {

package/src/fork/useLinking.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error
 import useLinking from "@react-navigation/native/lib/module/useLinking";
 
 export default useLinking as typeof import("./useLinking.native").default;

package/src/link/path.ts

@@ -21,7 +21,7 @@
 
 // https://github.com/browserify/path-browserify/blob/master/index.js
 
-function assertPath(path) {
+function assertPath(path: string) {
   if (typeof path !== "string") {
     throw new TypeError(
       "Path must be a string. Received " + JSON.stringify(path)
@@ -30,7 +30,7 @@ function assertPath(path) {
 }
 
 // Resolves . and .. elements in a path with directory names
-function normalizeStringPosix(path, allowAboveRoot) {
+function normalizeStringPosix(path: string, allowAboveRoot?: boolean) {
   let res = "";
   let lastSegmentLength = 0;
   let lastSlash = -1;
@@ -98,7 +98,7 @@ function normalizeStringPosix(path, allowAboveRoot) {
 }
 
 // path.resolve([from ...], to)
-export function resolve(...segments) {
+export function resolve(...segments: string[]) {
   let resolvedPath = "";
   let resolvedAbsolute = false;
 

package/src/link/stateOperations.ts

@@ -1,4 +1,4 @@
-import { InitialState } from "@react-navigation/native";
+import { InitialState, NavigationState } from "@react-navigation/native";
 
 import { ResultState } from "../fork/getStateFromPath";
 
@@ -36,7 +36,7 @@ export function isMovingToSiblingRoute(
   let currentRoot: InitialState | undefined = rootState;
 
   while (current?.routes?.[current?.routes?.length - 1].state != null) {
-    const nextRoute = current?.routes?.[current?.routes?.length - 1];
+    const nextRoute: any = current?.routes?.[current?.routes?.length - 1];
 
     if (
       // Has more
@@ -74,9 +74,9 @@ export function getQualifiedStateForTopOfTargetState(
   let currentRoot: InitialState | undefined = rootState;
 
   while (current?.routes?.[current?.routes?.length - 1].state != null) {
-    const nextRoute = current?.routes?.[current?.routes?.length - 1];
+    const nextRoute: any = current?.routes?.[current?.routes?.length - 1];
 
-    const nextCurrentRoot = currentRoot?.routes?.find(
+    const nextCurrentRoot: InitialState | undefined = currentRoot?.routes?.find(
       (route) => route.name === nextRoute.name
     )?.state;
 
@@ -95,7 +95,8 @@ export function getQualifiedStateForTopOfTargetState(
   return currentRoot;
 }
 
-type SubState = {
+type SubState = NavigationState & {
+  key?: string;
   type: string;
   routes?: { name: string; state?: SubState }[];
   index?: number;

package/src/link/useLinkToPath.ts

@@ -54,7 +54,6 @@ export function useLinkToPath() {
       if (href.startsWith(".")) {
         let base = linking.getPathFromState?.(navigation.getRootState(), {
           ...linking.config,
-          // @ts-expect-error: non-standard option
           preserveGroups: true,
         });
 
@@ -123,8 +122,8 @@ export function useLinkToPath() {
           isAbsoluteInitialRoute(action)
         ) {
           const earliest = getEarliestMismatchedRoute(
-            // @ts-expect-error
             rootState,
+            // @ts-expect-error
             action.payload
           );
           if (earliest) {

package/src/link/useLinkToPathProps.tsx

@@ -5,20 +5,26 @@ import { useLinkToPath } from "./useLinkToPath";
 import { stripGroupSegmentsFromPath } from "../matchers";
 
 function eventShouldPreventDefault(
-  e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
 ): boolean {
+  if (e?.defaultPrevented) {
+    return false;
+  }
+
   if (
-    !!e &&
-    !e.defaultPrevented && // onPress prevented default
-    // @ts-expect-error: these properties exist on web, but not in React Native
-    !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-    // @ts-expect-error: these properties exist on web, but not in React Native
-    (e.button == null || e.button === 0) && // ignore everything but left clicks
-    // @ts-expect-error: these properties exist on web, but not in React Native
-    [undefined, null, "", "self"].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc.
+    // Only check MouseEvents
+    "button" in e &&
+    // ignore clicks with modifier keys
+    !e.metaKey &&
+    !e.altKey &&
+    !e.ctrlKey &&
+    !e.shiftKey &&
+    (e.button == null || e.button === 0) && // Only accept left clicks
+    [undefined, null, "", "self"].includes(e.currentTarget.target) // let browser handle "target=_blank" etc.
   ) {
     return true;
   }
+
   return false;
 }
 

package/src/link/useLinkingContext.ts

@@ -5,20 +5,31 @@ import {
 } from "@react-navigation/native";
 import * as React from "react";
 
-export function useLinkingContext(): Required<
+import getPathFromState from "../fork/getPathFromState";
+
+export type RouterLinkingContext = Required<
   Omit<LinkingOptions<ParamListBase>, "filter" | "enabled">
-> {
+> & {
+  getPathFromState: typeof getPathFromState;
+};
+
+export function useLinkingContext(): RouterLinkingContext {
   const linking = React.useContext(LinkingContext);
 
   const { options } = linking;
 
+  assertLinkingOptions(options);
+
+  return options;
+}
+
+function assertLinkingOptions(
+  options: LinkingOptions<ParamListBase> | undefined
+): asserts options is RouterLinkingContext {
   if (!options?.config) {
     // This should never happen in Expo Router.
     throw new Error(
       "Couldn't find a linking config. Is your component inside a navigator?"
     );
   }
-
-  // @ts-expect-error: non-standard option
-  return options;
 }

package/src/link/useRouter.ts

@@ -47,11 +47,8 @@ export function useRouter(): Router {
     push,
     back,
     replace,
-    setParams: (params) => {
-      root?.current?.setParams(
-        // @ts-expect-error
-        params
-      );
+    setParams: (params = {}) => {
+      root?.current?.setParams(params);
     },
     // TODO(EvanBacon): add `reload`
     // TODO(EvanBacon): add `canGoBack` but maybe more like a `hasContext`

package/src/renderRootComponent.tsx

@@ -4,7 +4,7 @@ import { Platform, View } from "react-native";
 import registerRootComponent from "./fork/expo/registerRootComponent";
 import { SplashScreen } from "./views/Splash";
 
-function isBaseObject(obj) {
+function isBaseObject(obj: any) {
   if (Object.prototype.toString.call(obj) !== "[object Object]") {
     return false;
   }
@@ -15,7 +15,7 @@ function isBaseObject(obj) {
   return proto === Object.prototype;
 }
 
-function isErrorShaped(error) {
+function isErrorShaped(error: any): error is Error {
   return (
     error &&
     typeof error === "object" &&
@@ -28,7 +28,7 @@ function isErrorShaped(error) {
  * After we throw this error, any number of tools could handle it.
  * This check ensures the error is always in a reason state before surfacing it to the runtime.
  */
-function convertError(error) {
+function convertError(error: any) {
   if (isErrorShaped(error)) {
     return error;
   }

package/src/static/renderStaticContent.tsx

@@ -30,12 +30,15 @@ export function getStaticContent(location: URL): string {
     // TODO: Use RNW view after they fix hydration for React 18
     // https://github.com/necolas/react-native-web/blob/e8098fd029102d7801c32c1ede792bce01808c00/packages/react-native-web/src/exports/render/index.js#L10
     // Otherwise this wraps the app with two extra divs
-    children: (
-      // Inject the root tag
-      <div id="root">
+    children:
+      // Inject the root tag using createElement to prevent any transforms like the ones in `@expo/html-elements`.
+      React.createElement(
+        "div",
+        {
+          id: "root",
+        },
         <App />
-      </div>
-    ),
+      ),
   });
 
   const html = ReactDOMServer.renderToString(
@@ -113,7 +116,7 @@ function StyleReset() {
 }
 
 // TODO(EvanBacon): Expose this to the developer
-export function Root({ children }) {
+export function Root({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" style={{ height: "100%" }}>
       <head>

package/src/static/useServerState.ts

@@ -1,4 +1,5 @@
 //  TODO: This is fragile and only works on web
+// @ts-expect-error
 import ServerContext from "@react-navigation/native/lib/module/ServerContext";
 import React from "react";
 

package/src/useScreens.tsx

@@ -165,7 +165,7 @@ export function createGetIdForRoute(
   if (!route.dynamic?.length) {
     return undefined;
   }
-  return ({ params }) => {
+  return ({ params }: { params?: Record<string, any> }) => {
     const getPreferredId = (segment: DynamicConvention) => {
       // Params can be undefined when there are no params in the route.
       const preferredId = params?.[segment.name];

package/src/views/Navigator.tsx

@@ -10,12 +10,14 @@ import { useContextKey } from "../Route";
 import { useFilterScreenChildren } from "../layouts/withLayoutContext";
 import { useSortedScreens } from "../useScreens";
 
+type NavigatorTypes = ReturnType<typeof useNavigationBuilder>;
+
 // TODO: This might already exist upstream, maybe something like `useCurrentRender` ?
 export const NavigatorContext = React.createContext<{
   contextKey: string;
-  state: any;
-  navigation: any;
-  descriptors: any;
+  state: NavigatorTypes["state"];
+  navigation: NavigatorTypes["navigation"];
+  descriptors: NavigatorTypes["descriptors"];
   router: RouterFactory<any, any, any>;
 } | null>(null);