one 1.1.5 → 1.1.269

package/src/link/Link.tsx

@@ -0,0 +1,131 @@
+// 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 { Platform, Text, type GestureResponderEvent, 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,
+    // 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}
+      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,16 @@
+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)
+    }
+  })
+  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-ignore
+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 { Platform, type GestureResponderEvent } from 'react-native'
+
+import { appendBaseUrl } from '../fork/getPathFromState'
+import { useOneRouter } from '../router/router'
+import { stripGroupSegmentsFromPath } from '../matchers'
+
+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 { useNavigation, type NavigationProp, type NavigationState } 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
+}

package/src/matchers.ts

@@ -0,0 +1,75 @@
+/** Match `[page]` -> `page` */
+export function matchDynamicName(name: string): string | undefined {
+  // Don't match `...` or `[` or `]` inside the brackets
+  // eslint-disable-next-line no-useless-escape
+  return name.match(/^\[([^[\](?:\.\.\.)]+?)\]$/)?.[1]
+}
+
+/** Match `[...page]` -> `page` */
+export function matchDeepDynamicRouteName(name: string): string | undefined {
+  return name.match(/^\[\.\.\.([^/]+?)\]$/)?.[1]
+}
+
+/** Test `/` -> `page` */
+export function testNotFound(name: string): boolean {
+  return /\+not-found$/.test(name)
+}
+
+/** Match `(page)` -> `page` */
+export function matchGroupName(name: string): string | undefined {
+  return name.match(/^(?:[^\\(\\)])*?\(([^\\/]+)\).*?$/)?.[1]
+}
+
+/** Match the first array group name `(a,b,c)/(d,c)` -> `'a,b,c'` */
+export function matchArrayGroupName(name: string) {
+  return name.match(/(?:[^\\(\\)])*?\(([^\\/]+,[^\\/]+)\).*?$/)?.[1]
+}
+
+export function getNameFromFilePath(name: string): string {
+  return removeSupportedExtensions(removeFileSystemDots(name))
+}
+
+export function getContextKey(name: string): string {
+  // The root path is `` (empty string) so always prepend `/` to ensure
+  // there is some value.
+  const normal = '/' + getNameFromFilePath(name)
+  if (!normal.endsWith('_layout')) {
+    return normal
+  }
+  return normal.replace(/\/?_layout$/, '')
+}
+
+/** Remove `.js`, `.ts`, `.jsx`, `.tsx` */
+export function removeSupportedExtensions(name: string): string {
+  return name.replace(/(\+(api|spa|ssg|ssr))?\.[jt]sx?$/g, '')
+}
+
+// Remove any amount of `./` and `../` from the start of the string
+export function removeFileSystemDots(filePath: string): string {
+  return filePath.replace(/^(?:\.\.?\/)+/g, '')
+}
+
+export function stripGroupSegmentsFromPath(path: string): string {
+  return path
+    .split('/')
+    .reduce((acc, v) => {
+      if (matchGroupName(v) == null) {
+        acc.push(v)
+      }
+      return acc
+    }, [] as string[])
+    .join('/')
+}
+
+export function stripInvisibleSegmentsFromPath(path: string): string {
+  return stripGroupSegmentsFromPath(path).replace(/\/?index$/, '')
+}
+
+/**
+ * Match:
+ *  - _layout files, +html, +not-found, string+api, etc
+ *  - Routes can still use `+`, but it cannot be in the last segment.
+ */
+export function isTypedRoute(name: string) {
+  return !name.startsWith('+') && name.match(/(_layout|[^/]*?\+[^/]*?)\.[tj]sx?$/) === null
+}

package/src/platform.ts

@@ -0,0 +1,5 @@
+// being a bit more thorough here because for some reason window as defined on native
+export const isWeb =
+  typeof window !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
+  typeof document !== 'undefined'

package/src/polyfills-mobile.ts

@@ -0,0 +1,36 @@
+// --------------- global -------------------
+// for react-navigation/native NavigationContainer
+
+globalThis['global'] = globalThis
+
+// --------------- structuredClone -------------------
+
+import structuredClone from '@ungap/structured-clone'
+globalThis['structuredClone'] ||= structuredClone
+
+// --------------- structuredClone -------------------
+
+globalThis['requestAnimationFrame'] ||= setTimeout
+
+// --------------- Symbol.asyncIterator -------------------
+
+import '@azure/core-asynciterator-polyfill'
+
+// --------------- URL -------------------
+
+import 'core-js/actual/url'
+import 'core-js/actual/url-search-params'
+
+// import URLPolyfill from 'url-parse'
+// try {
+//   new URL(`https://tamagui.dev/test`).pathname
+// } catch {
+//   globalThis['URL'] = URLPolyfill
+// }
+
+// --------------- Promise.withResolver -------------------
+
+import { promiseWithResolvers } from './utils/promiseWithResolvers'
+Promise.withResolvers ||
+  // @ts-ignore
+  (Promise.withResolvers = promiseWithResolvers)

package/src/polyfills-server.ts

@@ -0,0 +1,6 @@
+import WebSocket from 'ws'
+
+// make websockets work on server
+globalThis['WebSocket'] ||= WebSocket as any
+
+globalThis['requestAnimationFrame'] = setTimeout

package/src/render.native.tsx

@@ -0,0 +1,3 @@
+export function render(element: React.ReactNode) {
+  console.warn(`empty`)
+}