one 1.2.0 → 1.2.1

package/src/views/Navigator.tsx

@@ -0,0 +1,167 @@
+// Copyright © 2024 650 Industries.
+import { type RouterFactory, StackRouter, useNavigationBuilder } from '@react-navigation/native'
+import * as React from 'react'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { useFilterScreenChildren } from '../layouts/withLayoutContext'
+import { FlagsContext } from '../router/FlagsContext'
+import { useContextKey } from '../router/Route'
+import { useSortedScreens } from '../router/useScreens'
+import { Screen } from './Screen'
+
+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 flags = React.useContext(FlagsContext)
+
+  const { state, descriptors } = context
+
+  const current = state.routes.find((route, i) => {
+    return state.index === i
+  })
+
+  if (!current) {
+    return null
+  }
+
+  let renderedElement = descriptors[current.key]?.render() ?? null
+
+  if (flags.experimentalPreventLayoutRemounting && renderedElement !== null) {
+    // To save unnecessary re-mounting since the Slot navigator will only render one screen at a time anyway.
+    renderedElement = {
+      ...renderedElement,
+      key: 'one-uses-a-static-key-here-for-slot-navigator',
+    }
+  }
+
+  return renderedElement
+}
+
+/** 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/OneStackRouter.tsx

@@ -0,0 +1,75 @@
+// forked from @react-navigation/routers/src/StackRouter.tsx
+// the only changes have @nate before them
+
+import { StackRouter, type StackRouterOptions } from '@react-navigation/native'
+
+export const CustomStackRouter = (options: StackRouterOptions) => {
+  const router = StackRouter(options)
+
+  const og = router.getStateForAction.bind(router)
+  router.getStateForAction = (state, action, options) => {
+    const next = og(state, action, options)
+
+    // @nate
+    // fix for [...spread] routes not having a stable useId() causing issues
+    // this fixes it to be stable because we actually don't want to stack when its a ...spread route
+    // i added a demo for this in test/test app /segments-stable-ids/c/d
+
+    // for now only fixing on web since i don't want to test native too throughly
+    if (process.env.TAMAGUI_TARGET !== 'native') {
+      if (action.type === 'NAVIGATE') {
+        if (next?.routes) {
+          const outRoutes = next.routes
+
+          const firstRoute = outRoutes[0]
+          if (firstRoute.name.includes('[...')) {
+            if (outRoutes.every((x) => x.name === firstRoute.name)) {
+              // this isn't working, we need a deeper solution
+              // change keys to be stable
+              // return [
+              //   ...outRoutes,
+              //   {
+              //     ...outRoutes[outRoutes.length - 1],
+              //     key: outRoutes[0].key,
+              //   },
+              // ] as any
+              // console.warn(
+              //   'outRoutes',
+              //   outRoutes.map((x) => x.key)
+              // )
+              // const next = outRoutes.map((route, i) => {
+              //   const inverse = outRoutes.length - i
+              //   const isLast = i === outRoutes.length - 1
+              //   const key = isLast ? route.key : `${route.name}-${inverse}`
+              //   return {
+              //     ...route,
+              //     key,
+              //   }
+              // })
+              // console.warn(next)
+              // return next
+              // instead of stacking, just update the original one with the new params
+              // const next = { ...firstRoute }
+              // next.params = outRoutes[outRoutes.length - 1].params
+              // const otherRoutes = outRoutes.filter((x) => x !== firstRoute)
+              // console.warn('otherRoutes', otherRoutes)
+              // const routes = [next]
+              // return {
+              //   ...next,
+              //   routes,
+              //   preloadedRoutes: state.preloadedRoutes.filter(
+              //     (route) => routes[routes.length - 1].key !== route.key
+              //   ),
+              // } as any
+            }
+          }
+        }
+      }
+    }
+
+    return next
+  }
+
+  // react nav type error exporting
+  return router as any
+}

package/src/views/PreloadLinks.native.tsx

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

package/src/views/PreloadLinks.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react'
+import { getURL } from '../getURL'
+import { preloadRoute } from '../router/router'
+
+export function PreloadLinks() {
+  // only in prod because we don't generate them until build
+  if (typeof window !== 'undefined' && import.meta.env.PROD) {
+    useEffect(() => {
+      const url = getURL()
+      const controller = new AbortController()
+
+      document.addEventListener(
+        'mouseover',
+        (e) => {
+          let target = e.target
+          if (!(target instanceof HTMLElement)) return
+          target = target instanceof HTMLAnchorElement ? target : target.closest('a')
+          if (!(target instanceof HTMLAnchorElement)) return
+          const href = target.getAttribute('href')
+          if (href?.[0] === '/' || href?.[0].startsWith(url)) {
+            // local route
+            preloadRoute(href.replace(url, ''))
+          }
+        },
+        {
+          passive: true,
+          signal: controller.signal,
+        }
+      )
+
+      return () => {
+        controller.abort()
+      }
+    }, [])
+  }
+
+  return null
+}

package/src/views/RootErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export class RootErrorBoundary extends React.Component<{ children: any }> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError(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 '../router/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/ScrollBehavior.tsx

@@ -0,0 +1,126 @@
+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 ScrollBehaviorProps = {
+  disable?: boolean | 'restore'
+}
+
+let disable: (() => void) | null = null
+
+function configure(props: ScrollBehaviorProps) {
+  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
+    }
+
+    const { hash } = state
+
+    if (hash) {
+      setTimeout(() => {
+        scrollToHash(hash)
+      })
+    } else 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!
+}
+
+function scrollToHash(hash: string) {
+  if (!hash || !hash.startsWith('#')) return
+  const id = hash.slice(1)
+  const el = document.getElementById(id)
+  if (!el) return
+  el.scrollIntoView({ behavior: 'instant' })
+}
+
+export function ScrollBehavior(props: ScrollBehaviorProps) {
+  if (process.env.VITE_ENVIRONMENT === 'client') {
+    useEffect(() => {
+      if (window.location.hash) {
+        scrollToHash(window.location.hash)
+      }
+    }, [])
+
+    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} />
+  }
+}

package/src/vite/DevHead.tsx

@@ -0,0 +1,39 @@
+import { VIRTUAL_SSR_CSS_HREF } from '../constants'
+
+// replacing Vites since we control the root
+export function DevHead() {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    return null
+  }
+  if (process.env.NODE_ENV === 'development') {
+    return (
+      <>
+        <link rel="preload" href={VIRTUAL_SSR_CSS_HREF} as="style" />
+        <link rel="stylesheet" href={VIRTUAL_SSR_CSS_HREF} data-ssr-css />
+        <script
+          type="module"
+          dangerouslySetInnerHTML={{
+            __html: `import { createHotContext } from "/@vite/client";
+  const hot = createHotContext("/__clear_ssr_css");
+  hot.on("vite:afterUpdate", () => {
+    document
+      .querySelectorAll("[data-ssr-css]")
+      .forEach(node => node.remove());
+  });`,
+          }}
+        />
+        <script
+          type="module"
+          dangerouslySetInnerHTML={{
+            __html: `import { injectIntoGlobalHook } from "/@react-refresh";
+  injectIntoGlobalHook(window);
+  window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;`,
+          }}
+        />
+      </>
+    )
+  }
+
+  return null
+}

package/src/vite/constants.ts

@@ -0,0 +1,5 @@
+export const EMPTY_LOADER_STRING = `export function loader() {return "__vxrn__loader__"};`
+
+export const LoaderDataCache = {}
+
+export const SERVER_CONTEXT_POST_RENDER_STRING = `_one_post_render_data_`

package/src/vite/customNodeExternals.ts

@@ -0,0 +1,33 @@
+// forked from https://github.com/Septh/rollup-plugin-node-externals
+
+import { isBuiltin } from 'node:module'
+import path from 'node:path'
+import type { Plugin } from 'vite'
+
+export function nodeExternals(): Plugin {
+  return {
+    name: `node-externals`,
+    enforce: 'pre',
+
+    resolveId: {
+      order: 'pre',
+      async handler(specifier, importer, { isEntry }) {
+        if (
+          isEntry || // Ignore entry points (they should always be resolved)
+          /^(?:\0|\.{1,2}\/)/.test(specifier) || // Ignore virtual modules and relative imports
+          path.isAbsolute(specifier) // Ignore already resolved ids
+        ) {
+          return null
+        }
+        if (isBuiltin(specifier)) {
+          const stripped = specifier.replace(/^node:/, '')
+          return {
+            id: !isBuiltin(stripped) ? 'node:' + stripped : stripped,
+            external: true,
+            moduleSideEffects: false,
+          }
+        }
+      },
+    },
+  } as Plugin & { enforce: 'pre' | 'post' }
+}

package/src/vite/ensureTsConfig.ts

@@ -0,0 +1,51 @@
+import { writeFile } from 'node:fs/promises'
+import '../polyfills-server'
+import { existsAsync } from '../utils/existsAsync'
+
+export function ensureTSConfig() {
+  existsAsync('tsconfig.json').then((hasTsConfig) => {
+    if (!hasTsConfig) {
+      console.info(
+        `[one] adding default tsconfig.json. to disable set one/vite { config: { tsConfigPaths: false } }`
+      )
+      writeFile(
+        'tsconfig.json',
+        `{
+"compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+    "~/*": ["./*"]
+  },
+  "strict": true,
+  "rootDir": ".",
+  "module": "Preserve",
+  // allows react-native style imports without path extensions, for compat with platform-specific files
+  "moduleResolution": "Bundler",
+  "preserveSymlinks": true,
+  "skipLibCheck": true,
+  "jsx": "react-jsx",
+  "noImplicitAny": false,
+  "types": [
+    "node",
+    "react",
+    "vite/client"
+  ],
+  "lib": [
+    "dom",
+    "esnext"
+  ]
+},
+"exclude": [
+  "node_modules",
+  ".expo",
+  "**/test",
+  "**/dist",
+  "**/types",
+  "**/__tests__"
+],
+}
+`
+      )
+    }
+  })
+}