flamefront 0.1.0-alpha.0 → 0.1.1

package/src/lifecycle.ts

@@ -23,9 +23,10 @@ import {
   staticRouteFragmentDataFile,
 } from "./static-fragment-artifacts.ts"
 import {
-  staticFragmentProtocol,
-  type StaticFragmentArtifact,
+  routeFragmentProtocol,
+  type RouteFragmentArtifact,
 } from "./fragment-client.ts"
+import { setGlobRoot } from "./glob.ts"
 
 export {
   staticRouteFile,
@@ -65,6 +66,7 @@ export async function loadProject(
   const url = pathToFileURL(routesFile)
 
   url.searchParams.set("ff", String(Date.now()))
+  setGlobRoot(root)
   const module = (await import(url.href)) as AppModule
   const app = module.app ?? module.default
 
@@ -234,7 +236,6 @@ export async function buildProject(root = process.cwd()): Promise<void> {
     configFile: resolve(root, "vite.config.ts"),
     build: {
       outDir: clientDirectory,
-      manifest: true,
     },
   })
   await build({
@@ -320,7 +321,7 @@ export async function prerenderStaticRoutes(
   render: (request: Request) => Promise<RenderDocumentResult>,
   loadData?: (request: Request) => Promise<unknown>,
   routing: Pick<NormalizedRoutingOptions, "basename"> = { basename: "/" },
-  renderFragment?: (request: Request) => Promise<StaticFragmentArtifact>,
+  renderFragment?: (request: Request) => Promise<RouteFragmentArtifact>,
 ): Promise<void> {
   for (const route of routes) {
     const outputFile = staticRouteFile(clientDirectory, route)
@@ -342,14 +343,14 @@ export async function prerenderStaticRoutes(
     const fragment = renderFragment
       ? await renderFragment(request)
       : ({
-          protocol: staticFragmentProtocol,
+          protocol: routeFragmentProtocol,
           route: route.path,
           boundary: route.entry,
           html: rendered.html,
           routeData: data,
           boundaries: [],
           status: rendered.status,
-        } satisfies StaticFragmentArtifact)
+        } satisfies RouteFragmentArtifact)
 
     await mkdir(dirname(outputFile), { recursive: true })
     await writeFile(outputFile, rendered.html)

package/src/octane-client-core.ts

@@ -1,5 +1,6 @@
 import type { AppDefinition, RouteDefinition } from "./index.ts"
-import type { RouterDocument, RouterDocumentProps } from "./octane.ts"
+import type { RouterDocument, RouterDocumentProps } from "./octane.tsx"
+import { shellIdentifierPrefix } from "./identifier-prefix.ts"
 
 export type OctaneClientApp<Route extends RouteDefinition = RouteDefinition> =
   Pick<AppDefinition<Route>, "match" | "prefetch">
@@ -48,11 +49,13 @@ export interface OctaneClientRuntime<
     container: Container,
     component: RouterDocument,
     props: RouterDocumentProps,
+    options?: { readonly identifierPrefix?: string },
   ): Root
   hydrateRoot(
     container: Container,
     component: RouterDocument,
     props: RouterDocumentProps,
+    options?: { readonly identifierPrefix?: string },
   ): Root
 }
 
@@ -127,8 +130,12 @@ export async function startOctaneClientWithRuntime<
   const routerDocument = options.routerDocument ?? runtime.routerDocument
   const props: RouterDocumentProps = { router, context: undefined }
   const clientRoot = shouldHydrate
-    ? runtime.hydrateRoot(root, routerDocument, props)
-    : runtime.renderRoot(root, routerDocument, props)
+    ? runtime.hydrateRoot(root, routerDocument, props, {
+        identifierPrefix: shellIdentifierPrefix,
+      })
+    : runtime.renderRoot(root, routerDocument, props, {
+        identifierPrefix: shellIdentifierPrefix,
+      })
 
   return { router, root: clientRoot }
 }

package/src/octane-client.ts

@@ -1,6 +1,7 @@
 import type { DataRouter } from "@octanejs/remix-router"
-import { createRoot, hydrateRoot, type Root } from "octane"
+import { createRoot, hydrateRoot, type ComponentBody, type Root } from "octane"
 import type { RouteDefinition } from "./index.ts"
+import type { RouterDocumentProps } from "./octane.tsx"
 import {
   startOctaneClientWithRuntime,
   type StartOctaneClientOptions,
@@ -30,13 +31,18 @@ export function startOctaneClient<Route extends RouteDefinition>(
     consumeHydrationData: consumeStaticRouterHydrationData,
     createRoutePrefetcher,
     createClientRouter,
-    renderRoot(root, component, props) {
-      const clientRoot = createRoot(root)
+    renderRoot(root, component, props, options) {
+      const clientRoot = createRoot(root, options)
 
-      clientRoot.render(component as never, props)
+      clientRoot.render(component as ComponentBody<RouterDocumentProps>, props)
       return clientRoot
     },
-    hydrateRoot: (root, component, props) =>
-      hydrateRoot(root, component as never, props),
+    hydrateRoot: (root, component, props, options) =>
+      hydrateRoot(
+        root,
+        component as ComponentBody<RouterDocumentProps>,
+        props,
+        options,
+      ),
   })
 }

package/src/octane-compiler.d.ts

@@ -0,0 +1,19 @@
+declare module "octane/compiler" {
+  export interface CompileOptions {
+    readonly dev?: boolean
+    readonly hmr?: boolean | "vite" | "webpack"
+    readonly mode?: "client" | "server"
+  }
+
+  export interface CompileResult {
+    readonly code: string
+    readonly map: object | null
+    readonly diagnostics: readonly unknown[]
+  }
+
+  export function compile(
+    source: string,
+    filename: string,
+    options?: CompileOptions,
+  ): CompileResult
+}

package/src/octane-default-renderer.tsx

@@ -0,0 +1,124 @@
+import {
+  StaticRouterProvider,
+  type RouteObject,
+  createStaticRouter,
+  type DataRouter,
+  type StaticHandlerContext,
+} from "@octanejs/remix-router"
+import { renderToString } from "octane/server"
+import { routeFragmentBoundaryTarget } from "./fragment.tsx"
+import { RouterDocument } from "./octane-router-document.ts"
+import type { OctaneRenderer } from "./octane.tsx"
+
+function findRoute(
+  routes: readonly RouteObject[],
+  id: string,
+): RouteObject | undefined {
+  for (const route of routes) {
+    if (route.id === id) {
+      return route
+    }
+
+    const match = route.children ? findRoute(route.children, id) : undefined
+
+    if (match) {
+      return match
+    }
+  }
+
+  return undefined
+}
+
+function errorsForBoundary(
+  context: StaticHandlerContext,
+  matches: readonly { readonly route: { readonly id: string } }[],
+): StaticHandlerContext["errors"] {
+  if (!context.errors) {
+    return null
+  }
+
+  const ids = new Set(matches.map((match) => match.route.id))
+  const errors: Record<string, unknown> = {}
+  let inheritedError: unknown = undefined
+
+  for (const [id, error] of Object.entries(context.errors)) {
+    if (ids.has(id)) {
+      errors[id] = error
+    } else if (inheritedError === undefined) {
+      inheritedError = error
+    }
+  }
+
+  if (inheritedError !== undefined && matches[0]) {
+    errors[matches[0].route.id] ??= inheritedError
+  }
+
+  return Object.keys(errors).length > 0 ? errors : null
+}
+
+export const defaultOctaneRenderer: OctaneRenderer = {
+  createStaticRouter: (routes, context) =>
+    createStaticRouter(
+      routes as RouteObject[],
+      context as StaticHandlerContext,
+    ),
+  renderToString: (component, props, options) =>
+    renderToString(
+      component as Parameters<typeof renderToString>[0],
+      props,
+      options,
+    ),
+  renderRouteFragment: (router, context, boundary, options) => {
+    const dataRouter = router as DataRouter
+    const staticContext = context as StaticHandlerContext
+    const state = dataRouter.state
+    const matchIndex = state.matches.findIndex(
+      (match) => match.route?.id === boundary,
+    )
+
+    if (matchIndex < 0) {
+      throw new Error(
+        `No server router match exists for fragment boundary ${JSON.stringify(boundary)}.`,
+      )
+    }
+
+    const outletRoute = findRoute(dataRouter.routes, boundary)
+
+    if (!outletRoute) {
+      throw new Error(
+        `No server route exists for fragment boundary ${JSON.stringify(boundary)}.`,
+      )
+    }
+
+    const matches = staticContext.matches.slice(matchIndex)
+    const outletContext = {
+      ...staticContext,
+      matches,
+      errors: errorsForBoundary(staticContext, matches),
+    }
+    const outletRouter = createStaticRouter([outletRoute], outletContext)
+    const FragmentBoundaryProvider = routeFragmentBoundaryTarget.Provider
+    const FragmentRoot = () => (
+      <FragmentBoundaryProvider
+        value={options?.includeBoundary ? null : boundary}
+      >
+        <StaticRouterProvider
+          router={outletRouter}
+          context={outletContext}
+          hydrate={false}
+        />
+      </FragmentBoundaryProvider>
+    )
+
+    return renderToString(
+      FragmentRoot,
+      {},
+      {
+        ...(options?.identifierPrefix
+          ? { identifierPrefix: options.identifierPrefix }
+          : {}),
+      },
+    )
+  },
+  defaultRouterDocument: RouterDocument,
+}

package/src/octane-router-document.ts

@@ -1,5 +1,22 @@
 import { RouterProvider } from "@octanejs/remix-router/dom"
-import type { RouterDocument as RouterDocumentComponent } from "./octane.ts"
+import { createElement } from "octane"
+import { routeOutletHtmlContext } from "./fragment.tsx"
+import type {
+  RouterDocument as RouterDocumentComponent,
+  RouterDocumentProps,
+} from "./octane.tsx"
 
 /** Canonical router root shared by Flamefront's Octane server and client. */
-export const RouterDocument = RouterProvider as RouterDocumentComponent
+export const RouterDocument: RouterDocumentComponent = (
+  props: RouterDocumentProps,
+) => {
+  const Router = RouterProvider as unknown as (props: {
+    readonly router: unknown
+  }) => unknown
+
+  return createElement(
+    routeOutletHtmlContext.Provider,
+    { value: props.outletHtml ?? null },
+    createElement(Router, { router: props.router }),
+  )
+}