one 1.1.4 → 1.1.269

package/src/createApp.tsx

@@ -0,0 +1,63 @@
+import { Root } from './Root'
+import { resolveClientLoader } from './clientLoaderResolver'
+import { render } from './render'
+import { renderToString } from './server-render'
+import type { RenderAppProps } from './types'
+
+export type CreateAppProps = { routes: Record<string, () => Promise<unknown>> }
+
+export function createApp(options: CreateAppProps) {
+  if (import.meta.env.SSR) {
+    return {
+      options,
+      render: async (props: RenderAppProps) => {
+        let html = await renderToString(<Root routes={options.routes} {...props} />, {
+          preloads: props.preloads,
+        })
+
+        // now we can grab and serialize in our zero queries
+        const serverData = globalThis['__vxrnServerData__']
+        if (serverData) {
+          const hasQueryData = Object.keys(serverData).length
+          if (hasQueryData) {
+            html = html.replace(`{ __vxrn__: 'post-render' }`, JSON.stringify(serverData))
+          }
+        }
+
+        //         // adds support for modulepreload scripts to browsers that dont support (safari and ff)
+        //         // https://guybedford.com/es-module-preloading-integrity#modulepreload-polyfill
+        //         html = html.replace(
+        //           '</body>',
+        //           `<script>
+        // const h="modulepreload",E=function(i){return"/"+i},a={},y=function(u,s,v){let c=Promise.resolve();if(s&&s.length>0){document.getElementsByTagName("link");const e=document.querySelector("meta[property=csp-nonce]"),t=(e==null?void 0:e.nonce)||(e==null?void 0:e.getAttribute("nonce"));c=Promise.allSettled(s.map(r=>{if(r=E(r),r in a)return;a[r]=!0;const o=r.endsWith(".css"),d=o?'[rel="stylesheet"]':"";if(document.querySelector('link[href="' + r + '"]' + d))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":h,o||(n.as="script"),n.crossOrigin="",n.href=r,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((f,m)=>{n.addEventListener("load",f),n.addEventListener("error",()=>m(new Error('Unable to preload CSS for ' + r)))})}))}function l(e){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return c.then(e=>{for(const t of e||[])t.status==="rejected"&&l(t.reason);return u().catch(l)})};
+        // y()
+        // </script>` + '</body>'
+        //         )
+
+        return html
+      },
+    }
+  }
+
+  // run their root layout before calling resolveClientLoader so they can register hook
+  const rootLayoutImport = options.routes['/app/_layout.tsx']?.()
+
+  return rootLayoutImport
+    .then(() => {
+      resolveClientLoader({
+        loaderData: globalThis['__vxrnLoaderData__'],
+        loaderServerData: globalThis['__vxrnLoaderServerData__'],
+        loaderProps: globalThis['__vxrnLoaderProps__'],
+      })
+        .then(() => {
+          // on client we just render
+          render(<Root isClient routes={options.routes} path={window.location.href} />)
+        })
+        .catch((err) => {
+          console.error(`Error running client loader resolver "onClientLoaderResolve":`, err)
+        })
+    })
+    .catch((err) => {
+      console.error(`Error importing root layout on client`, err)
+    })
+}

package/src/createHandleRequest.ts

@@ -0,0 +1,217 @@
+import type { RouteInfo } from './server/createRoutesManifest'
+import { isResponse } from './utils/isResponse'
+import { promiseWithResolvers } from './utils/promiseWithResolvers'
+import { getManifest } from './vite/getManifest'
+import type { One } from './vite/types'
+
+type RequestHandlerProps<RouteExtraProps extends Object = {}> = {
+  request: Request
+  route: RouteInfo<string> & RouteExtraProps
+  url: URL
+  loaderProps?: { path: string; params: Record<string, any> }
+}
+
+type RequestHandlerResponse = null | string | Response
+
+export function createHandleRequest(
+  options: One.PluginOptions,
+  handlers: {
+    handleSSR?: (props: RequestHandlerProps) => Promise<any>
+    handleLoader?: (props: RequestHandlerProps) => Promise<any>
+    handleAPI?: (props: RequestHandlerProps) => Promise<any>
+  }
+) {
+  if (import.meta.env) {
+    throw new Error(`No import.meta.env - Node 22 or greater required.`)
+  }
+
+  const manifest = getManifest()
+  if (!manifest) {
+    throw new Error(`No routes manifest`)
+  }
+
+  const apiRoutesMap: Record<string, RouteInfo & { compiledRegex: RegExp }> =
+    manifest.apiRoutes.reduce((acc, cur) => {
+      acc[cur.page] = { ...cur, compiledRegex: new RegExp(cur.namedRegex) }
+      return acc
+    }, {})
+
+  const apiRoutesList = Object.values(apiRoutesMap)
+
+  // its really common for people to hit refresh a couple times even on accident
+  // sending two ssr requests at once and causing slowdown.
+  // use this to avoid
+  const activeRequests = {}
+
+  // shouldn't be mapping back and forth...
+  const pageRoutes = manifest.pageRoutes.map((route) => ({
+    ...route,
+    workingRegex: new RegExp(route.namedRegex),
+  }))
+
+  return {
+    manifest,
+    handler: async function handleRequest(request: Request): Promise<RequestHandlerResponse> {
+      const urlString = request.url || ''
+      const url = new URL(
+        urlString || '',
+        request.headers.get('host') ? `http://${request.headers.get('host')}` : ''
+      )
+      const { pathname, search } = url
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (activeRequests[pathname]) {
+          return await activeRequests[pathname]
+        }
+      }
+
+      if (pathname === '/__vxrnhmr' || pathname.startsWith('/@')) {
+        return null
+      }
+
+      if (handlers.handleAPI) {
+        const apiRoute = apiRoutesList.find((route) => {
+          const regex = route.compiledRegex
+          return regex.test(pathname)
+        })
+
+        if (apiRoute) {
+          const params = getRouteParams(pathname, apiRoute)
+
+          try {
+            return await handlers.handleAPI({
+              request,
+              route: apiRoute,
+              url,
+              loaderProps: {
+                path: pathname,
+                params,
+              },
+            })
+          } catch (err) {
+            if (isResponse(err)) {
+              return err
+            }
+            throw err
+          }
+        }
+      }
+
+      if (request.method !== 'GET') {
+        return null
+      }
+
+      if (handlers.handleLoader) {
+        const isClientRequestingNewRoute = pathname.endsWith('_vxrn_loader.js')
+
+        if (isClientRequestingNewRoute) {
+          const originalUrl = pathname.replace('_vxrn_loader.js', '').replace(/^\/assets/, '')
+          const finalUrl = new URL(originalUrl, url.origin)
+
+          for (const route of pageRoutes) {
+            if (!route.workingRegex.test(finalUrl.pathname)) {
+              continue
+            }
+
+            const headers = new Headers()
+            headers.set('Content-Type', 'text/javascript')
+
+            try {
+              const loaderResponse = await handlers.handleLoader({
+                request,
+                route,
+                url,
+                loaderProps: {
+                  path: finalUrl.pathname,
+                  params: getLoaderParams(finalUrl, route),
+                },
+              })
+
+              return new Response(loaderResponse, {
+                headers,
+              })
+            } catch (err) {
+              // allow throwing a response in a loader
+              if (isResponse(err)) {
+                return err
+              }
+
+              throw err
+            }
+          }
+
+          if (process.env.NODE_ENV === 'development') {
+            console.error(`No matching route found!`, {
+              originalUrl,
+              routes: manifest.pageRoutes,
+            })
+          }
+
+          // error no match!
+
+          return Response.error()
+        }
+      }
+
+      if (handlers.handleSSR) {
+        const { promise, reject, resolve } = promiseWithResolvers()
+
+        // TODO timeout handler to clear activeRequests and log error
+        activeRequests[pathname] = promise
+
+        try {
+          for (const route of pageRoutes) {
+            if (!route.workingRegex.test(pathname)) {
+              continue
+            }
+
+            const ssrResponse = await handlers.handleSSR({
+              request,
+              route,
+              url,
+              loaderProps: {
+                path: pathname + search,
+                params: getLoaderParams(url, route),
+              },
+            })
+
+            resolve(ssrResponse)
+            return ssrResponse
+          }
+        } catch (err) {
+          reject(err)
+          throw err
+        } finally {
+          delete activeRequests[pathname]
+        }
+      }
+
+      return null
+    },
+  }
+}
+
+function getLoaderParams(
+  url: URL,
+  config: { workingRegex: RegExp; routeKeys: Record<string, string> }
+) {
+  const params: Record<string, string> = {}
+  const match = new RegExp(config.workingRegex).exec(url.pathname)
+  if (match?.groups) {
+    for (const [key, value] of Object.entries(match.groups)) {
+      const namedKey = config.routeKeys[key]
+      params[namedKey] = value as string
+    }
+  }
+  return params
+}
+
+// Add this helper function
+function getRouteParams(pathname: string, route: RouteInfo<string>) {
+  const regex = new RegExp(route.namedRegex)
+  const match = regex.exec(pathname)
+  if (!match) return {}
+  return Object.fromEntries(
+    Object.entries(route.routeKeys).map(([key, value]) => [value, match.groups?.[key]])
+  )
+}

package/src/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/fallbackViews/Sitemap.tsx

@@ -0,0 +1,243 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
+// import React from 'react'
+// import { Platform, ScrollView, StatusBar, useWindowDimensions } from 'react-native'
+// import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+// import { useOneRouter } from '../global-state/router-store'
+// import { router } from '../imperative-api'
+// import { Link } from '../link/Link'
+// import { matchDeepDynamicRouteName } from '../matchers'
+// import { RouteNode } from '../Route'
+
+const INDENT = 24
+
+export function getNavOptions(): NativeStackNavigationOptions {
+  return {
+    title: 'sitemap',
+    headerShown: false,
+    presentation: 'modal',
+    animation: 'default',
+    headerLargeTitle: false,
+    headerTitleStyle: {
+      color: 'white',
+    },
+    headerTintColor: 'white',
+    headerLargeTitleStyle: {
+      color: 'white',
+    },
+    headerStyle: {
+      backgroundColor: 'black',
+      // @ts-expect-error: mistyped
+      borderBottomColor: '#323232',
+    },
+  }
+}
+
+export function Sitemap() {
+  return <Text>sitemap!!!!!!!!!</Text>
+  //   const { top, bottom } = useSafeAreaInsets()
+  //   const { width } = useWindowDimensions()
+  //   return (
+  //     <View style={styles.container}>
+  //       <StatusBar barStyle="light-content" />
+  //       <View
+  //         style={[
+  //           styles.main,
+  //           {
+  //             minWidth: Math.min(960, width * 0.9),
+  //           },
+  //         ]}
+  //       >
+  //         <ScrollView
+  //           contentContainerStyle={[
+  //             styles.scroll,
+  //             {
+  //               paddingTop: top + 12,
+  //               paddingBottom: bottom + 12,
+  //             },
+  //           ]}
+  //           style={{ flex: 1 }}
+  //         >
+  //           <FileSystemView />
+  //         </ScrollView>
+  //       </View>
+  //     </View>
+  //   )
+  // }
+
+  // function FileSystemView() {
+  //   const routes = useOneRouter().getSortedRoutes()
+
+  //   return (
+  //     <>
+  //       {routes.map((child) => (
+  //         <View key={child.contextKey} style={styles.itemContainer}>
+  //           <FileItem route={child} />
+  //         </View>
+  //       ))}
+  //     </>
+  //   )
+  // }
+
+  // function FileItem({
+  //   route,
+  //   level = 0,
+  //   parents = [],
+  //   isInitial = false,
+  // }: {
+  //   route: RouteNode
+  //   level?: number
+  //   parents?: string[]
+  //   isInitial?: boolean
+  // }) {
+  //   const disabled = route.children.length > 0
+
+  //   const segments = React.useMemo(
+  //     () => [...parents, ...route.route.split('/')],
+  //     [parents, route.route]
+  //   )
+
+  //   const href = React.useMemo(() => {
+  //     return (
+  //       '/' +
+  //       segments
+  //         .map((v) => {
+  //           // add an extra layer of entropy to the url for deep dynamic routes
+  //           if (matchDeepDynamicRouteName(v)) {
+  //             return v + '/' + Date.now()
+  //           }
+  //           // index must be erased but groups can be preserved.
+  //           return v === 'index' ? '' : v
+  //         })
+  //         .filter(Boolean)
+  //         .join('/')
+  //     )
+  //   }, [segments, route.route])
+
+  //   const filename = React.useMemo(() => {
+  //     const segments = route.contextKey.split('/')
+  //     // join last two segments for layout routes
+  //     if (route.contextKey.match(/_layout\.[jt]sx?$/)) {
+  //       return segments[segments.length - 2] + '/' + segments[segments.length - 1]
+  //     }
+
+  //     const segmentCount = route.route.split('/').length
+
+  //     // Join the segment count in reverse order
+  //     // This presents files without layout routes as children with all relevant segments.
+  //     return segments.slice(-segmentCount).join('/')
+  //   }, [route])
+
+  //   const info = isInitial ? 'Initial' : route.generated ? 'Virtual' : ''
+
+  //   return (
+  //     <>
+  //       {!route.internal && (
+  //         <Link
+  //           accessibilityLabel={route.contextKey}
+  //           href={href}
+  //           onPress={() => {
+  //             if (Platform.OS !== 'web' && router.canGoBack()) {
+  //               // Ensure the modal pops
+  //               router.back()
+  //             }
+  //           }}
+  //           style={{ flex: 1, display: 'flex' }}
+  //           disabled={disabled}
+  //           asChild
+  //           // Ensure we replace the history so you can't go back to this page.
+  //           replace
+  //         >
+  //           <Pressable style={{ flex: 1 }}>
+  //             {({ pressed, hovered }) => (
+  //               <View
+  //                 style={[
+  //                   styles.itemPressable,
+  //                   {
+  //                     paddingLeft: INDENT + level * INDENT,
+  //                     backgroundColor: hovered ? 'rgba(255,255,255,0.1)' : 'transparent',
+  //                   },
+  //                   pressed && { backgroundColor: '#323232' },
+  //                   disabled && { opacity: 0.4 },
+  //                 ]}
+  //               >
+  //                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  //                   {route.children.length ? <PkgIcon /> : <FileIcon />}
+  //                   <Text style={styles.filename}>{filename}</Text>
+  //                 </View>
+
+  //                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  //                   {!!info && (
+  //                     <Text style={[styles.virtual, !disabled && { marginRight: 8 }]}>
+  //                       {info}
+  //                     </Text>
+  //                   )}
+  //                   {!disabled && <ForwardIcon />}
+  //                 </View>
+  //               </View>
+  //             )}
+  //           </Pressable>
+  //         </Link>
+  //       )}
+  //       {route.children.map((child) => (
+  //         <FileItem
+  //           key={child.contextKey}
+  //           route={child}
+  //           isInitial={route.initialRouteName === child.route}
+  //           parents={segments}
+  //           level={level + (route.generated ? 0 : 1)}
+  //         />
+  //       ))}
+  //     </>
+  //   )
+}
+
+// function FileIcon() {
+//   return <Image style={styles.image} source={require('router/assets/file.png')} />
+// }
+
+// function PkgIcon() {
+//   return <Image style={styles.image} source={require('router/assets/pkg.png')} />
+// }
+
+// function ForwardIcon() {
+//   return <Image style={styles.image} source={require('router/assets/forward.png')} />
+// }
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'black',
+    flex: 1,
+    alignItems: 'stretch',
+  },
+  main: {
+    marginHorizontal: 'auto',
+    flex: 1,
+
+    alignItems: 'stretch',
+  },
+  scroll: {
+    paddingHorizontal: 12,
+    // flex: 1,
+    // paddingTop: top + 12,
+    alignItems: 'stretch',
+  },
+  itemContainer: {
+    borderWidth: 1,
+    borderColor: '#323232',
+    borderRadius: 19,
+    marginBottom: 12,
+    overflow: 'hidden',
+  },
+  itemPressable: {
+    paddingHorizontal: INDENT,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  filename: { color: 'white', fontSize: 20, marginLeft: 12 },
+  virtual: { textAlign: 'right', color: 'white' },
+  image: { width: 24, height: 24, resizeMode: 'contain' },
+})

package/src/fallbackViews/Unmatched.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+function NoSSR({ children }: { children: React.ReactNode }) {
+  const [render, setRender] = React.useState(false)
+  React.useEffect(() => {
+    setRender(true)
+  }, [])
+
+  if (!render) {
+    return null
+  }
+
+  return <>{children}</>
+}
+
+/** Default screen for unmatched routes. */
+export function Unmatched() {
+  return <Text>unmmatched!!!!!!!!!</Text>
+  // const router = useRouter()
+  // const navigation = useNavigation()
+  // const pathname = usePathname()
+  // const url = createURL(pathname)
+
+  // useLayoutEffect(() => {
+  //   navigation.setOptions({
+  //     title: 'Not Found',
+  //   })
+  // }, [navigation])
+
+  // return (
+  //   <View style={styles.container}>
+  //     <Text role="heading" aria-level={1} style={styles.title}>
+  //       Unmatched Route
+  //     </Text>
+  //     <Text role="heading" aria-level={2} style={styles.subtitle}>
+  //       Page could not be found.{' '}
+  //       <Text
+  //         onPress={() => {
+  //           if (router.canGoBack()) {
+  //             router.back()
+  //           } else {
+  //             router.replace('/')
+  //           }
+  //         }}
+  //         style={styles.link}
+  //       >
+  //         Go back.
+  //       </Text>
+  //     </Text>
+
+  //     <NoSSR>
+  //       <Link href={pathname} replace style={styles.link}>
+  //         {url}
+  //       </Link>
+  //     </NoSSR>
+
+  //     <Link href="/_sitemap" replace style={[styles.link, { marginTop: 8 }]}>
+  //       Sitemap
+  //     </Link>
+  //   </View>
+  // )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+    padding: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: 'white',
+    fontSize: 36,
+    paddingBottom: 12,
+    marginBottom: 12,
+    borderBottomColor: '#323232',
+    borderBottomWidth: 1,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  subtitle: {
+    color: 'white',
+    fontSize: 18,
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  link: { color: 'rgba(255,255,255,0.4)', textAlign: 'center' },
+})