one 1.8.2 → 1.8.3

package/src/router/RouteInfoContext.tsx

@@ -0,0 +1,94 @@
+import { useStateForPath } from '@react-navigation/core'
+import type React from 'react'
+import { createContext, useRef } from 'react'
+import type { UrlObject } from './getNormalizedStatePath'
+import { getRouteInfo } from './getRouteInfo'
+
+export const RouteInfoContext = createContext<UrlObject | undefined>(undefined)
+
+/**
+ * Provides the route info (a `UrlObject`) through a context for child page.
+ * Such context can be used to implement hooks such as `usePathname`.
+ *
+ * **IMPORTANT**: The current implementation uses `useStateForPath` - which will not return the a complete state if it isn't being called from a component under a leaf route node.
+ * In other words, the provided route info may not be correct when used in a `_layout`. For example, if the user is on a page `/blog/123`:
+ *
+ * ```
+ * app
+ * ├── _layout.tsx
+ * ├── index.tsx
+ * └── blog
+ *     ├── _layout.tsx - in BlogLayout, pathname will be "/blog"
+ *     └── [id].tsx - in BlogPage, pathname will be "/blog/123"
+ * ```
+ *
+ * The returned value is lazily calculated and cached, so we won't waste CPU cycles to calculate it if no one is asking for it.
+ *
+ * This is implemented with the `useStateForPath` hook provided by React Navigation, which is known to be safe for not returning a stale or incomplete state when used in pages. See: https://github.com/react-navigation/react-navigation/pull/12521
+ */
+export function RouteInfoContextProvider({ children }: { children: React.ReactNode }) {
+  const currentState = useStateForPath()
+
+  /**
+   * Ref to hold the current state. Do not update it immediately, because we also
+   * rely on this ref to make `lazilyCalculatedRouteInfo` a new object when the
+   * state changes.
+   */
+  const currentStateRef = useRef<typeof currentState>(undefined)
+
+  /**
+   * This is used by the lazilyCalculatedRouteInfo to determine if it should
+   * update the cached route info. After doing so, lazilyCalculatedRouteInfo
+   * should update it to the current state.
+   */
+  const lastStateRef = useRef<typeof currentState>(undefined)
+  const cachedRouteInfoValueRef = useRef<UrlObject | undefined>(undefined)
+
+  const lazilyCalculatedRouteInfo = useRef<UrlObject | undefined>(undefined)
+
+  if (currentState && currentStateRef.current !== currentState) {
+    lazilyCalculatedRouteInfo.current = makeLazilyCalculatedRouteInfo({
+      currentStateRef,
+      lastStateRef,
+      cachedRouteInfoValueRef,
+    })
+  }
+  currentStateRef.current = currentState
+
+  return (
+    <RouteInfoContext.Provider
+      value={currentState ? lazilyCalculatedRouteInfo.current : undefined}
+    >
+      {children}
+    </RouteInfoContext.Provider>
+  )
+}
+
+function makeLazilyCalculatedRouteInfo({
+  currentStateRef,
+  lastStateRef,
+  cachedRouteInfoValueRef,
+}: {
+  currentStateRef: React.MutableRefObject<ReturnType<typeof useStateForPath> | undefined>
+  lastStateRef: React.MutableRefObject<ReturnType<typeof useStateForPath> | undefined>
+  cachedRouteInfoValueRef: React.MutableRefObject<UrlObject | undefined>
+}) {
+  return new Proxy({} as any, {
+    get(_, p: keyof UrlObject) {
+      const state = currentStateRef.current
+      if (!state) {
+        // This should not happen because in the `RouteInfoContext.Provider` we
+        // should only provide lazilyCalculatedRouteInfo if state is not undefined.
+        throw new Error('[lazilyCalculatedRouteInfo] cannot get state')
+      }
+
+      // Update the cached route info if it's outdated
+      if (!cachedRouteInfoValueRef.current || lastStateRef.current !== state) {
+        cachedRouteInfoValueRef.current = getRouteInfo(state)
+        lastStateRef.current = state
+      }
+
+      return cachedRouteInfoValueRef.current![p]
+    },
+  })
+}

package/src/router/RouterStore.ts

@@ -0,0 +1,3 @@
+import type * as router from './router'
+
+export type RouterStore = typeof router

package/src/router/SpaShellContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+
+// when true, non-root-layout routes render a placeholder instead of content
+export const SpaShellContext = createContext(false)

package/src/router/createRoute.ts

@@ -0,0 +1,52 @@
+import { useActiveParams, useParams, usePathname } from '../hooks'
+import type { OneRouter } from '../interfaces/router'
+import type { LoaderProps } from '../types'
+
+export function createRoute<Path extends string = string>() {
+  type Route = OneRouter.RouteType<Path>
+  type Params = Route['Params']
+  type TypedLoaderProps = LoaderProps<Params>
+
+  return {
+    useParams: () => useParams<Params>(),
+    useActiveParams: () => useActiveParams<Params>(),
+    /**
+     * Creates a typed loader function for this route.
+     * The loader receives LoaderProps with typed params.
+     *
+     * @example
+     * const route = createRoute<'(site)/docs/[slug]'>()
+     * export const loader = route.createLoader(({ params }) => {
+     *   // params is typed as { slug: string }
+     *   return { doc: getDoc(params.slug) }
+     * })
+     */
+    createLoader: <T>(fn: (props: TypedLoaderProps) => T) => fn,
+  }
+}
+
+const defaults = createRoute()
+
+const getProxy = () =>
+  new Proxy(
+    {},
+    {
+      get(target, key) {
+        if (Reflect.has(defaults, key)) {
+          return Reflect.get(defaults, key)
+        }
+
+        return getProxy()
+      },
+    }
+  )
+
+const postIdRoute = createRoute<'/feed/[id]'>()
+
+export const route = getProxy() as {
+  feed: {
+    $id: typeof postIdRoute
+  }
+  notifications: {}
+  profile: {}
+}

package/src/router/filterRootHTML.ts

@@ -0,0 +1,98 @@
+import { isValidElement } from 'react'
+
+type Props = Record<string, any>
+
+export type FoundRootHTML = {
+  children: React.ReactElement
+  htmlProps?: Props
+  bodyProps?: Props
+  head?: React.ReactElement
+}
+
+/**
+ * To enable custom <html> and other html-like stuff in the root _layout
+ * we are doing some fancy stuff, namely, just capturing the root layout return
+ * value and deep-mapping over it.
+ *
+ * On server, we filter it out and hoist it to the parent root html in createApp
+ *
+ * On client, we just filter it out completely as in One we don't hydrate html
+ */
+
+export function filterRootHTML(el: React.ReactNode): FoundRootHTML {
+  let htmlProps: Props | undefined
+  let bodyProps: Props | undefined
+  let head: React.ReactElement | undefined
+
+  function traverse(element: React.ReactNode) {
+    if (!element || typeof element !== 'object') {
+      return element
+    }
+    if (Array.isArray(element)) {
+      return element.map(traverse)
+    }
+
+    const reactElement = element as React.ReactElement
+    const { type, props } = reactElement
+
+    if (type === 'html') {
+      if (props && typeof props === 'object' && 'children' in props) {
+        const { children, ...restProps } = props
+        htmlProps = restProps
+        return traverse(children as React.ReactNode)
+      }
+      return null
+    }
+
+    if (type === 'head') {
+      head = reactElement
+      return null
+    }
+
+    if (type === 'body') {
+      if (props && typeof props === 'object' && 'children' in props) {
+        const { children, ...restProps } = props
+        bodyProps = restProps
+        if (process.env.TAMAGUI_TARGET === 'native') {
+          // must traverse children so nested HTML elements (e.g. <div>) get filtered on native
+          return traverse(children as React.ReactNode)
+        }
+        return children as React.ReactNode
+      }
+      return null
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      if (
+        isValidElement(element) &&
+        typeof element.type === 'string' &&
+        element.type.toLowerCase() === element.type
+      ) {
+        // filter out HTML elements on native (e.g. <div>, <meta>)
+        // preserve children so <div><Slot/></div> renders <Slot/> instead of nothing
+        if (
+          element.props &&
+          typeof element.props === 'object' &&
+          'children' in element.props
+        ) {
+          return traverse(element.props.children as React.ReactNode)
+        }
+        return null
+      }
+    }
+
+    return element
+  }
+
+  const children =
+    traverse(el) ||
+    // if none found, we assume they aren't returning any html so just pass it on
+    el
+
+  return {
+    children,
+    htmlProps,
+    bodyProps,
+    head,
+  }
+}

package/src/router/findRouteNode.ts

@@ -0,0 +1,200 @@
+import type { RouteNode } from './Route'
+
+/**
+ * Find a RouteNode from the route tree based on the navigation state.
+ * Walks through the state's routes recursively to find the deepest matching route.
+ */
+export function findRouteNodeFromState(
+  state: { routes: Array<{ name: string; state?: any }> } | undefined,
+  rootNode: RouteNode | null
+): RouteNode | null {
+  if (!state || !rootNode) {
+    return null
+  }
+
+  // Get the current route from state (the active one based on index)
+  const currentRoute = state.routes[state.routes.length - 1]
+  if (!currentRoute) {
+    return null
+  }
+
+  // Find the matching child node
+  const matchingNode = findNodeByRouteName(rootNode, currentRoute.name)
+  if (!matchingNode) {
+    return null
+  }
+
+  // If there's a nested state, continue recursively
+  if (currentRoute.state && currentRoute.state.routes) {
+    const nestedResult = findRouteNodeFromState(currentRoute.state, matchingNode)
+    if (nestedResult) {
+      return nestedResult
+    }
+  }
+
+  return matchingNode
+}
+
+/**
+ * Find a node by its route name in the tree.
+ * Searches children recursively.
+ */
+function findNodeByRouteName(node: RouteNode, routeName: string): RouteNode | null {
+  // Check if this node matches
+  if (node.route === routeName) {
+    return node
+  }
+
+  // Search children
+  for (const child of node.children) {
+    const found = findNodeByRouteName(child, routeName)
+    if (found) {
+      return found
+    }
+  }
+
+  return null
+}
+
+/**
+ * Extract params from navigation state.
+ * Collects params from all routes in the state hierarchy.
+ */
+export function extractParamsFromState(
+  state:
+    | { routes: Array<{ name: string; params?: Record<string, any>; state?: any }> }
+    | undefined
+): Record<string, string | string[]> {
+  if (!state) {
+    return {}
+  }
+
+  const params: Record<string, string | string[]> = {}
+
+  // Collect params from all routes in the state
+  for (const route of state.routes) {
+    if (route.params) {
+      Object.assign(params, route.params)
+    }
+    // Recurse into nested state
+    if (route.state) {
+      Object.assign(params, extractParamsFromState(route.state))
+    }
+  }
+
+  return params
+}
+
+/**
+ * Extract search params from href string.
+ */
+export function extractSearchFromHref(href: string): Record<string, string | string[]> {
+  const searchIndex = href.indexOf('?')
+  if (searchIndex === -1) {
+    return {}
+  }
+
+  const searchString = href.slice(searchIndex + 1)
+  const params: Record<string, string | string[]> = {}
+  const searchParams = new URLSearchParams(searchString)
+
+  searchParams.forEach((value, key) => {
+    const existing = params[key]
+    if (existing === undefined) {
+      params[key] = value
+    } else if (Array.isArray(existing)) {
+      existing.push(value)
+    } else {
+      params[key] = [existing, value]
+    }
+  })
+
+  return params
+}
+
+/**
+ * Extract pathname from href string.
+ */
+export function extractPathnameFromHref(href: string): string {
+  const searchIndex = href.indexOf('?')
+  const hashIndex = href.indexOf('#')
+
+  let endIndex = href.length
+  if (searchIndex !== -1) endIndex = Math.min(endIndex, searchIndex)
+  if (hashIndex !== -1) endIndex = Math.min(endIndex, hashIndex)
+
+  return href.slice(0, endIndex)
+}
+
+/**
+ * Find all route nodes from root to the current page based on navigation state.
+ * Returns an array of RouteNodes in order from root layout to the page.
+ * This is used on native to build the full matches array including layouts.
+ */
+export function findAllRouteNodesFromState(
+  state: { routes: Array<{ name: string; state?: any }> } | undefined,
+  rootNode: RouteNode | null
+): RouteNode[] {
+  if (!state || !rootNode) {
+    return []
+  }
+
+  const nodes: RouteNode[] = []
+
+  function collectNodes(
+    currentState:
+      | { routes: Array<{ name: string; state?: any; params?: Record<string, any> }> }
+      | undefined,
+    parentNode: RouteNode | null
+  ) {
+    if (!currentState || !parentNode) {
+      return
+    }
+
+    // get the current route from state (the active one based on index)
+    const currentRoute = currentState.routes[currentState.routes.length - 1]
+    if (!currentRoute) {
+      return
+    }
+
+    // find the matching child node
+    const matchingNode = findNodeByRouteName(parentNode, currentRoute.name)
+    if (!matchingNode) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log(
+          '[one] findAllRouteNodesFromState: could not find node for',
+          currentRoute.name,
+          'in',
+          parentNode.route
+        )
+      }
+      return
+    }
+
+    // add this node to the list
+    nodes.push(matchingNode)
+
+    // if there's a nested state, continue recursively
+    if (currentRoute.state && currentRoute.state.routes) {
+      collectNodes(currentRoute.state, matchingNode)
+    } else if (currentRoute.params?.screen) {
+      // react navigation uses params.screen to specify child route when state isn't created yet
+      // this happens on initial render before the nested navigator mounts
+      const childRouteName = currentRoute.params.screen as string
+      const childNode = matchingNode.children.find((c) => c.route === childRouteName)
+      if (childNode) {
+        nodes.push(childNode)
+        // if there are nested params, continue recursively
+        if (currentRoute.params.params && (currentRoute.params.params as any).screen) {
+          collectNodes(
+            { routes: [{ name: childRouteName, params: currentRoute.params.params }] },
+            childNode
+          )
+        }
+      }
+    }
+  }
+
+  collectNodes(state, rootNode)
+  return nodes
+}

package/src/router/getLinkingConfig.ts

@@ -0,0 +1,68 @@
+import { getActionFromState, type LinkingOptions } from '@react-navigation/native'
+import type { State } from '../fork/getPathFromState'
+import { getReactNavigationConfig, type Screen } from '../getReactNavigationConfig'
+import {
+  addEventListener,
+  getInitialURL,
+  getPathFromState,
+  getStateFromPath,
+} from '../link/linking'
+import type { RouteNode } from './Route'
+
+export function getNavigationConfig(
+  routes: RouteNode,
+  metaOnly = true
+): {
+  initialRouteName?: string
+  screens: Record<string, Screen>
+} {
+  return getReactNavigationConfig(routes, metaOnly)
+}
+
+export type OneLinkingOptions = LinkingOptions<object> & {
+  getPathFromState?: typeof getPathFromState
+}
+
+export function getLinkingConfig(routes: RouteNode, metaOnly = true): OneLinkingOptions {
+  const config = getNavigationConfig(routes, metaOnly)
+  return {
+    prefixes: [],
+    // @ts-expect-error
+    config,
+    // A custom getInitialURL is used on native to ensure the app always starts at
+    // the root path if it's launched from something other than a deep link.
+    // This helps keep the native functionality working like the web functionality.
+    // For example, if you had a root navigator where the first screen was `/settings` and the second was `/index`
+    // then `/index` would be used on web and `/settings` would be used on native.
+    getInitialURL,
+    subscribe: addEventListener,
+    getStateFromPath: getStateFromPathMemoized,
+    getPathFromState(state: State, options: Parameters<typeof getPathFromState>[1]) {
+      return (
+        getPathFromState(state, {
+          ...config,
+          ...options,
+        }) ?? '/'
+      )
+    },
+    // Add all functions to ensure the types never need to fallback.
+    // This is a convenience for usage in the package.
+    getActionFromState,
+  }
+}
+
+export const stateCache = new Map<string, any>()
+
+/** We can reduce work by memoizing the state by the pathname. This only works because the options (linking config) theoretically never change.  */
+function getStateFromPathMemoized(
+  path: string,
+  options: Parameters<typeof getStateFromPath>[1]
+) {
+  const cached = stateCache.get(path)
+  if (cached) {
+    return cached
+  }
+  const result = getStateFromPath(path, options)
+  stateCache.set(path, result)
+  return result
+}

package/src/router/getNormalizedStatePath.tsx

@@ -0,0 +1,52 @@
+import { stripBaseUrl } from '../fork/getStateFromPath-mods'
+
+type SearchParams = Record<string, string | string[]>
+
+export type UrlObject = {
+  unstable_globalHref: string
+  pathname: string
+  readonly params: SearchParams
+  segments: string[]
+  isIndex: boolean
+}
+
+// TODO: Split up getPathFromState to return all this info at once.
+export function getNormalizedStatePath(
+  {
+    path: statePath,
+    params,
+  }: {
+    path: string
+    params: any
+  },
+  baseUrl?: string
+): Pick<UrlObject, 'segments' | 'params'> {
+  const [pathname] = statePath.split('?')
+  return {
+    // Strip empty path at the start
+    segments: stripBaseUrl(pathname, baseUrl)
+      .split('/')
+      .filter(Boolean)
+      .map(decodeURIComponent),
+    // TODO: This is not efficient, we should generate based on the state instead
+    // of converting to string then back to object
+    params: Object.entries(params).reduce((prev, [key, value]) => {
+      if (Array.isArray(value)) {
+        prev[key] = value.map((v: string) => {
+          try {
+            return decodeURIComponent(v)
+          } catch {
+            return v
+          }
+        })
+      } else {
+        try {
+          prev[key] = decodeURIComponent(value as string)
+        } catch {
+          prev[key] = value as string
+        }
+      }
+      return prev
+    }, {} as SearchParams),
+  }
+}

package/src/router/getRouteInfo.ts

@@ -0,0 +1,37 @@
+import type { getPathFromState as originalGetPathFromState } from '@react-navigation/core'
+import { getPathDataFromState, type State } from '../fork/getPathFromState'
+import { stripBaseUrl } from '../fork/getStateFromPath-mods'
+import type { OneRouter } from '../interfaces/router'
+import { getNormalizedStatePath, type UrlObject } from './getNormalizedStatePath'
+import { isIndexPath } from './isIndexPath'
+import { getLinking } from './linkingConfig'
+
+export function getRouteInfo(state: OneRouter.ResultState) {
+  return getRouteInfoFromState(
+    (state: Parameters<typeof originalGetPathFromState>[0], asPath: boolean) => {
+      return getPathDataFromState(state, {
+        screens: [],
+        ...getLinking()?.config,
+        preserveDynamicRoutes: asPath,
+        preserveGroups: asPath,
+      })
+    },
+    state
+  )
+}
+
+function getRouteInfoFromState(
+  getPathFromState: (state: State, asPath: boolean) => { path: string; params: any },
+  state: State,
+  baseUrl?: string
+): UrlObject {
+  const { path } = getPathFromState(state, false)
+  const qualified = getPathFromState(state, true)
+
+  return {
+    unstable_globalHref: path,
+    pathname: stripBaseUrl(path, baseUrl).split('?')[0],
+    isIndex: isIndexPath(state),
+    ...getNormalizedStatePath(qualified, baseUrl),
+  }
+}