one 1.1.473 → 1.1.475

package/src/router/router.ts

@@ -1,11 +1,9 @@
-import type { NavigationState, PartialRoute } from '@react-navigation/native'
 import {
   StackActions,
   type NavigationContainerRefWithCurrent,
   type getPathFromState as originalGetPathFromState,
 } from '@react-navigation/native'
 import * as Linking from 'expo-linking'
-import { nanoid } from 'nanoid/non-secure'
 import { Fragment, startTransition, type ComponentType, useSyncExternalStore } from 'react'
 import { Platform } from 'react-native'
 import type { State } from '../fork/getPathFromState'
@@ -23,10 +21,10 @@ import { getLinkingConfig, type OneLinkingOptions } from './getLinkingConfig'
 import { getNormalizedStatePath, type UrlObject } from './getNormalizedStatePath'
 import { getRoutes } from './getRoutes'
 import { setLastAction } from './lastAction'
-import { matchDynamicName } from './matchers'
 import type { RouteNode } from './Route'
 import { sortRoutes } from './sortRoutes'
 import { getQualifiedRouteComponent } from './useScreens'
+import { getNavigateAction } from './utils/getNavigateAction'
 
 // Module-scoped variables
 export let routeNode: RouteNode | null = null
@@ -549,116 +547,6 @@ const hashes: Record<string, string> = {}
 
 let nextOptions: OneRouter.LinkToOptions | null = null
 
-function getNavigateAction(
-  actionState: OneRouter.ResultState,
-  navigationState: NavigationState,
-  type = 'NAVIGATE'
-) {
-  /**
-   * We need to find the deepest navigator where the action and current state diverge, If they do not diverge, the
-   * lowest navigator is the target.
-   *
-   * By default React Navigation will target the current navigator, but this doesn't work for all actions
-   * For example:
-   *  - /deeply/nested/route -> /top-level-route the target needs to be the top-level navigator
-   *  - /stack/nestedStack/page -> /stack1/nestedStack/other-page needs to target the nestedStack navigator
-   *
-   * This matching needs to done by comparing the route names and the dynamic path, for example
-   * - /1/page -> /2/anotherPage needs to target the /[id] navigator
-   *
-   * Other parameters such as search params and hash are not evaluated.
-   *
-   */
-  let actionStateRoute: PartialRoute<any> | undefined
-
-  // Traverse the state tree comparing the current state and the action state until we find where they diverge
-  while (actionState && navigationState) {
-    const stateRoute = navigationState.routes[navigationState.index]
-
-    actionStateRoute = actionState.routes[actionState.routes.length - 1]
-
-    const childState = actionStateRoute.state
-    const nextNavigationState = stateRoute.state
-
-    const dynamicName = matchDynamicName(actionStateRoute.name)
-
-    const didActionAndCurrentStateDiverge =
-      actionStateRoute.name !== stateRoute.name ||
-      !childState ||
-      !nextNavigationState ||
-      (dynamicName && actionStateRoute.params?.[dynamicName] !== stateRoute.params?.[dynamicName])
-
-    if (didActionAndCurrentStateDiverge) {
-      break
-    }
-
-    actionState = childState
-    navigationState = nextNavigationState as NavigationState
-  }
-
-  /*
-   * We found the target navigator, but the payload is in the incorrect format
-   * We need to convert the action state to a payload that can be dispatched
-   */
-  const rootPayload: Record<string, any> = { params: {} }
-  let payload = rootPayload
-  let params = payload.params
-
-  // The root level of payload is a bit weird, its params are in the child object
-  while (actionStateRoute) {
-    Object.assign(params, { ...actionStateRoute.params })
-    payload.screen = actionStateRoute.name
-    payload.params = { ...actionStateRoute.params }
-
-    actionStateRoute = actionStateRoute.state?.routes[actionStateRoute.state?.routes.length - 1]
-
-    payload.params ??= {}
-    payload = payload.params
-    params = payload
-  }
-
-  // One uses only three actions, but these don't directly translate to all navigator actions
-  if (type === 'PUSH') {
-    setLastAction()
-
-    // Only stack navigators have a push action, and even then we want to use NAVIGATE (see below)
-    type = 'NAVIGATE'
-
-    /*
-     * The StackAction.PUSH does not work correctly with One.
-     *
-     * One provides a getId() function for every route, altering how React Navigation handles stack routing.
-     * Ordinarily, PUSH always adds a new screen to the stack. However, with getId() present, it navigates to the screen with the matching ID instead
-     * (by moving the screen to the top of the stack)
-     * When you try and push to a screen with the same ID, no navigation will occur
-     * Refer to: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/routers/src/StackRouter.tsx#L279-L290
-     *
-     * One needs to retain the default behavior of PUSH, consistently adding new screens to the stack, even if their IDs are identical.
-     *
-     * To resolve this issue, we switch to using a NAVIGATE action with a new key. In the navigate action, screens are matched by either key or getId() function.
-     * By generating a unique new key, we ensure that the screen is always pushed onto the stack.
-     *
-     */
-    if (navigationState.type === 'stack') {
-      rootPayload.key = `${rootPayload.name}-${nanoid()}` // @see https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/routers/src/StackRouter.tsx#L406-L407
-    }
-  }
-
-  if (type === 'REPLACE' && navigationState.type === 'tab') {
-    type = 'JUMP_TO'
-  }
-
-  return {
-    type,
-    target: navigationState.key,
-    payload: {
-      key: rootPayload.key,
-      name: rootPayload.screen,
-      params: rootPayload.params,
-    },
-  }
-}
-
 function deepEqual(a: any, b: any) {
   if (a === b) {
     return true

package/src/router/utils/getNavigateAction.test.ts

@@ -0,0 +1,334 @@
+import { describe, it, expect } from 'vitest'
+import { getNavigateAction } from './getNavigateAction'
+
+describe('getNavigateAction', () => {
+  describe('NAVIGATE', () => {
+    it('works', () => {
+      const actionState = {
+        routes: [
+          {
+            name: 'page-2',
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-pWRo04',
+        index: 0,
+        routeNames: ['_sitemap', 'index', 'page-1', 'page-2'],
+        routes: [
+          {
+            name: 'page-1',
+            key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState)
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-pWRo04',
+        payload: { key: undefined, name: 'page-2', params: {} },
+      })
+    })
+
+    it('handles params', () => {
+      const actionState = {
+        routes: [
+          {
+            name: 'page-1',
+            params: {
+              foo: 'foo',
+              bar: 'bar',
+            },
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-pWRo04',
+        index: 0,
+        routeNames: ['_sitemap', 'index', 'page-1', 'page-2'],
+        routes: [
+          {
+            name: 'page-1',
+            key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState)
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-pWRo04',
+        payload: {
+          key: undefined,
+          name: 'page-1',
+          params: {
+            foo: 'foo',
+            bar: 'bar',
+          },
+        },
+      })
+    })
+
+    it('handles navigating into nested navigator', () => {
+      const actionState = {
+        routes: [
+          {
+            name: 'foo',
+            state: {
+              routes: [
+                {
+                  name: 'bar',
+                  state: {
+                    routes: [
+                      {
+                        name: 'baz',
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-5qQ9ln4FB9',
+        index: 0,
+        routeNames: ['index', 'foo'],
+        routes: [
+          {
+            name: 'index',
+            key: 'index-Kyz4PdQ7ZAvE0XFhBWydM',
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState)
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-5qQ9ln4FB9',
+        payload: {
+          key: undefined,
+          name: 'foo',
+          params: {
+            screen: 'bar',
+            params: {
+              screen: 'baz',
+              params: {},
+            },
+          },
+        },
+      })
+    })
+
+    it('handles navigating into nested navigator with route params', () => {
+      const actionState = {
+        routes: [
+          {
+            name: '[level1]',
+            params: {
+              level1: 'foo',
+            },
+            state: {
+              routes: [
+                {
+                  name: '[level2]',
+                  params: {
+                    level1: 'foo',
+                    level2: 'bar',
+                  },
+                  state: {
+                    routes: [
+                      {
+                        name: '[level3]',
+                        params: {
+                          level1: 'foo',
+                          level2: 'bar',
+                          level3: 'baz',
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-5qQ9ln4FB9',
+        index: 0,
+        routeNames: ['index', '[level1]'],
+        routes: [
+          {
+            name: 'index',
+            key: 'index-Kyz4PdQ7ZAvE0XFhBWydM',
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState)
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-5qQ9ln4FB9',
+        payload: {
+          key: undefined,
+          name: '[level1]',
+          params: {
+            level1: 'foo',
+            level2: 'bar', // not actually necessary, but it's how the current implementation works
+            screen: '[level2]',
+            params: {
+              level1: 'foo',
+              level2: 'bar',
+              level3: 'baz', // not actually necessary, but it's how the current implementation works
+              screen: '[level3]',
+              params: {
+                level1: 'foo',
+                level2: 'bar',
+                level3: 'baz',
+              },
+            },
+          },
+        },
+      })
+    })
+
+    it('correctly finds out where the states diverge and return an action valid payload', () => {
+      const actionState = {
+        routes: [
+          {
+            name: 'foo',
+            state: {
+              routes: [
+                {
+                  name: 'bar',
+                  state: {
+                    routes: [
+                      {
+                        name: 'baz-2',
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-aCzOliK0',
+        routeNames: ['index', 'foo'],
+        index: 0,
+        routes: [
+          {
+            name: 'foo',
+            key: 'foo-teuUBQHk',
+            state: {
+              stale: false as const,
+              type: 'stack',
+              key: 'stack-XZ3RJRBg',
+              routeNames: ['bar'],
+              index: 0,
+              routes: [
+                {
+                  name: 'bar',
+                  key: 'bar-FDtH59Dj',
+                  state: {
+                    stale: false as const,
+                    type: 'stack',
+                    key: 'stack-s3o7RyPD',
+                    routeNames: ['baz-1', 'baz-2'],
+                    index: 0,
+                    routes: [
+                      {
+                        name: 'baz-1',
+                        key: 'baz-1-K2zLhRSZ',
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState)
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-s3o7RyPD',
+        payload: {
+          key: undefined,
+          name: 'baz-2',
+          params: {},
+        },
+      })
+    })
+  })
+
+  describe('PUSH', () => {
+    it('returns a NAVIGATE action with a unique key', () => {
+      const actionState = {
+        routes: [
+          {
+            name: 'page-2',
+          },
+        ],
+      }
+
+      const navigationState = {
+        stale: false as const,
+        type: 'stack',
+        key: 'stack-pWRo04',
+        index: 0,
+        routeNames: ['_sitemap', 'index', 'page-1', 'page-2'],
+        routes: [
+          {
+            name: 'page-1',
+            key: 'page-1-Gc-TeIdZmx_jAcRD-SGcs',
+          },
+        ],
+        preloadedRoutes: [],
+      }
+
+      const action = getNavigateAction(actionState, navigationState, 'PUSH')
+
+      expect(action).toStrictEqual({
+        type: 'NAVIGATE',
+        target: 'stack-pWRo04',
+        payload: {
+          key: action.payload.key /* since this contains a randomly generated nanoid */,
+          name: 'page-2',
+          params: {},
+        },
+      })
+    })
+  })
+})

package/src/router/utils/getNavigateAction.ts

@@ -0,0 +1,120 @@
+import { nanoid } from 'nanoid'
+import type { NavigationState, PartialRoute } from '@react-navigation/core'
+import type { OneRouter } from '../../interfaces/router'
+import { matchDynamicName } from '../matchers'
+import { setLastAction } from '../lastAction'
+
+/**
+ * Generates a navigation action to transition from the current state to the desired state.
+ */
+export function getNavigateAction(
+  /** desired state */
+  actionState: OneRouter.ResultState,
+  navigationState: NavigationState,
+  type = 'NAVIGATE'
+) {
+  /**
+   * We need to find the deepest navigator where the action and current state diverge, If they do not diverge, the
+   * lowest navigator is the target.
+   *
+   * By default React Navigation will target the current navigator, but this doesn't work for all actions
+   * For example:
+   *  - /deeply/nested/route -> /top-level-route the target needs to be the top-level navigator
+   *  - /stack/nestedStack/page -> /stack1/nestedStack/other-page needs to target the nestedStack navigator
+   *
+   * This matching needs to done by comparing the route names and the dynamic path, for example
+   * - /1/page -> /2/anotherPage needs to target the /[id] navigator
+   *
+   * Other parameters such as search params and hash are not evaluated.
+   *
+   */
+  let actionStateRoute: PartialRoute<any> | undefined
+
+  // Traverse the state tree comparing the current state and the action state until we find where they diverge
+  while (actionState && navigationState) {
+    const stateRoute = navigationState.routes[navigationState.index]
+
+    actionStateRoute = actionState.routes[actionState.routes.length - 1]
+
+    const childState = actionStateRoute.state
+    const nextNavigationState = stateRoute.state
+
+    const dynamicName = matchDynamicName(actionStateRoute.name)
+
+    const didActionAndCurrentStateDiverge =
+      actionStateRoute.name !== stateRoute.name ||
+      // !deepEqual(actionStateRoute.params, stateRoute.params) ||
+      !childState ||
+      !nextNavigationState ||
+      (dynamicName && actionStateRoute.params?.[dynamicName] !== stateRoute.params?.[dynamicName])
+
+    if (didActionAndCurrentStateDiverge) {
+      break
+    }
+
+    actionState = childState
+    navigationState = nextNavigationState as NavigationState
+  }
+
+  /*
+   * We found the target navigator, but the payload is in the incorrect format
+   * We need to convert the action state to a payload that can be dispatched
+   */
+  const rootPayload: Record<string, any> = { params: {} }
+  let payload = rootPayload
+  let params = payload.params
+
+  // The root level of payload is a bit weird, its params are in the child object
+  while (actionStateRoute) {
+    Object.assign(params, { ...actionStateRoute.params })
+    payload.screen = actionStateRoute.name
+    payload.params = { ...actionStateRoute.params }
+
+    actionStateRoute = actionStateRoute.state?.routes[actionStateRoute.state?.routes.length - 1]
+
+    payload.params ??= {}
+    payload = payload.params
+    params = payload
+  }
+
+  // One uses only three actions, but these don't directly translate to all navigator actions
+  if (type === 'PUSH') {
+    setLastAction()
+
+    // Only stack navigators have a push action, and even then we want to use NAVIGATE (see below)
+    type = 'NAVIGATE'
+
+    /*
+     * The StackAction.PUSH does not work correctly with One.
+     *
+     * One provides a getId() function for every route, altering how React Navigation handles stack routing.
+     * Ordinarily, PUSH always adds a new screen to the stack. However, with getId() present, it navigates to the screen with the matching ID instead
+     * (by moving the screen to the top of the stack)
+     * When you try and push to a screen with the same ID, no navigation will occur
+     * Refer to: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/routers/src/StackRouter.tsx#L279-L290
+     *
+     * One needs to retain the default behavior of PUSH, consistently adding new screens to the stack, even if their IDs are identical.
+     *
+     * To resolve this issue, we switch to using a NAVIGATE action with a new key. In the navigate action, screens are matched by either key or getId() function.
+     * By generating a unique new key, we ensure that the screen is always pushed onto the stack.
+     *
+     */
+    if (navigationState.type === 'stack') {
+      rootPayload.key = `${rootPayload.name}-${nanoid()}` // @see https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/routers/src/StackRouter.tsx#L406-L407
+    }
+  }
+
+  if (type === 'REPLACE' && navigationState.type === 'tab') {
+    type = 'JUMP_TO'
+  }
+
+  return {
+    type,
+    target: navigationState.key,
+    payload: {
+      key: rootPayload.key,
+      name: rootPayload.screen,
+      params: rootPayload.params,
+    },
+  }
+}

package/src/testing-utils.ts

@@ -0,0 +1,56 @@
+import path from 'node:path'
+
+import { getRoutes } from './router/getRoutes'
+import { getReactNavigationConfig } from './getReactNavigationConfig'
+
+export type ReactComponent = () => React.ReactElement<any, any> | null
+export type FileStub =
+  | (Record<string, unknown> & {
+      default: ReactComponent
+      unstable_settings?: Record<string, any>
+    })
+  | ReactComponent
+export type NativeIntentStub = any
+export type MemoryContext = Record<string, FileStub | NativeIntentStub> & {
+  '+native-intent'?: NativeIntentStub
+}
+
+const validExtensions = ['.js', '.jsx', '.ts', '.tsx']
+
+export function inMemoryContext(context: MemoryContext) {
+  return Object.assign(
+    (id: string) => {
+      id = id.replace(/^\.\//, '').replace(/\.\w*$/, '')
+      return typeof context[id] === 'function' ? { default: context[id] } : context[id]
+    },
+    {
+      resolve: (key: string) => key,
+      id: '0',
+      keys: () =>
+        Object.keys(context).map((key) => {
+          const ext = path.extname(key)
+          key = key.replace(/^\.\//, '')
+          key = key.startsWith('/') ? key : `./${key}`
+          key = validExtensions.includes(ext) ? key : `${key}.js`
+
+          return key
+        }),
+    }
+  )
+}
+
+type MockContextConfig = string[] // Array of filenames to mock as empty components, e.g () => null
+
+export function getMockContext(context: MockContextConfig) {
+  if (Array.isArray(context)) {
+    return inMemoryContext(
+      Object.fromEntries(context.map((filename) => [filename, { default: () => null }]))
+    )
+  }
+
+  throw new Error('Invalid context')
+}
+
+export function getMockConfig(context: MockContextConfig, metaOnly = true) {
+  return getReactNavigationConfig(getRoutes(getMockContext(context))!, metaOnly)
+}