one 1.2.0 → 1.2.1

package/src/config.ts

@@ -0,0 +1,16 @@
+import { isWebServer } from './constants'
+import type { One } from './vite/types'
+
+// works client or server
+export const getDefaultRenderMode = () => {
+  const CLIENT_RENDER_MODE = process.env.ONE_DEFAULT_RENDER_MODE as One.RouteRenderMode | undefined
+  const serverConfig = globalThis['__vxrnPluginConfig__'] as One.PluginOptions | undefined
+
+  if (!CLIENT_RENDER_MODE && isWebServer && !serverConfig) {
+    if (process.env.IS_VXRN_CLI) {
+      throw new Error(`Internal one error: should call setServerConfig before createManifest`)
+    }
+  }
+
+  return CLIENT_RENDER_MODE ?? serverConfig?.web?.defaultRenderMode ?? 'ssg'
+}

package/src/constants.ts

@@ -0,0 +1,30 @@
+import type { One } from './vite/types'
+
+export const isWebClient = process.env.TAMAGUI_TARGET !== 'native' && typeof window !== 'undefined'
+export const isWebServer = process.env.TAMAGUI_TARGET !== 'native' && typeof window === 'undefined'
+export const isNative = process.env.TAMAGUI_TARGET === 'native'
+
+export const CACHE_KEY = `${process.env.ONE_CACHE_KEY ?? Math.round(Math.random() * 100_000_000)}`
+
+export const LOADER_JS_POSTFIX_UNCACHED = `_vxrn_loader.js`
+export const LOADER_JS_POSTFIX_REGEX_STRING = `_\\d+${LOADER_JS_POSTFIX_UNCACHED}$`
+export const LOADER_JS_POSTFIX_REGEX = new RegExp(LOADER_JS_POSTFIX_REGEX_STRING)
+export const LOADER_JS_POSTFIX = `_${CACHE_KEY}${LOADER_JS_POSTFIX_UNCACHED}`
+
+export const PRELOAD_JS_POSTFIX = `_${CACHE_KEY}_preload.js`
+
+// safari insanely aggressive caching
+export const VIRTUAL_SSR_CSS_ENTRY = `virtual:ssr-css.css`
+export const VIRTUAL_SSR_CSS_HREF = `/@id/__x00__${VIRTUAL_SSR_CSS_ENTRY}`
+
+export const SERVER_CONTEXT_KEY = '__one_server_context__'
+
+export const getSpaHeaderElements = ({
+  serverContext = {},
+}: {
+  serverContext?: One.ServerContext
+} = {}) => `
+  <script>globalThis['global'] = globalThis</script>
+  <script>globalThis['__vxrnIsSPA'] = true</script>
+  <script>globalThis["${SERVER_CONTEXT_KEY}"] = ${JSON.stringify(serverContext)}</script>
+`

package/src/createApp.native.tsx

@@ -0,0 +1,31 @@
+import { AppRegistry, LogBox } from 'react-native' // This should be the first import as it might set up global variables that are needed for the other imports
+import type { One } from './vite/types'
+import './polyfills-mobile'
+import { Root } from './Root'
+import './setup'
+import type { CreateAppProps } from './createApp'
+
+// TODO temporary
+LogBox.ignoreLogs([/Sending .* with no listeners registered/])
+
+export function createApp(options: CreateAppProps): void {
+  const App = () => {
+    let contents = (
+      <Root
+        isClient
+        flags={options.flags}
+        routes={options.routes}
+        routerRoot={options.routerRoot}
+        path="/"
+      />
+    )
+
+    return contents
+  }
+
+  AppRegistry.registerComponent('main', () => App)
+
+  if (process.env.ONE_APP_NAME) {
+    AppRegistry.registerComponent(process.env.ONE_APP_NAME, () => App)
+  }
+}

package/src/createApp.tsx

@@ -0,0 +1,144 @@
+import './setup'
+
+import { cloneElement } from 'react'
+import ReactDOMServer from 'react-dom/server.browser'
+import { AppRegistry } from 'react-native'
+import { resolveClientLoader } from './clientLoaderResolver'
+import { Root } from './Root'
+import { render } from './render'
+import { renderToString } from './server-render'
+import type { RenderAppProps } from './types'
+import { getServerHeadInsertions } from './useServerHeadInsertion'
+import { ensureExists } from './utils/ensureExists'
+import { SERVER_CONTEXT_POST_RENDER_STRING } from './vite/constants'
+import { getServerContext, setServerContext } from './vite/one-server-only'
+import type { One } from './vite/types'
+
+export type CreateAppProps = {
+  routes: Record<string, () => Promise<unknown>>
+  routerRoot: string
+  flags?: One.Flags
+}
+
+export function createApp(options: CreateAppProps) {
+  if (import.meta.env.SSR) {
+    return {
+      options,
+      render: async (props: RenderAppProps) => {
+        let { loaderData, loaderProps, css, mode, loaderServerData } = props
+
+        setServerContext({
+          postRenderData: loaderServerData,
+          loaderData,
+          loaderProps,
+          mode,
+          css,
+        })
+
+        let renderId: string | undefined
+
+        const App = () => {
+          return (
+            <Root
+              flags={options.flags}
+              onRenderId={(id) => {
+                renderId = id
+              }}
+              routes={options.routes}
+              routerRoot={options.routerRoot}
+              {...props}
+            />
+          )
+        }
+
+        AppRegistry.registerComponent('App', () => App)
+
+        // @ts-expect-error
+        const Application = AppRegistry.getApplication('App', {})
+
+        // we've got to remove the outer containers because it messes up the fact we render root html
+        const rootElement = Application.element.props.children
+
+        let html = await renderToString(rootElement, {
+          preloads: props.preloads,
+        })
+
+        try {
+          const extraHeadElements: React.ReactElement[] = []
+
+          const styleTag = Application.getStyleElement({ nonce: process.env.ONE_NONCE })
+          if (styleTag) {
+            extraHeadElements.push(styleTag)
+          }
+
+          ensureExists(renderId)
+          const insertions = getServerHeadInsertions(renderId)
+          if (insertions) {
+            for (const insertion of insertions) {
+              const out = insertion()
+              if (out) {
+                extraHeadElements.push(out)
+              }
+            }
+          }
+
+          if (extraHeadElements.length) {
+            const extraHeadHTML = ReactDOMServer.renderToStaticMarkup(
+              <>{extraHeadElements.map((x, i) => cloneElement(x, { key: i }))}</>
+            )
+
+            if (extraHeadHTML) {
+              html = html.replace(`</head>`, `${extraHeadHTML}</head>`)
+            }
+          }
+        } catch (err) {
+          // react-native-web-lite has a bug but its fine we don't need it for now
+          // but TODO is fix this in react-native-web-lite
+          if (`${err}`.includes(`sheet is not defined`)) {
+            // ok
+          } else {
+            throw err
+          }
+        }
+
+        // now we can grab and serialize in our zero queries
+        const postRenderData = getServerContext()?.postRenderData
+
+        if (postRenderData) {
+          html = html.replace(
+            JSON.stringify(SERVER_CONTEXT_POST_RENDER_STRING),
+            JSON.stringify(postRenderData)
+          )
+        }
+
+        return html
+      },
+    }
+  }
+
+  // run their root layout before calling resolveClientLoader so they can register hook
+  const rootLayoutImport = options.routes[`/${options.routerRoot}/_layout.tsx`]?.()
+
+  return rootLayoutImport
+    .then(() => {
+      resolveClientLoader(getServerContext() || {})
+        .then(() => {
+          // on client we just render
+          render(
+            <Root
+              isClient
+              flags={options.flags}
+              routes={options.routes}
+              routerRoot={options.routerRoot}
+              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,324 @@
+import { LOADER_JS_POSTFIX_UNCACHED } from './constants'
+import type { Middleware, MiddlewareContext } from './createMiddleware'
+import type { RouteNode } from './router/Route'
+import type { RouteInfoCompiled } from './server/createRoutesManifest'
+import type { LoaderProps } from './types'
+import { getPathFromLoaderPath } from './utils/cleanUrl'
+import { isResponse } from './utils/isResponse'
+import { getManifest } from './vite/getManifest'
+import { resolveAPIEndpoint, resolveResponse } from './vite/resolveResponse'
+import type { RouteInfo } from './vite/types'
+
+export type RequestHandlers = {
+  handlePage?: (props: RequestHandlerProps) => Promise<any>
+  handleLoader?: (props: RequestHandlerProps) => Promise<any>
+  handleAPI?: (props: RequestHandlerProps) => Promise<any>
+  loadMiddleware?: (route: RouteNode) => Promise<any>
+}
+
+type RequestHandlerProps<RouteExtraProps extends Object = {}> = {
+  request: Request
+  route: RouteInfo<string> & RouteExtraProps
+  url: URL
+  loaderProps?: LoaderProps
+}
+
+type RequestHandlerResponse = null | string | Response
+
+export async function runMiddlewares(
+  handlers: RequestHandlers,
+  request: Request,
+  route: RouteInfo,
+  getResponse: () => Promise<Response>
+): Promise<Response> {
+  const middlewares = route.middlewares
+
+  if (!middlewares?.length) {
+    return await getResponse()
+  }
+  if (!handlers.loadMiddleware) {
+    throw new Error(`No middleware handler configured`)
+  }
+
+  const context: MiddlewareContext = {}
+
+  async function dispatch(index: number): Promise<Response> {
+    const middlewareModule = middlewares![index]
+
+    // no more middlewares, finish
+    if (!middlewareModule) {
+      return await getResponse()
+    }
+
+    const exported = (await handlers.loadMiddleware!(middlewareModule))?.default as
+      | Middleware
+      | undefined
+
+    if (!exported) {
+      throw new Error(`No valid export found in middleware: ${middlewareModule.contextKey}`)
+    }
+
+    // go to next middleware
+    const next = async () => {
+      return dispatch(index + 1)
+    }
+
+    // run middlewares, if response returned, exit early
+    const response = await exported({ request, next, context })
+
+    if (response) {
+      return response
+    }
+
+    // If the middleware returns null/void, keep going
+    return dispatch(index + 1)
+  }
+
+  // Start with the first middleware (index 0).
+  return dispatch(0)
+}
+
+export async function resolveAPIRoute(
+  handlers: RequestHandlers,
+  request: Request,
+  url: URL,
+  route: RouteInfoCompiled
+) {
+  const { pathname } = url
+  const params = getRouteParams(pathname, route)
+
+  try {
+    return resolveAPIEndpoint(
+      () =>
+        handlers.handleAPI!({
+          request,
+          route,
+          url,
+          loaderProps: {
+            path: pathname,
+            params,
+          },
+        }),
+      request,
+      params || {}
+    )
+  } catch (err) {
+    if (isResponse(err)) {
+      return err
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      console.error(`\n [one] Error importing API route at ${pathname}:
+
+        ${err}
+
+        If this is an import error, you can likely fix this by adding this dependency to
+        the "optimizeDeps.include" array in your vite.config.ts.
+      `)
+    }
+
+    throw err
+  }
+}
+
+export async function resolveLoaderRoute(
+  handlers: RequestHandlers,
+  request: Request,
+  url: URL,
+  route: RouteInfoCompiled
+) {
+  return await runMiddlewares(handlers, request, route, async () => {
+    return await resolveResponse(async () => {
+      const headers = new Headers()
+      headers.set('Content-Type', 'text/javascript')
+
+      try {
+        const loaderResponse = await handlers.handleLoader!({
+          request,
+          route,
+          url,
+          loaderProps: {
+            path: url.pathname,
+            request: route.type === 'ssr' ? request : undefined,
+            params: getLoaderParams(url, route),
+          },
+        })
+
+        return new Response(loaderResponse, {
+          headers,
+        })
+      } catch (err) {
+        // allow throwing a response in a loader
+        if (isResponse(err)) {
+          return err
+        }
+
+        console.error(`Error running loader: ${err}`)
+
+        throw err
+      }
+    })
+  })
+}
+
+export async function resolvePageRoute(
+  handlers: RequestHandlers,
+  request: Request,
+  url: URL,
+  route: RouteInfoCompiled
+) {
+  const { pathname, search } = url
+
+  return resolveResponse(async () => {
+    const resolved = await runMiddlewares(handlers, request, route, async () => {
+      return await handlers.handlePage!({
+        request,
+        route,
+        url,
+        loaderProps: {
+          path: pathname + search,
+          // Ensure SSR loaders receive the original request
+          request: route.type === 'ssr' ? request : undefined,
+          params: getLoaderParams(url, route),
+        },
+      })
+    })
+    return resolved
+  })
+}
+
+export function getURLfromRequestURL(request: Request) {
+  const urlString = request.url || ''
+  return new URL(
+    urlString || '',
+    request.headers.get('host') ? `http://${request.headers.get('host')}` : ''
+  )
+}
+
+function compileRouteRegex(route: RouteInfo): RouteInfoCompiled {
+  return {
+    ...route,
+    compiledRegex: new RegExp(route.namedRegex),
+  }
+}
+
+export function compileManifest(manifest: { pageRoutes: RouteInfo[]; apiRoutes: RouteInfo[] }): {
+  pageRoutes: RouteInfoCompiled[]
+  apiRoutes: RouteInfoCompiled[]
+} {
+  return {
+    pageRoutes: manifest.pageRoutes.map(compileRouteRegex),
+    apiRoutes: manifest.apiRoutes.map(compileRouteRegex),
+  }
+}
+
+// in dev mode we do it more simply:
+export function createHandleRequest(
+  handlers: RequestHandlers,
+  { routerRoot }: { routerRoot: string }
+) {
+  const manifest = getManifest({ routerRoot })
+  if (!manifest) {
+    throw new Error(`No routes manifest`)
+  }
+  const compiledManifest = compileManifest(manifest)
+
+  return {
+    manifest,
+    handler: async function handleRequest(request: Request): Promise<RequestHandlerResponse> {
+      const url = getURLfromRequestURL(request)
+      const { pathname, search } = url
+
+      if (pathname === '/__vxrnhmr' || pathname.startsWith('/@')) {
+        return null
+      }
+
+      if (handlers.handleAPI) {
+        const apiRoute = compiledManifest.apiRoutes.find((route) => {
+          return route.compiledRegex.test(pathname)
+        })
+        if (apiRoute) {
+          return await resolveAPIRoute(handlers, request, url, apiRoute)
+        }
+      }
+
+      if (request.method !== 'GET') {
+        return null
+      }
+
+      if (handlers.handleLoader) {
+        const isClientRequestingNewRoute = pathname.endsWith(LOADER_JS_POSTFIX_UNCACHED)
+
+        if (isClientRequestingNewRoute) {
+          const originalUrl = getPathFromLoaderPath(pathname)
+
+          for (const route of compiledManifest.pageRoutes) {
+            if (route.file === '') {
+              // ignore not found route
+              continue
+            }
+
+            const finalUrl = new URL(originalUrl, url.origin)
+            finalUrl.search = url.search
+
+            if (!route.compiledRegex.test(finalUrl.pathname)) {
+              continue
+            }
+
+            return resolveLoaderRoute(handlers, request, finalUrl, route)
+          }
+
+          if (process.env.NODE_ENV === 'development') {
+            console.error(`No matching route found for loader!`, {
+              originalUrl,
+              pathname,
+              routes: manifest.pageRoutes,
+            })
+          }
+
+          // error no match!
+
+          return Response.error()
+        }
+      }
+
+      if (handlers.handlePage) {
+        for (const route of compiledManifest.pageRoutes) {
+          if (!route.compiledRegex.test(pathname)) {
+            continue
+          }
+          return resolvePageRoute(handlers, request, url, route)
+        }
+      }
+
+      return null
+    },
+  }
+}
+
+function getLoaderParams(
+  url: URL,
+  config: { compiledRegex: RegExp; routeKeys: Record<string, string> }
+) {
+  const params: Record<string, string> = {}
+  const match = new RegExp(config.compiledRegex).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]) => {
+      return [value, (match.groups?.[key] || '') as string]
+    })
+  )
+}

package/src/createMiddleware.ts

@@ -0,0 +1,14 @@
+type MaybeResponse = Response | void | null
+type RequestResponse = MaybeResponse | Promise<MaybeResponse>
+
+export interface MiddlewareContext {}
+
+export type Middleware = (props: {
+  request: Request
+  next: () => Promise<MaybeResponse>
+  context: MiddlewareContext
+}) => RequestResponse
+
+export function createMiddleware(middleware: Middleware) {
+  return middleware
+}