one 1.2.0 → 1.2.2

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

@@ -0,0 +1,334 @@
+import { describe, expect, it } 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 type { NavigationState, PartialRoute } from '@react-navigation/core'
+import { nanoid } from 'nanoid/non-secure'
+import type { OneRouter } from '../../interfaces/router'
+import { setLastAction } from '../lastAction'
+import { matchDynamicName } from '../matchers'
+
+/**
+ * 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/serve-worker.ts

@@ -0,0 +1,23 @@
+import { Hono } from 'hono'
+import { createProdServer } from 'vxrn/serve'
+import { oneServe } from './server/oneServe'
+import { setServerGlobals } from './server/setServerGlobals'
+import { setupBuildInfo } from './server/setupBuildOptions'
+import { ensureExists } from './utils/ensureExists'
+import type { One } from './vite/types'
+
+export async function serve(buildInfo: One.BuildInfo) {
+  setupBuildInfo(buildInfo)
+  ensureExists(buildInfo.oneOptions)
+  setServerGlobals()
+
+  const serverOptions = buildInfo.oneOptions.server || {}
+
+  const app = new Hono()
+
+  await createProdServer(app, serverOptions)
+
+  await oneServe(buildInfo.oneOptions, buildInfo, app)
+
+  return app
+}

package/src/serve.ts

@@ -0,0 +1,52 @@
+import './polyfills-server'
+
+import FSExtra from 'fs-extra'
+import type { Hono } from 'hono'
+import type { VXRNOptions } from 'vxrn'
+import { setServerGlobals } from './server/setServerGlobals'
+import { setupBuildInfo } from './server/setupBuildOptions'
+import { ensureExists } from './utils/ensureExists'
+import type { One } from './vite/types'
+
+process.on('uncaughtException', (err) => {
+  console.error(`[one] Uncaught exception`, err?.stack || err)
+})
+
+export async function serve(args: VXRNOptions['server'] & { app?: Hono } = {}) {
+  const buildInfo = (await FSExtra.readJSON(`dist/buildInfo.json`)) as One.BuildInfo
+  const { oneOptions } = buildInfo
+
+  setServerGlobals()
+  setupBuildInfo(buildInfo)
+  ensureExists(oneOptions)
+
+  // to avoid loading the CACHE_KEY before we set it use async imports:
+  const { labelProcess } = await import('./cli/label-process')
+  const { removeUndefined } = await import('./utils/removeUndefined')
+  const { loadEnv, serve: vxrnServe } = await import('vxrn/serve')
+  const { oneServe } = await import('./server/oneServe')
+
+  labelProcess('serve')
+
+  if (args.loadEnv) {
+    await loadEnv('production')
+  }
+
+  return await vxrnServe({
+    app: args.app,
+    // fallback to one plugin
+    ...oneOptions.server,
+    // override with any flags given to cli
+    ...removeUndefined({
+      port: args.port ? +args.port : undefined,
+      host: args.host,
+      compress: args.compress,
+    }),
+
+    async beforeRegisterRoutes(options, app) {
+      await oneServe(oneOptions, buildInfo, app)
+    },
+
+    async afterRegisterRoutes(options, app) {},
+  })
+}

package/src/server/ServerContextScript.tsx

@@ -0,0 +1,42 @@
+import { SERVER_CONTEXT_KEY } from '../constants'
+import { SERVER_CONTEXT_POST_RENDER_STRING } from '../vite/constants'
+import { useServerContext } from '../vite/one-server-only'
+
+export function ServerContextScript() {
+  if (process.env.VITE_ENVIRONMENT === 'client') {
+    return (
+      <script
+        async
+        // @ts-expect-error
+        href={SERVER_CONTEXT_KEY}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: ``,
+        }}
+      />
+    )
+  }
+
+  if (process.env.VITE_ENVIRONMENT === 'ssr') {
+    const context = useServerContext()
+
+    return (
+      <script
+        async
+        // @ts-expect-error
+        href={SERVER_CONTEXT_KEY}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `
+              globalThis["${SERVER_CONTEXT_KEY}"] = ${JSON.stringify({
+                ...context,
+                postRenderData: SERVER_CONTEXT_POST_RENDER_STRING,
+              })};
+          `,
+        }}
+      />
+    )
+  }
+
+  return null
+}

package/src/server/createRoutesManifest.ts

@@ -0,0 +1,42 @@
+import { getRoutes, type Options } from '../router/getRoutes'
+import type { One, RouteInfo } from '../vite/types'
+import { getServerManifest } from './getServerManifest'
+
+export type { Options } from '../router/getRoutes'
+
+export type RouteInfoCompiled = RouteInfo & {
+  compiledRegex: RegExp
+}
+
+export type RoutesManifest<TRegex = string> = {
+  apiRoutes: RouteInfo<TRegex>[]
+  middlewareRoutes: RouteInfo<TRegex>[]
+  pageRoutes: RouteInfo<TRegex>[]
+  allRoutes: RouteInfo<TRegex>[]
+}
+
+function createMockModuleWithContext(map: string[] = []) {
+  const contextModule = (key) => ({ default() {} })
+
+  Object.defineProperty(contextModule, 'keys', {
+    value: () => map,
+  })
+
+  return contextModule as One.RouteContext
+}
+
+export function createRoutesManifest(paths: string[], options: Options): RoutesManifest | null {
+  const routeTree = getRoutes(createMockModuleWithContext(paths), {
+    ...options,
+    preserveApiRoutes: true,
+    ignoreRequireErrors: true,
+    ignoreEntryPoints: true,
+    platform: 'web',
+  })
+
+  if (!routeTree) {
+    throw new Error(`No route tree found in paths: ${JSON.stringify(paths)}`)
+  }
+
+  return getServerManifest(routeTree)
+}