expo-router 1.2.1 → 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.1",
+  "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",
@@ -72,12 +73,13 @@
   },
   "dependencies": {
     "@bacons/react-views": "^1.1.3",
-    "@expo/metro-runtime": "1.0.1",
+    "@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/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 }
   );
 }

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";
 
@@ -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/static/renderStaticContent.tsx

@@ -8,7 +8,6 @@ import { ServerContainer, ServerContainerRef } from "@react-navigation/native";
 import App, { getManifest } from "expo-router/_root";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
-// @ts-expect-error
 import { AppRegistry } from "react-native-web";
 
 import Head from "../head/Head";
@@ -31,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(