one 1.2.0 → 1.2.1

package/src/layouts/withLayoutContext.tsx

@@ -0,0 +1,117 @@
+import type { EventMapBase, NavigationState } from '@react-navigation/native'
+import React from 'react'
+import { useContextKey } from '../router/Route'
+import { type ScreenProps, useSortedScreens } from '../router/useScreens'
+import type { PickPartial } from '../types'
+import { withStaticProperties } from '../utils/withStaticProperties'
+import { Screen } from '../views/Screen'
+
+export function useFilterScreenChildren(
+  children: React.ReactNode,
+  {
+    isCustomNavigator,
+    contextKey,
+  }: {
+    isCustomNavigator?: boolean
+    /** Used for sending developer hints */
+    contextKey?: string
+  } = {}
+) {
+  return React.useMemo(() => {
+    const customChildren: any[] = []
+
+    const screens = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child && child.type === Screen) {
+        if (
+          typeof child.props === 'object' &&
+          child.props &&
+          'name' in child.props &&
+          !child.props.name
+        ) {
+          throw new Error(
+            `<Screen /> component in \`default export\` at \`app${contextKey}/_layout\` must have a \`name\` prop when used as a child of a Layout Route.`
+          )
+        }
+        if (process.env.NODE_ENV !== 'production') {
+          if (
+            ['children', 'component', 'getComponent'].some(
+              (key) => child.props && typeof child.props === 'object' && key in child.props
+            )
+          ) {
+            throw new Error(
+              `<Screen /> component in \`default export\` at \`app${contextKey}/_layout\` must not have a \`children\`, \`component\`, or \`getComponent\` prop when used as a child of a Layout Route`
+            )
+          }
+        }
+        return child.props as ScreenProps
+      }
+
+      if (isCustomNavigator) {
+        customChildren.push(child)
+      } else {
+        console.warn(
+          `Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app${contextKey}/_layout"`
+        )
+      }
+
+      return null
+    })?.filter(Boolean)
+
+    // Add an assertion for development
+    if (process.env.NODE_ENV !== 'production') {
+      // Assert if names are not unique
+      const names = screens?.map((screen) => screen.name)
+      if (names && new Set(names).size !== names.length) {
+        throw new Error('Screen names must be unique: ' + names)
+      }
+    }
+
+    return {
+      screens,
+      children: customChildren,
+    }
+  }, [children, contextKey, isCustomNavigator])
+}
+
+/** Return a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional */
+export function withLayoutContext<
+  TOptions extends object,
+  T extends React.ComponentType<any>,
+  State extends NavigationState,
+  EventMap extends EventMapBase,
+>(
+  Nav: T,
+  processor?: (
+    options: ScreenProps<TOptions, State, EventMap>[]
+  ) => ScreenProps<TOptions, State, EventMap>[],
+  options?: { props: any }
+) {
+  return withStaticProperties(
+    React.forwardRef<unknown, PickPartial<React.ComponentProps<T>, 'children'>>((propsIn, ref) => {
+      const { children, ...props } = propsIn as React.ComponentProps<T>
+      const contextKey = useContextKey()
+      const { screens } = useFilterScreenChildren(children, {
+        contextKey,
+      })
+
+      const processed = processor ? processor(screens ?? ([] as any)) : screens
+      const sorted = useSortedScreens((processed ?? []) as any, {
+        onlyMatching: true,
+      })
+
+      // Prevent throwing an error when there are no screens.
+      if (!sorted.length) {
+        return null
+      }
+
+      return (
+        <Nav {...options?.props} {...props} id={contextKey} ref={ref}>
+          {sorted}
+        </Nav>
+      )
+    }),
+    {
+      Screen,
+    }
+  )
+}

package/src/link/Link.tsx

@@ -0,0 +1,133 @@
+// Fork of @react-navigation/native Link.tsx with `href` and `replace` support added and
+// `to` / `action` support removed.
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import { type GestureResponderEvent, Platform, Text, type TextProps } from 'react-native'
+
+import type { OneRouter } from '../interfaces/router'
+import { resolveHref } from './href'
+import { useLinkTo } from './useLinkTo'
+
+/**
+ * Component to render link to another route using a path.
+ * Uses an anchor tag on the web.
+ *
+ * @param props.href Absolute path to route (e.g. `/feeds/hot`).
+ * @param props.replace Should replace the current route without adding to the history.
+ * @param props.push Should push the current route, always adding to the history.
+ * @param props.asChild Forward props to child component. Useful for custom buttons.
+ * @param props.children Child elements to render the content.
+ * @param props.className On web, this sets the HTML `class` directly. On native, this can be used with CSS interop tools like Nativewind.
+ */
+export const Link = React.forwardRef(function Link(
+  {
+    href,
+    replace,
+    push,
+    id,
+    // TODO: This does not prevent default on the anchor tag.
+    asChild,
+    rel,
+    target,
+    download,
+    ...rest
+  }: OneRouter.LinkProps<any>,
+  ref: React.ForwardedRef<Text>
+) {
+  // Mutate the style prop to add the className on web.
+  const style = useInteropClassName(rest)
+
+  // If not passing asChild, we need to forward the props to the anchor tag using React Native Web's `hrefAttrs`.
+  const hrefAttrs = useHrefAttrs({ asChild, rel, target, download })
+
+  const resolvedHref = React.useMemo(() => {
+    if (href == null) {
+      throw new Error('Link: href is required')
+    }
+    return resolveHref(href)
+  }, [href])
+
+  const props = useLinkTo({ href: resolvedHref, replace })
+
+  const onPress = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => {
+    if ('onPress' in rest) {
+      rest.onPress?.(e)
+    }
+    props.onPress(e)
+  }
+
+  const Element = asChild ? Slot : Text
+
+  // Avoid using createElement directly, favoring JSX, to allow tools like Nativewind to perform custom JSX handling on native.
+  return (
+    <Element
+      ref={ref}
+      {...props}
+      {...hrefAttrs}
+      {...rest}
+      nativeID={id}
+      style={asChild ? null : style}
+      {...Platform.select({
+        web: {
+          onClick: onPress,
+        } as any,
+        default: { onPress },
+      })}
+    />
+  )
+}) as unknown as OneRouter.LinkComponent
+
+Link.resolveHref = resolveHref
+
+// Mutate the style prop to add the className on web.
+function useInteropClassName(props: { style?: TextProps['style']; className?: string }) {
+  if (Platform.OS !== 'web') {
+    return props.style
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return React.useMemo(() => {
+    if (props.className == null) {
+      return props.style
+    }
+    const cssStyle = {
+      $$css: true,
+      __routerLinkClassName: props.className,
+    }
+
+    if (Array.isArray(props.style)) {
+      return [...props.style, cssStyle]
+    }
+    return [props.style, cssStyle]
+  }, [props.style, props.className])
+}
+
+const useHrefAttrs = Platform.select<
+  (
+    props: Partial<OneRouter.LinkProps<any>>
+  ) => { hrefAttrs?: any } & Partial<OneRouter.LinkProps<any>>
+>({
+  web: function useHrefAttrs({
+    asChild,
+    rel,
+    target,
+    download,
+  }: Partial<OneRouter.LinkProps<any>>) {
+    return React.useMemo(() => {
+      const hrefAttrs = {
+        rel,
+        target,
+        download,
+      }
+      if (asChild) {
+        return hrefAttrs
+      }
+      return {
+        hrefAttrs,
+      }
+    }, [asChild, rel, target, download])
+  },
+  default: function useHrefAttrs() {
+    return {}
+  },
+})

package/src/link/Redirect.tsx

@@ -0,0 +1,19 @@
+import { useRouter } from '../hooks'
+import type { OneRouter } from '../interfaces/router'
+import { useFocusEffect } from '../useFocusEffect'
+
+/** Redirects to the href as soon as the component is mounted. */
+
+export function Redirect({ href }: { href: OneRouter.Href }) {
+  const router = useRouter()
+
+  useFocusEffect(() => {
+    try {
+      router.replace(href)
+    } catch (error) {
+      console.error(error)
+    }
+  }, [href])
+
+  return null
+}

package/src/link/href.ts

@@ -0,0 +1,53 @@
+import type { OneRouter } from '../interfaces/router'
+
+/** Resolve an href object into a fully qualified, relative href. */
+export const resolveHref = (href: OneRouter.Href): string => {
+  if (typeof href === 'string') {
+    return resolveHref({ pathname: href })
+  }
+  const path = href.pathname ?? ''
+  if (!href?.params) {
+    return path
+  }
+  const { pathname, params } = createQualifiedPathname(path, {
+    ...href.params,
+  })
+  const paramsString = createQueryParams(params)
+  return pathname + (paramsString ? `?${paramsString}` : '')
+}
+
+function createQualifiedPathname(
+  pathname: string,
+  params: Record<string, any>
+): { pathname: string; params: OneRouter.UnknownInputParams } {
+  for (const [key, value = ''] of Object.entries(params)) {
+    const dynamicKey = `[${key}]`
+    const deepDynamicKey = `[...${key}]`
+    if (pathname.includes(dynamicKey)) {
+      pathname = pathname.replace(dynamicKey, encodeParam(value))
+    } else if (pathname.includes(deepDynamicKey)) {
+      pathname = pathname.replace(deepDynamicKey, encodeParam(value))
+    } else {
+      continue
+    }
+
+    delete params[key]
+  }
+  return { pathname, params }
+}
+
+function encodeParam(param: any): string {
+  return Array.isArray(param)
+    ? param.map((p) => encodeParam(p)).join('/')
+    : encodeURIComponent(`${param}`)
+}
+
+function createQueryParams(params: Record<string, any>): string {
+  return (
+    Object.entries(params)
+      // Allow nullish params
+      .filter(([, value]) => value != null)
+      .map(([key, value]) => `${key}=${encodeURIComponent(value.toString())}`)
+      .join('&')
+  )
+}

package/src/link/linking.ts

@@ -0,0 +1,104 @@
+import * as Linking from 'expo-linking'
+import { Platform } from 'react-native'
+
+import { adjustPathname } from '../fork/extractPathFromURL'
+import { getPathFromState } from '../fork/getPathFromState'
+import { getStateFromPath } from '../fork/getStateFromPath'
+
+// @ts-expect-error
+const isExpoGo = typeof expo !== 'undefined' && globalThis.expo?.modules?.ExpoGo
+
+// 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.
+export function getInitialURL(): Promise<string | null> | string {
+  if (process.env.NODE_ENV === 'test') {
+    return Linking.getInitialURL() ?? getRootURL()
+  }
+
+  if (Platform.OS === 'web') {
+    if (typeof window === 'undefined') {
+      return ''
+    }
+    if (window.location?.href) {
+      return window.location.href
+    }
+  }
+  return Promise.race<string>([
+    (async () => {
+      const url = await Linking.getInitialURL()
+
+      // NOTE: This could probably be wrapped with the development boundary
+      // since Expo Go is mostly just used in development.
+
+      // Expo Go is weird and requires the root path to be `/--/`
+      if (url && isExpoGo) {
+        const parsed = Linking.parse(url)
+        // If the URL is defined (default in Expo Go dev apps) and the URL has no path:
+        // `exp://192.168.87.39:19000/` then use the default `exp://192.168.87.39:19000/--/`
+        if (
+          parsed.path === null ||
+          ['', '/'].includes(
+            adjustPathname({
+              hostname: parsed.hostname,
+              pathname: parsed.path,
+            })
+          )
+        ) {
+          return getRootURL()
+        }
+      }
+      // The path will be nullish in bare apps when the app is launched from the home screen.
+      // TODO: define some policy around notifications.
+      return url ?? getRootURL()
+    })(),
+    new Promise<string>((resolve) =>
+      // Timeout in 150ms if `getInitialState` doesn't resolve
+      // Workaround for https://github.com/facebook/react-native/issues/25675
+      setTimeout(() => resolve(getRootURL()), 150)
+    ),
+  ])
+}
+
+let _rootURL: string | undefined
+
+export function getRootURL(): string {
+  if (_rootURL === undefined) {
+    _rootURL = Linking.createURL('/')
+  }
+  return _rootURL
+}
+
+export function addEventListener(listener: (url: string) => void) {
+  let callback: (({ url }: { url: string }) => void) | undefined
+
+  if (isExpoGo) {
+    // This extra work is only done in the Expo Go app.
+    callback = ({ url }: { url: string }) => {
+      const parsed = Linking.parse(url)
+
+      // If the URL is defined (default in Expo Go dev apps) and the URL has no path:
+      // `exp://192.168.87.39:19000/` then use the default `exp://192.168.87.39:19000/--/`
+      if (
+        parsed.path === null ||
+        ['', '/'].includes(adjustPathname({ hostname: parsed.hostname, pathname: parsed.path }))
+      ) {
+        listener(getRootURL())
+      } else {
+        listener(url)
+      }
+    }
+  } else {
+    callback = ({ url }: { url: string }) => listener(url)
+  }
+  const subscription = Linking.addEventListener('url', callback)
+
+  return () => {
+    // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
+    subscription?.remove?.()
+  }
+}
+
+export { getStateFromPath, getPathFromState }

package/src/link/path.ts

@@ -0,0 +1,138 @@
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+// https://github.com/browserify/path-browserify/blob/master/index.js
+
+function assertPath(path: string) {
+  if (typeof path !== 'string') {
+    throw new TypeError('Path must be a string. Received ' + JSON.stringify(path))
+  }
+}
+
+// Resolves . and .. elements in a path with directory names
+function normalizeStringPosix(path: string, allowAboveRoot?: boolean) {
+  let res = ''
+  let lastSegmentLength = 0
+  let lastSlash = -1
+  let dots = 0
+  let code
+  for (let i = 0; i <= path.length; ++i) {
+    if (i < path.length) {
+      code = path.charCodeAt(i)
+    } else if (code === 47 /*/*/) {
+      break
+    } else {
+      code = 47 /*/*/
+    }
+    if (code === 47 /*/*/) {
+      if (lastSlash === i - 1 || dots === 1) {
+        // NOOP
+      } else if (lastSlash !== i - 1 && dots === 2) {
+        if (
+          res.length < 2 ||
+          lastSegmentLength !== 2 ||
+          res.charCodeAt(res.length - 1) !== 46 /*.*/ ||
+          res.charCodeAt(res.length - 2) !== 46 /*.*/
+        ) {
+          if (res.length > 2) {
+            const lastSlashIndex = res.lastIndexOf('/')
+            if (lastSlashIndex !== res.length - 1) {
+              if (lastSlashIndex === -1) {
+                res = ''
+                lastSegmentLength = 0
+              } else {
+                res = res.slice(0, lastSlashIndex)
+                lastSegmentLength = res.length - 1 - res.lastIndexOf('/')
+              }
+              lastSlash = i
+              dots = 0
+              continue
+            }
+          } else if (res.length === 2 || res.length === 1) {
+            res = ''
+            lastSegmentLength = 0
+            lastSlash = i
+            dots = 0
+            continue
+          }
+        }
+        if (allowAboveRoot) {
+          if (res.length > 0) res += '/..'
+          else res = '..'
+          lastSegmentLength = 2
+        }
+      } else {
+        if (res.length > 0) res += '/' + path.slice(lastSlash + 1, i)
+        else res = path.slice(lastSlash + 1, i)
+        lastSegmentLength = i - lastSlash - 1
+      }
+      lastSlash = i
+      dots = 0
+    } else if (code === 46 /*.*/ && dots !== -1) {
+      ++dots
+    } else {
+      dots = -1
+    }
+  }
+  return res
+}
+
+// path.resolve([from ...], to)
+export function resolve(...segments: string[]) {
+  let resolvedPath = ''
+  let resolvedAbsolute = false
+
+  for (let i = segments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
+    let path
+    if (i >= 0) {
+      path = segments[i]
+    } else {
+      path = '/'
+    }
+
+    assertPath(path)
+
+    // Skip empty entries
+    if (path.length === 0) {
+      continue
+    }
+
+    resolvedPath = path + '/' + resolvedPath
+    resolvedAbsolute = path.charCodeAt(0) === 47 /*/*/
+  }
+
+  // At this point the path should be resolved to a full absolute path, but
+  // handle relative paths to be safe (might happen when process.cwd() fails)
+
+  // Normalize the path
+  resolvedPath = normalizeStringPosix(resolvedPath, !resolvedAbsolute)
+
+  if (resolvedAbsolute) {
+    if (resolvedPath.length > 0) {
+      return '/' + resolvedPath
+    }
+    return '/'
+  }
+  if (resolvedPath.length > 0) {
+    return resolvedPath
+  }
+  return '.'
+}

package/src/link/useLinkTo.tsx

@@ -0,0 +1,57 @@
+import type * as React from 'react'
+import { type GestureResponderEvent, Platform } from 'react-native'
+
+import { appendBaseUrl } from '../fork/getPathFromState-mods'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
+import { useOneRouter } from '../router/router'
+
+function eventShouldPreventDefault(
+  e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+): boolean {
+  if (e?.defaultPrevented) {
+    return false
+  }
+
+  if (
+    // 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
+}
+
+export function useLinkTo(props: { href: string; replace?: boolean }) {
+  const { linkTo } = useOneRouter()
+
+  const onPress = (e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => {
+    const event = props.replace ? 'REPLACE' : 'PUSH'
+    let shouldHandle = false
+
+    if (Platform.OS !== 'web' || !e) {
+      shouldHandle = e ? !e.defaultPrevented : true
+    } else if (eventShouldPreventDefault(e)) {
+      e.preventDefault()
+      shouldHandle = true
+    }
+
+    if (shouldHandle) {
+      linkTo(props.href, event)
+    }
+  }
+
+  return {
+    // Ensure there's always a value for href. Manually append the baseUrl to the href prop that shows in the static HTML.
+    href: appendBaseUrl(stripGroupSegmentsFromPath(props.href) || '/'),
+    role: 'link' as const,
+    onPress,
+  }
+}

package/src/link/useLoadedNavigation.ts

@@ -0,0 +1,62 @@
+import { type NavigationProp, type NavigationState, useNavigation } from '@react-navigation/native'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useOneRouter } from '../router/router'
+
+type GenericNavigation = NavigationProp<ReactNavigation.RootParamList> & {
+  getState(): NavigationState | undefined
+}
+
+/** Returns a callback which is invoked when the navigation state has loaded. */
+export function useLoadedNavigation() {
+  const { navigationRef } = useOneRouter()
+  const navigation = useNavigation()
+  const isMounted = useRef(true)
+  const pending = useRef<((navigation: GenericNavigation) => void)[]>([])
+
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const flush = useCallback(() => {
+    if (isMounted.current) {
+      const pendingCallbacks = pending.current
+      pending.current = []
+      pendingCallbacks.forEach((callback) => {
+        callback(navigation as GenericNavigation)
+      })
+    }
+  }, [navigation])
+
+  useEffect(() => {
+    if (navigationRef.current) {
+      flush()
+    }
+  }, [flush, navigationRef])
+
+  const push = useCallback(
+    (fn: (navigation: GenericNavigation) => void) => {
+      pending.current.push(fn)
+      if (navigationRef.current) {
+        flush()
+      }
+    },
+    [flush, navigationRef]
+  )
+
+  return push
+}
+
+export function useOptionalNavigation(): GenericNavigation | null {
+  const [navigation, setNavigation] = useState<GenericNavigation | null>(null)
+  const loadNavigation = useLoadedNavigation()
+
+  useEffect(() => {
+    loadNavigation((nav) => setNavigation(nav))
+  }, [loadNavigation])
+
+  return navigation
+}