one 1.1.370 → 1.1.372

package/src/fork/useDocumentTitle.tsx

@@ -0,0 +1,40 @@
+// No change just vendored to avoid import issue with RR7
+
+import type { NavigationContainerRef, ParamListBase, Route } from '@react-navigation/core'
+import * as React from 'react'
+
+type DocumentTitleOptions = {
+  enabled?: boolean
+  formatter?: (options: Record<string, any> | undefined, route: Route<string> | undefined) => string
+}
+
+/**
+ * Set the document title for the active screen
+ */
+export function useDocumentTitle(
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
+  {
+    enabled = true,
+    formatter = (options, route) => options?.title ?? route?.name,
+  }: DocumentTitleOptions = {}
+) {
+  React.useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    const navigation = ref.current
+
+    if (navigation) {
+      const title = formatter(navigation.getCurrentOptions(), navigation.getCurrentRoute())
+
+      document.title = title
+    }
+
+    return navigation?.addListener('options', (e) => {
+      const title = formatter(e.data.options, navigation?.getCurrentRoute())
+
+      document.title = title
+    })
+  })
+}

package/src/fork/useLinking.native.ts

@@ -7,6 +7,7 @@ import {
   type ParamListBase,
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
+  useNavigationIndependentTree,
 } from '@react-navigation/core'
 import type { LinkingOptions } from '@react-navigation/native'
 import * as React from 'react'
@@ -51,55 +52,52 @@ export default function useLinking(
     getActionFromState = getActionFromStateDefault,
   }: Options
 ) {
-  //   const independent = useNavigationIndependentTree();
+  const independent = useNavigationIndependentTree()
 
-  React.useEffect(
-    () => {
-      if (process.env.NODE_ENV === 'production') {
-        return undefined
-      }
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return undefined
+    }
 
-      // if (independent) {
-      //   return undefined;
-      // }
-
-      if (
-        // enabled !== false &&
-        linkingHandlers.length
-      ) {
-        console.error(
-          [
-            'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
-            "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
-            '- Only a single instance of the root component is rendered',
-            Platform.OS === 'android'
-              ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
-              : '',
-          ]
-            .join('\n')
-            .trim()
-        )
-      }
+    if (independent) {
+      return
+    }
 
-      const handler = Symbol()
+    if (
+      // enabled !== false &&
+      linkingHandlers.length
+    ) {
+      console.error(
+        [
+          'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
+          "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
+          '- Only a single instance of the root component is rendered',
+          Platform.OS === 'android'
+            ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
+            : '',
+        ]
+          .join('\n')
+          .trim()
+      )
+    }
 
-      // if (enabled !== false) {
-      linkingHandlers.push(handler)
-      // }
+    const handler = Symbol()
 
-      return () => {
-        const index = linkingHandlers.indexOf(handler)
+    // if (enabled !== false) {
+    linkingHandlers.push(handler)
+    // }
 
-        if (index > -1) {
-          linkingHandlers.splice(index, 1)
-        }
+    return () => {
+      const index = linkingHandlers.indexOf(handler)
+
+      if (index > -1) {
+        linkingHandlers.splice(index, 1)
       }
-    },
-    [
-      // enabled,
-      // independent
-    ]
-  )
+    }
+  }, [
+    // enabled,
+    independent,
+  ])
 
   // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
   // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`

package/src/fork/useLinking.ts

@@ -7,6 +7,7 @@ import {
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
+  useNavigationIndependentTree,
   type NavigationContainerRef,
   type NavigationState,
   type ParamListBase,
@@ -88,14 +89,11 @@ export const series = (cb: () => Promise<void>) => {
 
 let linkingHandlers: Symbol[] = []
 
-type Options = LinkingOptions<ParamListBase> & {
-  independent?: boolean
-}
+type Options = LinkingOptions<ParamListBase>
 
 export default function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
-    independent,
     enabled = true,
     config,
     getStateFromPath = getStateFromPathDefault,
@@ -103,6 +101,8 @@ export default function useLinking(
     getActionFromState = getActionFromStateDefault,
   }: Options
 ) {
+  const independent = useNavigationIndependentTree()
+
   React.useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       return undefined

package/src/fork/useThenable.tsx

@@ -0,0 +1,43 @@
+// No change just vendored to avoid import issue with RR7
+import * as React from 'react'
+
+export function useThenable<T>(create: () => PromiseLike<T>) {
+  const [promise] = React.useState(create)
+
+  let initialState: [boolean, T | undefined] = [false, undefined]
+
+  // Check if our thenable is synchronous
+  // eslint-disable-next-line promise/catch-or-return, promise/always-return
+  promise.then((result) => {
+    initialState = [true, result]
+  })
+
+  const [state, setState] = React.useState(initialState)
+  const [resolved] = state
+
+  React.useEffect(() => {
+    let cancelled = false
+
+    const resolve = async () => {
+      let result
+
+      try {
+        result = await promise
+      } finally {
+        if (!cancelled) {
+          setState([true, result])
+        }
+      }
+    }
+
+    if (!resolved) {
+      resolve()
+    }
+
+    return () => {
+      cancelled = true
+    }
+  }, [promise, resolved])
+
+  return state
+}

package/src/interfaces/router.ts

@@ -4,7 +4,7 @@ import type {
   PartialState,
 } from '@react-navigation/core'
 import type { ReactNode } from 'react'
-import type { TextProps, GestureResponderEvent } from 'react-native'
+import type { TextProps, GestureResponderEvent, PressableProps } from 'react-native'
 
 export namespace OneRouter {
   export interface __routes<T extends string = string> extends Record<string, unknown> {}
@@ -305,7 +305,8 @@ export namespace OneRouter {
   }
 
   export interface LinkProps<T extends string | object>
-    extends Omit<TextProps, 'href'>,
+    extends Omit<TextProps, 'href' | 'disabled' | 'onLongPress' | 'onPressIn' | 'onPressOut'>,
+      Pick<PressableProps, 'disabled' | 'onLongPress' | 'onPressIn' | 'onPressOut'>,
       WebAnchorProps {
     /** Path to route to. */
     href: Href<T>

package/src/layouts/Drawer.tsx

@@ -1,7 +1,7 @@
 import {
-  type DrawerNavigationEventMap,
-  type DrawerNavigationOptions,
   createDrawerNavigator,
+  type DrawerNavigationOptions,
+  type DrawerNavigationEventMap,
 } from '@react-navigation/drawer'
 import type { DrawerNavigationState, ParamListBase } from '@react-navigation/native'
 

package/src/layouts/Tabs.tsx

@@ -2,6 +2,8 @@ import {
   createBottomTabNavigator,
   type BottomTabNavigationEventMap,
   type BottomTabNavigationOptions,
+  BottomTabBar,
+  type BottomTabBarProps,
 } from '@react-navigation/bottom-tabs'
 import type { ParamListBase, TabNavigationState } from '@react-navigation/native'
 import { Platform, Pressable } from 'react-native'
@@ -10,11 +12,34 @@ import type { OneRouter } from '../interfaces/router'
 import { Link } from '../link/Link'
 import { withLayoutContext } from './withLayoutContext'
 
+const TabBar = ({ state, ...restProps }: BottomTabBarProps) => {
+  /**
+   * With React Navigation v7, spacial routes such as +not-found and _sitemap are being added to `state.routes`, but we don't want them to be shown in the tab bar.
+   */
+  const filteredRoutes = state.routes.filter(
+    (r) => r.name !== '+not-found' && !r.name.startsWith('_sitemap')
+  )
+
+  return (
+    <BottomTabBar
+      state={{
+        ...state,
+        routes: filteredRoutes,
+      }}
+      {...restProps}
+    />
+  )
+}
+
 // This is the only way to access the navigator.
 const BottomTabNavigator = createBottomTabNavigator().Navigator
 
+type BottomTabNavigationOptionsWithHref = BottomTabNavigationOptions & {
+  href?: OneRouter.Href | null
+}
+
 export const Tabs = withLayoutContext<
-  BottomTabNavigationOptions & { href?: OneRouter.Href | null },
+  BottomTabNavigationOptionsWithHref,
   typeof BottomTabNavigator,
   TabNavigationState<ParamListBase>,
   BottomTabNavigationEventMap
@@ -52,6 +77,6 @@ export const Tabs = withLayoutContext<
     }
     return screen
   })
-})
+}, { props: { tabBar: TabBar } })
 
 export default Tabs

package/src/layouts/withLayoutContext.tsx

@@ -71,7 +71,8 @@ export function withLayoutContext<
   Nav: T,
   processor?: (
     options: ScreenProps<TOptions, State, EventMap>[]
-  ) => ScreenProps<TOptions, State, EventMap>[]
+  ) => ScreenProps<TOptions, State, EventMap>[],
+  options?: { props: any }
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<PickPartial<React.ComponentProps<T>, 'children'>> &
     React.RefAttributes<unknown>
@@ -96,8 +97,7 @@ export function withLayoutContext<
       }
 
       return (
-        // @ts-expect-error
-        <Nav {...props} id={contextKey} ref={ref}>
+        <Nav {...props} {...options?.props} id={contextKey} ref={ref}>
           {sorted}
         </Nav>
       )

package/src/setup.ts

@@ -2,18 +2,10 @@
 import { scan } from 'react-scan'
 
 if (process.env.ONE_ENABLE_REACT_SCAN) {
-  const val = JSON.parse(process.env.ONE_ENABLE_REACT_SCAN)
-  scan(
-    val === true
-      ? {
-          enabled: true,
-          showToolbar: false,
-        }
-      : val
-  )
+  scan(JSON.parse(process.env.ONE_ENABLE_REACT_SCAN))
 }
 
 // fixes bad import error in expo-modules-core
 // without this you run into error loading web immediately
 // where globalThis.expo is not defined
-import 'expo-modules-core/build/createWebModule'
+import 'expo-modules-core/src/web/index.web.ts'

package/src/vite/build.ts

@@ -1,4 +1,3 @@
-import * as constants from '../constants'
 import FSExtra from 'fs-extra'
 import MicroMatch from 'micromatch'
 import { createRequire } from 'node:module'
@@ -15,10 +14,11 @@ import {
 } from 'vxrn'
 import { getLoaderPath, getPreloadPath } from '../cleanUrl'
 import { labelProcess } from '../cli/label-process'
+import * as constants from '../constants'
 import type { RouteInfo } from '../server/createRoutesManifest'
 import type { LoaderProps, RenderApp } from '../types'
 import { getManifest } from './getManifest'
-import { loadUserOneOptions } from './one'
+import { loadUserOneOptions } from './loadConfig'
 import { replaceLoader } from './replaceLoader'
 import type { One } from './types'
 
@@ -527,7 +527,7 @@ ${JSON.stringify(params || null, null, 2)}`
       await FSExtra.writeFile(
         join(options.root, 'dist', 'index.js'),
         `import { serve } from 'one/serve'
-const handler = await serve()
+export const handler = await serve()
 export const { GET, POST, PUT, PATCH, OPTIONS } = handler`
       )
 

package/src/vite/loadConfig.ts

@@ -0,0 +1,31 @@
+import { loadConfigFromFile } from 'vite'
+import '../polyfills-server'
+import type { One } from './types'
+
+// globalThis, otherwise we get issues with duplicates due to however vite calls loadConfigFromFile
+
+export function setOneOptions(next: One.PluginOptions) {
+  globalThis.__oneOptions = next
+}
+
+async function getUserOneOptions(command?: 'serve' | 'build') {
+  if (!globalThis.__oneOptions) {
+    throw new Error(`One not loaded properly, is the one() plugin in your vite.config.ts?`)
+  }
+  return globalThis.__oneOptions
+}
+
+export async function loadUserOneOptions(command: 'serve' | 'build') {
+  const found = await loadConfigFromFile({
+    mode: 'prod',
+    command,
+  })
+  if (!found) {
+    throw new Error(`No config found in ${process.cwd()}. Is this the correct directory?`)
+  }
+  const foundOptions = getUserOneOptions(command)
+  if (!foundOptions) {
+    throw new Error(`No One plugin found in this vite.config`)
+  }
+  return foundOptions
+}

package/src/vite/one.ts

@@ -1,7 +1,7 @@
 import { resolvePath } from '@vxrn/resolve'
 import events from 'node:events'
 import path, { dirname, resolve } from 'node:path'
-import { type Plugin, type PluginOption, type UserConfig, loadConfigFromFile } from 'vite'
+import type { Plugin, PluginOption, UserConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import {
   autoPreBundleDepsForSsrPlugin,
@@ -14,6 +14,7 @@ import { CACHE_KEY } from '../constants'
 import '../polyfills-server'
 import { existsAsync } from '../utils/existsAsync'
 import { ensureTSConfig } from './ensureTsConfig'
+import { setOneOptions } from './loadConfig'
 import { clientTreeShakePlugin } from './plugins/clientTreeShakePlugin'
 import { createFileSystemRouterPlugin } from './plugins/fileSystemRouterPlugin'
 import { fixDependenciesPlugin } from './plugins/fixDependenciesPlugin'
@@ -22,6 +23,14 @@ import { createReactCompilerPlugin } from './plugins/reactCompilerPlugin'
 import { SSRCSSPlugin } from './plugins/SSRCSSPlugin'
 import { createVirtualEntry, virtualEntryId } from './plugins/virtualEntryPlugin'
 import type { One } from './types'
+// import { barrel } from 'vite-plugin-barrel'
+
+/**
+ * This needs a big refactor!
+ * I guess these plugins are all being loaded by native??
+ * At least the react compiler plugin is applying to native, so the entire premise of some things
+ * here are wrong. we can probably refactor and merge all the stuff
+ */
 
 events.setMaxListeners(1_000)
 
@@ -29,7 +38,7 @@ events.setMaxListeners(1_000)
 globalThis.__vxrnEnableNativeEnv = true
 
 export function one(options: One.PluginOptions = {}): PluginOption {
-  oneOptions = options
+  setOneOptions(options)
 
   // ensure tsconfig
   if (options.config?.ensureTSConfig !== false) {
@@ -59,6 +68,14 @@ export function one(options: One.PluginOptions = {}): PluginOption {
       __get: options,
     },
 
+    // stopped working on new version
+    // barrel({
+    //   packages: ['@tamagui/lucide-icons', '@mui/material', '@mui/icons-material'],
+    //   // experimental: {
+    //   //   integration: 'plugin-react-swc',
+    //   // },
+    // }) as any,
+
     {
       name: 'one-define-env',
       async config() {
@@ -178,6 +195,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
               define: {
                 'process.env.VITE_ENVIRONMENT': '"client"',
                 'import.meta.env.VITE_ENVIRONMENT': '"client"',
+                'process.env.EXPO_OS': '"web"',
               },
             },
 
@@ -185,6 +203,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
               define: {
                 'process.env.VITE_ENVIRONMENT': '"ssr"',
                 'import.meta.env.VITE_ENVIRONMENT': '"ssr"',
+                'process.env.EXPO_OS': '"web"',
               },
             },
 
@@ -192,6 +211,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
               define: {
                 'process.env.VITE_ENVIRONMENT': '"ios"',
                 'import.meta.env.VITE_ENVIRONMENT': '"ios"',
+                'process.env.EXPO_OS': '"ios"',
               },
             },
 
@@ -199,6 +219,7 @@ export function one(options: One.PluginOptions = {}): PluginOption {
               define: {
                 'process.env.VITE_ENVIRONMENT': '"android"',
                 'import.meta.env.VITE_ENVIRONMENT': '"android"',
+                'process.env.EXPO_OS': '"android"',
               },
             },
           },
@@ -249,30 +270,85 @@ export function one(options: One.PluginOptions = {}): PluginOption {
   // react scan
   const scan = options.react?.scan
 
-  // TODO make this passed into vxrn through real API
-  globalThis.__vxrnAddNativePlugins = [clientTreeShakePlugin()]
-  globalThis.__vxrnAddWebPluginsProd = devAndProdPlugins
+  // do it here because it gets called a few times
+  const reactScanConfig = ((): UserConfig => {
+    const stringify = (obj: Object) => JSON.stringify(JSON.stringify(obj))
 
-  return [
-    ...devAndProdPlugins,
+    const configs = {
+      disabled: {
+        define: {
+          'process.env.ONE_ENABLE_REACT_SCAN': 'false',
+        },
+      },
+      enabled: {
+        define: {
+          'process.env.ONE_ENABLE_REACT_SCAN': stringify({
+            enabled: true,
+            animationSpeed: 'slow',
+            showToolbar: false,
+          }),
+        },
+      },
+    } satisfies Record<string, UserConfig>
+
+    const getConfigFor = (platform: 'ios' | 'android' | 'client'): UserConfig => {
+      if (!scan) {
+        return configs.disabled
+      }
+      if (scan === true) {
+        return configs.enabled
+      }
+      if (typeof scan === 'string') {
+        if (scan === 'native' && platform === 'client') {
+          return configs.disabled
+        }
+        if (scan === 'web' && platform !== 'client') {
+          return configs.disabled
+        }
+        return configs.enabled
+      }
 
+      const defaultConfig = scan.options || configs.enabled
+      const perPlatformConfig =
+        platform === 'ios' || platform === 'android' ? scan.native : scan.web
+
+      return {
+        define: {
+          'process.env.ONE_ENABLE_REACT_SCAN': stringify({
+            ...defaultConfig,
+            ...perPlatformConfig,
+          }),
+        },
+      }
+    }
+
+    return {
+      environments: {
+        client: getConfigFor('client'),
+        ios: getConfigFor('ios'),
+        android: getConfigFor('android'),
+      },
+    }
+  })()
+
+  // TODO move to single config and through environments
+  const nativeWebDevAndProdPlugsin: Plugin[] = [
+    clientTreeShakePlugin(),
     {
       name: `one:react-scan`,
       config() {
-        return {
-          environments: {
-            // only in client
-            client: {
-              define: {
-                'process.env.ONE_ENABLE_REACT_SCAN': JSON.stringify(
-                  typeof scan === 'boolean' ? `${scan}` : scan
-                ),
-              },
-            },
-          },
-        }
+        return reactScanConfig
       },
     },
+  ]
+
+  // TODO make this passed into vxrn through real API
+  globalThis.__vxrnAddNativePlugins = nativeWebDevAndProdPlugsin
+  globalThis.__vxrnAddWebPluginsProd = devAndProdPlugins
+
+  return [
+    ...devAndProdPlugins,
+    ...nativeWebDevAndProdPlugsin,
 
     /**
      * This is really the meat of one, where it handles requests:
@@ -281,8 +357,6 @@ export function one(options: One.PluginOptions = {}): PluginOption {
 
     generateFileSystemRouteTypesPlugin(options),
 
-    clientTreeShakePlugin(),
-
     fixDependenciesPlugin(options.deps),
 
     createVirtualEntry({
@@ -370,31 +444,3 @@ export function one(options: One.PluginOptions = {}): PluginOption {
     }),
   ]
 }
-
-let oneOptions: One.PluginOptions | null = null
-
-async function getUserOneOptions(command?: 'serve' | 'build') {
-  if (!oneOptions) {
-    if (!command) throw new Error(`Options not loaded and no command given`)
-    await loadUserOneOptions(command)
-  }
-  if (!oneOptions) {
-    throw new Error(`No One options were loaded`)
-  }
-  return oneOptions
-}
-
-export async function loadUserOneOptions(command: 'serve' | 'build') {
-  const found = await loadConfigFromFile({
-    mode: 'prod',
-    command,
-  })
-  if (!found) {
-    throw new Error(`No config found in ${process.cwd()}. Is this the correct directory?`)
-  }
-  const foundOptions = getUserOneOptions()
-  if (!foundOptions) {
-    throw new Error(`No One plugin found in this vite.config`)
-  }
-  return foundOptions
-}

package/src/vite/plugins/fileSystemRouterPlugin.tsx

@@ -352,7 +352,10 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
 
               if (reply.body) {
                 if (reply.body.locked) {
-                  console.warn(`Body is locked??`)
+                  console.warn(`Body is locked??`, req.url)
+                  res.write(``)
+                  res.end()
+                  return
                 }
               }
 

package/src/vite/plugins/reactCompilerPlugin.ts

@@ -3,12 +3,12 @@ import { relative } from 'node:path'
 import type { Plugin } from 'vite'
 
 export const createReactCompilerPlugin = (root: string): Plugin => {
-  const babelConfig = {
+  const getBabelConfig = (target: '18' | '19') => ({
     babelrc: false,
     configFile: false,
     presets: ['@babel/preset-typescript'],
-    plugins: [['babel-plugin-react-compiler', { target: '19' }]],
-  }
+    plugins: [['babel-plugin-react-compiler', { target }]],
+  })
 
   const filter = /.*(.tsx?)$/
 
@@ -19,10 +19,17 @@ export const createReactCompilerPlugin = (root: string): Plugin => {
     async transform(codeIn, id) {
       const shouldTransform = filter.test(id)
       if (!shouldTransform) return
-      const result = await babel.transformAsync(codeIn, { filename: id, ...babelConfig })
+      const env = this.environment.name
+      const target = env === 'ios' || env === 'android' ? '18' : '19'
+
+      if (codeIn.startsWith('// disable-compiler')) {
+        return
+      }
+
+      const result = await babel.transformAsync(codeIn, { filename: id, ...getBabelConfig(target) })
       const code = result?.code ?? ''
 
-      if (code.includes(`react/compiler-runtime`)) {
+      if (code.includes(target === '18' ? `react-compiler-runtime` : `react/compiler-runtime`)) {
         console.info(` 🪄 ${relative(root, id)}`)
       }