one 1.2.0 → 1.2.2

package/src/router/router.ts

@@ -0,0 +1,515 @@
+/**
+ * Note: this entire module is exported as an interface router.*
+ * We need to treat exports as an API and not change them, maybe not
+ * the best decision.
+ */
+
+import { type NavigationContainerRefWithCurrent, StackActions } from '@react-navigation/native'
+import * as Linking from 'expo-linking'
+import { type ComponentType, Fragment, startTransition, useSyncExternalStore } from 'react'
+import { Platform } from 'react-native'
+import type { OneRouter } from '../interfaces/router'
+import { resolveHref } from '../link/href'
+import { resolve } from '../link/path'
+import { assertIsReady } from '../utils/assertIsReady'
+import { getLoaderPath, getPreloadPath } from '../utils/cleanUrl'
+import { dynamicImport } from '../utils/dynamicImport'
+import { shouldLinkExternally } from '../utils/url'
+import type { One } from '../vite/types'
+import type { UrlObject } from './getNormalizedStatePath'
+import { getRouteInfo } from './getRouteInfo'
+import { getRoutes } from './getRoutes'
+import { setLastAction } from './lastAction'
+import { getLinking, resetLinking, setupLinking } from './linkingConfig'
+import type { RouteNode } from './Route'
+import { sortRoutes } from './sortRoutes'
+import { getQualifiedRouteComponent } from './useScreens'
+import { getNavigateAction } from './utils/getNavigateAction'
+
+// Module-scoped variables
+export let routeNode: RouteNode | null = null
+export let rootComponent: ComponentType
+
+export let hasAttemptedToHideSplash = false
+export let initialState: OneRouter.ResultState | undefined
+export let rootState: OneRouter.ResultState | undefined
+
+let nextState: OneRouter.ResultState | undefined
+export let routeInfo: UrlObject | undefined
+let splashScreenAnimationFrame: number | undefined
+
+// we always set it
+export let navigationRef: OneRouter.NavigationRef = null as any
+let navigationRefSubscription: () => void
+
+const rootStateSubscribers = new Set<OneRouter.RootStateListener>()
+const loadingStateSubscribers = new Set<OneRouter.LoadingStateListener>()
+const storeSubscribers = new Set<() => void>()
+
+// Initialize function
+export function initialize(
+  context: One.RouteContext,
+  ref: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>,
+  initialLocation?: URL
+) {
+  cleanUpState()
+
+  routeNode = getRoutes(context, {
+    ignoreEntryPoints: true,
+    platform: Platform.OS,
+  })
+
+  rootComponent = routeNode ? getQualifiedRouteComponent(routeNode) : Fragment
+
+  if (!routeNode && process.env.NODE_ENV === 'production') {
+    throw new Error('No routes found')
+  }
+
+  navigationRef = ref
+  setupLinkingAndRouteInfo(initialLocation)
+  subscribeToNavigationChanges()
+}
+
+function cleanUpState() {
+  initialState = undefined
+  rootState = undefined
+  nextState = undefined
+  routeInfo = undefined
+  resetLinking()
+  navigationRefSubscription?.()
+  rootStateSubscribers.clear()
+  storeSubscribers.clear()
+}
+
+function setupLinkingAndRouteInfo(initialLocation?: URL) {
+  initialState = setupLinking(routeNode, initialLocation)
+
+  if (initialState) {
+    rootState = initialState
+    routeInfo = getRouteInfo(initialState)
+  } else {
+    routeInfo = {
+      unstable_globalHref: '',
+      pathname: '',
+      isIndex: false,
+      params: {},
+      segments: [],
+    }
+  }
+}
+
+function subscribeToNavigationChanges() {
+  navigationRefSubscription = navigationRef.addListener('state', (data) => {
+    let state = { ...data.data.state } as OneRouter.ResultState
+
+    if (state.key) {
+      if (hashes[state.key]) {
+        state.hash = hashes[state.key]
+        delete hashes[state.key]
+      }
+    }
+
+    if (!hasAttemptedToHideSplash) {
+      hasAttemptedToHideSplash = true
+      splashScreenAnimationFrame = requestAnimationFrame(() => {
+        // SplashScreen._internal_maybeHideAsync?.();
+      })
+    }
+
+    if (nextOptions) {
+      state = { ...state, linkOptions: nextOptions }
+      nextOptions = null
+    }
+
+    let shouldUpdateSubscribers = nextState === state
+    nextState = undefined
+
+    if (state && state !== rootState) {
+      updateState(state, undefined)
+      shouldUpdateSubscribers = true
+    }
+
+    if (shouldUpdateSubscribers) {
+      startTransition(() => {
+        for (const subscriber of rootStateSubscribers) {
+          subscriber(state)
+        }
+      })
+    }
+  })
+
+  startTransition(() => {
+    updateSnapshot()
+    for (const subscriber of storeSubscribers) {
+      subscriber()
+    }
+  })
+}
+
+// Navigation functions
+export function navigate(url: OneRouter.Href, options?: OneRouter.LinkToOptions) {
+  return linkTo(resolveHref(url), 'NAVIGATE', options)
+}
+
+export function push(url: OneRouter.Href, options?: OneRouter.LinkToOptions) {
+  return linkTo(resolveHref(url), 'PUSH', options)
+}
+
+export function dismiss(count?: number) {
+  navigationRef?.dispatch(StackActions.pop(count))
+}
+
+export function replace(url: OneRouter.Href, options?: OneRouter.LinkToOptions) {
+  return linkTo(resolveHref(url), 'REPLACE', options)
+}
+
+export function setParams(params: OneRouter.InpurRouteParamsGeneric = {}) {
+  assertIsReady(navigationRef)
+  return navigationRef?.current?.setParams(
+    // @ts-expect-error
+    params
+  )
+}
+
+export function dismissAll() {
+  navigationRef?.dispatch(StackActions.popToTop())
+}
+
+export function goBack() {
+  assertIsReady(navigationRef)
+  navigationRef?.current?.goBack()
+}
+
+export function canGoBack(): boolean {
+  if (!navigationRef.isReady()) {
+    return false
+  }
+  return navigationRef?.current?.canGoBack() ?? false
+}
+
+export function canDismiss(): boolean {
+  let state = rootState
+
+  while (state) {
+    if (state.type === 'stack' && state.routes.length > 1) {
+      return true
+    }
+    if (state.index === undefined) {
+      return false
+    }
+    state = state.routes?.[state.index]?.state as any
+  }
+
+  return false
+}
+
+export function getSortedRoutes() {
+  if (!routeNode) {
+    throw new Error('No routes')
+  }
+  return routeNode.children.filter((route) => !route.internal).sort(sortRoutes)
+}
+
+export function updateState(state: OneRouter.ResultState, nextStateParam = state) {
+  rootState = state
+  nextState = nextStateParam
+
+  const nextRouteInfo = getRouteInfo(state)
+
+  if (!deepEqual(routeInfo, nextRouteInfo)) {
+    routeInfo = nextRouteInfo
+  }
+}
+
+// Subscription functions
+export function subscribeToRootState(subscriber: OneRouter.RootStateListener) {
+  rootStateSubscribers.add(subscriber)
+  return () => {
+    rootStateSubscribers.delete(subscriber)
+  }
+}
+
+export function subscribeToStore(subscriber: () => void) {
+  storeSubscribers.add(subscriber)
+  return () => {
+    storeSubscribers.delete(subscriber)
+  }
+}
+
+// Subscription functions
+export function subscribeToLoadingState(subscriber: OneRouter.LoadingStateListener) {
+  loadingStateSubscribers.add(subscriber)
+  return () => {
+    loadingStateSubscribers.delete(subscriber)
+  }
+}
+
+export function setLoadingState(state: OneRouter.LoadingState) {
+  startTransition(() => {
+    for (const listener of loadingStateSubscribers) {
+      listener(state)
+    }
+  })
+}
+
+// Snapshot function
+
+let currentSnapshot: ReturnType<typeof getSnapshot> | null = null
+
+function updateSnapshot() {
+  currentSnapshot = getSnapshot()
+}
+
+export function snapshot() {
+  return currentSnapshot!
+}
+
+function getSnapshot() {
+  return {
+    linkTo,
+    routeNode,
+    rootComponent,
+    linking: getLinking(),
+    hasAttemptedToHideSplash,
+    initialState,
+    rootState,
+    nextState,
+    routeInfo,
+    splashScreenAnimationFrame,
+    navigationRef,
+    navigationRefSubscription,
+    rootStateSubscribers,
+    storeSubscribers,
+  }
+}
+
+export function rootStateSnapshot() {
+  return rootState!
+}
+
+export function routeInfoSnapshot() {
+  return routeInfo!
+}
+
+// Hook functions
+export function useOneRouter() {
+  return useSyncExternalStore(subscribeToStore, snapshot, snapshot)
+}
+
+function syncStoreRootState() {
+  if (!navigationRef) {
+    throw new Error(`No navigationRef, possible duplicate One dep`)
+  }
+  if (navigationRef.isReady()) {
+    const currentState = navigationRef.getRootState() as unknown as OneRouter.ResultState
+    if (rootState !== currentState) {
+      updateState(currentState)
+    }
+  }
+}
+
+export function useStoreRootState() {
+  syncStoreRootState()
+  return useSyncExternalStore(subscribeToRootState, rootStateSnapshot, rootStateSnapshot)
+}
+
+export function useStoreRouteInfo() {
+  syncStoreRootState()
+  return useSyncExternalStore(subscribeToRootState, routeInfoSnapshot, routeInfoSnapshot)
+}
+
+// Cleanup function
+export function cleanup() {
+  if (splashScreenAnimationFrame) {
+    cancelAnimationFrame(splashScreenAnimationFrame)
+  }
+}
+
+// TODO
+export const preloadingLoader = {}
+
+function setupPreload(href: string) {
+  if (preloadingLoader[href]) return
+  preloadingLoader[href] = async () => {
+    try {
+      const [_preload, loader] = await Promise.all([
+        dynamicImport(getPreloadPath(href)),
+        dynamicImport(getLoaderPath(href)),
+      ])
+      const response = await loader
+      return await response.loader?.()
+    } catch (err) {
+      console.error(`Error preloading loader: ${err}`)
+      return null
+    }
+  }
+}
+
+export function preloadRoute(href: string) {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    // not enabled for now
+    return
+  }
+  if (process.env.NODE_ENV === 'development') {
+    return
+  }
+
+  setupPreload(href)
+  if (typeof preloadingLoader[href] === 'function') {
+    void preloadingLoader[href]()
+  }
+}
+
+export async function linkTo(href: string, event?: string, options?: OneRouter.LinkToOptions) {
+  if (href[0] === '#') {
+    // this is just linking to a section of the current page on web
+    return
+  }
+
+  if (shouldLinkExternally(href)) {
+    Linking.openURL(href)
+    return
+  }
+
+  assertIsReady(navigationRef)
+  const current = navigationRef.current
+
+  if (current == null) {
+    throw new Error(
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+    )
+  }
+
+  const linking = getLinking()
+
+  if (!linking) {
+    throw new Error('Attempted to link to route when no routes are present')
+  }
+
+  setLastAction()
+
+  if (href === '..' || href === '../') {
+    current.goBack()
+    return
+  }
+
+  if (href.startsWith('.')) {
+    // Resolve base path by merging the current segments with the params
+    let base =
+      routeInfo?.segments
+        ?.map((segment) => {
+          if (!segment.startsWith('[')) return segment
+
+          if (segment.startsWith('[...')) {
+            segment = segment.slice(4, -1)
+            const params = routeInfo?.params?.[segment]
+            if (Array.isArray(params)) {
+              return params.join('/')
+            }
+            return params?.split(',')?.join('/') ?? ''
+          }
+          segment = segment.slice(1, -1)
+          return routeInfo?.params?.[segment]
+        })
+        .filter(Boolean)
+        .join('/') ?? '/'
+
+    if (!routeInfo?.isIndex) {
+      base += '/..'
+    }
+
+    href = resolve(base, href)
+  }
+
+  const state = linking.getStateFromPath!(href, linking.config)
+
+  if (!state || state.routes.length === 0) {
+    console.error('Could not generate a valid navigation state for the given path: ' + href)
+    console.error(`linking.config`, linking.config)
+    console.error(`routes`, getSortedRoutes())
+    return
+  }
+
+  setLoadingState('loading')
+
+  preloadRoute(href)
+
+  const rootState = navigationRef.getRootState()
+
+  const hash = href.indexOf('#')
+  if (rootState.key && hash > 0) {
+    hashes[rootState.key] = href.slice(hash)
+  }
+
+  // a bit hacky until can figure out a reliable way to tie it to the state
+  nextOptions = options ?? null
+
+  startTransition(() => {
+    const action = getNavigateAction(state, rootState, event)
+    const current = navigationRef.getCurrentRoute()
+    navigationRef.dispatch(action)
+
+    let warningTm
+    const interval = setInterval(() => {
+      const next = navigationRef.getCurrentRoute()
+      if (current !== next) {
+        // let the main thread clear at least before running
+        setTimeout(() => {
+          setLoadingState('loaded')
+        })
+      }
+      clearTimeout(warningTm)
+      clearTimeout(interval)
+    }, 16)
+    if (process.env.NODE_ENV === 'development') {
+      warningTm = setTimeout(() => {
+        console.warn(`Routing took more than 8 seconds`)
+      }, 1000)
+    }
+  })
+
+  return
+}
+
+const hashes: Record<string, string> = {}
+
+let nextOptions: OneRouter.LinkToOptions | null = null
+
+function deepEqual(a: any, b: any) {
+  if (a === b) {
+    return true
+  }
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+
+    if (keysA.length !== keysB.length) {
+      return false
+    }
+
+    for (const key of keysA) {
+      if (!deepEqual(a[key], b[key])) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  return false
+}

package/src/router/serverLocationContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const ServerLocationContext = createContext<URL | undefined>(undefined)

package/src/router/sortRoutes.ts

@@ -0,0 +1,86 @@
+import { matchGroupName } from './matchers'
+import type { DynamicConvention, RouteNode } from './Route'
+
+function sortDynamicConvention(a: DynamicConvention, b: DynamicConvention) {
+  if (a.deep && !b.deep) {
+    return 1
+  }
+  if (!a.deep && b.deep) {
+    return -1
+  }
+  return 0
+}
+
+export function sortRoutes(a: RouteNode, b: RouteNode): number {
+  const aDynamicSegments = getDynamicSegments(a)
+  const bDynamicSegments = getDynamicSegments(b)
+
+  if (aDynamicSegments.length && !bDynamicSegments.length) {
+    return 1
+  }
+  if (!aDynamicSegments.length && bDynamicSegments.length) {
+    return -1
+  }
+  if (aDynamicSegments.length && bDynamicSegments.length) {
+    if (aDynamicSegments.length !== bDynamicSegments.length) {
+      return bDynamicSegments.length - aDynamicSegments.length
+    }
+
+    for (let i = 0; i < aDynamicSegments.length; i++) {
+      const aDynamic = aDynamicSegments[i]
+      const bDynamic = bDynamicSegments[i]
+
+      if (aDynamic.notFound && bDynamic.notFound) {
+        const s = sortDynamicConvention(aDynamic, bDynamic)
+        if (s) {
+          return s
+        }
+      }
+      if (aDynamic.notFound && !bDynamic.notFound) {
+        return 1
+      }
+      if (!aDynamic.notFound && bDynamic.notFound) {
+        return -1
+      }
+
+      const s = sortDynamicConvention(aDynamic, bDynamic)
+      if (s) {
+        return s
+      }
+    }
+    return 0
+  }
+
+  const aIndex = a.route === 'index' || matchGroupName(a.route) != null
+  const bIndex = b.route === 'index' || matchGroupName(b.route) != null
+
+  if (aIndex && !bIndex) {
+    return -1
+  }
+  if (!aIndex && bIndex) {
+    return 1
+  }
+
+  return a.route.length - b.route.length
+}
+
+function getDynamicSegments(route: RouteNode) {
+  return [
+    ...(route.dynamic || []),
+    ...(route.layouts?.flatMap((layout) => layout.dynamic || []) || []),
+  ]
+}
+
+export function sortRoutesWithInitial(initialRouteName?: string) {
+  return (a: RouteNode, b: RouteNode): number => {
+    if (initialRouteName) {
+      if (a.route === initialRouteName) {
+        return -1
+      }
+      if (b.route === initialRouteName) {
+        return 1
+      }
+    }
+    return sortRoutes(a, b)
+  }
+}

package/src/router/useInitializeOneRouter.ts

@@ -0,0 +1,37 @@
+import { useNavigationContainerRef } from '@react-navigation/native'
+import type { One } from '../vite/types'
+import * as routerStore from './router'
+import { initialize } from './router'
+
+let initialized = false
+
+export function useInitializeOneRouter(
+  context: One.RouteContext,
+  initialLocation: URL | undefined
+) {
+  const navigationRef = useNavigationContainerRef()
+
+  if (!initialized) {
+    initialize(context, navigationRef, initialLocation)
+    initialized = true
+  }
+
+  return routerStore
+}
+
+export function resetState() {
+  initialized = false
+  resetReactNavigationContexts()
+}
+
+// TODO remove global
+globalThis['__vxrnresetState'] = resetState
+
+function resetReactNavigationContexts() {
+  // https://github.com/expo/router/discussions/588
+  // https://github.com/react-navigation/react-navigation/blob/9fe34b445fcb86e5666f61e144007d7540f014fa/packages/elements/src/getNamedContext.tsx#LL3C1-L4C1
+  // React Navigation is storing providers in a global, this is fine for the first static render
+  // but subsequent static renders of Stack or Tabs will cause React to throw a warning. To prevent this warning, we'll reset the globals before rendering.
+  const contexts = '__react_navigation__elements_contexts'
+  globalThis[contexts] = new Map<string, React.Context<any>>()
+}

package/src/router/useNavigation.ts

@@ -0,0 +1,77 @@
+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)
+
+    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('/')
+}