@kudzujs/core 0.8.53 → 0.8.56

package/framework/build.mjs

@@ -1,6 +1,6 @@
 import { createHash, randomUUID } from "node:crypto"
 import { cp, mkdir, open, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises"
-import { dirname, join, relative, resolve, sep } from "node:path"
+import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path"
 import { pathToFileURL } from "node:url"
 import { build as bundle, transform } from "esbuild"
 import { createEffectCodegen } from "./compiler/effect-codegen.mjs"
@@ -8,9 +8,11 @@ import { generateListRuntime } from "./compiler/list-runtime-codegen.mjs"
 import { assetPath, browserPath, relativeModulePath, withBase } from "./compiler/path-helpers.mjs"
 import { createProjectSession } from "./compiler/project-session.mjs"
 import { createRouteBuildRecord, planRouteArtifacts } from "./compiler/route-build-record.mjs"
+import { createRouteArtifactReport } from "./compiler/route-artifact-report.mjs"
+import { planRuntimeFamilies } from "./compiler/runtime-family-planner.mjs"
 import { createSourceCompiler } from "./compiler/source-compiler.mjs"
 import { createParamCodegen } from "./compiler/param-codegen.mjs"
-import { planRouteCapabilities, usesRouteDependencyRuntime } from "./compiler/route-capability-planner.mjs"
+import { usesRouteDependencyRuntime } from "./compiler/route-capability-planner.mjs"
 import { generateBindingRuntime, generateCoreRuntime, generateEffectRuntime, generateNativeRuntime, generateNavigationRuntime, specializeRuntime } from "./compiler/runtime-codegen.mjs"
 import { renderPage } from "./core.mjs"
 import { parseDevHost, parseDevPort, startDevServer } from "./dev-server.mjs"
@@ -31,6 +33,10 @@ async function loadConfig(root) {
 
 export async function build({ quiet = false, minify = true, root: projectRoot = process.cwd() } = {}) {
   const project = createProjectSession(projectRoot)
+  return buildWithSession(project, { quiet, minify })
+}
+
+export async function buildWithSession(project, { changedFiles, quiet = false, minify = true } = {}) {
   const { root, outputDirectory } = project
   const stagedOutput = join(root, ".kudzu-dist-staging")
   const backupOutput = join(root, ".kudzu-dist-backup")
@@ -39,8 +45,9 @@ export async function build({ quiet = false, minify = true, root: projectRoot =
   try {
     await recoverOutput(outputDirectory, backupOutput)
     await rm(stagedOutput, { recursive: true, force: true })
-    const { result, pageCount, behaviorCount } = await buildInto(project, stagedOutput, { minify })
+    const { result, pageCount, behaviorCount, cache } = await buildInto(project, stagedOutput, { changedFiles, minify })
     await promoteOutput(stagedOutput, outputDirectory, backupOutput)
+    project.buildCache = cache
     if (!quiet) console.log(`Built ${pageCount} page(s), ${behaviorCount} interactive page(s) into dist/`)
     return result
   } finally {
@@ -56,8 +63,11 @@ export async function build({ quiet = false, minify = true, root: projectRoot =
   }
 }
 
-async function buildInto(project, outputDirectory, { minify }) {
+async function buildInto(project, outputDirectory, { changedFiles, minify }) {
   const { root, sourceDirectory, pagesDirectory, workDirectory } = project
+  const previous = project.buildCache
+  project.buildGeneration = (project.buildGeneration ?? 0) + 1
+  project.buildDirectory = project.buildGeneration > 1 ? join(workDirectory, "build", String(project.buildGeneration)) : workDirectory
   const { collectClientModules, compileClientModule, compiledPath, compileSource, layoutExportError, orderSourceStyles, reachableSourceFiles, safeStaticFiles } = createSourceCompiler(project)
   const config = await loadConfig(root)
   const base = normalizeBase(config.base)
@@ -66,7 +76,6 @@ async function buildInto(project, outputDirectory, { minify }) {
   const globalStyleUrlSet = new Set(globalStyleUrls)
   const publicDirectory = normalizePublicDirectory(config.publicDir, project)
   const navigationGroups = normalizeNavigation(config.navigation)
-  const navigationRoutes = navigationGroups.flatMap(group => group.routes)
   const navigationByRoute = new Map(navigationGroups.flatMap(group => group.routes.map(route => [route, group])))
   for (const group of navigationGroups) {
     group.assetPath = assetPath(base, `assets/${group.assetName}`)
@@ -74,6 +83,7 @@ async function buildInto(project, outputDirectory, { minify }) {
     group.layoutId = `l-${group.id}`
     group.records = []
     group.routeRecords = []
+    group.buildRecords = []
     group.hasEffects = false
     group.hasParams = false
   }
@@ -87,11 +97,14 @@ async function buildInto(project, outputDirectory, { minify }) {
   if (!allSourceFiles.length) throw new Error("No TypeScript files found in src/")
   const allSourceFileSet = new Set(allSourceFiles)
   const sourceIndex = project.sourceIndex
+  for (const file of sourceIndex.keys()) if (file.startsWith(`${sourceDirectory}${sep}`) && !allSourceFileSet.has(file)) sourceIndex.delete(file)
   for (const [file, source] of await Promise.all(allSourceFiles.map(async file => [file, await readFile(file, "utf8")]))) sourceIndex.set(file, source)
   const pageFiles = allSourceFiles.filter(file => file.startsWith(`${pagesDirectory}${sep}`) && file.endsWith(".tsx"))
   if (!pageFiles.length) throw new Error("No pages found in src/pages/")
-  const sourceFiles = reachableSourceFiles(pageFiles, allSourceFileSet, sourceIndex)
+  const pageSources = new Map(pageFiles.map(file => [file, new Set(reachableSourceFiles([file], allSourceFileSet, sourceIndex))]))
+  const sourceFiles = [...new Set([...pageSources.values()].flatMap(files => [...files]))].sort()
   const sourceFileSet = project.sourceFiles
+  sourceFileSet.clear()
   for (const file of sourceFiles) sourceFileSet.add(file)
   const staticFiles = await safeStaticFiles(projectFiles)
   const stylesByPage = new Map(pageFiles.map(file => [file, orderSourceStyles([file], sourceFiles, sourceIndex, staticFiles).filter(style => !configuredStyleSources.has(style))]))
@@ -99,15 +112,26 @@ async function buildInto(project, outputDirectory, { minify }) {
   const importedAssets = new Set()
   const { cssModules, cssOutputs } = await prepareSourceStyles(cssFiles, staticFiles, importedAssets, base, project)
 
+  const affectedPages = affectedPageFiles({ changedFiles, pageFiles, pageSources, previous, sourceDirectory })
+  expandAffectedNavigationGroups(affectedPages, previous?.pageRenders, navigationGroups)
+  const affectedSources = new Set([...affectedPages].flatMap(file => [...pageSources.get(file)]))
   const sourceResults = []
+  const sourceResultsByFile = new Map()
+  let compiledModules = 0
   for (const file of sourceFiles) {
     if (file.endsWith(".worker.ts")) continue
-    const result = compileSource(file, sourceFileSet, sourceIndex, staticFiles, cssModules, base)
+    let result = !affectedSources.has(file) ? previous?.sourceResults.get(file) : undefined
+    if (!result) {
+      result = compileSource(file, sourceFileSet, sourceIndex, staticFiles, cssModules, base)
+      compiledModules++
+    }
+    result = { ...result, buildModule: { ...result.buildModule, path: relative(root, compiledPath(file)).replaceAll(sep, "/") } }
     for (const asset of result.importedAssets) importedAssets.add(resolve(root, asset))
     const output = resolve(root, result.buildModule.path)
     await mkdir(dirname(output), { recursive: true })
     await writeFile(output, result.buildModule.code)
     sourceResults.push(result)
+    sourceResultsByFile.set(file, result)
   }
   const handlerModules = sourceResults.flatMap(result => result.handlerModule ? [result.handlerModule] : [])
   const workerReferences = sourceResults.flatMap(result => result.moduleIR.effects.flatMap(effect => {
@@ -116,7 +140,8 @@ async function buildInto(project, outputDirectory, { minify }) {
     return effect.workers.map(worker => ({ ...worker, module: assetPath(base, `assets/${result.handlerModule.path}`), handler: handler.exportName }))
   }))
 
-  const routeRecords = []
+  let routeRecords = []
+  const routeDrafts = []
   const routeEntryTransforms = new Map()
   const routeEntrySources = new Map()
   const routeEntryPaths = new Map()
@@ -124,9 +149,38 @@ async function buildInto(project, outputDirectory, { minify }) {
   const emittedRoutes = new Set()
   const emittedApplicationRoutes = new Set()
   const emittedNavigationRecords = []
-  const runtimePlaceholder = `/__kudzu_runtime_${randomUUID()}.js`
+  const navigationAssets = new Map()
+  const placeholders = previous?.placeholders ?? {
+    runtime: `/__kudzu_runtime_${randomUUID()}.js`,
+    binding: `/__kudzu_binding_${randomUUID()}.js`,
+    list: `/__kudzu_list_${randomUUID()}.js`
+  }
+  const runtimePlaceholder = placeholders.runtime
+  const bindingPlaceholder = placeholders.binding
+  const listPlaceholder = placeholders.list
+  const pageRenders = new Map()
+  let renderedPages = 0
 
   for (const pageFile of pageFiles) {
+    const cached = !affectedPages.has(pageFile) ? previous?.pageRenders.get(pageFile) : undefined
+    if (cached) {
+      replayPageRender(cached, {
+        emittedApplicationRoutes,
+        emittedNavigationRecords,
+        emittedRoutes,
+        navigationAssets,
+        navigationByRoute,
+        routeDrafts,
+        routeRecords,
+        rewrites
+      })
+      pageRenders.set(pageFile, cached)
+      continue
+    }
+    renderedPages++
+    const draftOffset = routeDrafts.length
+    const navigationOffset = emittedNavigationRecords.length
+    const rewriteOffset = rewrites.length
     const sourceStyleUrls = stylesByPage.get(pageFile).map(file => assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`)).filter(url => !globalStyleUrlSet.has(url))
     const styleUrls = [...sourceStyleUrls, ...globalStyleUrls]
     const compiledFile = compiledPath(pageFile)
@@ -156,6 +210,7 @@ async function buildInto(project, outputDirectory, { minify }) {
       const pageMetadata = await resolveDocumentMetadata(module.metadata, metadataContext, `${relative(root, pageFile)} metadata`)
       const navigationGroup = navigationByRoute.get(applicationRoute)
       const navigable = Boolean(navigationGroup)
+      if (navigationGroup) navigationAssets.set(routePath, navigationGroup.assetPath)
       const effectPath = `effects/${route ? `${route}/index` : "index"}.js`
       const nativePath = `native/${route ? `${route}/index` : "index"}.js`
       const paramPath = `params/${route ? `${route}/index` : "index"}.js`
@@ -182,6 +237,8 @@ async function buildInto(project, outputDirectory, { minify }) {
         managedStyles: navigable ? sourceStyleUrls : [],
         base,
         runtimeAsset: runtimePlaceholder,
+        bindingAsset: bindingPlaceholder,
+        listAsset: listPlaceholder,
         effectAsset: assetPath(base, `assets/${effectPath}`),
         nativeAsset: assetPath(base, `assets/${nativePath}`),
         paramAsset: assetPath(base, `assets/${paramPath}`),
@@ -193,30 +250,16 @@ async function buildInto(project, outputDirectory, { minify }) {
         navigationGroup.hasParams ||= result.hasParams
       }
       const usesDependencyRuntime = usesRouteDependencyRuntime({ plan: result.plan, navigable, hasBindings: result.hasBindings, hasLists: result.hasLists })
-      const routeRuntimeName = usesDependencyRuntime ? "kudzu-deps.js" : "kudzu.js"
       const plan = { route: routePath, ...result.plan }
-      const entries = {}
-      let html = inlineQueryFormCarry(result.html, plan)
-      if (result.hasParams) {
-        const entry = retainRouteEntry(paramPath, output => printParamEntry(runtimeSchema, plan.params, plan.searchParams, plan.searchParamsWritable, output, join(outputDirectory, "assets"), base, routeRuntimeName, navigable), routeEntrySources, routeEntryPaths, outputDirectory)
-        entries.param = entry.path
-        html = html.replaceAll(assetPath(base, `assets/${paramPath}`), assetPath(base, `assets/${entry.path}`))
-      }
-      if (result.hasEffects) {
-        const entry = retainRouteEntry(effectPath, output => printEffectEntry(runtimeEffects(plan.effects, navigable), output, handlerModules, join(outputDirectory, "assets"), base, entries.param, routeRuntimeName, navigable), routeEntrySources, routeEntryPaths, outputDirectory)
-        entries.effect = entry.path
-        html = html.replaceAll(assetPath(base, `assets/${effectPath}`), assetPath(base, `assets/${entry.path}`))
-      }
-      if (plan.events.some(event => event.native)) {
-        const modules = [...new Set(plan.events.filter(event => event.native).map(event => event.native.module))]
-        const entry = retainRouteEntry(nativePath, () => printNativeEntrySource(modules, base), routeEntrySources, routeEntryPaths, outputDirectory)
-        entries.native = entry.path
-        html = html.replaceAll(assetPath(base, `assets/${nativePath}`), assetPath(base, `assets/${entry.path}`))
+      const entries = {
+        ...(result.hasParams ? { param: paramPath } : {}),
+        ...(result.hasEffects ? { effect: effectPath } : {}),
+        ...(plan.events.some(event => event.native) ? { native: nativePath } : {})
       }
-      routeRecords.push(createRouteBuildRecord({
+      const record = createRouteBuildRecord({
         route: routePath,
         output: route,
-        html,
+        html: inlineQueryFormCarry(result.html, plan),
         plan,
         handlerReferences: result.handlerReferences,
         styles: styleUrls,
@@ -233,8 +276,17 @@ async function buildInto(project, outputDirectory, { minify }) {
         },
         entries,
         runtimeSchema
-      }))
+      })
+      routeRecords.push(record)
+      if (navigationGroup) navigationGroup.buildRecords.push(record)
+      routeDrafts.push({ record, result, runtimeSchema, navigationGroup, applicationRoute, effectPath, nativePath, paramPath })
     }
+    pageRenders.set(pageFile, {
+      drafts: routeDrafts.slice(draftOffset).map(({ navigationGroup: _, ...draft }) => draft),
+      layout: module.layout,
+      navigationRecords: emittedNavigationRecords.slice(navigationOffset).map(({ group: _, ...record }) => record),
+      rewrites: rewrites.slice(rewriteOffset)
+    })
   }
 
   for (const group of navigationGroups) for (const route of group.routes) if (!emittedApplicationRoutes.has(route)) throw new Error(`${group.label} route ${JSON.stringify(route)} is not an emitted route`)
@@ -245,12 +297,65 @@ async function buildInto(project, outputDirectory, { minify }) {
     group.records.sort((left, right) => (right.segments?.filter(segment => segment !== null).length ?? 0) - (left.segments?.filter(segment => segment !== null).length ?? 0) || left.id.localeCompare(right.id))
   }
 
+  const runtimePlan = planRuntimeFamilies(routeRecords, navigationGroups)
+  for (const group of navigationGroups) {
+    group.runtimeFamily = runtimePlan.familyByRecord.get(group.buildRecords[0])
+    group.assetPath = assetPath(base, `assets/runtime/${group.runtimeFamily.id}/${group.assetName}`)
+  }
+  const runtimeFamilyByRecord = new Map()
+  routeRecords = routeDrafts.map(draft => {
+    const { record, result, runtimeSchema, navigationGroup, effectPath, nativePath, paramPath } = draft
+    const family = runtimePlan.familyByRecord.get(record)
+    if (record.capabilities.hasBehaviors && !family) throw new Error(`Interactive route has no runtime family: ${record.route}`)
+    const runtimeDirectory = family ? join(outputDirectory, "assets", "runtime", family.id) : undefined
+    const routeRuntimeName = record.capabilities.usesDependencyRuntime ? "kudzu-deps.js" : "kudzu.js"
+    const entries = {}
+    let html = record.html
+    if (record.capabilities.hasParams) {
+      const entry = retainRouteEntry(paramPath, output => printParamEntry(runtimeSchema, record.plan.params, record.plan.searchParams, record.plan.searchParamsWritable, output, runtimeDirectory, base, routeRuntimeName, record.capabilities.navigable), routeEntrySources, routeEntryPaths, outputDirectory)
+      entries.param = entry.path
+      html = html.replaceAll(assetPath(base, `assets/${paramPath}`), assetPath(base, `assets/${entry.path}`))
+    }
+    if (record.capabilities.hasEffects) {
+      const entry = retainRouteEntry(effectPath, output => printEffectEntry(runtimeEffects(record.plan.effects, record.capabilities.navigable), output, handlerModules, join(outputDirectory, "assets"), base, entries.param, routeRuntimeName, record.capabilities.navigable, runtimeDirectory), routeEntrySources, routeEntryPaths, outputDirectory)
+      entries.effect = entry.path
+      html = html.replaceAll(assetPath(base, `assets/${effectPath}`), assetPath(base, `assets/${entry.path}`))
+    }
+    if (record.plan.events.some(event => event.native)) {
+      const modules = [...new Set(record.plan.events.filter(event => event.native).map(event => event.native.module))]
+      const nativeRuntime = assetPath(base, `assets/runtime/${family.id}/kudzu-native.js`)
+      const entry = retainRouteEntry(nativePath, () => printNativeEntrySource(modules, nativeRuntime), routeEntrySources, routeEntryPaths, outputDirectory)
+      entries.native = entry.path
+      html = html.replaceAll(assetPath(base, `assets/${nativePath}`), assetPath(base, `assets/${entry.path}`))
+    }
+    if (family) {
+      html = html.replaceAll(runtimePlaceholder, escapeAttribute(assetPath(base, `assets/runtime/${family.id}/${routeRuntimeName}`)))
+      html = html.replaceAll(bindingPlaceholder, escapeAttribute(assetPath(base, `assets/runtime/${family.id}/kudzu-binding.js`)))
+      html = html.replaceAll(listPlaceholder, escapeAttribute(assetPath(base, `assets/runtime/${family.id}/kudzu-list.js`)))
+    }
+    if (navigationGroup) html = html.replaceAll(escapeAttribute(navigationAssets.get(record.route)), escapeAttribute(navigationGroup.assetPath))
+    const finalRecord = createRouteBuildRecord({
+      route: record.route,
+      output: record.output,
+      html,
+      plan: record.plan,
+      handlerReferences: result.handlerReferences,
+      styles: record.artifacts.styles,
+      capabilities: record.capabilities,
+      entries,
+      runtimeSchema
+    })
+    if (family) runtimeFamilyByRecord.set(finalRecord, family)
+    if (navigationGroup) navigationAssets.set(finalRecord.route, navigationGroup.assetPath)
+    return finalRecord
+  })
+
   const assetsDirectory = join(outputDirectory, "assets")
   await mkdir(assetsDirectory, { recursive: true })
   const { handlerModules: emittedHandlerModules, workerReferences: renderedWorkerReferences, styles: renderedStyles } = planRouteArtifacts(routeRecords, handlerModules, workerReferences, module => assetPath(base, `assets/${module.path}`))
   const renderedStyleUrls = new Set(renderedStyles)
   if (renderedWorkerReferences.length && await exists(join(publicDirectory, "assets", "workers"))) throw new Error("public/assets/workers collides with Kudzu's generated Worker asset namespace")
-  const workerAssets = await project.workerCompiler.emit(renderedWorkerReferences, sourceFileSet, assetsDirectory, base, minify)
+  const { assets: workerAssets, outputs: workerOutputs } = await project.workerCompiler.emit(renderedWorkerReferences, sourceFileSet, assetsDirectory, base, minify)
   for (const module of emittedHandlerModules) {
     for (const reference of workerReferences) {
       if (reference.module !== assetPath(base, `assets/${module.path}`)) continue
@@ -260,63 +365,55 @@ async function buildInto(project, outputDirectory, { minify }) {
     if (module.code.includes("/__kudzu_worker_")) throw new Error(`Worker URL placeholder survived in ${module.path}`)
   }
   const plans = routeRecords.map(record => record.plan)
-  const capabilityIR = planRouteCapabilities(routeRecords, { navigationRouteCount: navigationRoutes.length })
-  const {
-    routes: { behaviors: behaviorCount, regularBehaviors: regularBehaviorCount, dependencyStateSeeds: dependencyStateSeedCount },
-    events: { command: commandEvents, hasNativeHandlers },
-    bindings: { count: bindingCount },
-    lists,
-    effects: { any: hasEffects, derivedDependencies: hasDerivedEffectDependencies, captures: hasEffectCaptures },
-    captures: { nestedState: hasNestedStateCaptures, setter: hasSetterCaptures },
-    runtime: { shared: hasSharedRuntime, dependency: hasDependencyRuntime }
-  } = capabilityIR
-  const runtimeName = usesDependencyRuntime => usesDependencyRuntime ? "kudzu-deps.js" : "kudzu.js"
+  const behaviorCount = routeRecords.filter(record => record.capabilities.hasBehaviors).length
   for (let offset = 0; offset < routeRecords.length; offset += 64) {
     await Promise.all(routeRecords.slice(offset, offset + 64).map(async record => {
       const routeDirectory = join(outputDirectory, record.output)
       await mkdir(routeDirectory, { recursive: true })
-      const html = preloadModules(record.html.replace(runtimePlaceholder, escapeAttribute(assetPath(base, `assets/${runtimeName(record.capabilities.usesDependencyRuntime)}`))))
-      await writeFile(join(routeDirectory, "index.html"), html)
+      if ([runtimePlaceholder, bindingPlaceholder, listPlaceholder].some(placeholder => record.html.includes(placeholder))) throw new Error(`Runtime family placeholder survived in ${record.route}`)
+      await writeFile(join(routeDirectory, "index.html"), preloadModules(record.html))
     }))
   }
-  if (navigationRoutes.length || behaviorCount && (hasSharedRuntime || regularBehaviorCount)) {
-    const runtimeFile = hasSharedRuntime ? "./shared-runtime.js" : "./runtime.js"
-    const runtime = generateCoreRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), capabilityIR)
-    await writeJavaScript(join(assetsDirectory, "kudzu.js"), runtime, minify)
-  }
-  if (hasDependencyRuntime) {
-    const runtime = specializeRuntime(await readFile(new URL("./dependency-runtime.js", import.meta.url), "utf8"), commandEvents, dependencyStateSeedCount > 0)
-    await writeJavaScript(join(assetsDirectory, "kudzu-deps.js"), runtime, minify)
-  }
-  if (bindingCount || hasNativeHandlers || hasEffectCaptures) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify, {
-    "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures),
-    "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
-  })
-  if (hasEffects) {
-    const generated = generateEffectRuntime(await readFile(new URL("./effect-runtime.js", import.meta.url), "utf8"), capabilityIR)
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-effect.js"), generated.source, minify, generated.define)
-  }
-  if (bindingCount || lists.styleCount) await writeJavaScript(join(assetsDirectory, "kudzu-style.js"), await readFile(new URL("./style.js", import.meta.url), "utf8"), minify)
-  if (bindingCount) {
-    const generated = generateBindingRuntime(await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"), capabilityIR, navigationRoutes.length > 0)
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), generated.source, minify, generated.define)
-  }
-  if (hasDerivedEffectDependencies) await writeJavaScript(join(assetsDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
-  if (lists.count) {
-    if (lists.selectors && !hasDerivedEffectDependencies) await writeJavaScript(join(assetsDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
-    const generated = generateListRuntime(await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"), capabilityIR)
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-list.js"), generated.source, minify, generated.define)
-    if (lists.selectors && !hasDerivedEffectDependencies) await rm(join(assetsDirectory, "kudzu-collection-selector.js"))
-  }
-  if (hasNativeHandlers) {
-    const generated = generateNativeRuntime(await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"), capabilityIR)
-    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), generated.source, minify, generated.define)
-    for (const [path, source] of routeEntrySources) if (path.startsWith("native/")) await writeRetainedRouteEntry(path, source, assetsDirectory, minify, routeEntryTransforms)
+  for (const family of runtimePlan.families) {
+    const capabilityIR = family.capability
+    const { bindings, captures, effects, events, lists, routes, runtime } = capabilityIR
+    const familyDirectory = join(assetsDirectory, "runtime", family.id)
+    await mkdir(familyDirectory, { recursive: true })
+    if (runtime.dependency) {
+      const source = await readFile(new URL("./dependency-runtime.js", import.meta.url), "utf8")
+      await writeJavaScript(join(familyDirectory, "kudzu-deps.js"), specializeRuntime(source, events.command, routes.dependencyStateSeeds > 0), minify)
+    } else {
+      const source = await readFile(new URL(runtime.shared ? "./shared-runtime.js" : "./runtime.js", import.meta.url), "utf8")
+      await writeJavaScript(join(familyDirectory, "kudzu.js"), generateCoreRuntime(source, capabilityIR), minify)
+    }
+    if (bindings.count || events.hasNativeHandlers || effects.captures) await writeJavaScript(join(familyDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify, {
+      "globalThis.__KUDZU_CAPTURE_STATE__": String(captures.nestedState),
+      "globalThis.__KUDZU_CAPTURE_SETTER__": String(captures.setter)
+    })
+    if (effects.any) {
+      const generated = generateEffectRuntime(await readFile(new URL("./effect-runtime.js", import.meta.url), "utf8"), capabilityIR)
+      await writeBundledJavaScript(join(familyDirectory, "kudzu-effect.js"), generated.source, minify, generated.define)
+    }
+    if (bindings.count || lists.styleCount) await writeJavaScript(join(familyDirectory, "kudzu-style.js"), await readFile(new URL("./style.js", import.meta.url), "utf8"), minify)
+    if (bindings.count) {
+      const generated = generateBindingRuntime(await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"), capabilityIR, family.navigation)
+      await writeBundledJavaScript(join(familyDirectory, "kudzu-binding.js"), generated.source, minify, generated.define)
+    }
+    if (effects.derivedDependencies || lists.selectors) await writeJavaScript(join(familyDirectory, "kudzu-collection-selector.js"), await readFile(new URL("./collection-selector.js", import.meta.url), "utf8"), minify)
+    if (lists.count) {
+      const generated = generateListRuntime(await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"), capabilityIR)
+      await writeBundledJavaScript(join(familyDirectory, "kudzu-list.js"), generated.source, minify, generated.define)
+    }
+    if (events.hasNativeHandlers) {
+      const generated = generateNativeRuntime(await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"), capabilityIR)
+      await writeJavaScript(join(familyDirectory, "kudzu-native.js"), generated.source, minify, generated.define)
+    }
   }
+  for (const [path, source] of routeEntrySources) if (path.startsWith("native/")) await writeRetainedRouteEntry(path, source, assetsDirectory, minify, routeEntryTransforms)
   if (navigationGroups.length) {
     const navigationSource = await readFile(new URL("./navigation-runtime.js", import.meta.url), "utf8")
     for (const group of navigationGroups) {
-      await writeJavaScript(join(assetsDirectory, group.assetName), generateNavigationRuntime(navigationSource, group), minify)
+      await writeJavaScript(join(assetsDirectory, "runtime", group.runtimeFamily.id, group.assetName), generateNavigationRuntime(navigationSource, group), minify)
     }
   }
   for (const handlerModule of emittedHandlerModules) {
@@ -333,8 +430,9 @@ async function buildInto(project, outputDirectory, { minify }) {
     await mkdir(dirname(output), { recursive: true })
     await writeJavaScript(output, module.code, minify)
   }
+  let handlerMetafile
   if (clientModules.length || emittedHandlerModules.some(module => module.hasPackageImports)) {
-    await bundle({
+    const result = await bundle({
       entryPoints: emittedHandlerModules.map(module => join(assetsDirectory, module.path)),
       outbase: join(assetsDirectory, "handlers"),
       outdir: join(assetsDirectory, "handlers"),
@@ -347,12 +445,16 @@ async function buildInto(project, outputDirectory, { minify }) {
       target: "es2022",
       minify,
       legalComments: "none",
+      metafile: true,
       logLevel: "silent"
     })
+    handlerMetafile = result.metafile
     await rm(join(assetsDirectory, "modules"), { recursive: true, force: true })
   }
   const sortedRewrites = rewrites.sort((left, right) => runtimeSpecificity(right) - runtimeSpecificity(left) || left.pattern.localeCompare(right.pattern))
   await writeFile(join(workDirectory, "kudzu-plan.json"), JSON.stringify({ routes: plans, rewrites: sortedRewrites }, null, 2))
+  const artifacts = createRouteArtifactReport(routeRecords, { base, handlerMetafile, outputDirectory, navigationAssets, runtimeFamilies: runtimePlan.families, runtimeFamilyByRecord, workerReferences: renderedWorkerReferences, workerOutputs })
+  await writeFile(join(workDirectory, "kudzu-artifacts.json"), JSON.stringify(artifacts, null, 2))
   const emittedCssFiles = new Set()
   for (const file of cssFiles.filter(file => renderedStyleUrls.has(assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`)))) {
     const output = join(assetsDirectory, relative(sourceDirectory, file))
@@ -384,10 +486,81 @@ async function buildInto(project, outputDirectory, { minify }) {
   }
   if (config.afterBuild !== undefined) {
     if (typeof config.afterBuild !== "function") throw new Error("kudzu.config afterBuild must be a function")
-    await config.afterBuild({ root, outDir: outputDirectory, sourceDir: sourceDirectory, base, routes: plans.map(plan => plan.route), plans, rewrites: sortedRewrites })
+    await config.afterBuild({ root, outDir: outputDirectory, sourceDir: sourceDirectory, base, routes: plans.map(plan => plan.route), plans, rewrites: sortedRewrites, artifacts })
+  }
+
+  const incremental = { compiledModules, renderedPages }
+  return {
+    result: { sourceResults, incremental },
+    pageCount: plans.length,
+    behaviorCount,
+    cache: { pageRenders, pageSources, placeholders, sourceResults: sourceResultsByFile }
   }
+}
 
-  return { result: { sourceResults }, pageCount: plans.length, behaviorCount }
+function affectedPageFiles({ changedFiles, pageFiles, pageSources, previous, sourceDirectory }) {
+  if (!previous || changedFiles === undefined) return new Set(pageFiles)
+  if (changedFiles.some(file => typeof file !== "string")) return new Set(pageFiles)
+  const changes = new Set(changedFiles.map(file => isAbsolute(file) ? file : resolve(sourceDirectory, file)))
+  if ([...changes].some(file => !/\.(?:ts|tsx)$/.test(file))) return new Set(pageFiles)
+  const affected = new Set()
+  for (const page of pageFiles) {
+    const current = pageSources.get(page)
+    const prior = previous.pageSources.get(page)
+    if (!prior || [...changes].some(file => current.has(file) || prior.has(file))) affected.add(page)
+  }
+  return affected
+}
+
+function expandAffectedNavigationGroups(affected, pageRenders, groups) {
+  if (!affected.size || !pageRenders || !groups.length) return
+  const groupRoutes = groups.map(group => new Set(group.routes))
+  const groupIndexes = new Set()
+  for (const page of affected) {
+    const render = pageRenders.get(page)
+    if (!render) {
+      for (let index = 0; index < groups.length; index++) groupIndexes.add(index)
+      continue
+    }
+    for (const draft of render.drafts) for (let index = 0; index < groups.length; index++) if (groupRoutes[index].has(draft.applicationRoute)) groupIndexes.add(index)
+  }
+  for (const [page, render] of pageRenders) {
+    if (render.drafts.some(draft => [...groupIndexes].some(index => groupRoutes[index].has(draft.applicationRoute)))) affected.add(page)
+  }
+}
+
+function replayPageRender(cached, state) {
+  for (const rewrite of cached.rewrites) {
+    const conflicting = state.rewrites.find(entry => sameRuntimePrecedence(entry, rewrite))
+    if (conflicting) throw new Error(`Ambiguous runtime routes: ${conflicting.route} and ${rewrite.route}`)
+    state.rewrites.push(rewrite)
+  }
+  for (const entry of cached.navigationRecords) {
+    const group = state.navigationByRoute.get(entry.route)
+    const routeRecord = { ...entry, group }
+    state.emittedNavigationRecords.push(routeRecord)
+    state.emittedApplicationRoutes.add(entry.route)
+    if (!group) continue
+    if (typeof cached.layout !== "function") throw new Error(`${group.label} emitted route ${JSON.stringify(entry.record.path ?? entry.record.id)} must export a layout function so Kudzu can emit route markers`)
+    if (group.layoutIdentity && group.layoutIdentity !== cached.layout) throw new Error(`${group.label} routes ${JSON.stringify(group.layoutRoute)} and ${JSON.stringify(entry.route)} must export the same layout function identity`)
+    group.layoutIdentity = cached.layout
+    group.layoutRoute ??= entry.route
+    group.records.push(entry.record)
+    group.routeRecords.push(routeRecord)
+  }
+  for (const draft of cached.drafts) {
+    const navigationGroup = state.navigationByRoute.get(draft.applicationRoute)
+    if (state.emittedRoutes.has(draft.record.route)) throw new Error(`Duplicate route: ${draft.record.route}`)
+    state.emittedRoutes.add(draft.record.route)
+    if (navigationGroup) {
+      state.navigationAssets.set(draft.record.route, navigationGroup.assetPath)
+      navigationGroup.buildRecords.push(draft.record)
+      navigationGroup.hasEffects ||= draft.result.hasEffects
+      navigationGroup.hasParams ||= draft.result.hasParams
+    }
+    state.routeRecords.push(draft.record)
+    state.routeDrafts.push({ ...draft, navigationGroup })
+  }
 }
 
 async function acquireBuildLock(lockPath, root = dirname(lockPath)) {
@@ -489,10 +662,9 @@ function inlineQueryFormCarry(html, plan) {
   return html.replace("</body>", `${script}</body>`)
 }
 
-function printNativeEntrySource(modules, base) {
+function printNativeEntrySource(modules, runtime) {
   const imports = modules.map((module, index) => `import * as __kNativeModule${index} from ${JSON.stringify(module)}`).join("\n")
   const registrations = modules.map((module, index) => `[${JSON.stringify(module)}, __kNativeModule${index}]`).join(",")
-  const runtime = assetPath(base, "assets/kudzu-native.js")
   return `import { registerNativeModules } from ${JSON.stringify(runtime)}\n${imports}\nregisterNativeModules([${registrations}])`
 }
 
@@ -545,7 +717,7 @@ async function writeBundledJavaScript(file, source, minify, define) {
     stdin: { contents: source, resolveDir: dirname(file), sourcefile: file },
     bundle: true,
     write: false,
-    external: ["./kudzu.js", "./kudzu-binding.js", "./kudzu-serialization.js", "./kudzu-style.js"],
+    external: ["./kudzu.js", "./kudzu-binding.js", "./kudzu-collection-selector.js", "./kudzu-serialization.js", "./kudzu-style.js"],
     define,
     format: "esm",
     target: "es2022",
@@ -562,7 +734,7 @@ export async function dev({ port = parseDevPort(process.env.PORT), host = parseD
   const project = createProjectSession(projectRoot)
   const { root, sourceDirectory, workDirectory, outputDirectory } = project
   const base = normalizeBase((await loadConfig(root)).base)
-  return startDevServer({ build: options => build({ ...options, root }), port, host, base, sourceDirectory, workDirectory, outputDirectory })
+  return startDevServer({ build: options => buildWithSession(project, options), port, host, base, sourceDirectory, workDirectory, outputDirectory })
 }
 
 function inlineJson(value) {

package/framework/compiler/effect-codegen.mjs

@@ -1,7 +1,7 @@
 import { join } from "node:path"
 
 export function createEffectCodegen({ assetPath, inlineJson, relativeModulePath }) {
-function printEffectEntry(effects, output, handlerModules, assetsDirectory, base, paramPath, runtimeName) {
+function printEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base, paramPath, runtimeName) {
   const hasCleanup = effects.some(effect => effect.cleanup)
   const hasDependencies = effects.some(effect => effect.dependencies?.length || effect.itemDependencies?.length)
   const hasOwners = effects.some(effect => effect.owner)
@@ -14,10 +14,10 @@ function printEffectEntry(effects, output, handlerModules, assetsDirectory, base
   })
   const imports = [
     hasCleanup || hasDependencies || hasOwners
-      ? `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, runtimeName)))}\nconst { browserState, commitDom } = __kRuntime`
-      : `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, runtimeName)))}`,
-    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
-    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
+      ? `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, runtimeName)))}\nconst { browserState, commitDom } = __kRuntime`
+      : `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, runtimeName)))}`,
+    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...(paramPath ? [`import ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, paramPath)))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
@@ -178,7 +178,7 @@ addEventListener("pagehide", event => {
 })`
 }
 
-function printNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base) {
+function printNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base) {
   const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
   const moduleUrls = [...new Set(effects.map(effect => effect.module))]
   const modules = moduleUrls.map(url => {
@@ -187,9 +187,9 @@ function printNavigableEffectEntry(effects, output, handlerModules, assetsDirect
     return module
   })
   const imports = [
-    `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}`,
-    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
-    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
+    `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu.js")))}`,
+    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
   const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
@@ -300,7 +300,7 @@ ${hasDependencyExpressions ? printDerivedDependencyRead("__kRuntime.browserState
 }`
 }
 
-function printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base) {
+function printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base) {
   const hasItemDependencies = effects.some(effect => effect.itemDependencies?.length)
   const hasDependencyExpressions = effects.some(effect => effect.dependencyExpressions?.length)
   const moduleUrls = [...new Set(effects.map(effect => effect.module))]
@@ -310,9 +310,9 @@ function printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsD
     return module
   })
   const imports = [
-    `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}`,
-    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.js")))}`,
-    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-collection-selector.js")))}`] : []),
+    `import * as __kRuntime from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu.js")))}`,
+    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-effect.js")))}`,
+    ...(hasDependencyExpressions ? [`import { evaluateCollectionExpression as __kEvaluateDependency } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, "kudzu-collection-selector.js")))}`] : []),
     ...modules.map((module, index) => `import * as __kEffectModule${index} from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, module.path)))}`)
   ]
   const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
@@ -876,9 +876,9 @@ async function invokeCleanup() {
 }${disposal}`
 }
 
-return (effects, output, handlerModules, assetsDirectory, base, paramPath, runtimeName, navigable) => navigable
+return (effects, output, handlerModules, assetsDirectory, base, paramPath, runtimeName, navigable, runtimeDirectory = assetsDirectory) => navigable
   ? effects.some(effect => effect.owner)
-    ? printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base)
-    : printNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, base)
-  : printEffectEntry(effects, output, handlerModules, assetsDirectory, base, paramPath, runtimeName)
+    ? printOwnedNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base)
+    : printNavigableEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base)
+  : printEffectEntry(effects, output, handlerModules, assetsDirectory, runtimeDirectory, base, paramPath, runtimeName)
 }