@kudzujs/core 0.8.53 → 0.8.56

package/framework/compiler/param-codegen.mjs

@@ -1,7 +1,7 @@
 import { join } from "node:path"
 
 export function createParamCodegen({ browserPath, inlineJson, relativeModulePath }) {
-  return function printParamEntry(schema, params, searchParams, searchParamsWritable, output, assetsDirectory, base, runtimeName, navigable) {
+  return function printParamEntry(schema, params, searchParams, searchParamsWritable, output, runtimeDirectory, base, runtimeName, navigable) {
     const hasSearch = searchParams.length || searchParamsWritable
     const signature = hasSearch ? "pathname, search" : "pathname"
     const prefix = navigable ? `export function initializeParams(${signature}) {\n${searchParamsWritable ? "globalThis.__kSetSearchParams = setSearchParams\n" : ""}` : `${schema ? "let pathname = location.pathname\n" : ""}${hasSearch ? "let search = location.search\n" : ""}`
@@ -66,7 +66,7 @@ function setSearchParams(update, replace) {
 }
 ${navigable ? "" : `globalThis.__kSetSearchParams = setSearchParams
 addEventListener("popstate", () => ${searchParams.length ? "initializeSearch(location.search)" : "undefined"})`}` : ""
-    return `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, runtimeName)))}
+    return `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(runtimeDirectory, runtimeName)))}
 ${searchInitializer}${prefix}${pathname}${query}${suffix}${writer}`
   }
 }

package/framework/compiler/route-artifact-report.mjs

@@ -0,0 +1,133 @@
+import { dirname, relative, resolve, sep } from "node:path"
+import { assetPath } from "./path-helpers.mjs"
+import { assertRouteBuildRecord } from "./route-build-record.mjs"
+import { planRouteCapabilities } from "./route-capability-planner.mjs"
+import { capabilitySignature, planRuntimeFamilies } from "./runtime-family-planner.mjs"
+
+export function createRouteArtifactReport(records, {
+  base = "",
+  handlerMetafile,
+  outputDirectory,
+  navigationAssets = new Map(),
+  runtimeFamilies,
+  runtimeFamilyByRecord,
+  workerReferences = [],
+  workerOutputs = new Map()
+} = {}) {
+  for (const record of records) assertRouteBuildRecord(record)
+  if (!runtimeFamilies || !runtimeFamilyByRecord) ({ families: runtimeFamilies, familyByRecord: runtimeFamilyByRecord } = planRuntimeFamilies(records))
+  const handlerGraph = handlerMetafile ? outputGraph(handlerMetafile, outputDirectory, base) : new Map()
+  const routes = records.map(record => {
+    const capability = planRouteCapabilities([record], { navigationRouteCount: Number(record.capabilities.navigable) })
+    const handlerEntries = [...new Set(record.artifacts.handlers.map(reference => reference.module))].sort()
+    const handlerOutputs = closure(handlerEntries, handlerGraph, Boolean(handlerMetafile))
+    const workers = workerReferences
+      .filter(reference => record.artifacts.effects.some(effect => effect.module === reference.module && effect.handler === reference.handler))
+      .map(reference => {
+        const output = workerOutputs.get(reference.placeholder)
+        if (!output) throw new Error(`Worker output was not recorded: ${reference.root}`)
+        return { source: reference.root, entry: output.entry, chunks: [...output.chunks].sort() }
+      })
+      .sort((left, right) => left.source.localeCompare(right.source) || left.entry.localeCompare(right.entry))
+    return {
+      route: record.route,
+      capability: {
+        signature: capabilitySignature(capability),
+        manifest: capability
+      },
+      runtime: routeRuntimeEdges(record, capability, runtimeFamilyByRecord.get(record), base, navigationAssets.get(record.route)),
+      handlers: {
+        entries: handlerEntries,
+        chunks: handlerOutputs.filter(output => !handlerEntries.includes(output))
+      },
+      workers,
+      styles: [...record.artifacts.styles].sort()
+    }
+  }).sort((left, right) => left.route.localeCompare(right.route))
+  const owners = new Map()
+  for (const route of routes) {
+    for (const path of [...route.handlers.chunks, ...route.workers.flatMap(worker => worker.chunks)]) {
+      const paths = owners.get(path) ?? new Set()
+      paths.add(route.route)
+      owners.set(path, paths)
+    }
+  }
+  return {
+    version: 2,
+    runtimeFamilies: runtimeFamilies.map(family => ({
+      id: family.id,
+      signature: family.signature,
+      navigation: family.navigation,
+      routes: records.filter(record => runtimeFamilyByRecord.get(record)?.id === family.id).map(record => record.route).sort(),
+      manifest: family.capability,
+      requirements: familyRuntimeRequirements(family, base)
+    })),
+    routes,
+    sharedChunks: [...owners].filter(([, routes]) => routes.size > 1).map(([path, routes]) => ({ path, routes: [...routes].sort() })).sort((left, right) => left.path.localeCompare(right.path))
+  }
+}
+
+function routeRuntimeEdges(record, capability, family, base, navigationAsset) {
+  const entries = Object.values(record.entries).map(path => assetPath(base, `assets/${path}`))
+  if (navigationAsset) entries.push(navigationAsset)
+  if (!family) return { family: null, entries: [...new Set(entries)].sort(), requirements: [] }
+  const modules = []
+  const add = name => modules.push(runtimeAsset(base, family.id, name))
+  if (record.capabilities.hasBehaviors || record.capabilities.navigable) add(record.capabilities.usesDependencyRuntime ? "kudzu-deps.js" : "kudzu.js")
+  if (record.capabilities.hasBindings) add("kudzu-binding.js")
+  if (record.capabilities.hasLists) add("kudzu-list.js")
+  if (record.capabilities.hasBindings || record.capabilities.hasLists && family.capability.lists.styleCount) add("kudzu-style.js")
+  if (capability.effects.derivedDependencies || record.capabilities.hasLists && family.capability.lists.selectors) add("kudzu-collection-selector.js")
+  if (record.capabilities.hasBindings || capability.events.hasNativeHandlers || record.capabilities.hasEffects && family.capability.effects.captures) add("kudzu-serialization.js")
+  if (record.capabilities.hasEffects) add("kudzu-effect.js")
+  if (capability.events.hasNativeHandlers) add("kudzu-native.js")
+  return { family: family.id, entries: [...new Set(entries)].sort(), requirements: [...new Set(modules)].sort() }
+}
+
+function familyRuntimeRequirements(family, base) {
+  const { bindings, effects, events, lists, runtime } = family.capability
+  const names = [runtime.dependency ? "kudzu-deps.js" : "kudzu.js"]
+  if (bindings.count || events.hasNativeHandlers || effects.captures) names.push("kudzu-serialization.js")
+  if (effects.any) names.push("kudzu-effect.js")
+  if (bindings.count || lists.styleCount) names.push("kudzu-style.js")
+  if (bindings.count) names.push("kudzu-binding.js")
+  if (effects.derivedDependencies || lists.selectors) names.push("kudzu-collection-selector.js")
+  if (lists.count) names.push("kudzu-list.js")
+  if (events.hasNativeHandlers) names.push("kudzu-native.js")
+  return names.map(name => runtimeAsset(base, family.id, name)).sort()
+}
+
+const runtimeAsset = (base, id, name) => assetPath(base, `assets/runtime/${id}/${name}`)
+
+function outputGraph(metafile, outputDirectory, base) {
+  if (!metafile || typeof metafile !== "object" || !metafile.outputs || typeof metafile.outputs !== "object") throw new Error("Invalid esbuild metafile")
+  if (typeof outputDirectory !== "string") throw new Error("Route artifact reporting requires an output directory")
+  const paths = new Map()
+  for (const output of Object.keys(metafile.outputs)) paths.set(resolve(output), outputUrl(resolve(output), outputDirectory, base))
+  const graph = new Map()
+  for (const [output, metadata] of Object.entries(metafile.outputs)) {
+    const absolute = resolve(output)
+    const url = paths.get(absolute)
+    const imports = (metadata.imports ?? []).filter(entry => !entry.external).map(entry => paths.get(resolve(entry.path)) ?? paths.get(resolve(dirname(absolute), entry.path))).filter(Boolean)
+    graph.set(url, [...new Set(imports)].sort())
+  }
+  return graph
+}
+
+function outputUrl(output, outputDirectory, base) {
+  const path = relative(outputDirectory, output)
+  if (!path || path === ".." || path.startsWith(`..${sep}`)) throw new Error(`Bundled output is outside the build directory: ${output}`)
+  return assetPath(base, path.replaceAll(sep, "/"))
+}
+
+function closure(entries, graph, requireEntries) {
+  const visited = new Set()
+  const visit = output => {
+    if (visited.has(output)) return
+    if (requireEntries && !graph.has(output)) throw new Error(`Bundled handler entry was not emitted: ${output}`)
+    visited.add(output)
+    for (const imported of graph.get(output) ?? []) visit(imported)
+  }
+  for (const entry of entries) visit(entry)
+  return [...visited].sort()
+}

package/framework/compiler/runtime-family-planner.mjs

@@ -0,0 +1,48 @@
+import { createHash } from "node:crypto"
+import { assertRouteBuildRecord } from "./route-build-record.mjs"
+import { planRouteCapabilities } from "./route-capability-planner.mjs"
+
+export function capabilitySignature(capability) {
+  return createHash("sha256").update(JSON.stringify(capability)).digest("hex")
+}
+
+export function planRuntimeFamilies(records, navigationGroups = []) {
+  for (const record of records) assertRouteBuildRecord(record)
+  const grouped = new Set()
+  const scopes = []
+  for (const group of navigationGroups) {
+    const groupRecords = group.buildRecords ?? group.records ?? []
+    if (!groupRecords.length) continue
+    for (const record of groupRecords) {
+      if (!records.includes(record)) throw new Error(`Navigation runtime family contains an unknown route: ${record.route}`)
+      if (grouped.has(record)) throw new Error(`Route belongs to multiple runtime families: ${record.route}`)
+      grouped.add(record)
+    }
+    scopes.push({ navigation: true, records: groupRecords })
+  }
+  for (const record of records) if (!grouped.has(record) && record.capabilities.hasBehaviors) scopes.push({ navigation: false, records: [record] })
+
+  const familiesBySignature = new Map()
+  const signaturesById = new Map()
+  const familyByRecord = new Map()
+  for (const scope of scopes) {
+    const capability = planRouteCapabilities(scope.records, { navigationRouteCount: scope.navigation ? scope.records.length : 0 })
+    const descriptor = { version: 1, navigation: scope.navigation, capability }
+    const signature = capabilitySignature(descriptor)
+    const id = signature.slice(0, 16)
+    const existingSignature = signaturesById.get(id)
+    if (existingSignature && existingSignature !== signature) throw new Error(`Runtime family ID collision: ${id}`)
+    signaturesById.set(id, signature)
+    let family = familiesBySignature.get(signature)
+    if (!family) {
+      family = { id, signature, navigation: scope.navigation, capability, records: [] }
+      familiesBySignature.set(signature, family)
+    }
+    for (const record of scope.records) {
+      family.records.push(record)
+      familyByRecord.set(record, family)
+    }
+  }
+  const families = [...familiesBySignature.values()].map(family => ({ ...family, records: [...family.records].sort((left, right) => left.route.localeCompare(right.route)) })).sort((left, right) => left.id.localeCompare(right.id))
+  return { families, familyByRecord }
+}

package/framework/compiler/source-compiler.mjs

@@ -24,6 +24,7 @@ import { createZustandPass } from "./zustand-pass.mjs"
 
 export function createSourceCompiler(project) {
 const { root, sourceDirectory, pagesDirectory, workDirectory, workerCompiler, modules, counters } = project
+const buildDirectory = project.buildDirectory ?? workDirectory
 const { ordinaryRuntimeDependencies, resolveSourceImport, runtimeModuleReference } = project.graph
 const parseSourceFile = (file, source) => modules.read(file, source).sourceFile
 const staticAssetExtensions = new Set([".avif", ".gif", ".ico", ".jpeg", ".jpg", ".otf", ".png", ".svg", ".ttf", ".webp", ".woff", ".woff2"])
@@ -3166,7 +3167,7 @@ function clientModulePath(file) {
 }
 
 function compiledPath(file) {
-  return join(workDirectory, relative(sourceDirectory, file)).replace(/\.(?:ts|tsx)$/, ".mjs")
+  return join(buildDirectory, relative(sourceDirectory, file)).replace(/\.(?:ts|tsx)$/, ".mjs")
 }
 
 const compileEventCommand = createCommandSpecializer({ isPrimitiveLiteral: isPrimitiveDefaultLiteral })

package/framework/compiler/worker-compiler.mjs

@@ -130,7 +130,7 @@ export function createWorkerCompiler({
 
   const emit = async (references, sourceFiles, assetsDirectory, base, minify) => {
     const roots = [...new Set(references.map(reference => resolve(sourceDirectory, reference.root)))].sort()
-    if (!roots.length) return new Map()
+    if (!roots.length) return { assets: new Map(), outputs: new Map() }
     await validateGraphs(roots, sourceFiles)
     const workerDirectory = resolve(assetsDirectory, "workers")
     await mkdir(workerDirectory, { recursive: true })
@@ -152,16 +152,35 @@ export function createWorkerCompiler({
       logLevel: "silent"
     })
     const emitted = new Map()
+    const outputUrls = new Map(Object.keys(result.metafile.outputs).map(output => {
+      const outputFile = resolve(root, output)
+      return [outputFile, assetPath(base, relative(resolve(assetsDirectory, ".."), outputFile).replaceAll(sep, "/"))]
+    }))
+    const outputImports = new Map(Object.entries(result.metafile.outputs).map(([output, metadata]) => {
+      const outputFile = resolve(root, output)
+      return [outputUrls.get(outputFile), (metadata.imports ?? []).filter(entry => !entry.external).map(entry => outputUrls.get(resolve(root, entry.path)) ?? outputUrls.get(resolve(outputFile, "..", entry.path))).filter(Boolean)]
+    }))
+    const outputs = new Map()
     for (const [output, metadata] of Object.entries(result.metafile.outputs)) {
       if (!metadata.entryPoint) continue
       const entry = resolve(root, metadata.entryPoint)
       const rootReferences = references.filter(reference => resolve(sourceDirectory, reference.root) === entry)
       const outputFile = resolve(root, output)
-      const url = assetPath(base, relative(resolve(assetsDirectory, ".."), outputFile).replaceAll(sep, "/"))
-      for (const reference of rootReferences) emitted.set(reference.placeholder, url)
+      const url = outputUrls.get(outputFile)
+      const closure = new Set()
+      const visit = path => {
+        if (closure.has(path)) return
+        closure.add(path)
+        for (const imported of outputImports.get(path) ?? []) visit(imported)
+      }
+      visit(url)
+      for (const reference of rootReferences) {
+        emitted.set(reference.placeholder, url)
+        outputs.set(reference.placeholder, { entry: url, chunks: [...closure].filter(path => path !== url).sort() })
+      }
     }
     for (const reference of references) if (!emitted.has(reference.placeholder)) throw new Error(`Worker entry was not emitted: ${reference.root}`)
-    return emitted
+    return { assets: emitted, outputs }
   }
 
   return { candidate, emit, rejectConstructions, rejectOrdinaryImports, rewriteEffect }

package/framework/core.d.ts

@@ -64,6 +64,8 @@ export type PageMetadata = {
   styles?: boolean | string[]
   base?: string
   runtimeAsset?: string
+  bindingAsset?: string
+  listAsset?: string
   effectAsset?: string
   nativeAsset?: string
   paramAsset?: string

package/framework/core.mjs

@@ -501,10 +501,10 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.paramAsset)}"></script>`
       : ""
     const bindingRuntime = renderContext.hasBindings
-      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-binding.js")}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.bindingAsset ?? assetPath(metadata.base, "assets/kudzu-binding.js"))}"></script>`
       : ""
     const listRuntime = renderContext.hasLists
-      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-list.js")}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.listAsset ?? assetPath(metadata.base, "assets/kudzu-list.js"))}"></script>`
       : ""
     const effectRuntime = renderContext.hasEffects
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.effectAsset)}"></script>`

package/framework/dev-server.mjs

@@ -5,7 +5,7 @@ import { extname, join, resolve, sep } from "node:path"
 import { browserPath, withBase } from "./compiler/path-helpers.mjs"
 import { stateSchema } from "./dev-state.js"
 
-const devClient = (session, revision, schema) => `<script>(()=>{const show=event=>{let box=document.getElementById("__kudzu_error");if(!box){box=document.createElement("div");box.id="__kudzu_error";box.setAttribute("role","alert");box.setAttribute("aria-live","assertive");box.style.cssText="position:fixed;inset:0;z-index:2147483647;overflow:auto;padding:2rem;background:#200;color:#fff;font:16px/1.5 ui-monospace,monospace";const title=document.createElement("strong"),text=document.createElement("pre");title.textContent="Kudzu build error";text.style.whiteSpace="pre-wrap";box.append(title,text);document.body.append(box)}box.querySelector("pre").textContent=event.data};const schema=${inlineJson(schema)},route=location.pathname+location.search+location.hash,urls=[...document.querySelectorAll('script[type="module"][src]')].map(node=>node.src).filter(url=>/\/assets\/kudzu(?:-(?:binding|list|native))?\.js$/.test(new URL(url).pathname));const devImport=import("/__kudzu_dev.js"),runtimeImports=Promise.allSettled(urls.map(url=>import(url)));const ready=(async()=>{const dev=await devImport,modules=await runtimeImports,runtime=modules.find(result=>result.status==="fulfilled"&&result.value.browserState instanceof Map&&typeof result.value.commitDom==="function")?.value;try{dev.restoreState(sessionStorage,route,runtime?.browserState,schema,runtime?.commitDom)}catch{}return{dev,runtime}})().catch(()=>({}));const events=new EventSource("/__kudzu_reload?session=${session}&revision=${revision}");let reloading=false;events.addEventListener("reload",async()=>{if(reloading)return;reloading=true;try{const{dev,runtime}=await ready;dev?.snapshotState(sessionStorage,route,runtime?.browserState,schema)}catch{}location.reload()});events.addEventListener("build-error",show)})()</script>`
+const devClient = (session, revision, schema) => `<script>(()=>{const show=event=>{let box=document.getElementById("__kudzu_error");if(!box){box=document.createElement("div");box.id="__kudzu_error";box.setAttribute("role","alert");box.setAttribute("aria-live","assertive");box.style.cssText="position:fixed;inset:0;z-index:2147483647;overflow:auto;padding:2rem;background:#200;color:#fff;font:16px/1.5 ui-monospace,monospace";const title=document.createElement("strong"),text=document.createElement("pre");title.textContent="Kudzu build error";text.style.whiteSpace="pre-wrap";box.append(title,text);document.body.append(box)}box.querySelector("pre").textContent=event.data};const schema=${inlineJson(schema)},route=location.pathname+location.search+location.hash,urls=[...document.querySelectorAll('script[type="module"][src]')].map(node=>node.src).filter(url=>/\/assets\/runtime\/[a-f0-9]+\/kudzu(?:-deps|-binding|-list|-native)?\.js$/.test(new URL(url).pathname));const devImport=import("/__kudzu_dev.js"),runtimeImports=Promise.allSettled(urls.map(url=>import(url)));const ready=(async()=>{const dev=await devImport,modules=await runtimeImports,runtime=modules.find(result=>result.status==="fulfilled"&&result.value.browserState instanceof Map&&typeof result.value.commitDom==="function")?.value;try{dev.restoreState(sessionStorage,route,runtime?.browserState,schema,runtime?.commitDom)}catch{}return{dev,runtime}})().catch(()=>({}));const events=new EventSource("/__kudzu_reload?session=${session}&revision=${revision}");let reloading=false;events.addEventListener("reload",async()=>{if(reloading)return;reloading=true;try{const{dev,runtime}=await ready;dev?.snapshotState(sessionStorage,route,runtime?.browserState,schema)}catch{}location.reload()});events.addEventListener("build-error",show)})()</script>`
 
 export function parseDevPort(value) {
   if (value === undefined || value.trim() === "") return 3000
@@ -85,6 +85,7 @@ export async function startDevServer({ build, port, host, base, sourceDirectory,
   let rebuilding = false
   let pending = false
   let changedFile
+  const changedFiles = new Set()
   const rebuild = async () => {
     if (rebuilding) {
       pending = true
@@ -93,13 +94,16 @@ export async function startDevServer({ build, port, host, base, sourceDirectory,
     rebuilding = true
     do {
       pending = false
+      const changes = [...changedFiles]
+      changedFiles.clear()
       try {
-        await build({ quiet: true, minify: false })
+        await build({ changedFiles: changes, quiet: true, minify: false })
         buildError = undefined
         revision++
         console.log(`Rebuilt after ${changedFile ?? "source change"}`)
         for (const client of clients) sendEvent(client, "reload")
       } catch (error) {
+        for (const file of changes) changedFiles.add(file)
         buildError = errorText(error)
         console.error(error)
         for (const client of clients) sendEvent(client, "build-error", buildError)
@@ -110,6 +114,7 @@ export async function startDevServer({ build, port, host, base, sourceDirectory,
   const watcher = watch(sourceDirectory, { recursive: true })
   for await (const event of watcher) {
     changedFile = event.filename
+    changedFiles.add(event.filename)
     clearTimeout(timer)
     timer = setTimeout(rebuild, 80)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.8.53",
+  "version": "0.8.56",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",