one 2.10.0 → 2.11.0

package/src/interfaces/router.ts

@@ -6,6 +6,8 @@ import type {
 } from '@react-navigation/core'
 import type { JSX, ReactNode } from 'react'
 import type { GestureResponderEvent, PressableProps, TextProps } from 'react-native'
+import type { SearchParamsUpdate, SearchValue } from '../searchParams'
+import type { StandardSchemaV1 } from '../standardSchema'
 
 export namespace OneRouter {
   export interface __routes<T extends string = string> extends Record<string, unknown> {}
@@ -33,7 +35,10 @@ export namespace OneRouter {
     ? __routes['RouteTypes'][Path]
     : {
         Params: InputRouteParams<Path>
-        LoaderProps: import('../types').LoaderProps<InputRouteParams<Path>>
+        LoaderProps: import('../types').LoaderProps<
+          InputRouteParams<Path>,
+          LoaderSearchParams<Path>
+        >
       }
 
   type StaticRoutes = __routes extends { StaticRoutes: string }
@@ -55,6 +60,51 @@ export namespace OneRouter {
     ? __routes['DynamicRouteTemplate']
     : string
 
+  /**
+   * The search params a schema accepts when written to a url. Used by the generated
+   * route types, which refer to each component schema with `typeof import(...)`.
+   */
+  export type SearchParamsOf<Schema> = Schema extends StandardSchemaV1
+    ? SearchParamsUpdate<Schema>
+    : {}
+
+  /** What the schemas produce, the type of `searchParams` in a loader. */
+  export type SearchOutputOf<Schema> = Schema extends StandardSchemaV1
+    ? StandardSchemaV1.InferOutput<Schema>
+    : {}
+
+  type SearchParamTypes = __routes extends { SearchParamTypes: infer Types } ? Types : {}
+  type SearchParamOutputs = __routes extends { SearchParamOutputs: infer Types } ? Types : {}
+
+  type PathnameOfHref<Path> = Path extends `${infer Before}#${string}`
+    ? PathnameOfHref<Before>
+    : Path extends `${infer Before}?${string}`
+      ? Before
+      : Path
+
+  /** Search params that any route accepts, used where the route is not typed. */
+  export type UntypedSearchParams = Record<string, SearchValue | null | undefined>
+
+  /**
+   * The search params a link to this pathname can carry: the combined schemas of the
+   * components found under that route, or any simple values when none were found.
+   */
+  export type LinkSearchParams<Path> =
+    PathnameOfHref<Path> extends keyof SearchParamTypes
+      ? SearchParamTypes[PathnameOfHref<Path>]
+      : UntypedSearchParams
+
+  /**
+   * The validated search params a loader for this route receives, or `undefined` when
+   * no component under it passes a schema to `useSearchParams`.
+   */
+  export type LoaderSearchParams<Path> =
+    PathnameOfHref<Path> extends keyof SearchParamOutputs
+      ? SearchParamOutputs[PathnameOfHref<Path>] extends object
+        ? SearchParamOutputs[PathnameOfHref<Path>]
+        : undefined
+      : undefined
+
   export type NavigationRef = NavigationContainerRefWithCurrent<ParamListBase>
 
   export type RelativePathString = `./${string}` | `../${string}` | '..'
@@ -413,6 +463,18 @@ export namespace OneRouter {
 
   export interface LinkComponent {
     <T extends string | object>(props: React.PropsWithChildren<LinkProps<T>>): JSX.Element
+    /**
+     * A link that carries search params. They are typed from the schemas of the
+     * components on the destination route and replace a same-named key in `href`.
+     */
+    <Path extends string>(
+      props: React.PropsWithChildren<
+        LinkProps<{ __branded__: any }> & {
+          href: Path | { pathname: Path }
+          searchParams: LinkSearchParams<Path>
+        }
+      >
+    ): JSX.Element
     /** Helper method to resolve an Href object into a string. */
     resolveHref: (href: Href) => string
   }

package/src/layouts/Tabs.linux.tsx

@@ -0,0 +1,15 @@
+import { createNavigatorFactory, TabRouter, useNavigationBuilder } from '@react-navigation/native'
+import { LinuxNavigationView } from '../platform/linux/NavigationView.linux'
+import { Protected } from '../views/Protected'
+import { processNativeTabsScreens } from './nativeTabsOptions'
+import { withLayoutContext } from './withLayoutContext'
+
+function LinuxTabsNavigator(props: any) {
+  const { state, descriptors, navigation, render } = useNavigationBuilder(TabRouter, props)
+  return render(<LinuxNavigationView tabs state={state} descriptors={descriptors} navigation={navigation} />)
+}
+
+const Navigator = createNavigatorFactory(LinuxTabsNavigator)().Navigator
+const RNTabs = withLayoutContext(Navigator, processNativeTabsScreens)
+export const Tabs = Object.assign(RNTabs, { Protected, Screen: RNTabs.Screen })
+export default Tabs

package/src/layouts/stack-navigator-desktop.tsx

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from 'react'
+
+export function getStackNavigatorProps<Args extends { children: ReactElement }>(
+  _children: ReactNode,
+  screenLayout?: (props: Args) => ReactElement
+) {
+  return screenLayout ? { screenLayout } : {}
+}

package/src/layouts/stack-navigator.linux.tsx

@@ -0,0 +1,12 @@
+import { createNavigatorFactory, StackRouter, useNavigationBuilder } from '@react-navigation/native'
+import { LinuxNavigationView } from '../platform/linux/NavigationView.linux'
+
+// the router and layout contract match the mac host; gtk owns presentation.
+export { getStackNavigatorProps } from './stack-navigator-desktop'
+
+function LinuxStackNavigator(props: any) {
+  const { state, descriptors, navigation, render } = useNavigationBuilder(StackRouter, props)
+  return render(<LinuxNavigationView state={state} descriptors={descriptors} navigation={navigation} />)
+}
+
+export const createStackNavigator = createNavigatorFactory(LinuxStackNavigator)

package/src/layouts/stack-navigator.macos.tsx

@@ -0,0 +1,9 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+
+/**
+ * The stock `@react-navigation/native-stack`, as on ios and android. macos has
+ * no reanimated yet, so screens get no shared transition boundary.
+ */
+export const createStackNavigator = createNativeStackNavigator
+
+export { getStackNavigatorProps } from './stack-navigator-desktop'

package/src/layouts/stack-utils/StackToolbarBottomHost.linux.tsx

@@ -0,0 +1 @@
+export * from './StackToolbarBottomHost.macos'

package/src/layouts/stack-utils/StackToolbarBottomHost.macos.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+
+import { toolbarChildrenToBottomData } from './stackToolbarDescriptors'
+
+export interface BottomToolbarHostProps {
+  children?: ReactNode
+  hidden?: boolean
+  animated?: boolean
+}
+
+// the ios host writes UIKit toolbar items. macos has no bottom toolbar host yet.
+export function BottomToolbarHost({ children }: BottomToolbarHostProps) {
+  if (toolbarChildrenToBottomData(children).length) {
+    throw new Error('Stack.Toolbar with bottom placement has no macOS implementation yet')
+  }
+  return null
+}

package/src/link/Link.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { type GestureResponderEvent, Platform, Text, type TextProps } from 'react-native'
 
 import type { OneRouter } from '../interfaces/router'
+import { applySearchParams } from '../searchParams'
 import { resolveHref } from './href'
 import { useLinkTo } from './useLinkTo'
 
@@ -26,13 +27,14 @@ export const Link = React.forwardRef(function Link(
     push,
     id,
     mask,
+    searchParams,
     // TODO: This does not prevent default on the anchor tag.
     asChild,
     rel,
     target,
     download,
     ...rest
-  }: OneRouter.LinkProps<any>,
+  }: OneRouter.LinkProps<any> & { searchParams?: OneRouter.UntypedSearchParams },
   ref: React.ForwardedRef<Text>
 ) {
   // Mutate the style prop to add the className on web.
@@ -45,8 +47,8 @@ export const Link = React.forwardRef(function Link(
     if (href == null) {
       throw new Error('Link: href is required')
     }
-    return resolveHref(href)
-  }, [href])
+    return applySearchParams(resolveHref(href), searchParams)
+  }, [href, searchParams])
 
   const resolvedMask = React.useMemo(() => {
     return mask ? resolveHref(mask) : undefined

package/src/link/Link.web.tsx

@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 
 import type { OneRouter } from '../interfaces/router'
+import { applySearchParams } from '../searchParams'
 import { resolveHref } from './href'
 import { useLinkTo } from './useLinkTo'
 
@@ -12,6 +13,7 @@ export const Link = React.forwardRef(function Link(
     push: _push,
     id,
     mask,
+    searchParams,
     asChild,
     rel,
     target,
@@ -24,15 +26,18 @@ export const Link = React.forwardRef(function Link(
     // rn-flavored prop shared code passes; rnw translated it, the dom link must too
     testID,
     ...rest
-  }: OneRouter.LinkProps<any> & { testID?: string },
+  }: OneRouter.LinkProps<any> & {
+    testID?: string
+    searchParams?: OneRouter.UntypedSearchParams
+  },
   ref: React.ForwardedRef<HTMLAnchorElement>
 ) {
   const resolvedHref = React.useMemo(() => {
     if (href == null) {
       throw new Error('Link: href is required')
     }
-    return resolveHref(href)
-  }, [href])
+    return applySearchParams(resolveHref(href), searchParams)
+  }, [href, searchParams])
 
   const resolvedMask = React.useMemo(() => (mask ? resolveHref(mask) : undefined), [mask])
   const link = useLinkTo({ href: resolvedHref, replace, mask: resolvedMask })

package/src/loaderResponseToModule.ts

@@ -0,0 +1,42 @@
+/**
+ * Redirects, auth errors and rejected search params answer a loader request as a
+ * js module carrying a marker, so the client reads the outcome instead of a failed
+ * module parse. Other responses pass through.
+ */
+export function loaderResponseToModule(
+  response: Response,
+  url: URL,
+  isNativeRequest = false
+): Response {
+  // transform redirect responses into js modules so the client can detect
+  // and handle them during client-side navigation (instead of the browser
+  // silently following the 302 and trying to parse HTML as javascript)
+  if (response.status >= 300 && response.status < 400) {
+    const location = response.headers.get('location')
+    if (location) {
+      const redirectUrl = new URL(location, url.origin)
+      const redirectPath = redirectUrl.pathname + redirectUrl.search + redirectUrl.hash
+      const data = `{__oneRedirect:${JSON.stringify(redirectPath)},__oneRedirectStatus:${response.status}}`
+      const body = isNativeRequest
+        ? `exports.loader=function(){return ${data}}`
+        : `export function loader(){return${data}}`
+      return new Response(body, {
+        headers: { 'Content-Type': 'text/javascript' },
+      })
+    }
+  }
+
+  // a client navigation reads the 400 marker of a rejected query and loads the page as a
+  // document, so the server's own 400 page shows
+  if (response.status === 400 || response.status === 401 || response.status === 403) {
+    const data = `{__oneError:${response.status},__oneErrorMessage:${JSON.stringify(response.statusText || (response.status === 400 ? 'Bad Request' : 'Unauthorized'))}}`
+    const body = isNativeRequest
+      ? `exports.loader=function(){return ${data}}`
+      : `export function loader(){return${data}}`
+    return new Response(body, {
+      headers: { 'Content-Type': 'text/javascript' },
+    })
+  }
+
+  return response
+}

package/src/loaderSearchParams.ts

@@ -0,0 +1,115 @@
+/**
+ * Validates the query of a document request against the search schemas that
+ * components under a route use, before the route's loader runs.
+ *
+ * The build gives a route module `__oneSearchSchemas`, a list of functions that
+ * each read one schema. Every schema validates its own copy of the original query,
+ * and the outputs are merged into `loaderProps.searchParams`.
+ */
+
+import { describeIssues } from './searchParams'
+import { isStandardSchema, validateStandardSchemaSync } from './standardSchema'
+import type { StandardSchemaV1 } from './standardSchema'
+import { parseSearchString, setOwn } from './validateSearchParams'
+
+export type LoaderSearchSchemas = readonly (() => unknown)[]
+
+const resolvedSchemas = new WeakMap<LoaderSearchSchemas, StandardSchemaV1[]>()
+
+export function getLoaderSearchSchemas(routeExported: any): LoaderSearchSchemas | null {
+  return routeExported?.__oneSearchSchemas ?? null
+}
+
+function resolveSchemas(thunks: LoaderSearchSchemas) {
+  let schemas = resolvedSchemas.get(thunks)
+  if (!schemas) {
+    schemas = thunks.map((read) => {
+      const schema = read()
+      if (!isStandardSchema(schema)) {
+        throw failure(
+          500,
+          'A schema passed to useSearchParams is not a Standard Schema, so the loader cannot receive validated search params'
+        )
+      }
+      return schema
+    })
+    resolvedSchemas.set(thunks, schemas)
+  }
+  return schemas
+}
+
+function failure(status: number, message: string) {
+  return new Response(message, { status })
+}
+
+function isEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false
+  if (a instanceof Date || b instanceof Date) {
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+  }
+  if (Array.isArray(a) !== Array.isArray(b)) return false
+  const keys = Object.keys(a)
+  if (keys.length !== Object.keys(b).length) return false
+  return keys.every(
+    (key) =>
+      Object.hasOwn(b, key) && isEqual((a as any)[key], (b as Record<string, unknown>)[key])
+  )
+}
+
+/**
+ * Returns the loader props with `searchParams` added, or throws a 400 Response when
+ * any schema rejects the query, so a loader never sees unvalidated input.
+ */
+export function withLoaderSearchParams<Props extends { search?: string } | undefined>(
+  thunks: LoaderSearchSchemas,
+  loaderProps: Props
+): Props & { searchParams: Record<string, unknown> } {
+  const searchParams: Record<string, unknown> = {}
+  for (const schema of resolveSchemas(thunks)) {
+    // a schema may change what it is given, so each one gets its own copy
+    let result
+    try {
+      result = validateStandardSchemaSync(schema, parseSearchString(loaderProps?.search ?? ''))
+    } catch (error) {
+      throw failure(500, (error as Error).message)
+    }
+    if (result.issues) {
+      throw failure(400, `Invalid search params (${describeIssues(result.issues)})`)
+    }
+    const value = result.value
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+      throw failure(
+        500,
+        'A search params schema must produce an object so its keys can be merged'
+      )
+    }
+    for (const key of Object.keys(value)) {
+      const next = (value as Record<string, unknown>)[key]
+      if (Object.hasOwn(searchParams, key) && !isEqual(searchParams[key], next)) {
+        throw failure(
+          500,
+          `Search param "${key}" is read by more than one schema and they produce different values`
+        )
+      }
+      setOwn(searchParams, key, next)
+    }
+  }
+  return { ...loaderProps, searchParams }
+}
+
+/**
+ * Loader props of an ssr route for a server that builds them itself (the generated
+ * Vercel function). A document request has the query of the page, a loader request
+ * has it under the reserved transport key. The result carries `searchParams` when
+ * the route has schemas, or throws the 400 Response.
+ */
+export function prepareSsrLoaderProps<Props extends object>(
+  routeExported: any,
+  loaderProps: Props,
+  search: string
+): Props & { search: string; searchParams?: Record<string, unknown> } {
+  const props = { ...loaderProps, search }
+  const schemas = getLoaderSearchSchemas(routeExported)
+  return schemas ? withLoaderSearchParams(schemas, props) : props
+}