one 1.1.5 → 1.1.270

package/src/useScreens.tsx

@@ -0,0 +1,334 @@
+import { createNavigatorFactory } from '@react-navigation/core'
+import type {
+  EventMapBase,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  ScreenListeners,
+} from '@react-navigation/native'
+import React, { Suspense, useEffect, useState } from 'react'
+import {
+  Route,
+  useRouteNode,
+  type DynamicConvention,
+  type LoadedRoute,
+  type RouteNode,
+} from './Route'
+import One_ROUTER_IMPORT_MODE from './import-mode'
+import { sortRoutesWithInitial } from './sortRoutes'
+import { EmptyRoute } from './views/EmptyRoute'
+import { RootErrorBoundary } from './views/RootErrorBoundary'
+import { Try } from './views/Try'
+import { getPageExport } from './utils/getPageExport'
+
+// `@react-navigation/core` does not expose the Screen or Group components directly, so we have to
+// do this hack.
+export const { Screen, Group } = createNavigatorFactory({} as any)()
+
+export type ScreenProps<
+  TOptions extends Record<string, any> = Record<string, any>,
+  State extends NavigationState = NavigationState,
+  EventMap extends EventMapBase = EventMapBase,
+> = {
+  /** Name is required when used inside a Layout component. */
+  name?: string
+  /**
+   * Redirect to the nearest sibling route.
+   * If all children are redirect={true}, the layout will render `null` as there are no children to render.
+   */
+  redirect?: boolean
+  initialParams?: Record<string, any>
+  options?: TOptions
+
+  listeners?:
+    | ScreenListeners<State, EventMap>
+    | ((prop: {
+        route: RouteProp<ParamListBase, string>
+        navigation: any
+      }) => ScreenListeners<State, EventMap>)
+
+  getId?: ({ params }: { params?: Record<string, any> }) => string | undefined
+}
+
+function getSortedChildren(
+  children: RouteNode[],
+  order?: ScreenProps[],
+  initialRouteName?: string
+): { route: RouteNode; props: Partial<ScreenProps> }[] {
+  if (!order?.length) {
+    return children
+      .sort(sortRoutesWithInitial(initialRouteName))
+      .map((route) => ({ route, props: {} }))
+  }
+  const entries = [...children]
+
+  const ordered = order
+    .map(({ name, redirect, initialParams, listeners, options, getId }) => {
+      if (!entries.length) {
+        console.warn(`[Layout children]: Too many screens defined. Route "${name}" is extraneous.`)
+        return null
+      }
+      const matchIndex = entries.findIndex((child) => child.route === name)
+      if (matchIndex === -1) {
+        console.warn(
+          `[Layout children]: No route named "${name}" exists in nested children:`,
+          children.map(({ route }) => route)
+        )
+        return null
+      }
+      // Get match and remove from entries
+      const match = entries[matchIndex]
+      entries.splice(matchIndex, 1)
+
+      // Ensure to return null after removing from entries.
+      if (redirect) {
+        if (typeof redirect === 'string') {
+          throw new Error(`Redirecting to a specific route is not supported yet.`)
+        }
+        return null
+      }
+
+      return {
+        route: match,
+        props: { initialParams, listeners, options, getId },
+      }
+    })
+    .filter(Boolean) as {
+    route: RouteNode
+    props: Partial<ScreenProps>
+  }[]
+
+  // Add any remaining children
+  ordered.push(
+    ...entries.sort(sortRoutesWithInitial(initialRouteName)).map((route) => ({ route, props: {} }))
+  )
+
+  return ordered
+}
+
+/**
+ * @returns React Navigation screens sorted by the `route` property.
+ */
+export function useSortedScreens(order: ScreenProps[]): React.ReactNode[] {
+  const node = useRouteNode()
+
+  const sortedScreens = React.useMemo(() => {
+    const sorted = node?.children?.length
+      ? getSortedChildren(node.children, order, node.initialRouteName)
+      : []
+
+    return sorted.map((value) => routeToScreen(value.route, value.props))
+  }, [node?.children, node?.initialRouteName, order])
+
+  return sortedScreens
+}
+
+function fromImport({ ErrorBoundary, ...component }: LoadedRoute) {
+  if (ErrorBoundary) {
+    return {
+      default: React.forwardRef((props: any, ref: any) => {
+        const children = React.createElement(getPageExport(component) || EmptyRoute, {
+          ...props,
+          ref,
+        })
+        return <Try catch={ErrorBoundary}>{children}</Try>
+      }),
+    }
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    const exported = getPageExport(component)
+    if (exported && typeof exported === 'object' && Object.keys(exported).length === 0) {
+      return { default: EmptyRoute }
+    }
+  }
+
+  return { default: getPageExport(component) }
+}
+
+// TODO: Maybe there's a more React-y way to do this?
+// Without this store, the process enters a recursive loop.
+const qualifiedStore = new WeakMap<RouteNode, React.ComponentType<any>>()
+
+/** Wrap the component with various enhancements and add access to child routes. */
+export function getQualifiedRouteComponent(value: RouteNode) {
+  if (value && qualifiedStore.has(value)) {
+    return qualifiedStore.get(value)!
+  }
+
+  let ScreenComponent: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>
+
+  if (One_ROUTER_IMPORT_MODE === 'lazy') {
+    ScreenComponent = React.forwardRef((props, ref) => {
+      // for native avoid suspense for now
+      const [loaded, setLoaded] = useState<any>(null)
+
+      useEffect(() => {
+        try {
+          const found = value.loadRoute()
+          if (found) {
+            setLoaded(found)
+          }
+        } catch (err) {
+          if (err instanceof Promise) {
+            err
+              .then((res) => {
+                setLoaded(res)
+              })
+              .catch((err) => {
+                console.error(`Error loading route`, err)
+              })
+          } else {
+            setLoaded(err as any)
+          }
+        }
+      }, [])
+
+      if (loaded) {
+        const Component = getPageExport(fromImport(loaded)) as React.ComponentType<any>
+        return (
+          // <Suspense fallback={null}>
+          <Component {...props} ref={ref} />
+          // </Suspense>
+        )
+      }
+
+      return null
+    })
+  } else {
+    ScreenComponent = React.forwardRef((props, ref) => {
+      const res = value.loadRoute()
+      const Component = getPageExport(fromImport(res)) as React.ComponentType<any>
+      return (
+        // <Suspense fallback={null}>
+        <Component {...props} ref={ref} />
+        // </Suspense>
+      )
+    })
+  }
+
+  const wrapSuspense = (children: any) => {
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      return <Suspense fallback={<SuspenseFallback route={value} />}>{children}</Suspense>
+    }
+    // on web avoiding suspense for now
+    // its causing page flickers, we need to make sure we wrap loaders + page nav
+    // in startTransition
+    return children
+  }
+
+  const getLoadable = (props: any, ref: any) => {
+    return (
+      <RootErrorBoundary>
+        {wrapSuspense(
+          <ScreenComponent
+            {...{
+              ...props,
+              ref,
+              // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
+              // the intention is to make it possible to deduce shared routes.
+              segment: value.route,
+            }}
+          />
+        )}
+      </RootErrorBoundary>
+    )
+  }
+
+  const SuspenseFallback = ({ route }: { route: RouteNode }) => {
+    useEffect(() => {
+      // console.info(`⚠️ Suspended:`, route)
+    }, [route])
+
+    return null
+  }
+
+  const QualifiedRoute = React.forwardRef(
+    (
+      {
+        // Remove these React Navigation props to
+        // enforce usage of router hooks (where the query params are correct).
+        route,
+        navigation,
+
+        // Pass all other props to the component
+        ...props
+      }: any,
+      ref: any
+    ) => {
+      const loadable = getLoadable(props, ref)
+      return <Route node={value}>{loadable}</Route>
+    }
+  )
+
+  QualifiedRoute.displayName = `Route(${value.route})`
+
+  qualifiedStore.set(value, QualifiedRoute)
+  return QualifiedRoute
+}
+
+/** @returns a function which provides a screen id that matches the dynamic route name in params. */
+export function createGetIdForRoute(
+  route: Pick<RouteNode, 'dynamic' | 'route' | 'contextKey' | 'children'>
+) {
+  const include = new Map<string, DynamicConvention>()
+
+  if (route.dynamic) {
+    for (const segment of route.dynamic) {
+      include.set(segment.name, segment)
+    }
+  }
+
+  return ({ params = {} } = {} as { params?: Record<string, any> }) => {
+    const segments: string[] = []
+
+    for (const dynamic of include.values()) {
+      const value = params?.[dynamic.name]
+      if (Array.isArray(value) && value.length > 0) {
+        // If we are an array with a value
+        segments.push(value.join('/'))
+      } else if (value && !Array.isArray(value)) {
+        // If we have a value and not an empty array
+        segments.push(value)
+      } else if (dynamic.deep) {
+        segments.push(`[...${dynamic.name}]`)
+      } else {
+        segments.push(`[${dynamic.name}]`)
+      }
+    }
+
+    return segments.join('/') ?? route.contextKey
+  }
+}
+
+function routeToScreen(route: RouteNode, { options, ...props }: Partial<ScreenProps> = {}) {
+  return (
+    <Screen
+      // Users can override the screen getId function.
+      getId={createGetIdForRoute(route)}
+      {...props}
+      name={route.route}
+      key={route.route}
+      options={(args) => {
+        // Only eager load generated components
+        const staticOptions = route.generated ? route.loadRoute()?.getNavOptions : null
+        const staticResult =
+          typeof staticOptions === 'function' ? staticOptions(args) : staticOptions
+        const dynamicResult = typeof options === 'function' ? options?.(args) : options
+        const output = {
+          ...staticResult,
+          ...dynamicResult,
+        }
+
+        // Prevent generated screens from showing up in the tab bar.
+        if (route.generated) {
+          output.tabBarButton = () => null
+          // TODO: React Navigation doesn't provide a way to prevent rendering the drawer item.
+          output.drawerItemStyle = { height: 0, display: 'none' }
+        }
+
+        return output
+      }}
+      getComponent={() => getQualifiedRouteComponent(route)}
+    />
+  )
+}

package/src/useViteRoutes.tsx

@@ -0,0 +1,147 @@
+import { CACHE_KEY, CLIENT_BASE_URL } from './router/constants'
+import type { GlobbedRouteImports } from './types'
+import { dynamicImport } from './utils/dynamicImport'
+import { removeSearch } from './utils/removeSearch'
+import type { One } from './vite/types'
+
+// essentially a development helper
+
+let lastVersion = 0
+let context
+
+// for some reason putting it in state doesnt even re-render
+export function useViteRoutes(
+  routes: GlobbedRouteImports,
+  options?: One.RouteOptions,
+  version?: number
+) {
+  if (version && version > lastVersion) {
+    // reload
+    context = null
+    lastVersion = version
+  }
+
+  if (!context) {
+    loadRoutes(routes, options)
+  }
+
+  return context
+}
+
+export function loadRoutes(paths: GlobbedRouteImports, options?: One.RouteOptions) {
+  if (context) return context
+  globalThis['__importMetaGlobbed'] = paths
+  context = globbedRoutesToRouteContext(paths, options)
+  return context
+}
+
+export function globbedRoutesToRouteContext(
+  paths: GlobbedRouteImports,
+  options?: One.RouteOptions
+): One.RouteContext {
+  // make it look like webpack context
+  const routesSync = {}
+  const promises = {}
+  const loadedRoutes = {}
+  const clears = {}
+
+  Object.keys(paths).map((path) => {
+    if (!paths[path]) {
+      console.error(`Error: Missing route at path ${path}`)
+      return
+    }
+    const loadRouteFunction = paths[path]
+    const pathWithoutRelative = path.replace('/app/', './')
+    const shouldRewrite = typeof window !== 'undefined' && window.location && !import.meta.env.PROD
+
+    const originalPath = pathWithoutRelative.slice(1).replace(/\.[jt]sx?$/, '')
+    if (options?.routeModes?.[originalPath] === 'spa') {
+      console.info(`Spa mode: ${originalPath}`)
+      // in SPA mode return null for any route
+      loadedRoutes[pathWithoutRelative] = () => {
+        return null
+      }
+    }
+    // TODO this entire conditional seems like it can go away
+    else if (shouldRewrite) {
+      // for SSR support we rewrite these:
+      routesSync[pathWithoutRelative] =
+        path.includes('_layout.') || path.includes('+spa')
+          ? loadRouteFunction
+          : () => {
+              const realPath = (globalThis['__vxrntodopath'] ?? window.location.pathname).trim()
+              const importUrl = `${CLIENT_BASE_URL}/assets${removeSearch(
+                realPath
+              )}_vxrn_loader.js?cache_key=${CACHE_KEY}`
+              return dynamicImport(importUrl)
+            }
+    } else {
+      routesSync[pathWithoutRelative] = loadRouteFunction
+    }
+  })
+
+  const moduleKeys = Object.keys(routesSync)
+
+  function resolve(id: string) {
+    clearTimeout(clears[id])
+    if (loadedRoutes[id]) {
+      return loadedRoutes[id]
+    }
+    if (typeof routesSync[id] !== 'function') {
+      return routesSync[id]
+    }
+    if (!promises[id]) {
+      promises[id] = routesSync[id]()
+        .then((val: any) => {
+          loadedRoutes[id] = val
+          delete promises[id]
+
+          // clear cache so we get fresh contents in dev mode (hacky)
+          clears[id] = setTimeout(() => {
+            delete loadedRoutes[id]
+          }, 500)
+
+          return val
+        })
+        .catch((err) => {
+          console.error(`Error loading route`, id, err, new Error().stack)
+          loadedRoutes[id] = {
+            default: () => null,
+            // <View
+            //   style={{
+            //     position: 'absolute',
+            //     top: 0,
+            //     left: 0,
+            //     right: 0,
+            //     bottom: 0,
+            //     alignItems: 'center',
+            //     justifyContent: 'center',
+            //     backgroundColor: '#000',
+            //     gap: 20,
+            //   }}
+            // >
+            //   <Text style={{ fontSize: 24, color: '#fff' }}>Error loading route</Text>
+            //   <Text style={{ fontSize: 16, color: '#fff' }}>{id}</Text>
+            //   <Text style={{ fontSize: 18, color: '#fff', maxWidth: 800 }}>{`${err}`}</Text>
+            // </View>
+          }
+          delete promises[id]
+        })
+
+      if (process.env.NODE_ENV === 'development') {
+        promises[id].stack = new Error().stack
+      }
+    }
+
+    // this is called in useScreens value.loadRoute
+    // see getRoutes.ts contextModule.loadRoute
+    // where contextModule === this resolve function
+    throw promises[id]
+  }
+
+  resolve.keys = () => moduleKeys
+  resolve.id = ''
+  resolve.resolve = (id: string) => id
+
+  return resolve
+}

package/src/utils/assertIsReady.ts

@@ -0,0 +1,9 @@
+import type { OneRouter } from '../interfaces/router'
+
+export function assertIsReady(navigationRef: OneRouter.NavigationRef) {
+  if (!navigationRef.isReady()) {
+    throw new Error(
+      'Attempted to navigate before mounting the Root Layout component. Ensure the Root Layout component is rendering a Slot, or other navigator on the first render.'
+    )
+  }
+}

package/src/utils/dynamicImport.ts

@@ -0,0 +1,17 @@
+// adds vite-ignore to avoid warning logs in vite:
+
+export const dynamicImport = (path: string) => {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    // import causes an "invalid expression" bug in react native
+    // TODO make this work, probably needs to fetch + eval?
+    console.warn(`dynamicImport TODO`, path)
+    return require(path)
+  }
+
+  if (process.env.TAMAGUI_TARGET !== 'native') {
+    return import(
+      /* @vite-ignore */
+      path
+    )
+  }
+}

package/src/utils/existsAsync.ts

@@ -0,0 +1,11 @@
+import { exists } from 'node:fs'
+
+export const existsAsync = (file: string) => {
+  return new Promise((res, rej) => {
+    try {
+      exists(file, res)
+    } catch {
+      return false
+    }
+  })
+}

package/src/utils/getPageExport.ts

@@ -0,0 +1,14 @@
+export const getPageExport = (exported) => {
+  return (
+    exported.default ||
+    // because HMR fails with default exports, allow exporting something else
+    // we just find the first non-loader export for now...
+    (() => {
+      const keys = Object.keys(exported)
+      const nonLoader = keys.find((x) => x !== 'loader' && x[0].toUpperCase() === x[0])
+      if (nonLoader) {
+        return exported[nonLoader]
+      }
+    })()
+  )
+}

package/src/utils/globDir.ts

@@ -0,0 +1,12 @@
+import Glob from 'fast-glob'
+
+// Used to emulate a context module, but way faster. TODO: May need to adjust the extensions to stay in sync with Metro.
+export function globDir(cwd: string) {
+  return Glob.sync('**/*.@(ts|tsx|js|jsx)', {
+    cwd,
+  }).map((p) => './' + normalizePaths(p))
+}
+
+function normalizePaths(p: string) {
+  return p.replace(/\\/g, '/')
+}

package/src/utils/hashString.ts

@@ -0,0 +1,5 @@
+import xxh from 'xxhashjs'
+
+export function hashString(str: string): string {
+  return xxh.h64(0).update(str).digest().toString(36)
+}

package/src/utils/isResponse.ts

@@ -0,0 +1,7 @@
+// for some reason instanceof isnt working reliably
+export function isResponse(res: any): res is Response {
+  return (
+    res instanceof Response ||
+    (typeof res.status === 'number' && 'body' in res && typeof res.ok === 'boolean')
+  )
+}

package/src/utils/isStatus.ts

@@ -0,0 +1,5 @@
+import type { RedirectStatusCode } from 'hono/utils/http-status'
+
+export function isStatusRedirect(status: number): status is RedirectStatusCode {
+  return status > 300 && status < 309
+}

package/src/utils/promiseWithResolvers.ts

@@ -0,0 +1,9 @@
+export function promiseWithResolvers<T>() {
+  let a
+  let b
+  let c = new Promise<T>((resolve, reject) => {
+    a = resolve
+    b = reject
+  })
+  return { resolve: a, reject: b, promise: c }
+}

package/src/utils/rand.ts

@@ -0,0 +1 @@
+export const rand = () => `${Math.round(Math.random() * 100_000_000)}`

package/src/utils/redirect.ts

@@ -0,0 +1,11 @@
+import { getURL } from '../getURL'
+import { router } from '../imperative-api'
+
+export const redirect = (path: string, status?: number) => {
+  if (process.env.VITE_ENVIRONMENT === 'client') {
+    router.navigate(path)
+    return
+  }
+
+  return Response.redirect(path[0] === '/' ? `${getURL()}${path}` : path, status)
+}

package/src/utils/removeSearch.ts

@@ -0,0 +1,3 @@
+export function removeSearch(url: string) {
+  return url.replace(/\#.*/, '')
+}

package/src/utils/removeUndefined.ts

@@ -0,0 +1,16 @@
+type RemoveUndefined<T> = {
+  [K in keyof T]: T[K] extends undefined ? never : T[K]
+}
+
+export function removeUndefined<T extends object>(obj: T): RemoveUndefined<T> {
+  const result = {} as RemoveUndefined<T>
+
+  for (const key in obj) {
+    if (obj[key] !== undefined) {
+      // @ts-expect-error
+      result[key] = obj[key] as RemoveUndefined<T>[keyof T]
+    }
+  }
+
+  return result
+}

package/src/utils/requireResolve.ts

@@ -0,0 +1,10 @@
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+export function requireResolve(name: string) {
+  if (typeof import.meta.resolve === 'undefined') {
+    return require.resolve(name)
+  }
+  return import.meta.resolve(name).replace('file://', '')
+}

package/src/utils/url.ts

@@ -0,0 +1,19 @@
+/**
+ * Does the input string start with a valid URL scheme.
+ * NOTE: Additional strictness added to ensure URLs sent in query parameters for in-app navigation are not matched.
+ */
+export function hasUrlProtocolPrefix(href: string): boolean {
+  return /^[\w\d_+.-]+:\/\//.test(href)
+}
+
+export function isWellKnownUri(href: string): boolean {
+  // This is a hack and we should change this to work like the web in the future where we have full confidence in the
+  // ability to match URLs and send anything unmatched to the OS. The main difference between this and `hasUrlProtocolPrefix` is
+  // that we don't require `//`, e.g. `mailto:` is valid and common, and `mailto://bacon` is invalid.
+  return /^(https?|mailto|tel|sms|geo|maps|market|itmss?|itms-apps|content|file):/.test(href)
+}
+
+export function shouldLinkExternally(href: string): boolean {
+  // Cheap check first to avoid regex if the href is not a path fragment.
+  return !/^[./]/.test(href) && (hasUrlProtocolPrefix(href) || isWellKnownUri(href))
+}

package/src/utils/weakKey.ts

@@ -0,0 +1,11 @@
+const w = new WeakMap<any, string>()
+export const weakKey = (item: any): string => {
+  return (
+    w.get(item) ??
+    (() => {
+      const k = `${Math.random()}`
+      w.set(item, k)
+      return k
+    })()
+  )
+}

package/src/utils/weakMemo.ts

@@ -0,0 +1,15 @@
+const cache = new WeakMap()
+
+export function weakMemoObject(obj: any) {
+  if (!cache.has(obj)) {
+    const memoizedObj = {}
+    for (const key of Object.keys(obj)) {
+      if (!cache.has(obj[key])) {
+        cache.set(obj[key], obj[key])
+      }
+      memoizedObj[key] = cache.get(obj[key])
+    }
+    cache.set(obj, memoizedObj)
+  }
+  return cache.get(obj)
+}