one 1.2.0 → 1.2.1

package/src/metro-config/getViteMetroPluginOptions.ts

@@ -0,0 +1,198 @@
+import module from 'node:module'
+import path from 'node:path'
+import type { metroPlugin } from '@vxrn/vite-plugin-metro'
+import mm from 'micromatch'
+import tsconfigPaths from 'tsconfig-paths'
+import {
+  API_ROUTE_GLOB_PATTERN,
+  ROUTE_NATIVE_EXCLUSION_GLOB_PATTERNS,
+} from '../router/glob-patterns'
+
+export function getViteMetroPluginOptions({
+  projectRoot,
+  relativeRouterRoot,
+  ignoredRouteFiles,
+  userDefaultConfigOverrides,
+}: {
+  projectRoot: string
+  relativeRouterRoot: string
+  ignoredRouteFiles?: Array<`**/*${string}`>
+  userDefaultConfigOverrides?: NonNullable<
+    Parameters<typeof metroPlugin>[0]
+  >['defaultConfigOverrides']
+}): Parameters<typeof metroPlugin>[0] {
+  const tsconfigPathsConfigLoadResult = tsconfigPaths.loadConfig(projectRoot)
+
+  if (tsconfigPathsConfigLoadResult.resultType === 'failed') {
+    throw new Error('tsconfigPathsConfigLoadResult.resultType is not success')
+  }
+
+  const require = module.createRequire(projectRoot)
+  const emptyPath = require.resolve('@vxrn/vite-plugin-metro/empty', {
+    paths: [projectRoot],
+  })
+
+  const metroEntryPath = require.resolve('one/metro-entry', {
+    paths: [projectRoot],
+  })
+
+  const routerRequireContextRegexString = (() => {
+    const excludeRes = [
+      ...(ignoredRouteFiles || []).map((pattern) => mm.makeRe(pattern)),
+      ...ROUTE_NATIVE_EXCLUSION_GLOB_PATTERNS.map((pattern) => mm.makeRe(pattern)),
+      mm.makeRe(API_ROUTE_GLOB_PATTERN),
+    ]
+
+    const supportedRegexMustStartWith = String.raw`^(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?`
+    // biome-ignore lint/complexity/noUselessStringRaw: keep original code
+    const supportedRegexMustEndWith = String.raw`)$`
+
+    const negativeLookaheadGroups = excludeRes.map((re, i) => {
+      /**
+       * Example:
+       * ```
+       * ^(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\+api\.(ts|tsx))$
+       * ```
+       */
+      const reSource = re.source
+
+      if (
+        !(
+          reSource.startsWith(supportedRegexMustStartWith) &&
+          reSource.endsWith(supportedRegexMustEndWith)
+        )
+      ) {
+        const ignoredRouteFile = ignoredRouteFiles?.[i]
+
+        if (ignoredRouteFile) {
+          throw new Error(
+            `[one/metro] ignoredRouteFile pattern "${ignoredRouteFile}" is not supported. We cannot process the corresponding regex "${reSource}" for now.`
+          )
+        }
+
+        throw new Error(`Unsupported regex "${reSource}" in "ignoredRouteFiles".`)
+      }
+
+      const rePart = reSource.slice(
+        supportedRegexMustStartWith.length,
+        reSource.length - supportedRegexMustEndWith.length
+      )
+
+      // biome-ignore lint/complexity/noUselessStringRaw: keep original code
+      return String.raw`(?:.*${rePart})`
+    })
+
+    return String.raw`^(?:\.\/)(?!${negativeLookaheadGroups.join('|')}$).*\.tsx?$`
+  })()
+
+  return {
+    defaultConfigOverrides: (defaultConfig) => {
+      let config: typeof defaultConfig = {
+        ...defaultConfig,
+        resolver: {
+          ...defaultConfig?.resolver,
+          extraNodeModules: {
+            ...defaultConfig?.resolver?.extraNodeModules,
+            // "vite-tsconfig-paths" for Metro
+            // Commenting out since we are using babel-plugin-module-resolver alias instead
+            // ...Object.fromEntries(
+            //   Object.entries(tsconfigPathsConfigLoadResult.paths)
+            //     .map(([k, v]) => {
+            //       if (k.endsWith('/*') && v[0]?.endsWith('/*')) {
+            //         const key = k.replace(/\/\*$/, '')
+            //         let value = v[0].replace(/\/\*$/, '')
+
+            //         value = path.join(tsconfigPathsConfigLoadResult.absoluteBaseUrl, value)
+
+            //         return [key, value]
+            //       }
+            //     })
+            //     .filter((i): i is NonNullable<typeof i> => !!i)
+            // ),
+          },
+          nodeModulesPaths: tsconfigPathsConfigLoadResult.absoluteBaseUrl
+            ? [
+                // "vite-tsconfig-paths" for Metro
+                tsconfigPathsConfigLoadResult.absoluteBaseUrl,
+                ...(defaultConfig?.resolver?.nodeModulesPaths || []),
+              ]
+            : defaultConfig?.resolver?.nodeModulesPaths,
+          resolveRequest: (context, moduleName, platform) => {
+            if (moduleName.endsWith('.css')) {
+              console.warn(
+                `[one/metro] *.css files are ignored for now, resolving ${moduleName} to empty module.`
+              )
+              return {
+                type: 'sourceFile',
+                filePath: emptyPath,
+              }
+            }
+
+            // On Vite side this is done by excludeAPIAndMiddlewareRoutesPlugin
+            if (/_middleware.tsx?$/.test(moduleName)) {
+              return {
+                type: 'sourceFile',
+                filePath: emptyPath,
+              }
+            }
+
+            const defaultResolveRequest =
+              defaultConfig?.resolver?.resolveRequest || context.resolveRequest
+            const res = defaultResolveRequest(context, moduleName, platform)
+            return res
+          },
+        },
+      }
+
+      if (typeof userDefaultConfigOverrides === 'function') {
+        config = userDefaultConfigOverrides(config)
+      } // TODO: support if userDefaultConfigOverrides is an object, or do not let userDefaultConfigOverrides be an object at all?
+
+      return config
+    },
+    babelConfig: {
+      plugins: [
+        [
+          'babel-plugin-module-resolver',
+          {
+            alias: {
+              // "vite-tsconfig-paths" for Metro
+              ...Object.fromEntries(
+                Object.entries(tsconfigPathsConfigLoadResult.paths).map(([k, v]) => {
+                  const key = (() => {
+                    if (k.endsWith('/*')) {
+                      return k.replace(/\/\*$/, '')
+                    }
+
+                    // If the key does not end with "/*", only alias exact matches.
+                    // Ref: https://www.npmjs.com/package/babel-plugin-module-resolver/v/3.0.0#regular-expression-alias
+                    return `${k}$`
+                  })()
+
+                  let value = v[0].replace(/\/\*$/, '')
+
+                  if (!value.startsWith('./')) {
+                    value = `./${value}`
+                  }
+
+                  return [key, value]
+                })
+              ),
+            },
+          },
+        ],
+        [
+          'one/babel-plugin-one-router-metro',
+          {
+            ONE_ROUTER_APP_ROOT_RELATIVE_TO_ENTRY: path.relative(
+              path.dirname(metroEntryPath),
+              path.join(projectRoot, relativeRouterRoot)
+            ),
+            ONE_ROUTER_ROOT_FOLDER_NAME: relativeRouterRoot,
+            ONE_ROUTER_REQUIRE_CONTEXT_REGEX_STRING: routerRequireContextRegexString,
+          },
+        ],
+      ],
+    },
+  }
+}

package/src/polyfills-mobile.ts

@@ -0,0 +1,36 @@
+// --------------- global -------------------
+// for react-navigation/native NavigationContainer
+
+globalThis['global'] = globalThis
+
+// --------------- structuredClone -------------------
+
+import structuredClone from '@ungap/structured-clone'
+
+globalThis['structuredClone'] ||= structuredClone
+
+// --------------- structuredClone -------------------
+
+globalThis['requestAnimationFrame'] ||= setTimeout
+
+// --------------- Symbol.asyncIterator -------------------
+
+import '@azure/core-asynciterator-polyfill'
+
+// --------------- URL -------------------
+
+import 'core-js/actual/url'
+import 'core-js/actual/url-search-params'
+
+// import URLPolyfill from 'url-parse'
+// try {
+//   new URL(`https://tamagui.dev/test`).pathname
+// } catch {
+//   globalThis['URL'] = URLPolyfill
+// }
+
+// --------------- Promise.withResolver -------------------
+
+import { promiseWithResolvers } from './utils/promiseWithResolvers'
+
+Promise.withResolvers || (Promise.withResolvers = promiseWithResolvers)

package/src/polyfills-server.ts

@@ -0,0 +1,6 @@
+import WebSocket from 'ws'
+
+// make websockets work on server
+globalThis['WebSocket'] ||= WebSocket as any
+
+globalThis['requestAnimationFrame'] = setTimeout

package/src/render.native.tsx

@@ -0,0 +1,3 @@
+export function render(element: React.ReactNode) {
+  console.warn(`empty`)
+}

package/src/render.tsx

@@ -0,0 +1,61 @@
+import { startTransition } from 'react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+
+globalThis['__vxrnVersion'] ||= 0
+
+const listeners = new Set<Function>()
+let didRender = false
+
+export function render(element: React.ReactNode) {
+  if (typeof document === 'undefined') return
+
+  if (globalThis['__vxrnRoot']) {
+    globalThis['__vxrnVersion']++
+    globalThis['__vxrnRoot'].render(element)
+  } else {
+    startTransition(() => {
+      const rootElement = process.env.ONE_USE_FASTER_DOCUMENT
+        ? document.documentElement
+        : (document as any)
+
+      if (globalThis['__vxrnIsSPA']) {
+        const root = createRoot(rootElement)
+        globalThis['__vxrnRoot'] = root
+        root.render(element)
+      } else {
+        globalThis['__vxrnRoot'] = hydrateRoot(rootElement, element, {
+          onRecoverableError(...args) {
+            console.groupCollapsed(
+              `[one] Non-critical recoverable React error occurred, expand group to see details`
+            )
+            console.error(...args)
+            console.groupEnd()
+          },
+          onUncaughtError(...args) {
+            console.error(`[one] onUncaughtError`, ...args)
+          },
+          onCaughtError(...args) {
+            console.error(`[one] onCaughtError`, ...args)
+          },
+        })
+      }
+    })
+  }
+
+  listeners.forEach((cb) => {
+    cb()
+  })
+  didRender = true
+}
+
+export function afterClientRender(listener: Function) {
+  if (didRender) {
+    listener()
+    return
+  }
+
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}

package/src/router/FlagsContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import type { One } from '../vite/types'
+
+export const FlagsContext = createContext<One.Flags>({})

package/src/router/Route.tsx

@@ -0,0 +1,87 @@
+import React, { createContext, type ReactNode, useContext } from 'react'
+import type { ErrorBoundaryProps } from '../views/Try'
+import type { One } from '../vite/types'
+import { getContextKey } from './matchers'
+import { RouteInfoContextProvider } from './RouteInfoContext'
+
+export type DynamicConvention = { name: string; deep: boolean; notFound?: boolean }
+
+export type LoadedRoute = {
+  ErrorBoundary?: React.ComponentType<ErrorBoundaryProps>
+  default?: React.ComponentType<any>
+  unstable_settings?: Record<string, any>
+  getNavOptions?: (args: any) => any
+  generateStaticParams?: (props: {
+    params?: Record<string, string | string[]>
+  }) => Record<string, string | string[]>[]
+  loader?: (props: {
+    params?: Record<string, string | string[]>
+  }) => Record<string, string | string[]>[]
+}
+
+export type RouteNode = {
+  /** The type of RouteNode */
+  type: One.RouteType
+  /** Load a route into memory. Returns the exports from a route. */
+  loadRoute: () => Partial<LoadedRoute>
+  /** Loaded initial route name. */
+  initialRouteName?: string
+  /** nested routes */
+  children: RouteNode[]
+  /** Is the route a dynamic path */
+  dynamic: null | DynamicConvention[]
+  /** `index`, `error-boundary`, etc. */
+  route: string
+  /** Context Module ID, used for matching children. */
+  contextKey: string
+  /** Added in-memory */
+  generated?: boolean
+  /** Internal screens like the directory or the auto 404 should be marked as internal. */
+  internal?: boolean
+  /** File paths for async entry modules that should be included in the initial chunk request to ensure the runtime JavaScript matches the statically rendered HTML representation. */
+  entryPoints?: string[]
+  /** Parent layouts */
+  layouts?: RouteNode[]
+  /** Parent middlewares */
+  middlewares?: RouteNode[]
+}
+
+export const RouteParamsContext = createContext<Record<string, string | undefined> | undefined>({})
+
+const CurrentRouteContext = React.createContext<RouteNode | null>(null)
+
+if (process.env.NODE_ENV !== 'production') {
+  CurrentRouteContext.displayName = 'RouteNode'
+}
+
+/** Return the RouteNode at the current contextual boundary. */
+export function useRouteNode(): RouteNode | null {
+  return useContext(CurrentRouteContext)
+}
+
+export function useContextKey(): string {
+  const node = useRouteNode()
+  if (node == null) {
+    throw new Error('No filename found. This is likely a bug in router.')
+  }
+  return getContextKey(node.contextKey)
+}
+
+/** Provides the matching routes and filename to the children. */
+export function Route({
+  children,
+  node,
+  route,
+}: {
+  children: ReactNode
+  node: RouteNode
+  route?: { params?: Record<string, string | undefined> }
+}) {
+  return (
+    <RouteParamsContext.Provider value={route?.params}>
+      <CurrentRouteContext.Provider value={node}>
+        <RouteInfoContextProvider>{children}</RouteInfoContextProvider>
+      </CurrentRouteContext.Provider>
+    </RouteParamsContext.Provider>
+  )
+}

package/src/router/RouteInfoContext.tsx

@@ -0,0 +1,92 @@
+import { useStateForPath } from '@react-navigation/core'
+import type React from 'react'
+import { createContext, useRef } from 'react'
+import type { UrlObject } from './getNormalizedStatePath'
+import { getRouteInfo } from './getRouteInfo'
+
+export const RouteInfoContext = createContext<UrlObject | undefined>(undefined)
+
+/**
+ * Provides the route info (a `UrlObject`) through a context for child page.
+ * Such context can be used to implement hooks such as `usePathname`.
+ *
+ * **IMPORTANT**: The current implementation uses `useStateForPath` - which will not return the a complete state if it isn't being called from a component under a leaf route node.
+ * In other words, the provided route info may not be correct when used in a `_layout`. For example, if the user is on a page `/blog/123`:
+ *
+ * ```
+ * app
+ * ├── _layout.tsx
+ * ├── index.tsx
+ * └── blog
+ *     ├── _layout.tsx - in BlogLayout, pathname will be "/blog"
+ *     └── [id].tsx - in BlogPage, pathname will be "/blog/123"
+ * ```
+ *
+ * The returned value is lazily calculated and cached, so we won't waste CPU cycles to calculate it if no one is asking for it.
+ *
+ * This is implemented with the `useStateForPath` hook provided by React Navigation, which is known to be safe for not returning a stale or incomplete state when used in pages. See: https://github.com/react-navigation/react-navigation/pull/12521
+ */
+export function RouteInfoContextProvider({ children }: { children: React.ReactNode }) {
+  const currentState = useStateForPath()
+
+  /**
+   * Ref to hold the current state. Do not update it immediately, because we also
+   * rely on this ref to make `lazilyCalculatedRouteInfo` a new object when the
+   * state changes.
+   */
+  const currentStateRef = useRef<typeof currentState>(undefined)
+
+  /**
+   * This is used by the lazilyCalculatedRouteInfo to determine if it should
+   * update the cached route info. After doing so, lazilyCalculatedRouteInfo
+   * should update it to the current state.
+   */
+  const lastStateRef = useRef<typeof currentState>(undefined)
+  const cachedRouteInfoValueRef = useRef<UrlObject | undefined>(undefined)
+
+  const lazilyCalculatedRouteInfo = useRef<UrlObject | undefined>(undefined)
+
+  if (currentState && currentStateRef.current !== currentState) {
+    lazilyCalculatedRouteInfo.current = makeLazilyCalculatedRouteInfo({
+      currentStateRef,
+      lastStateRef,
+      cachedRouteInfoValueRef,
+    })
+  }
+  currentStateRef.current = currentState
+
+  return (
+    <RouteInfoContext.Provider value={currentState ? lazilyCalculatedRouteInfo.current : undefined}>
+      {children}
+    </RouteInfoContext.Provider>
+  )
+}
+
+function makeLazilyCalculatedRouteInfo({
+  currentStateRef,
+  lastStateRef,
+  cachedRouteInfoValueRef,
+}: {
+  currentStateRef: React.MutableRefObject<ReturnType<typeof useStateForPath> | undefined>
+  lastStateRef: React.MutableRefObject<ReturnType<typeof useStateForPath> | undefined>
+  cachedRouteInfoValueRef: React.MutableRefObject<UrlObject | undefined>
+}) {
+  return new Proxy({} as any, {
+    get(_, p: keyof UrlObject) {
+      const state = currentStateRef.current
+      if (!state) {
+        // This should not happen because in the `RouteInfoContext.Provider` we
+        // should only provide lazilyCalculatedRouteInfo if state is not undefined.
+        throw new Error('[lazilyCalculatedRouteInfo] cannot get state')
+      }
+
+      // Update the cached route info if it's outdated
+      if (!cachedRouteInfoValueRef.current || lastStateRef.current !== state) {
+        cachedRouteInfoValueRef.current = getRouteInfo(state)
+        lastStateRef.current = state
+      }
+
+      return cachedRouteInfoValueRef.current![p]
+    },
+  })
+}

package/src/router/RouterStore.ts

@@ -0,0 +1,3 @@
+import type * as router from './router'
+
+export type RouterStore = typeof router

package/src/router/createRoute.ts

@@ -0,0 +1,39 @@
+import { useActiveParams, useParams, usePathname } from '../hooks'
+import type { OneRouter } from '../interfaces/router'
+
+export function createRoute<Path>() {
+  type Route = OneRouter.Route<Path>
+  type Params = Route['Params']
+
+  return {
+    useParams: () => useParams<Params>(),
+    useActiveParams: () => useActiveParams<Params>(),
+    createLoader: (a: Route['Loader']) => a,
+  }
+}
+
+const defaults = createRoute()
+
+const getProxy = () =>
+  new Proxy(
+    {},
+    {
+      get(target, key) {
+        if (Reflect.has(defaults, key)) {
+          return Reflect.get(defaults, key)
+        }
+
+        return getProxy()
+      },
+    }
+  )
+
+const postIdRoute = createRoute<'/feed/[id]'>()
+
+export const route = getProxy() as {
+  feed: {
+    $id: typeof postIdRoute
+  }
+  notifications: {}
+  profile: {}
+}

package/src/router/filterRootHTML.ts

@@ -0,0 +1,95 @@
+import { cloneElement, isValidElement } from 'react'
+
+type Props = Record<string, any>
+
+export type FoundRootHTML = {
+  children: React.ReactElement
+  htmlProps?: Props
+  bodyProps?: Props
+  head?: React.ReactElement
+}
+
+/**
+ * To enable custom <html> and other html-like stuff in the root _layout
+ * we are doing some fancy stuff, namely, just capturing the root layout return
+ * value and deep-mapping over it.
+ *
+ * On server, we filter it out and hoist it to the parent root html in createApp
+ *
+ * On client, we just filter it out completely as in One we don't hydrate html
+ */
+
+export function filterRootHTML(el: React.ReactNode): FoundRootHTML {
+  let htmlProps: Props | undefined
+  let bodyProps: Props | undefined
+  let head: React.ReactElement | undefined
+
+  function traverse(element: React.ReactNode) {
+    if (!element || typeof element !== 'object') {
+      return element
+    }
+    if (Array.isArray(element)) {
+      return element.map(traverse)
+    }
+
+    const reactElement = element as React.ReactElement
+    const { type, props } = reactElement
+
+    if (type === 'html') {
+      if (
+        reactElement.props &&
+        typeof reactElement.props === 'object' &&
+        'children' in reactElement.props
+      ) {
+        const { children, ...restProps } = reactElement.props
+        htmlProps = restProps
+        return traverse(children as React.ReactNode)
+      }
+      return null
+    }
+
+    if (type === 'head') {
+      head = reactElement
+      return null
+    }
+
+    if (type === 'body') {
+      if (
+        reactElement.props &&
+        typeof reactElement.props === 'object' &&
+        'children' in reactElement.props
+      ) {
+        const { children, ...restProps } = reactElement.props
+        bodyProps = restProps
+        return children as React.ReactNode
+      }
+      return null
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      if (
+        isValidElement(element) &&
+        typeof element.type === 'string' &&
+        element.type.toLowerCase() === element.type
+      ) {
+        // filter out things like <meta /> etc on native
+        // because it could just be thown in <html> or a fragment to be hoisted on web
+        return null
+      }
+    }
+
+    return element
+  }
+
+  const children =
+    traverse(el) ||
+    // if none found, we assume they aren't returning any html so just pass it on
+    el
+
+  return {
+    children,
+    htmlProps,
+    bodyProps,
+    head,
+  }
+}