one 1.21.7 → 1.21.8

package/src/router/router.ts

@@ -75,9 +75,8 @@ export { getSafeWindowPathname } from './path'
 export let routeNode: RouteNode | null = null
 export let rootComponent: ComponentType
 
-// Global registry for protected routes
-// Key: contextKey (e.g., '/protected-test'), Value: Set of protected route names
-const protectedRouteRegistry = new Map<string, Set<string>>()
+// key: navigator context, value: guarded route names and their optional redirect targets.
+const protectedRouteRegistry = new Map<string, Map<string, OneRouter.Href | undefined>>()
 
 /**
  * Register protected routes for a navigator context.
@@ -85,12 +84,12 @@ const protectedRouteRegistry = new Map<string, Set<string>>()
  */
 export function registerProtectedRoutes(
   contextKey: string,
-  protectedScreens: Set<string>
+  guardedRedirects: Map<string, OneRouter.Href | undefined>
 ) {
-  if (protectedScreens.size === 0) {
+  if (guardedRedirects.size === 0) {
     protectedRouteRegistry.delete(contextKey)
   } else {
-    protectedRouteRegistry.set(contextKey, protectedScreens)
+    protectedRouteRegistry.set(contextKey, guardedRedirects)
   }
 }
 
@@ -106,26 +105,28 @@ export function unregisterProtectedRoutes(contextKey: string) {
  * Check if a route path is protected and should be blocked.
  * Returns true if the route is protected.
  */
-export function isRouteProtected(href: string): boolean {
-  // Normalize the href (remove leading/trailing slashes)
-  const normalizedHref = href.replace(/^\/+|\/+$/g, '')
+function getProtectedRedirect(href: string): OneRouter.Href | undefined | false {
+  const normalizedHref = extractPathnameFromHref(href).replace(/^\/+|\/+$/g, '')
 
-  // Check each navigator context to see if this route is protected
-  for (const [contextKey, protectedScreens] of protectedRouteRegistry) {
+  for (const [contextKey, guardedRedirects] of protectedRouteRegistry) {
     const normalizedContextKey = contextKey.replace(/^\/+|\/+$/g, '')
 
-    // Check if this href is under this context
-    if (normalizedHref.startsWith(normalizedContextKey)) {
-      // Get the route name relative to this context
+    if (
+      !normalizedContextKey ||
+      normalizedHref === normalizedContextKey ||
+      normalizedHref.startsWith(`${normalizedContextKey}/`)
+    ) {
       const relativePath = normalizedHref
         .slice(normalizedContextKey.length)
         .replace(/^\//, '')
       const routeName = relativePath.split('/')[0] || 'index'
-
-      // normalize /index suffix so e.g. "otp/[flow]" matches "otp/[flow]/index"
       const normalizedRouteName = routeName.replace(/\/index$/, '')
-      if (protectedScreens.has(routeName) || protectedScreens.has(normalizedRouteName)) {
-        return true
+
+      if (guardedRedirects.has(routeName)) {
+        return guardedRedirects.get(routeName)
+      }
+      if (guardedRedirects.has(normalizedRouteName)) {
+        return guardedRedirects.get(normalizedRouteName)
       }
     }
   }
@@ -133,6 +134,30 @@ export function isRouteProtected(href: string): boolean {
   return false
 }
 
+/** resolve a protected href to its allowed redirect target. */
+export function resolveProtectedHref(href: string): string | undefined {
+  let target = href
+  const visited = new Set<string>()
+
+  while (!visited.has(target)) {
+    visited.add(target)
+    const redirectTo = getProtectedRedirect(target)
+    if (redirectTo === false) {
+      return target
+    }
+    if (redirectTo === undefined) {
+      return undefined
+    }
+    target = resolveHref(redirectTo)
+  }
+
+  return undefined
+}
+
+export function isRouteProtected(href: string): boolean {
+  return getProtectedRedirect(href) !== false
+}
+
 export let hasAttemptedToHideSplash = false
 export let initialState: OneRouter.ResultState | undefined
 export let rootState: OneRouter.ResultState | undefined
@@ -1077,10 +1102,13 @@ export async function linkTo(
     return
   }
 
-  // Check if the route is protected and should be blocked
-  if (isRouteProtected(href)) {
+  const protectedHref = resolveProtectedHref(href)
+  if (!protectedHref) {
     return
   }
+  if (protectedHref !== href) {
+    return linkTo(protectedHref, 'REPLACE', options)
+  }
 
   // Check for intercepting routes (parallel routes with @slot)
   // This enables modal patterns where soft nav shows modal, hard nav shows full page

package/src/router/useScreens.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import TestRenderer, { act } from 'react-test-renderer'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { LoadedRoute, RouteNode } from './Route'
+import { getQualifiedRouteComponent } from './useScreens'
+
+type FallbackProps = {
+  route: string
+  params: Record<string, string | string[]>
+}
+
+const pendingRoute = new Promise<void>(() => {})
+const previousTarget = process.env.TAMAGUI_TARGET
+const previousSuspendRoutesNative = process.env.ONE_SUSPEND_ROUTES_NATIVE
+const previousDisableSuspense = (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+
+function createRouteNode(
+  type: RouteNode['type'],
+  route: string,
+  contextKey: string,
+  loadRoute: () => Partial<LoadedRoute>
+): RouteNode {
+  return {
+    type,
+    route,
+    contextKey,
+    loadRoute,
+    children: [],
+    dynamic: null,
+  }
+}
+
+function SuspendingRoute(): React.ReactNode {
+  throw pendingRoute
+}
+
+beforeEach(() => {
+  process.env.TAMAGUI_TARGET = 'native'
+  delete process.env.ONE_SUSPEND_ROUTES_NATIVE
+  delete (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+})
+
+afterEach(() => {
+  if (previousTarget === undefined) {
+    delete process.env.TAMAGUI_TARGET
+  } else {
+    process.env.TAMAGUI_TARGET = previousTarget
+  }
+  if (previousSuspendRoutesNative === undefined) {
+    delete process.env.ONE_SUSPEND_ROUTES_NATIVE
+  } else {
+    process.env.ONE_SUSPEND_ROUTES_NATIVE = previousSuspendRoutesNative
+  }
+  if (previousDisableSuspense === undefined) {
+    delete (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__
+  } else {
+    ;(globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__ = previousDisableSuspense
+  }
+})
+
+describe('route SuspenseFallback', () => {
+  it('inherits the layout fallback and passes the suspended route details', async () => {
+    const childNode = createRouteNode(
+      'spa',
+      'profile/[id]',
+      './(app)/profile/[id].tsx',
+      () => {
+        throw pendingRoute
+      }
+    )
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+    const layoutNode = createRouteNode('layout', '(app)', './(app)/_layout.tsx', () => ({
+      default: () => <ChildRoute route={{ params: { id: '123' } }} />,
+      SuspenseFallback: ({ route, params }: FallbackProps) => (
+        <div data-fallback="layout">
+          {route}:{params.id}
+        </div>
+      ),
+    }))
+    const LayoutRoute = getQualifiedRouteComponent(layoutNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<LayoutRoute />)
+    })
+
+    expect(renderer!.root.findByProps({ 'data-fallback': 'layout' }).children).toEqual([
+      './(app)/profile/[id].tsx',
+      ':',
+      '123',
+    ])
+  })
+
+  it('uses the nearest layout fallback', async () => {
+    const childNode = createRouteNode('spa', 'profile', './(app)/profile.tsx', () => ({
+      default: SuspendingRoute,
+    }))
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+    const nestedLayoutNode = createRouteNode(
+      'layout',
+      '(app)',
+      './(app)/_layout.tsx',
+      () => ({
+        default: () => <ChildRoute />,
+        SuspenseFallback: () => <div data-fallback="nested" />,
+      })
+    )
+    const NestedLayoutRoute = getQualifiedRouteComponent(nestedLayoutNode)
+    const rootLayoutNode = createRouteNode('layout', '', './_layout.tsx', () => ({
+      default: () => <NestedLayoutRoute />,
+      SuspenseFallback: () => <div data-fallback="root" />,
+    }))
+    const RootLayoutRoute = getQualifiedRouteComponent(rootLayoutNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<RootLayoutRoute />)
+    })
+
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'nested' })).toHaveLength(1)
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'root' })).toHaveLength(0)
+  })
+
+  it('ignores a SuspenseFallback exported from a leaf route', async () => {
+    const childNode = createRouteNode('spa', 'profile', './profile.tsx', () => ({
+      default: SuspendingRoute,
+      SuspenseFallback: () => <div data-fallback="leaf" />,
+    }))
+    const ChildRoute = getQualifiedRouteComponent(childNode)
+
+    let renderer: TestRenderer.ReactTestRenderer
+    await act(async () => {
+      renderer = TestRenderer.create(<ChildRoute />)
+    })
+
+    expect(renderer!.root.findAllByProps({ 'data-fallback': 'leaf' })).toHaveLength(0)
+    expect(renderer!.toJSON()).toBeNull()
+  })
+})

package/src/router/useScreens.tsx

@@ -22,11 +22,14 @@ import {
   type DynamicConvention,
   type LoadedRoute,
   Route,
+  RouteParamsContext,
   type RouteNode,
+  SuspenseFallbackContext,
   useRouteNode,
 } from './Route'
 import { SpaShellContext } from './SpaShellContext'
 import { NamedSlot } from '../views/Navigator'
+import type { SuspenseFallbackProps } from '../views/SuspenseFallback'
 import { sortRoutesWithInitial } from './sortRoutes'
 import { getRouteHmrEpoch, subscribeRouteHmr } from './routeHmr'
 import { getClientMatchesSnapshot } from '../useMatches'
@@ -337,7 +340,7 @@ export function useSortedScreens(
   return sortedScreens
 }
 
-function fromImport({ ErrorBoundary, ...component }: LoadedRoute) {
+function fromImport({ ErrorBoundary, SuspenseFallback, ...component }: LoadedRoute) {
   if (ErrorBoundary) {
     return {
       default: React.forwardRef((props: any, ref: any) => {
@@ -347,16 +350,30 @@ function fromImport({ ErrorBoundary, ...component }: LoadedRoute) {
         })
         return <Try catch={ErrorBoundary}>{children}</Try>
       }),
+      SuspenseFallback,
     }
   }
   if (process.env.NODE_ENV !== 'production') {
     const exported = getPageExport(component)
     if (exported && typeof exported === 'object' && Object.keys(exported).length === 0) {
-      return { default: EmptyRoute }
+      return { default: EmptyRoute, SuspenseFallback }
     }
   }
 
-  return { default: getPageExport(component) }
+  return { default: getPageExport(component), SuspenseFallback }
+}
+
+function RouteSuspenseFallback({
+  component: Component,
+  route,
+}: {
+  component?: React.ComponentType<SuspenseFallbackProps>
+  route: string
+}) {
+  const params = useContext(RouteParamsContext)
+  return Component ? (
+    <Component route={route} params={(params ?? {}) as SuspenseFallbackProps['params']} />
+  ) : null
 }
 
 // TODO: Maybe there's a more React-y way to do this?
@@ -412,6 +429,7 @@ export function getQualifiedRouteComponent(value: RouteNode) {
     // content after hydration.
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isSpaShell = useContext(SpaShellContext)
+    const InheritedSuspenseFallback = useContext(SuspenseFallbackContext)
     const matches = getRouteMatchesForProps()
 
     if (isSpaShell && props.segment !== '') {
@@ -423,8 +441,10 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       }
     }
 
-    const res = value.loadRoute()
-    const Component = getPageExport(fromImport(res)) as React.ComponentType<any>
+    const res = fromImport(value.loadRoute())
+    const Component = getPageExport(res) as React.ComponentType<any>
+    const LayoutSuspenseFallback =
+      value.type === 'layout' ? res.SuspenseFallback : undefined
     const match =
       matches.find((match) => match.routeId === value.contextKey) ||
       (!value.children?.length ? matches[matches.length - 1] : undefined)
@@ -450,25 +470,48 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       }
     }
 
+    let rendered: React.ReactNode
+
     // Root layout with HTML support - use RootLayoutRenderer for proper HMR tracking
     if (props.segment === '') {
-      return (
+      rendered = (
         <RootLayoutRenderer
           LayoutComponent={Component}
           layoutProps={{ ...props, ...slotProps, ...loaderDataProps }}
           forwardedRef={ref}
         />
       )
+    } else {
+      rendered = (
+        <RouteErrorBoundary routeName={value.route}>
+          <Component {...props} {...slotProps} {...loaderDataProps} ref={ref} />
+        </RouteErrorBoundary>
+      )
     }
 
+    if (value.type !== 'layout') {
+      return rendered
+    }
+
+    const providedSuspenseFallback = LayoutSuspenseFallback ?? InheritedSuspenseFallback
+
     return (
-      <RouteErrorBoundary routeName={value.route}>
-        <Component {...props} {...slotProps} {...loaderDataProps} ref={ref} />
-      </RouteErrorBoundary>
+      <SuspenseFallbackContext.Provider value={providedSuspenseFallback}>
+        {LayoutSuspenseFallback
+          ? wrapSuspense(rendered, LayoutSuspenseFallback)
+          : rendered}
+      </SuspenseFallbackContext.Provider>
     )
   })
 
-  const wrapSuspense = (children: any) => {
+  const wrapSuspense = (
+    children: React.ReactNode,
+    SuspenseFallback?: React.ComponentType<SuspenseFallbackProps>
+  ) => {
+    const fallback = (
+      <RouteSuspenseFallback component={SuspenseFallback} route={value.contextKey} />
+    )
+
     if (process.env.TAMAGUI_TARGET === 'native') {
       // native opt-out: set native.suspendRoutes to false in your one() config
       // OR set globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__ = true at runtime
@@ -487,7 +530,7 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       ) {
         return children
       }
-      return <Suspense fallback={null}>{children}</Suspense>
+      return <Suspense fallback={fallback}>{children}</Suspense>
     }
 
     // web opt-in: set web.suspendRoutes to true in your one() config
@@ -497,7 +540,7 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       process.env.ONE_SUSPEND_ROUTES === '1' &&
       (globalThis as any).__ONE_DISABLE_SUSPENSE_ROUTES__ !== true
     ) {
-      return <Suspense fallback={null}>{children}</Suspense>
+      return <Suspense fallback={fallback}>{children}</Suspense>
     }
     return children
   }
@@ -515,6 +558,8 @@ export function getQualifiedRouteComponent(value: RouteNode) {
       }: any,
       ref: any
     ) => {
+      const InheritedSuspenseFallback = useContext(SuspenseFallbackContext)
+
       return (
         <Route route={route} node={value}>
           <>
@@ -527,7 +572,8 @@ export function getQualifiedRouteComponent(value: RouteNode) {
                   // the intention is to make it possible to deduce shared routes.
                   segment: value.route,
                 }}
-              />
+              />,
+              InheritedSuspenseFallback
             )}
           </>
         </Route>

package/src/views/Navigator.tsx

@@ -7,7 +7,10 @@ import {
 import { NavigationRouteContext } from '@react-navigation/core'
 import * as React from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { useFilterScreenChildren } from '../layouts/withLayoutContext'
+import {
+  useFilterScreenChildren,
+  useResolvedGuardedRedirects,
+} from '../layouts/withLayoutContext'
 import {
   findNearestNotFoundRoute,
   findRouteNodeByPath,
@@ -20,8 +23,12 @@ import {
   getSafeWindowPathname,
   initialPathname,
   lastIntendedPathname,
+  replace,
+  registerProtectedRoutes,
+  resolveProtectedHref,
+  routeInfo,
+  unregisterProtectedRoutes,
 } from '../router/router'
-import { registerProtectedRoutes, unregisterProtectedRoutes } from '../router/router'
 import { useSortedScreens, getQualifiedRouteComponent } from '../router/useScreens'
 import { Screen } from './Screen'
 
@@ -174,21 +181,34 @@ export function Navigator({
     screens,
     children: otherSlot,
     protectedScreens,
+    guardedRedirects,
   } = useFilterScreenChildren(children, {
     isCustomNavigator: true,
     contextKey,
   })
+  const resolvedGuardedRedirects = useResolvedGuardedRedirects(guardedRedirects)
 
   // Register protected routes globally so linkTo can block navigation to them
   // Register immediately (not just in effect) to catch navigation attempts during first render
-  registerProtectedRoutes(contextKey, protectedScreens)
+  registerProtectedRoutes(contextKey, resolvedGuardedRedirects)
+
+  const currentPathname = routeInfo?.pathname
+  const protectedHref = currentPathname
+    ? resolveProtectedHref(currentPathname)
+    : currentPathname
 
   React.useEffect(() => {
-    registerProtectedRoutes(contextKey, protectedScreens)
+    registerProtectedRoutes(contextKey, resolvedGuardedRedirects)
     return () => {
       unregisterProtectedRoutes(contextKey)
     }
-  }, [contextKey, protectedScreens])
+  }, [contextKey, resolvedGuardedRedirects])
+
+  React.useEffect(() => {
+    if (currentPathname && protectedHref && protectedHref !== currentPathname) {
+      replace(protectedHref)
+    }
+  }, [currentPathname, protectedHref])
 
   const sorted = useSortedScreens(screens ?? [], { protectedScreens })
 

package/src/views/Protected.tsx

@@ -5,6 +5,7 @@ import {
   type ReactNode,
   isValidElement,
 } from 'react'
+import type { OneRouter } from '../interfaces/router'
 
 // Get Group component directly from react-navigation core
 // (avoids pulling in @react-navigation/elements which has asset imports)
@@ -12,6 +13,8 @@ const { Group } = createNavigatorFactory({} as any)()
 
 export type ProtectedProps = {
   guard: boolean
+  /** where to redirect when `guard` is false. defaults to the navigator's first available route. */
+  redirectTo?: OneRouter.Href
   children?: ReactNode
 }
 

package/src/views/SuspenseFallback.ts

@@ -0,0 +1,7 @@
+/** Props passed to a layout's `SuspenseFallback` export. */
+export type SuspenseFallbackProps = {
+  /** The suspended route module's context key, such as `./profile/[id].tsx`. */
+  route: string
+  /** The suspended route's URL parameters. */
+  params: Record<string, string | string[]>
+}

package/src/vite/plugins/fileSystemRouterPlugin.test.ts

@@ -1,4 +1,5 @@
 import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { EventEmitter } from 'node:events'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -192,23 +193,31 @@ describe('createFileSystemRouterPlugin', () => {
 
     async function request(pathname: string) {
       const chunks: string[] = []
-      const req = {
+      const req = Object.assign(new EventEmitter(), {
+        aborted: false,
+        complete: true,
         originalUrl: pathname,
         url: pathname,
         headers: {
-          host: 'localhost',
+          ':authority': 'localhost',
+          ':method': 'GET',
         },
         method: 'GET',
-      }
-      const res = {
+      })
+      const res = Object.assign(new EventEmitter(), {
+        destroyed: false,
+        writableFinished: false,
         setHeader: vi.fn(),
         appendHeader: vi.fn(),
         writeHead: vi.fn(),
         write: vi.fn((chunk: string) => {
           chunks.push(chunk)
         }),
-        end: vi.fn(),
-      }
+        end: vi.fn(() => {
+          res.writableFinished = true
+          res.emit('finish')
+        }),
+      })
       const next = vi.fn((error?: unknown) => {
         if (error) {
           throw error

package/src/vite/plugins/fileSystemRouterPlugin.tsx

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import { Readable } from 'node:stream'
+import { TLSSocket } from 'node:tls'
 import { debounce } from 'perfect-debounce'
 import colors from 'picocolors'
 import type { Connect, Plugin, ViteDevServer } from 'vite'
@@ -746,10 +747,36 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
           // prevent browsers (safari) from caching stale html/js in dev
           res.setHeader('Cache-Control', 'no-store')
 
+          const abortController = new AbortController()
+          const cleanupAbortListeners = () => {
+            req.removeListener('aborted', abortRequest)
+            req.removeListener('close', abortIncompleteRequest)
+            res.removeListener('close', abortIncompleteResponse)
+            res.removeListener('finish', cleanupAbortListeners)
+          }
+          const abortRequest = () => {
+            cleanupAbortListeners()
+            abortController.abort()
+          }
+          const abortIncompleteRequest = () => {
+            if (req.aborted || !req.complete) abortRequest()
+          }
+          const abortIncompleteResponse = () => {
+            if (!res.writableFinished) {
+              abortRequest()
+              return
+            }
+            cleanupAbortListeners()
+          }
+          req.on('aborted', abortRequest)
+          req.on('close', abortIncompleteRequest)
+          res.on('close', abortIncompleteResponse)
+          res.on('finish', cleanupAbortListeners)
+
           try {
             const redirects = options.web?.redirects
             if (redirects) {
-              const url = new URL(req.url || '', `http://${req.headers.host}`)
+              const url = new URL(req.url || '', 'http://127.0.0.1')
               for (const redirect of redirects) {
                 const regexStr = `^${redirect.source.replace(/:\w+/g, '([^/]+)')}$`
                 const match = url.pathname.match(new RegExp(regexStr))
@@ -778,10 +805,11 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
             }
 
             const reply = await handleRequest.handler(
-              convertIncomingMessageToRequest(req)
+              convertIncomingMessageToRequest(req, abortController.signal)
             )
 
             if (!reply) {
+              cleanupAbortListeners()
               return next()
             }
 
@@ -822,7 +850,6 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
               }
 
               res.statusCode = reply.status
-              res.statusMessage = reply.statusText
 
               if (reply.body) {
                 if (reply.body.locked) {
@@ -831,7 +858,14 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
                   return
                 }
                 try {
-                  Readable.fromWeb(reply.body as any).pipe(res)
+                  const body = Readable.fromWeb(reply.body as any)
+                  body.on('error', (error) => {
+                    if (!abortController.signal.aborted) {
+                      console.warn('Error streaming reply body to response:', error)
+                    }
+                    if (!res.destroyed) res.destroy()
+                  })
+                  body.pipe(res)
                 } catch (err) {
                   console.warn('Error piping reply body to response:', err)
                   res.end()
@@ -854,6 +888,7 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
             res.end()
             return
           } catch (error) {
+            cleanupAbortListeners()
             console.error(`[one] routing error ${req.url}: ${error}`)
             // Forward the error to Vite
             next(error)
@@ -870,21 +905,30 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
   } satisfies Plugin
 }
 
-const convertIncomingMessageToRequest = (req: Connect.IncomingMessage): Request => {
+const convertIncomingMessageToRequest = (
+  req: Connect.IncomingMessage,
+  signal: AbortSignal
+): Request => {
   if (!req.originalUrl) {
     throw new Error(`Can't convert: originalUrl is missing`)
   }
 
-  const urlBase = `http://${req.headers.host}`
+  const protocol =
+    req.socket instanceof TLSSocket && req.socket.encrypted ? 'https' : 'http'
+  const host = `${req.headers['x-forwarded-host'] || req.headers.host || req.headers[':authority'] || '127.0.0.1'}`
+  const urlBase = `${protocol}://${host}`
   const urlString = req.originalUrl
   const url = new URL(urlString, urlBase)
 
   const headers = new Headers()
   for (const key in req.headers) {
-    if (req.headers[key]) {
+    if (!key.startsWith(':') && req.headers[key]) {
       headers.append(key, req.headers[key] as string)
     }
   }
+  if (!headers.has('host')) {
+    headers.set('host', host)
+  }
 
   const hasBody = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(req.method || '')
   const body = hasBody ? Readable.toWeb(req) : null
@@ -893,6 +937,7 @@ const convertIncomingMessageToRequest = (req: Connect.IncomingMessage): Request
     method: req.method,
     headers,
     body,
+    signal,
     // Required for streaming bodies in Node's experimental fetch:
     duplex: 'half',
   } as RequestInit & { duplex: 'half' })