one 1.1.388 → 1.1.390

package/src/layouts/withLayoutContext.tsx

@@ -1,10 +1,10 @@
 import type { EventMapBase, NavigationState } from '@react-navigation/native'
 import React from 'react'
-
-import { useContextKey } from '../Route'
+import { useContextKey } from '../router/Route'
 import type { PickPartial } from '../types'
-import { useSortedScreens, type ScreenProps } from '../useScreens'
+import { useSortedScreens, type ScreenProps } from '../router/useScreens'
 import { Screen } from '../views/Screen'
+import { withStaticProperties } from '../utils/withStaticProperties'
 
 export function useFilterScreenChildren(
   children: React.ReactNode,
@@ -19,6 +19,7 @@ export function useFilterScreenChildren(
 ) {
   return React.useMemo(() => {
     const customChildren: any[] = []
+
     const screens = React.Children.map(children, (child) => {
       if (React.isValidElement(child) && child && child.type === Screen) {
         if (!child.props.name) {
@@ -43,7 +44,7 @@ export function useFilterScreenChildren(
           `Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app${contextKey}/_layout"`
         )
       }
-    })
+    })?.filter(Boolean)
 
     // Add an assertion for development
     if (process.env.NODE_ENV !== 'production') {
@@ -73,23 +74,19 @@ export function withLayoutContext<
     options: ScreenProps<TOptions, State, EventMap>[]
   ) => ScreenProps<TOptions, State, EventMap>[],
   options?: { props: any }
-): React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<PickPartial<React.ComponentProps<T>, 'children'>> &
-    React.RefAttributes<unknown>
-> & {
-  Screen: (props: ScreenProps<TOptions, State, EventMap>) => null
-} {
-  const Navigator = React.forwardRef<unknown, React.ComponentProps<T>>(
-    ({ children: userDefinedChildren, ...props }, ref) => {
+) {
+  return withStaticProperties(
+    React.forwardRef<unknown, PickPartial<React.ComponentProps<T>, 'children'>>((propsIn, ref) => {
+      const { children, ...props } = propsIn as React.ComponentProps<T>
       const contextKey = useContextKey()
-
-      const { screens } = useFilterScreenChildren(userDefinedChildren, {
+      const { screens } = useFilterScreenChildren(children, {
         contextKey,
       })
 
       const processed = processor ? processor(screens ?? []) : screens
-
-      const sorted = useSortedScreens(processed ?? [])
+      const sorted = useSortedScreens(processed ?? [], {
+        onlyMatching: true,
+      })
 
       // Prevent throwing an error when there are no screens.
       if (!sorted.length) {
@@ -101,11 +98,9 @@ export function withLayoutContext<
           {sorted}
         </Nav>
       )
+    }),
+    {
+      Screen,
     }
   )
-
-  // @ts-expect-error
-  Navigator.Screen = Screen
-  // @ts-expect-error
-  return Navigator
 }

package/src/link/useLinkTo.tsx

@@ -3,7 +3,7 @@ import { Platform, type GestureResponderEvent } from 'react-native'
 
 import { appendBaseUrl } from '../fork/getPathFromState'
 import { useOneRouter } from '../router/router'
-import { stripGroupSegmentsFromPath } from '../matchers'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
 
 function eventShouldPreventDefault(
   e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent

package/src/render.tsx

@@ -9,15 +9,14 @@ export function render(element: React.ReactNode) {
     globalThis['__vxrnVersion']++
     globalThis['__vxrnRoot'].render(element)
   } else {
-    // const deferLoad = requestAnimationFrame || setImmediate
-    // deferLoad(() => {
     startTransition(() => {
+      const rootElement = document as any
       if (globalThis['__vxrnIsSPA']) {
-        const root = createRoot(document.body)
+        const root = createRoot(rootElement)
         globalThis['__vxrnRoot'] = root
         root.render(element)
       } else {
-        globalThis['__vxrnRoot'] = hydrateRoot(document.body, element, {
+        globalThis['__vxrnRoot'] = hydrateRoot(rootElement, element, {
           onRecoverableError(...args) {
             console.groupCollapsed(
               `[one] Non-critical recoverable React error occurred, expand group to see details`
@@ -35,6 +34,5 @@ export function render(element: React.ReactNode) {
         })
       }
     })
-    // })
   }
 }

package/src/{Route.tsx → router/Route.tsx}

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, type ReactNode } from 'react'
 
 import { getContextKey } from './matchers'
-import type { ErrorBoundaryProps } from './views/Try'
-import type { One } from './vite/types'
+import type { ErrorBoundaryProps } from '../views/Try'
+import type { One } from '../vite/types'
 
 export type DynamicConvention = { name: string; deep: boolean; notFound?: boolean }
 

package/src/{createRoute.ts → router/createRoute.ts}

@@ -1,5 +1,5 @@
-import { useActiveParams, useParams, usePathname } from './hooks'
-import type { OneRouter } from './interfaces/router'
+import { useActiveParams, useParams, usePathname } from '../hooks'
+import type { OneRouter } from '../interfaces/router'
 
 export function createRoute<Path>() {
   type Route = OneRouter.Route<Path>

package/src/router/filterRootHTML.ts

@@ -0,0 +1,81 @@
+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: React.ReactElement | 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') {
+      const { children, ...restProps } = reactElement.props
+      htmlProps = restProps
+      return traverse(children)
+    }
+
+    if (type === 'head') {
+      head = reactElement
+      return null
+    }
+
+    if (type === 'body') {
+      const { children, ...restProps } = reactElement.props
+      bodyProps = restProps
+      return children
+    }
+
+    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,
+  }
+}

package/src/{getLinkingConfig.ts → router/getLinkingConfig.ts}

@@ -1,8 +1,13 @@
 import { getActionFromState, type LinkingOptions } from '@react-navigation/native'
 import type { RouteNode } from './Route'
-import type { State } from './fork/getPathFromState'
-import { getReactNavigationConfig, type Screen } from './getReactNavigationConfig'
-import { addEventListener, getInitialURL, getPathFromState, getStateFromPath } from './link/linking'
+import type { State } from '../fork/getPathFromState'
+import { getReactNavigationConfig, type Screen } from '../getReactNavigationConfig'
+import {
+  addEventListener,
+  getInitialURL,
+  getPathFromState,
+  getStateFromPath,
+} from '../link/linking'
 
 export function getNavigationConfig(
   routes: RouteNode,

package/src/{getRoutes.ts → router/getRoutes.ts}

@@ -1,4 +1,4 @@
-import { getDefaultRenderMode } from './config'
+import { getDefaultRenderMode } from '../config'
 import {
   matchArrayGroupName,
   matchDeepDynamicRouteName,
@@ -7,8 +7,8 @@ import {
   removeSupportedExtensions,
 } from './matchers'
 import type { DynamicConvention, RouteNode } from './Route'
-import { getPageExport } from './utils/getPageExport'
-import type { One } from './vite/types'
+import { getPageExport } from '../utils/getPageExport'
+import type { One } from '../vite/types'
 // import { Unmatched } from './views/Unmatched'
 
 export type Options = {
@@ -242,7 +242,7 @@ function getDirectoryTree(contextModule: One.RouteContext, options: Options) {
       {
         type: 'layout',
         loadRoute: () => ({
-          default: (require('./views/Navigator') as typeof import('./views/Navigator'))
+          default: (require('../views/Navigator') as typeof import('../views/Navigator'))
             .DefaultNavigator,
         }),
         // Generate a fake file name for the directory
@@ -481,7 +481,7 @@ function appendSitemapRoute(directory: DirectoryNode) {
       {
         loadRoute() {
           // console.warn(`Loading sitemap`)
-          // const { Sitemap, getNavOptions } = require('./views/Sitemap')
+          // const { Sitemap, getNavOptions } = require('../views/Sitemap')
           // return { default: Sitemap, getNavOptions }
           return { default: () => null, getNavOptions: () => {} }
         },

package/src/{imperative-api.ts → router/imperative-api.ts}

@@ -1,5 +1,5 @@
-import * as store from './router/router'
-import type { OneRouter } from './interfaces/router'
+import * as store from './router'
+import type { OneRouter } from '../interfaces/router'
 
 export const router: OneRouter.Router = {
   navigate: store.navigate,

package/src/router/router.ts

@@ -8,19 +8,19 @@ import * as Linking from 'expo-linking'
 import { nanoid } from 'nanoid/non-secure'
 import { Fragment, startTransition, useSyncExternalStore, type ComponentType } from 'react'
 import { Platform } from 'react-native'
-import type { RouteNode } from '../Route'
-import { getLoaderPath, getPreloadPath } from '../cleanUrl'
+import type { RouteNode } from './Route'
+import { getLoaderPath, getPreloadPath } from '../utils/cleanUrl'
 import type { State } from '../fork/getPathFromState'
 import { deepEqual, getPathDataFromState } from '../fork/getPathFromState'
 import { stripBaseUrl } from '../fork/getStateFromPath'
-import { getLinkingConfig, type OneLinkingOptions } from '../getLinkingConfig'
-import { getRoutes } from '../getRoutes'
+import { getLinkingConfig, type OneLinkingOptions } from './getLinkingConfig'
+import { getRoutes } from './getRoutes'
 import type { OneRouter } from '../interfaces/router'
 import { resolveHref } from '../link/href'
 import { resolve } from '../link/path'
-import { matchDynamicName } from '../matchers'
-import { sortRoutes } from '../sortRoutes'
-import { getQualifiedRouteComponent } from '../useScreens'
+import { matchDynamicName } from './matchers'
+import { sortRoutes } from './sortRoutes'
+import { getQualifiedRouteComponent } from './useScreens'
 import { assertIsReady } from '../utils/assertIsReady'
 import { dynamicImport } from '../utils/dynamicImport'
 import { removeSearch } from '../utils/removeSearch'

package/src/{useScreens.tsx → router/useScreens.tsx}

@@ -1,4 +1,5 @@
 import { createNavigatorFactory } from '@react-navigation/core'
+import { SafeAreaProviderCompat } from '@react-navigation/elements'
 import type {
   EventMapBase,
   NavigationState,
@@ -6,7 +7,15 @@ import type {
   RouteProp,
   ScreenListeners,
 } from '@react-navigation/native'
-import React, { Suspense, useEffect } from 'react'
+import React, { forwardRef, Suspense, useEffect } from 'react'
+import { getPageExport } from '../utils/getPageExport'
+import { getServerContext, ServerContextScript } from '../utils/serverContext'
+import { useConstant } from '../utils/useConstant'
+import { EmptyRoute } from '../views/EmptyRoute'
+import { RootErrorBoundary } from '../views/RootErrorBoundary'
+import { Try } from '../views/Try'
+import { DevHead } from '../vite/DevHead'
+import { filterRootHTML } from './filterRootHTML'
 import {
   Route,
   useRouteNode,
@@ -15,10 +24,6 @@ import {
   type RouteNode,
 } from './Route'
 import { sortRoutesWithInitial } from './sortRoutes'
-import { getPageExport } from './utils/getPageExport'
-import { EmptyRoute } from './views/EmptyRoute'
-import { RootErrorBoundary } from './views/RootErrorBoundary'
-import { Try } from './views/Try'
 
 // `@react-navigation/core` does not expose the Screen or Group components directly, so we have to
 // do this hack.
@@ -52,13 +57,15 @@ export type ScreenProps<
 function getSortedChildren(
   children: RouteNode[],
   order?: ScreenProps[],
-  initialRouteName?: string
+  initialRouteName?: string,
+  options?: { onlyMatching?: boolean }
 ): { route: RouteNode; props: Partial<ScreenProps> }[] {
   if (!order?.length) {
     return children
       .sort(sortRoutesWithInitial(initialRouteName))
       .map((route) => ({ route, props: {} }))
   }
+
   const entries = [...children]
 
   const ordered = order
@@ -98,9 +105,13 @@ function getSortedChildren(
   }[]
 
   // Add any remaining children
-  ordered.push(
-    ...entries.sort(sortRoutesWithInitial(initialRouteName)).map((route) => ({ route, props: {} }))
-  )
+  if (!options?.onlyMatching) {
+    ordered.push(
+      ...entries
+        .sort(sortRoutesWithInitial(initialRouteName))
+        .map((route) => ({ route, props: {} }))
+    )
+  }
 
   return ordered
 }
@@ -108,12 +119,15 @@ function getSortedChildren(
 /**
  * @returns React Navigation screens sorted by the `route` property.
  */
-export function useSortedScreens(order: ScreenProps[]): React.ReactNode[] {
+export function useSortedScreens(
+  order: ScreenProps[],
+  options?: { onlyMatching?: boolean }
+): React.ReactNode[] {
   const node = useRouteNode()
 
   const sortedScreens = React.useMemo(() => {
     const sorted = node?.children?.length
-      ? getSortedChildren(node.children, order, node.initialRouteName)
+      ? getSortedChildren(node.children, order, node.initialRouteName, options)
       : []
 
     return sorted.map((value) => routeToScreen(value.route, value.props))
@@ -154,52 +168,63 @@ export function getQualifiedRouteComponent(value: RouteNode) {
     return qualifiedStore.get(value)!
   }
 
-  let ScreenComponent: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>
-
-  // if (One_ROUTER_IMPORT_MODE === 'lazy') {
-  //   ScreenComponent = React.forwardRef((props, ref) => {
-  //     // for native avoid suspense for now
-  //     const [loaded, setLoaded] = useState<any>(null)
-
-  //     useEffect(() => {
-  //       try {
-  //         const found = value.loadRoute()
-  //         if (found) {
-  //           setLoaded(found)
-  //         }
-  //       } catch (err) {
-  //         if (err instanceof Promise) {
-  //           err
-  //             .then((res) => {
-  //               setLoaded(res)
-  //             })
-  //             .catch((err) => {
-  //               console.error(`Error loading route`, err)
-  //             })
-  //         } else {
-  //           setLoaded(err as any)
-  //         }
-  //       }
-  //     }, [])
-
-  //     if (loaded) {
-  //       const Component = getPageExport(fromImport(loaded)) as React.ComponentType<any>
-  //       return (
-  //         // <Suspense fallback={null}>
-  //         <Component {...props} ref={ref} />
-  //         // </Suspense>
-  //       )
-  //     }
-
-  //     return null
-  //   })
-  // } else {
+  let ScreenComponent: React.ForwardRefExoticComponent<{ segment: string; key?: string }>
+
   ScreenComponent = React.forwardRef((props, ref) => {
     const res = value.loadRoute()
-    const Component = getPageExport(fromImport(res)) as React.ComponentType<any>
+    const Component = useConstant(() => {
+      const BaseComponent = getPageExport(fromImport(res)) as React.ComponentType<any>
+      const serverContext = getServerContext()
+
+      // root layout do special html handling only
+      if (props.segment === '') {
+        return forwardRef((props, ref) => {
+          // @ts-expect-error
+          const out = BaseComponent(props, ref)
+          const { children, bodyProps, head, htmlProps } = filterRootHTML(out)
+          const { children: headChildren, ...headProps } = head?.props || {}
+
+          if (process.env.TAMAGUI_TARGET === 'native') {
+            // on native we just ignore all html/body/head
+            return children
+          }
+
+          const contents = (
+            <>
+              <head key="head" {...headProps}>
+                <DevHead />
+                <script
+                  dangerouslySetInnerHTML={{
+                    __html: `globalThis['global'] = globalThis`,
+                  }}
+                />
+                {serverContext?.css?.map((file) => {
+                  return <link key={file} rel="stylesheet" href={file} />
+                })}
+                <ServerContextScript />
+                {headChildren}
+              </head>
+              <body key="body" suppressHydrationWarning {...bodyProps}>
+                <SafeAreaProviderCompat>{children}</SafeAreaProviderCompat>
+              </body>
+            </>
+          )
+
+          return (
+            // tamagui and libraries can add className on hydration to have ssr safe styling
+            // so supress hydration warnings here
+            <html suppressHydrationWarning lang="en-US" {...htmlProps}>
+              {contents}
+            </html>
+          )
+        })
+      }
+
+      return BaseComponent
+    })
 
     if (process.env.NODE_ENV === 'development' && process.env.DEBUG === 'one') {
-      console.groupCollapsed(`Render ${props.key}`)
+      console.groupCollapsed(`Render ${props.key} ${props.segment}`)
       console.info(`res`, res)
       console.info(`value`, value)
       console.info(`fromImport`, fromImport(res))
@@ -213,7 +238,6 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       // </Suspense>
     )
   })
-  // }
 
   const wrapSuspense = (children: any) => {
     if (process.env.TAMAGUI_TARGET === 'native') {

package/src/{useViteRoutes.tsx → router/useViteRoutes.tsx}

@@ -1,5 +1,5 @@
-import type { GlobbedRouteImports } from './types'
-import type { One } from './vite/types'
+import type { GlobbedRouteImports } from '../types'
+import type { One } from '../vite/types'
 
 // essentially a development helper
 

package/src/server/createRoutesManifest.ts

@@ -1,9 +1,9 @@
-import { type Options, getRoutes } from '../getRoutes'
+import { type Options, getRoutes } from '../router/getRoutes'
 import { getServerManifest } from './getServerManifest'
-import type { RouteNode } from '../Route'
+import type { RouteNode } from '../router/Route'
 import type { One } from '../vite/types'
 
-export { type Options } from '../getRoutes'
+export { type Options } from '../router/getRoutes'
 
 export type RouteInfo<TRegex = string> = {
   file: string

package/src/server/getServerManifest.ts

@@ -8,9 +8,9 @@
  *
  * Based on https://github.com/vercel/next.js/blob/1df2686bc9964f1a86c444701fa5cbf178669833/packages/next/src/shared/lib/router/utils/route-regex.ts
  */
-import type { RouteNode } from '../Route'
-import { getContextKey, matchGroupName } from '../matchers'
-import { sortRoutes } from '../sortRoutes'
+import type { RouteNode } from '../router/Route'
+import { getContextKey, matchGroupName } from '../router/matchers'
+import { sortRoutes } from '../router/sortRoutes'
 import type { One } from '../vite/types'
 
 // TODO: Share these types across cli, server, router, etc.

package/src/server/oneServe.ts

@@ -2,7 +2,7 @@ import type { Hono, MiddlewareHandler } from 'hono'
 import type { BlankEnv } from 'hono/types'
 import { extname, join } from 'node:path'
 import { getServerEntry } from 'vxrn/serve'
-import { getPathFromLoaderPath } from '../cleanUrl'
+import { getPathFromLoaderPath } from '../utils/cleanUrl'
 import { LOADER_JS_POSTFIX_UNCACHED } from '../constants'
 import { compileManifest, getURLfromRequestURL, type RequestHandlers } from '../createHandleRequest'
 import type { RenderAppProps } from '../types'

package/src/typed-routes/generateRouteTypes.ts

@@ -1,7 +1,7 @@
 import FSExtra from 'fs-extra'
 import { writeFile } from 'node:fs/promises'
 import { dirname } from 'node:path'
-import { globbedRoutesToRouteContext } from '../useViteRoutes'
+import { globbedRoutesToRouteContext } from '../router/useViteRoutes'
 import { globDir } from '../utils/globDir'
 import { getTypedRoutesDeclarationFile } from './getTypedRoutesDeclarationFile'
 

package/src/typed-routes/getTypedRoutesDeclarationFile.ts

@@ -1,6 +1,6 @@
-import { getRoutes } from '../getRoutes'
-import { isTypedRoute, removeSupportedExtensions } from '../matchers'
-import type { RouteNode } from '../Route'
+import { getRoutes } from '../router/getRoutes'
+import { isTypedRoute, removeSupportedExtensions } from '../router/matchers'
+import type { RouteNode } from '../router/Route'
 import type { One } from '../vite/types'
 
 // /[...param1]/ - Match [...param1]

package/src/useLoader.ts

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect, useRef } from 'react'
-import { getLoaderPath } from './cleanUrl'
+import { getLoaderPath } from './utils/cleanUrl'
 import { useActiveParams, useParams } from './hooks'
 import { resolveHref } from './link/href'
-import { useRouteNode } from './Route'
+import { useRouteNode } from './router/Route'
 import { preloadingLoader } from './router/router'
 import type { LoaderProps } from './types'
 import { dynamicImport } from './utils/dynamicImport'

package/src/{cleanUrl.ts → utils/cleanUrl.ts}

@@ -3,9 +3,9 @@ import {
   LOADER_JS_POSTFIX,
   LOADER_JS_POSTFIX_REGEX,
   PRELOAD_JS_POSTFIX,
-} from './constants'
-import { getURL } from './getURL'
-import { removeSearch } from './utils/removeSearch'
+} from '../constants'
+import { getURL } from '../getURL'
+import { removeSearch } from './removeSearch'
 
 function cleanUrl(path: string) {
   return (

package/src/utils/redirect.ts

@@ -1,5 +1,5 @@
 import { getURL } from '../getURL'
-import { router } from '../imperative-api'
+import { router } from '../router/imperative-api'
 
 export const redirect = (path: string, status?: number) => {
   if (process.env.VITE_ENVIRONMENT === 'client') {

package/src/utils/serverContext.tsx

@@ -0,0 +1,52 @@
+type ServerContext = {
+  css?: string[]
+  postRenderData?: any
+  loaderData?: any
+  loaderProps?: any
+  mode?: 'spa' | 'ssg' | 'ssr'
+}
+
+type MaybeServerContext = null | ServerContext
+
+export const SERVER_CONTEXT_POST_RENDER_STRING = `_one_post_render_data_`
+const SERVER_CONTEXT_KEY = '__one_server_context__'
+const isClient = typeof document !== 'undefined'
+
+let serverContext: MaybeServerContext = globalThis[SERVER_CONTEXT_KEY] || null
+
+export function setServerContext(c: ServerContext) {
+  if (isClient) {
+    serverContext ||= {
+      postRenderData: SERVER_CONTEXT_POST_RENDER_STRING,
+    }
+    Object.assign(serverContext, c)
+  } else {
+    globalThis[SERVER_CONTEXT_KEY] = c
+  }
+}
+
+export function getServerContext() {
+  if (isClient) {
+    return serverContext
+  }
+  return globalThis[SERVER_CONTEXT_KEY] as MaybeServerContext
+}
+
+export function ServerContextScript() {
+  const context = getServerContext()
+  if (!context) {
+    throw new Error(`no server context, internal one bug`)
+  }
+  return (
+    <script
+      async
+      // @ts-ignore
+      href={SERVER_CONTEXT_KEY}
+      dangerouslySetInnerHTML={{
+        __html: `
+            globalThis["${SERVER_CONTEXT_KEY}"] = ${JSON.stringify(context)};
+        `,
+      }}
+    />
+  )
+}