one 1.1.4 → 1.1.269

package/src/typed-routes/getTypedRoutesDeclarationFile.ts

@@ -0,0 +1,130 @@
+import { getRoutes } from '../getRoutes'
+import { isTypedRoute, removeSupportedExtensions } from '../matchers'
+import type { RouteNode } from '../Route'
+import type { One } from '../vite/types'
+
+// /[...param1]/ - Match [...param1]
+const CATCH_ALL = /\[\.\.\..+?\]/g
+// /[param1] - Match [param1]
+const SLUG = /\[.+?\]/g
+
+export function getTypedRoutesDeclarationFile(ctx: One.RouteContext) {
+  const staticRoutes = new Set<string>()
+  const dynamicRoutes = new Set<string>()
+  const dynamicRouteContextKeys = new Set<string>()
+
+  walkRouteNode(
+    getRoutes(ctx, {
+      platformRoutes: false, // We don't need to generate platform specific routes
+      ignoreEntryPoints: true,
+      ignoreRequireErrors: true,
+      // importMode: 'async',
+    }),
+    '',
+    staticRoutes,
+    dynamicRoutes,
+    dynamicRouteContextKeys
+  )
+
+  return `
+import type { OneRouter } from 'one'
+
+declare module 'one' {
+  export namespace OneRouter {
+    export interface __routes<T extends string = string> extends Record<string, unknown> {
+      StaticRoutes: ${setToUnionType(staticRoutes)}
+      DynamicRoutes: ${setToUnionType(dynamicRoutes)}
+      DynamicRouteTemplate: ${setToUnionType(dynamicRouteContextKeys)}
+      IsTyped: true
+    }
+  }
+}
+`.trim()
+}
+
+/**
+ * Walks a RouteNode tree and adds the routes to the provided sets
+ */
+function walkRouteNode(
+  routeNode: RouteNode | null,
+  parentRoutePath: string,
+  staticRoutes: Set<string>,
+  dynamicRoutes: Set<string>,
+  dynamicRouteContextKeys: Set<string>
+) {
+  if (!routeNode) return
+
+  addRouteNode(routeNode, parentRoutePath, staticRoutes, dynamicRoutes, dynamicRouteContextKeys)
+
+  parentRoutePath = `${removeSupportedExtensions(`${parentRoutePath}/${routeNode.route}`).replace(/\/?index$/, '')}` // replace /index with /
+
+  for (const child of routeNode.children) {
+    walkRouteNode(child, parentRoutePath, staticRoutes, dynamicRoutes, dynamicRouteContextKeys)
+  }
+}
+
+/**
+ * Given a RouteNode, adds the route to the correct sets
+ * Modifies the RouteNode.route to be a typed-route string
+ */
+function addRouteNode(
+  routeNode: RouteNode | null,
+  parentRoutePath: string,
+  staticRoutes: Set<string>,
+  dynamicRoutes: Set<string>,
+  dynamicRouteContextKeys: Set<string>
+) {
+  if (!routeNode?.route) return
+  if (!isTypedRoute(routeNode.route)) return
+
+  let routePath = `${parentRoutePath}/${removeSupportedExtensions(routeNode.route).replace(/\/?index$/, '')}` // replace /index with /
+
+  if (!routePath.startsWith('/')) {
+    routePath = `/${routePath}`
+  }
+
+  if (routeNode.dynamic) {
+    for (const path of generateCombinations(routePath)) {
+      dynamicRouteContextKeys.add(path)
+      dynamicRoutes.add(
+        `${path.replaceAll(CATCH_ALL, '${string}').replaceAll(SLUG, '${OneRouter.SingleRoutePart<T>}')}`
+      )
+    }
+  } else {
+    for (const combination of generateCombinations(routePath)) {
+      staticRoutes.add(combination)
+    }
+  }
+}
+
+/**
+ * Converts a Set to a TypeScript union type
+ */
+const setToUnionType = <T>(set: Set<T>) => {
+  return set.size > 0
+    ? [...set]
+        .sort()
+        .map((s) => `\`${s}\``)
+        .join(' | ')
+    : 'never'
+}
+
+function generateCombinations(pathname) {
+  const groups = pathname.split('/').filter((part) => part.startsWith('(') && part.endsWith(')'))
+  const combinations: string[] = []
+
+  function generate(currentIndex, currentPath) {
+    if (currentIndex === groups.length) {
+      combinations.push(currentPath.replace(/\/{2,}/g, '/'))
+      return
+    }
+
+    const group = groups[currentIndex]
+    const withoutGroup = currentPath.replace(`/${group}`, '')
+    generate(currentIndex + 1, withoutGroup)
+    generate(currentIndex + 1, currentPath)
+  }
+
+  generate(0, pathname)
+  return combinations
+}

package/src/types.ts

@@ -0,0 +1,38 @@
+// TODO merge into vite/types
+
+/** The list of input keys will become optional, everything else will remain the same. */
+export type PickPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+
+export type GlobbedRouteImports = Record<string, () => Promise<unknown>>
+
+export type Endpoint = (req: Request) => Response | string | Object | null
+
+export type Options = {
+  ignore?: RegExp[]
+  preserveApiRoutes?: boolean
+  ignoreRequireErrors?: boolean
+  ignoreEntryPoints?: boolean
+  /* Used to simplify testing for toEqual() comparison */
+  internal_stripLoadRoute?: boolean
+  /* Used to simplify by skipping the generated routes */
+  skipGenerated?: boolean
+  importMode?: string
+  platformRoutes?: boolean
+  platform?: string
+}
+
+export type RenderApp = (props: RenderAppProps) => Promise<string>
+
+export type LoaderProps<Params extends Object = Record<string, string>> = {
+  path: string
+  params: Params
+}
+
+export type RenderAppProps = {
+  path: string
+  preloads?: string[]
+  css?: string[]
+  loaderServerData?: any
+  loaderData?: any
+  loaderProps?: LoaderProps
+}

package/src/useFocusEffect.ts

@@ -0,0 +1,118 @@
+// A fork of `useFocusEffect` that waits for the navigation state to load before
+// running the effect. This is especially useful for native redirects.
+import * as React from 'react'
+
+import { useOptionalNavigation } from './link/useLoadedNavigation'
+
+type EffectCallback = () => undefined | void | (() => void)
+
+/**
+ * Hook to run an effect in a focused screen, similar to `React.useEffect`.
+ * This can be used to perform side-effects such as fetching data or subscribing to events.
+ * The passed callback should be wrapped in `React.useCallback` to avoid running the effect too often.
+ *
+ * @param callback Memoized callback containing the effect, should optionally return a cleanup function.
+ */
+export function useFocusEffect(effect: EffectCallback, do_not_pass_a_second_prop?: never) {
+  const navigation = useOptionalNavigation()
+
+  if (do_not_pass_a_second_prop !== undefined) {
+    const message =
+      "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " +
+      "If you want to pass a dependency array, you can use 'React.useCallback':\n\n" +
+      'useFocusEffect(\n' +
+      '  React.useCallback(() => {\n' +
+      '    // Your code here\n' +
+      '  }, [depA, depB])\n' +
+      ');\n\n' +
+      'See usage guide: https://reactnavigation.org/docs/use-focus-effect'
+
+    console.error(message)
+  }
+
+  React.useEffect(() => {
+    if (!navigation) {
+      return
+    }
+
+    let isFocused = false
+    let cleanup: undefined | void | (() => void)
+
+    const callback = () => {
+      const destroy = effect()
+
+      if (destroy === undefined || typeof destroy === 'function') {
+        return destroy
+      }
+
+      if (process.env.NODE_ENV !== 'production') {
+        let message =
+          'An effect function must not return anything besides a function, which is used for clean-up.'
+
+        if (destroy === null) {
+          message +=
+            " You returned 'null'. If your effect does not require clean-up, return 'undefined' (or nothing)."
+        } else if (typeof (destroy as any).then === 'function') {
+          message +=
+            "\n\nIt looks like you wrote 'useFocusEffect(async () => ...)' or returned a Promise. " +
+            'Instead, write the async function inside your effect ' +
+            'and call it immediately:\n\n' +
+            'useFocusEffect(\n' +
+            '  React.useCallback(() => {\n' +
+            '    async function fetchData() {\n' +
+            '      // You can await here\n' +
+            '      const response = await MyAPI.getData(someId);\n' +
+            '      // ...\n' +
+            '    }\n\n' +
+            '    fetchData();\n' +
+            '  }, [someId])\n' +
+            ');\n\n' +
+            'See usage guide: https://reactnavigation.org/docs/use-focus-effect'
+        } else {
+          message += ` You returned '${JSON.stringify(destroy)}'.`
+        }
+
+        console.error(message)
+      }
+    }
+
+    // We need to run the effect on intial render/dep changes if the screen is focused
+    if (navigation.isFocused()) {
+      cleanup = callback()
+      isFocused = true
+    }
+
+    const unsubscribeFocus = navigation.addListener('focus', () => {
+      // If callback was already called for focus, avoid calling it again
+      // The focus event may also fire on intial render, so we guard against runing the effect twice
+      if (isFocused) {
+        return
+      }
+
+      if (cleanup !== undefined) {
+        cleanup()
+      }
+
+      cleanup = callback()
+      isFocused = true
+    })
+
+    const unsubscribeBlur = navigation.addListener('blur', () => {
+      if (cleanup !== undefined) {
+        cleanup()
+      }
+
+      cleanup = undefined
+      isFocused = false
+    })
+
+    return () => {
+      if (cleanup !== undefined) {
+        cleanup()
+      }
+
+      unsubscribeFocus()
+      unsubscribeBlur()
+    }
+  }, [effect, navigation])
+}

package/src/useLoader.ts

@@ -0,0 +1,173 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useRef } from 'react'
+import { getURL } from './getURL'
+import { useActiveParams, useParams } from './hooks'
+import { resolveHref } from './link/href'
+import { useRouteNode } from './Route'
+import { CACHE_KEY } from './router/constants'
+import { preloadingLoader } from './router/router'
+import type { LoaderProps } from './types'
+import { dynamicImport } from './utils/dynamicImport'
+import { weakKey } from './utils/weakKey'
+
+const promises: Record<string, undefined | Promise<void>> = {}
+const errors = {}
+const loadedData: Record<string, any> = {}
+
+export function useLoader<
+  Loader extends Function,
+  Returned = Loader extends (p: any) => any ? ReturnType<Loader> : unknown,
+>(loader: Loader): Returned extends Promise<any> ? Awaited<Returned> : Returned {
+  const preloadedProps = globalThis['__vxrnLoaderProps__'] as LoaderProps | undefined
+
+  // server side we just run the loader directly
+  if (typeof window === 'undefined') {
+    return useAsyncFn(
+      loader,
+      preloadedProps || {
+        params: useActiveParams(),
+      }
+    )
+  }
+
+  const isNative = process.env.TAMAGUI_TARGET === 'native'
+  const routeNode = useRouteNode()
+  const params = useParams()
+
+  // Cannot use usePathname() here since it will change every time the route changes,
+  // but here here we want to get the current local pathname which renders this screen.
+  const pathName =
+    '/' + resolveHref({ pathname: routeNode?.route || '', params }).replace(/index$/, '')
+
+  const currentPath =
+    (isNative ? null : globalThis['__vxrntodopath']) || // @zetavg: not sure why we're using `globalThis['__vxrntodopath']` here, but this breaks native when switching between tabs where the value stays with the previous path, so ignoring this on native
+    // TODO likely either not needed or needs proper path from server side
+    (typeof window !== 'undefined' ? window.location?.pathname || pathName : '/')
+
+  // only if it matches current route
+  const preloadedData =
+    preloadedProps?.path === currentPath ? globalThis['__vxrnLoaderData__'] : undefined
+
+  const currentData = useRef(preloadedData)
+
+  useEffect(() => {
+    if (preloadedData) {
+      loadedData[currentPath] = preloadedData
+      delete globalThis['__vxrnLoaderData__']
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preloadedData])
+
+  if (errors[currentPath]) {
+    throw errors[currentPath]
+  }
+
+  const loaded = loadedData[currentPath]
+  if (typeof loaded !== 'undefined') {
+    return loaded
+  }
+
+  if (!preloadedData) {
+    if (preloadingLoader[currentPath]) {
+      if (typeof preloadingLoader[currentPath] === 'function') {
+        preloadingLoader[currentPath] = preloadingLoader[currentPath]()
+      }
+      promises[currentPath] = preloadingLoader[currentPath]
+        .then((val) => {
+          loadedData[currentPath] = val
+        })
+        .catch((err) => {
+          console.error(`Error loading loader`, err)
+          errors[currentPath] = err
+          delete promises[currentPath]
+          delete preloadingLoader[currentPath]
+        })
+    }
+
+    if (!promises[currentPath]) {
+      const getData = async () => {
+        const loaderJSUrl = `${getURL()}/assets${currentPath}_vxrn_loader.js?${CACHE_KEY}`
+
+        try {
+          const response = await (async () => {
+            if (isNative) {
+              const nativeLoaderJSUrl = `${loaderJSUrl}&platform=ios` /* TODO: platform */
+
+              try {
+                // On native, we need to fetch the loader code and eval it
+                const loaderJsCodeResp = await fetch(nativeLoaderJSUrl)
+                if (!loaderJsCodeResp.ok) {
+                  throw new Error(`Response not ok: ${loaderJsCodeResp.status}`)
+                }
+                const loaderJsCode = await loaderJsCodeResp.text()
+                // biome-ignore lint/security/noGlobalEval: we can't use dynamic `import` on native so we need to fetch and `eval` the code
+                const result = eval(
+                  `() => { var exports = {}; ${loaderJsCode}; return exports; }`
+                )()
+
+                if (typeof result.loader !== 'function') {
+                  throw new Error("Loader code isn't exporting a `loader` function")
+                }
+
+                return result
+              } catch (e) {
+                console.error(`Error fetching loader from URL: ${nativeLoaderJSUrl}, ${e}`)
+                return { loader: () => ({}) }
+              }
+            }
+
+            // On web, we can use import to dynamically load the loader
+            return await dynamicImport(loaderJSUrl)
+          })()
+
+          loadedData[currentPath] = response.loader()
+          return loadedData[currentPath]
+        } catch (err) {
+          console.error(`Error calling loader: ${err}`)
+          errors[currentPath] = err
+          delete promises[currentPath]
+          return null
+        }
+      }
+      promises[currentPath] = getData()
+    }
+
+    throw promises[currentPath]
+  }
+
+  return currentData.current
+}
+
+const results = new Map()
+const started = new Map()
+
+function useAsyncFn(val: any, props?: any) {
+  const key = (val ? weakKey(val) : '') + JSON.stringify(props)
+
+  if (val) {
+    if (!started.get(key)) {
+      started.set(key, true)
+
+      let next = val(props)
+      if (next instanceof Promise) {
+        next = next
+          .then((final) => {
+            results.set(key, final)
+          })
+          .catch((err) => {
+            console.error(`Error running loader()`, err)
+            results.set(key, undefined)
+          })
+      }
+      results.set(key, next)
+    }
+  }
+
+  const current = results.get(key)
+
+  if (current instanceof Promise) {
+    throw current
+  }
+
+  return current
+}

package/src/useNavigation.ts

@@ -0,0 +1,79 @@
+import {
+  type NavigationProp,
+  useNavigation as useUpstreamNavigation,
+} from '@react-navigation/native'
+import React from 'react'
+
+import { getNameFromFilePath } from './matchers'
+import { useContextKey } from './Route'
+
+/**
+ * Return the navigation object for the current route.
+ * @param parent Provide an absolute path like `/(root)` to the parent route or a relative path like `../../` to the parent route.
+ * @returns the navigation object for the provided route.
+ */
+export function useNavigation<T = NavigationProp<ReactNavigation.RootParamList>>(
+  parent?: string
+): T {
+  const navigation = useUpstreamNavigation<any>()
+
+  const contextKey = useContextKey()
+  const normalizedParent = React.useMemo(() => {
+    if (!parent) {
+      return null
+    }
+    const normalized = getNameFromFilePath(parent)
+
+    if (parent.startsWith('.')) {
+      return relativePaths(contextKey, parent)
+    }
+    return normalized
+  }, [contextKey, parent])
+
+  if (normalizedParent != null) {
+    const parentNavigation = navigation.getParent(normalizedParent)
+
+    // TODO: Maybe print a list of parents...
+
+    if (!parentNavigation) {
+      throw new Error(
+        `Could not find parent navigation with route "${parent}".` +
+          (normalizedParent !== parent ? ` (normalized: ${normalizedParent})` : '')
+      )
+    }
+    return parentNavigation
+  }
+  return navigation
+}
+
+export function resolveParentId(contextKey: string, parentId?: string | null): string | null {
+  if (!parentId) {
+    return null
+  }
+
+  if (parentId.startsWith('.')) {
+    return getNameFromFilePath(relativePaths(contextKey, parentId))
+  }
+  return getNameFromFilePath(parentId)
+}
+
+// Resolve a path like `../` relative to a path like `/foo/bar`
+function relativePaths(from: string, to: string): string {
+  const fromParts = from.split('/').filter(Boolean)
+  const toParts = to.split('/').filter(Boolean)
+
+  for (const part of toParts) {
+    if (part === '..') {
+      if (fromParts.length === 0) {
+        throw new Error(`Cannot resolve path "${to}" relative to "${from}"`)
+      }
+      fromParts.pop()
+    } else if (part === '.') {
+      // Ignore
+    } else {
+      fromParts.push(part)
+    }
+  }
+
+  return '/' + fromParts.join('/')
+}