one 1.1.4 → 1.1.269

package/src/views/EmptyRoute.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { useRouteNode } from '../Route'
+
+// import { Toast, ToastWrapper } from './Toast'
+
+export function EmptyRoute() {
+  const route = useRouteNode()
+
+  return null
+  // return (
+  //   <ToastWrapper>
+  //     <Toast warning filename={route?.contextKey}>
+  //       Missing default export
+  //     </Toast>
+  //   </ToastWrapper>
+  // )
+}

package/src/views/ErrorBoundary.tsx

@@ -0,0 +1,171 @@
+// import { LogContext } from '@expo/metro-runtime/build/error-overlay/Data/LogContext'
+// import { LogBoxInspectorStackFrames } from '@expo/metro-runtime/build/error-overlay/overlay/LogBoxInspectorStackFrames'
+// import { LogBoxLog, parseErrorStack } from '@expo/metro-runtime/symbolicate'
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'
+import React from 'react'
+import { View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import type { ErrorBoundaryProps } from './Try'
+
+// function useMetroSymbolication(error: Error) {
+//   const [logBoxLog, setLogBoxLog] = React.useState<LogBoxLog | null>(null)
+
+//   React.useEffect(() => {
+//     let isMounted = true
+//     const stack = parseErrorStack(error.stack)
+
+//     const log = new LogBoxLog({
+//       level: 'error',
+//       message: {
+//         content: error.message,
+//         substitutions: [],
+//       },
+//       isComponentError: false,
+//       stack,
+//       category: error.message,
+//       componentStack: [],
+//     })
+
+//     log.symbolicate('stack', (symbolicatedLog) => {
+//       if (isMounted) {
+//         setLogBoxLog(log)
+//       }
+//     })
+
+//     return () => {
+//       isMounted = false
+//     }
+//   }, [error])
+
+//   return logBoxLog
+// }
+
+export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
+  // const logBoxLog = useMetroSymbolication(error)
+  const inTabBar = React.useContext(BottomTabBarHeightContext)
+  const Wrapper = inTabBar ? View : SafeAreaView
+
+  console.error('error', error)
+
+  return null
+
+  // return (
+  //   <View style={styles.container}>
+  //     <Wrapper style={{ flex: 1, gap: 8, maxWidth: 720, marginHorizontal: 'auto' }}>
+  //       <View
+  //         style={{
+  //           marginBottom: 12,
+  //           flexDirection: 'row',
+  //           flexWrap: 'wrap',
+  //           justifyContent: 'space-between',
+  //           alignItems: 'center',
+  //         }}
+  //       >
+  //         <Text role="heading" aria-level={1} style={styles.title}>
+  //           Something went wrong
+  //         </Text>
+  //       </View>
+
+  //       <StackTrace logData={logBoxLog} />
+  //       {process.env.NODE_ENV === 'development' && (
+  //         <Link href="/_sitemap" style={styles.link}>
+  //           Sitemap
+  //         </Link>
+  //       )}
+  //       <Pressable onPress={retry}>
+  //         {({ hovered, pressed }) => (
+  //           <View
+  //             style={[
+  //               styles.buttonInner,
+  //               (hovered || pressed) && { backgroundColor: 'white' },
+  //             ]}
+  //           >
+  //             <Text
+  //               style={[
+  //                 styles.buttonText,
+  //                 {
+  //                   transitionDuration: '100ms',
+  //                   color: hovered || pressed ? 'black' : 'white',
+  //                 },
+  //               ]}
+  //             >
+  //               Retry
+  //             </Text>
+  //           </View>
+  //         )}
+  //       </Pressable>
+  //     </Wrapper>
+  //   </View>
+  // )
+}
+
+// function StackTrace({ logData }: { logData: LogBoxLog | null }) {
+//   if (!logData?.symbolicated?.stack?.stack) {
+//     return null
+//   }
+//   return (
+//     <ScrollView style={{ flex: 1 }}>
+//       <LogContext.Provider
+//         value={{
+//           isDisabled: false,
+//           logs: [logData],
+//           selectedLogIndex: 0,
+//         }}
+//       >
+//         <LogBoxInspectorStackFrames onRetry={function () {}} type="stack" />
+//       </LogContext.Provider>
+//     </ScrollView>
+//   )
+// }
+
+// const styles = StyleSheet.create({
+//   container: {
+//     flex: 1,
+//     backgroundColor: 'black',
+//     padding: 24,
+//     alignItems: 'stretch',
+//     justifyContent: 'center',
+//   },
+//   title: {
+//     color: 'white',
+//     fontSize: Platform.select({ web: 32, default: 24 }),
+//     fontWeight: 'bold',
+//   },
+//   buttonText: {
+//     fontSize: 18,
+//     fontWeight: 'bold',
+//     color: 'black',
+//   },
+//   buttonInner: {
+//     transitionDuration: '100ms',
+//     paddingVertical: 12,
+//     paddingHorizontal: 24,
+//     borderColor: 'white',
+//     borderWidth: 2,
+//     marginLeft: 8,
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//   },
+//   code: {
+//     fontFamily: Platform.select({
+//       default: 'Courier',
+//       ios: 'Courier New',
+//       android: 'monospace',
+//     }),
+//     fontWeight: '500',
+//   },
+//   subtitle: {
+//     color: 'white',
+//     fontSize: 14,
+//     marginBottom: 12,
+//     // textAlign: "center",
+//   },
+//   link: {
+//     color: 'rgba(255,255,255,0.4)',
+//     textDecorationStyle: 'solid',
+//     textDecorationLine: 'underline',
+//     fontSize: 14,
+//     textAlign: 'center',
+//   },
+// })

package/src/views/LoadProgressBar.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react'
+import { View, type ViewProps } from 'react-native'
+import { router } from '../imperative-api'
+
+export type LoadProgressBarProps = {
+  /** How long after a navigation to wait before showing the progress bar (in ms) */
+  startDelay?: number
+  /** How long after a navigation completes to wait before hiding the progress bar (in ms) */
+  finishDelay?: number
+  /** The starting percent it should show the loading state at */
+  initialPercent?: number
+  /** How often the progress bar should update (in ms) */
+  updateInterval?: number
+  /** How often to skip an update (checked each during the loop) */
+  sporadicness?: number
+  /** Pass style to the inner View */
+  style?: ViewProps['style']
+  /** Pass onLayout to the inner View */
+  onLayout?: ViewProps['onLayout']
+  /** Pass children to the inner View */
+  children?: ViewProps['children']
+}
+
+export const LoadProgressBar = ({
+  startDelay = 500,
+  finishDelay = 50,
+  initialPercent = 20,
+  updateInterval = 300,
+  sporadicness = 3,
+  ...props
+}: LoadProgressBarProps) => {
+  const [loaded, setLoaded] = useState(0) // 0 to 100
+  const [width, setWidth] = useState(0)
+
+  useEffect(() => {
+    let loadInterval
+
+    const dispose = router.onLoadState((state) => {
+      clearTimeout(loadInterval)
+
+      switch (state) {
+        case 'loading': {
+          loadInterval = setTimeout(() => {
+            setLoaded(initialPercent)
+
+            // to make it feel more realistic, we skip every N updates
+            let intervalCount = 0
+
+            loadInterval = setInterval(() => {
+              intervalCount++
+
+              if (intervalCount % sporadicness === 0) {
+                return
+              }
+
+              setLoaded((prev) => {
+                const increment = (100 - prev) * (prev > 80 ? 0.05 : 0.1) * Math.random()
+                return Math.min(prev + increment, 100)
+              })
+            }, updateInterval)
+          }, startDelay)
+          break
+        }
+
+        case 'loaded': {
+          setLoaded(100)
+          clearInterval(loadInterval)
+          setTimeout(() => {
+            setLoaded(0)
+          }, finishDelay)
+          break
+        }
+      }
+    })
+
+    return () => {
+      dispose()
+      clearInterval(loadInterval)
+    }
+  }, [finishDelay, initialPercent, sporadicness, startDelay, updateInterval])
+
+  return (
+    <View
+      {...props}
+      onLayout={(e) => {
+        setWidth(e.nativeEvent.layout.width)
+        props.onLayout?.(e)
+      }}
+      style={[
+        {
+          display: loaded === 0 ? 'none' : 'flex',
+          height: 1,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: 'rgba(60, 100, 200, 0.65)',
+          width: '100%',
+          transform: [{ translateX: -(1 - loaded * 0.01) * width }],
+          zIndex: Number.MAX_SAFE_INTEGER,
+        },
+        props.style,
+      ]}
+    />
+  )
+}

package/src/views/Navigator.tsx

@@ -0,0 +1,158 @@
+// Copyright © 2024 650 Industries.
+'use client'
+
+import { StackRouter, useNavigationBuilder, type RouterFactory } from '@react-navigation/native'
+import * as React from 'react'
+
+import { useContextKey } from '../Route'
+import { useFilterScreenChildren } from '../layouts/withLayoutContext'
+import { useSortedScreens } from '../useScreens'
+import { Screen } from './Screen'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+type NavigatorTypes = ReturnType<typeof useNavigationBuilder>
+
+// TODO: This might already exist upstream, maybe something like `useCurrentRender` ?
+export const NavigatorContext = React.createContext<{
+  contextKey: string
+  state: NavigatorTypes['state']
+  navigation: NavigatorTypes['navigation']
+  descriptors: NavigatorTypes['descriptors']
+  router: RouterFactory<any, any, any>
+} | null>(null)
+
+if (process.env.NODE_ENV !== 'production') {
+  NavigatorContext.displayName = 'NavigatorContext'
+}
+
+export type NavigatorProps = {
+  initialRouteName?: Parameters<typeof useNavigationBuilder>[1]['initialRouteName']
+  screenOptions?: Parameters<typeof useNavigationBuilder>[1]['screenOptions']
+  children?: Parameters<typeof useNavigationBuilder>[1]['children']
+  router?: Parameters<typeof useNavigationBuilder>[0]
+}
+
+/** An unstyled custom navigator. Good for basic web layouts */
+export function Navigator({ initialRouteName, screenOptions, children, router }: NavigatorProps) {
+  const contextKey = useContextKey()
+
+  // Allows adding Screen components as children to configure routes.
+  const { screens, children: otherSlot } = useFilterScreenChildren(children, {
+    isCustomNavigator: true,
+    contextKey,
+  })
+
+  const sorted = useSortedScreens(screens ?? [])
+
+  if (!sorted.length) {
+    console.warn(`Navigator at "${contextKey}" has no children.`)
+    return null
+  }
+
+  return (
+    <QualifiedNavigator
+      initialRouteName={initialRouteName}
+      screenOptions={screenOptions}
+      screens={sorted}
+      contextKey={contextKey}
+      router={router}
+    >
+      {otherSlot}
+    </QualifiedNavigator>
+  )
+}
+
+function QualifiedNavigator({
+  initialRouteName,
+  screenOptions,
+  children,
+  screens,
+  contextKey,
+  router = StackRouter,
+}: NavigatorProps & { contextKey: string; screens: React.ReactNode[] }) {
+  const { state, navigation, descriptors, NavigationContent } = useNavigationBuilder(router, {
+    // Used for getting the parent with navigation.getParent('/normalized/path')
+    id: contextKey,
+    children: screens,
+    screenOptions,
+    initialRouteName,
+  })
+
+  const value = React.useMemo(() => {
+    return {
+      contextKey,
+      state,
+      navigation,
+      descriptors,
+      router,
+    }
+  }, [contextKey, state, navigation, descriptors, router])
+
+  return (
+    <NavigatorContext.Provider value={value}>
+      <NavigationContent>{children}</NavigationContent>
+    </NavigatorContext.Provider>
+  )
+}
+
+export function useNavigatorContext() {
+  const context = React.useContext(NavigatorContext)
+  if (!context) {
+    throw new Error('useNavigatorContext must be used within a <Navigator />')
+  }
+  return context
+}
+
+export function useSlot() {
+  const context = useNavigatorContext()
+
+  const { state, descriptors } = context
+
+  const current = state.routes.find((route, i) => {
+    return state.index === i
+  })
+
+  if (!current) {
+    return null
+  }
+
+  return descriptors[current.key]?.render() ?? null
+}
+
+/** Renders the currently selected content. */
+export const Slot = React.memo(function Slot(props: Omit<NavigatorProps, 'children'>) {
+  const contextKey = useContextKey()
+  const context = React.useContext(NavigatorContext)
+
+  // Ensure the context is for the current contextKey
+  if (context?.contextKey !== contextKey) {
+    // Qualify the content and re-export.
+    return (
+      <Navigator {...props}>
+        <QualifiedSlot />
+      </Navigator>
+    )
+  }
+
+  return <QualifiedSlot />
+})
+
+export function QualifiedSlot() {
+  return useSlot()
+}
+
+export function DefaultNavigator() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Navigator>
+        <QualifiedSlot />
+      </Navigator>
+    </SafeAreaView>
+  )
+}
+
+Navigator.Slot = Slot
+Navigator.useContext = useNavigatorContext
+
+/** Used to configure route settings. */
+Navigator.Screen = Screen

package/src/views/PreloadLinks.native.tsx

@@ -0,0 +1,3 @@
+export function PreloadLinks() {
+  return null
+}

package/src/views/PreloadLinks.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { preloadRoute } from '../router/router'
+
+export function PreloadLinks() {
+  useEffect(() => {
+    document.addEventListener('mouseover', (e) => {
+      let target = e.target
+      if (!(target instanceof HTMLElement)) return
+      target = target instanceof HTMLAnchorElement ? target : target.parentElement
+      if (!(target instanceof HTMLAnchorElement)) return
+      const href = target.getAttribute('href')
+      if (href?.[0] === '/') {
+        // local route
+        preloadRoute(href)
+      }
+    })
+  }, [])
+
+  return null
+}

package/src/views/RootErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+export class RootErrorBoundary extends React.Component<{ children: any }> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError(error) {
+    console.error('RootErrorBoundary.error', error)
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, info) {
+    // Example "componentStack":
+    //   in ComponentThatThrows (created by App)
+    //   in ErrorBoundary (created by App)
+    //   in div (created by App)
+    //   in App
+    console.error(`RootErrorBoundary.error:\n${printError(error)}\n${info.componentStack}`)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+function printError(err) {
+  return `${err instanceof Error ? `${err.message}\n${err.stack}` : err}`
+}

package/src/views/Screen.tsx

@@ -0,0 +1,33 @@
+import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
+import { useNavigation } from '../useNavigation'
+
+export type ScreenProps<TOptions extends Record<string, any> = Record<string, any>> = {
+  /**
+   * Name is required when used inside a Layout component.
+   *
+   * When used in a route, this can be an absolute path like `/(root)` to the parent route or a relative path like `../../` to the parent route.
+   * This should not be used inside of a Layout component.
+   * @example `/(root)` maps to a layout route `/app/(root).tsx`.
+   */
+  name?: string
+  initialParams?: { [key: string]: any }
+  options?: TOptions
+}
+
+/** Component for setting the current screen's options dynamically. */
+export function Screen<TOptions extends object = object>({ name, options }: ScreenProps<TOptions>) {
+  const navigation = useNavigation(name)
+
+  useIsomorphicLayoutEffect(() => {
+    if (
+      options &&
+      // React Navigation will infinitely loop in some cases if an empty object is passed to setOptions.
+      // https://github.com/expo/router/issues/452
+      Object.keys(options).length
+    ) {
+      navigation.setOptions(options)
+    }
+  }, [navigation, options])
+
+  return null
+}

package/src/views/ScrollRestoration.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from 'react'
+import { setLastAction } from '../router/lastAction'
+import { subscribeToLoadingState, subscribeToRootState } from '../router/router'
+
+const KEY = 'one-sr'
+
+const getState = () => JSON.parse(sessionStorage.getItem(KEY) || '{}')
+
+// prevent scroll to top on first load
+let isFirstLoad = true
+
+function restorePosition() {
+  try {
+    const positions = getState()
+    const saved = positions[window.location.pathname]
+    if (typeof saved === 'number') {
+      setTimeout(() => {
+        window.scrollTo(0, saved)
+      })
+    }
+  } catch (error) {
+    console.error(`Error restoring scroll position`, error)
+    sessionStorage.removeItem(KEY)
+  }
+}
+
+let didPop = false
+
+function rememberScrollPosition() {
+  didPop = false
+  const state = getState()
+  state[window.location.pathname] = window.scrollY
+  sessionStorage.setItem(KEY, JSON.stringify(state))
+}
+
+type ScrollRestorationProps = {
+  disable?: boolean | 'restore'
+}
+
+let disable: (() => void) | null = null
+
+function configure(props: ScrollRestorationProps) {
+  if (typeof window === 'undefined' || !window.addEventListener) {
+    return
+  }
+
+  disable?.()
+
+  const popStateController = new AbortController()
+
+  window.addEventListener(
+    'popstate',
+    () => {
+      didPop = true
+      setLastAction()
+    },
+    {
+      signal: popStateController.signal,
+    }
+  )
+
+  const disposeOnLoadState = subscribeToLoadingState((state) => {
+    if (state === 'loading') {
+      rememberScrollPosition()
+    }
+  })
+
+  const disposeOnRootState = subscribeToRootState((state) => {
+    if (isFirstLoad) {
+      isFirstLoad = false
+      return
+    }
+
+    if (state.linkOptions?.scroll === false) {
+      return
+    }
+
+    if (didPop) {
+      if (props.disable !== 'restore') {
+        // for now only restore on back button
+        restorePosition()
+      }
+    } else {
+      // if new page just set back to top
+      window.scrollTo(0, 0)
+    }
+  })
+
+  disable = () => {
+    popStateController.abort()
+    disposeOnLoadState()
+    disposeOnRootState()
+  }
+
+  return disable!
+}
+
+export function ScrollRestoration(props: ScrollRestorationProps) {
+  useEffect(() => {
+    return configure(props)
+  }, [props.disable])
+
+  return null
+}

package/src/views/Try.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+/** Props passed to a page's `ErrorBoundary` export. */
+export type ErrorBoundaryProps = {
+  /** Retry rendering the component by clearing the `error` state. */
+  retry: () => Promise<void>
+  /** The error that was thrown. */
+  error: Error
+}
+
+// No way to access `getDerivedStateFromError` from a functional component afaict.
+export class Try extends React.Component<
+  {
+    catch: React.ComponentType<ErrorBoundaryProps>
+    children: React.ReactNode
+  },
+  { error?: Error }
+> {
+  state = { error: undefined }
+
+  static getDerivedStateFromError(error: Error) {
+    // Force hide the splash screen if an error occurs.
+    // SplashScreen.hideAsync()
+
+    return { error }
+  }
+
+  retry = () => {
+    return new Promise<void>((resolve) => {
+      this.setState({ error: undefined }, () => {
+        resolve()
+      })
+    })
+  }
+
+  render() {
+    const { error } = this.state
+    const { catch: ErrorBoundary, children } = this.props
+    if (!error) {
+      return children
+    }
+    return <ErrorBoundary error={error} retry={this.retry} />
+  }
+}