@kudzujs/core 0.8.52 → 0.8.55

package/framework/compiler/runtime-codegen.mjs

@@ -113,7 +113,7 @@ async function mountInitial() {
 `, "", "initial effect mount"],
     ["  await ready\n", "", "initial effect readiness"],
     ["    const { incoming, parsed, capabilities } = documentResult\n", "    const { incoming, parsed } = documentResult\n", "navigation capability result"],
-    ["    await routeDispose()\n    if (current !== revision) return\n", "", "route effect disposal"],
+    ["    await routeDispose()\n    if (current !== revision) {\n      styleUpdate.rollback()\n      return\n    }\n", "", "route effect disposal"],
     ["    commit(incoming, parsed.nodes, capabilities.params, url.pathname, url.search)\n", "    commit(incoming, parsed.nodes)\n", "navigation capability commit"],
     ["    routeDispose = await capabilities.effects?.mountRouteEffects?.() ?? noDispose\n", "", "route effect mount"],
     ["  return { incoming, parsed, capabilities: await loadCapabilities(parsed), record }\n", "  await Promise.all(parsed.assets.filter(path => path !== navigationAsset).map(path => import(path)))\n  return { incoming, parsed, record }\n", "navigation capability load"],

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

@@ -3059,7 +3059,7 @@ async function safeStaticFiles(files) {
   return new Set(entries.filter(Boolean))
 }
 
-function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
+function orderSourceStyles(entryFiles, sourceFiles, sourceIndex, staticFiles) {
   const ordered = []
   const seenStyles = new Set()
   const seenSources = new Set()
@@ -3069,11 +3069,13 @@ function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
     seenSources.add(file)
     const sourceFile = parseSourceFile(file, sourceIndex.get(file))
     for (const statement of sourceFile.statements) {
-      if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier) || !statement.moduleSpecifier.text.startsWith(".")) continue
+      if ((!ts.isImportDeclaration(statement) && !ts.isExportDeclaration(statement)) || !runtimeModuleReference(statement) || !statement.moduleSpecifier || !ts.isStringLiteral(statement.moduleSpecifier) || !statement.moduleSpecifier.text.startsWith(".")) continue
       const specifier = statement.moduleSpecifier.text
-      if (staticImportExtension(specifier) === ".css") {
-        let target
-        try { target = resolveStaticImport(file, specifier, staticFiles) } catch { continue }
+      const queryIndex = specifier.indexOf("?")
+      const query = queryIndex === -1 ? "" : specifier.slice(queryIndex + 1)
+      if (ts.isImportDeclaration(statement) && staticImportExtension(specifier) === ".css") {
+        if (query) continue
+        const target = resolveStaticImport(file, specifier, staticFiles)
         if (!seenStyles.has(target)) {
           seenStyles.add(target)
           ordered.push(target)
@@ -3081,12 +3083,11 @@ function orderSourceStyles(cssFiles, sourceFiles, sourceIndex, staticFiles) {
         continue
       }
       if (isStaticImport(specifier)) continue
-      try { visit(resolveSourceImport(file, specifier, sourceSet)) } catch {}
+      visit(resolveSourceImport(file, specifier, sourceSet))
     }
   }
-  for (const file of sourceFiles.filter(file => file.startsWith(`${pagesDirectory}${sep}`) && file.endsWith(".tsx"))) visit(file)
-  for (const file of sourceFiles) visit(file)
-  return [...ordered, ...cssFiles.filter(file => !seenStyles.has(file))]
+  for (const file of entryFiles) visit(file)
+  return ordered
 }
 
 function staticImportEntry(node, sourceFile, file, staticFiles, importedAssets, cssModules, base, factory) {
@@ -3105,7 +3106,7 @@ function staticImportEntry(node, sourceFile, file, staticFiles, importedAssets,
   const extension = staticImportExtension(specifier)
   if (query === "url") {
     if (!node.importClause?.name || node.importClause.isTypeOnly || node.importClause.namedBindings) throw sourceNodeError(node, sourceFile, "Static assets require one default import")
-    if (extension !== ".css") importedAssets.add(target)
+    importedAssets.add(target)
     const value = factory.createStringLiteral(assetPath(base, `assets/${relative(sourceDirectory, target).replaceAll(sep, "/")}`))
     return staticImportReplacement(node.importClause.name.text, value, factory)
   }

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

@@ -486,9 +486,11 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
     const title = escapeHtml(metadata.title ?? "Kudzu")
     const head = renderMetadata(metadata)
     const capability = metadata.navigationAsset ? " data-k-capability" : ""
+    const managedStyles = new Set(metadata.managedStyles ?? [])
+    const styleAnchor = metadata.navigationAsset ? "<meta data-k-style-anchor>" : ""
     const styles = metadata.styles === false
       ? ""
-      : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}">`).join("")
+      : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}"${managedStyles.has(href) ? " data-k-route-style" : ""}>`).join("")
     const runtime = renderContext.hasBehaviors
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.runtimeAsset ?? assetPath(metadata.base, "assets/kudzu.js"))}"></script>`
       : ""
@@ -499,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>`
@@ -526,7 +528,7 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
       : ""
 
     return {
-      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styles}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}${navigationRuntime}</head><body${state}${textBindings}${metadata.applicationId ? ` data-k-application="${escapeAttribute(metadata.applicationId)}" data-k-layout="${escapeAttribute(metadata.layoutId)}" data-k-route="${escapeAttribute(metadata.routeId)}"` : ""}>${body}</body></html>`,
+      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styleAnchor}${styles}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}${navigationRuntime}</head><body${state}${textBindings}${metadata.applicationId ? ` data-k-application="${escapeAttribute(metadata.applicationId)}" data-k-layout="${escapeAttribute(metadata.layoutId)}" data-k-route="${escapeAttribute(metadata.routeId)}"` : ""}>${body}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasEffects: renderContext.hasEffects,
       hasParams: renderContext.hasParams,

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

package/framework/navigation-runtime.js

@@ -12,6 +12,7 @@ status.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;padding
 document.body.append(status)
 
 let request
+let pendingStyleUpdate
 let revision = 0
 const documents = new Map()
 let observer
@@ -115,9 +116,12 @@ async function navigate(url, push) {
   const record = matchRoute(url.pathname)
   if (!record) return fallback(url, push)
   const current = ++revision
+  pendingStyleUpdate?.rollback()
+  pendingStyleUpdate = undefined
   request?.abort()
   request = new AbortController()
   let committed = false
+  let styleUpdate
   try {
     let documentResult
     const cached = documents.get(url.href)
@@ -128,8 +132,20 @@ async function navigate(url, push) {
     documents.set(url.href, Promise.resolve(documentResult))
     const { incoming, parsed, capabilities } = documentResult
     if (current !== revision) return
+    styleUpdate = prepareStyles(parsed.styles)
+    pendingStyleUpdate = styleUpdate
+    await styleUpdate.ready
+    if (current !== revision) {
+      styleUpdate.rollback()
+      return
+    }
     await routeDispose()
-    if (current !== revision) return
+    if (current !== revision) {
+      styleUpdate.rollback()
+      return
+    }
+    styleUpdate.commit()
+    if (pendingStyleUpdate === styleUpdate) pendingStyleUpdate = undefined
     commit(incoming, parsed.nodes, capabilities.params, url.pathname, url.search)
     committed = true
     routeDispose = await capabilities.effects?.mountRouteEffects?.() ?? noDispose
@@ -139,6 +155,8 @@ async function navigate(url, push) {
     status.textContent = `Navigated to ${document.title}`
     discover()
   } catch (error) {
+    styleUpdate?.rollback()
+    if (pendingStyleUpdate === styleUpdate) pendingStyleUpdate = undefined
     if (current !== revision || error.name === "AbortError") return
     fallback(url, push)
     if (committed) return
@@ -173,7 +191,73 @@ function validate(incoming, record) {
     return url.pathname
   })
   if (!assets.includes(navigationAsset)) throw new Error("Navigation capability asset is missing")
-  return { nodes, assets: [...new Set(assets)] }
+  const styles = [...incoming.head.querySelectorAll('link[data-k-route-style][rel="stylesheet"][href]')]
+  const styleUrls = styles.map(link => {
+    const url = new URL(link.href)
+    if (url.origin !== location.origin) throw new Error("Navigation stylesheet must be same-origin")
+    return url.href
+  })
+  if (new Set(styleUrls).size !== styleUrls.length) throw new Error("Navigation document has duplicate route stylesheets")
+  return { nodes, assets: [...new Set(assets)], styles }
+}
+
+function prepareStyles(incoming) {
+  const anchor = document.head.querySelector("meta[data-k-style-anchor]")
+  if (!anchor || document.head.querySelectorAll("meta[data-k-style-anchor]").length !== 1) throw new Error("Current navigation style anchor is invalid")
+  const current = [...document.head.querySelectorAll('link[data-k-route-style][rel="stylesheet"][href]')]
+  const place = links => {
+    let previous = anchor
+    for (const link of links) {
+      if (link.previousSibling !== previous) previous.after(link)
+      previous = link
+    }
+  }
+  const byUrl = new Map(current.map(link => [new URL(link.href).href, link]))
+  const next = []
+  const created = []
+  const loads = []
+  for (const source of incoming) {
+    const href = new URL(source.href).href
+    let link = byUrl.get(href)
+    if (link) byUrl.delete(href)
+    else {
+      link = document.importNode(source, true)
+      created.push(link)
+      loads.push(new Promise((resolve, reject) => {
+        link.addEventListener("load", resolve, { once: true })
+        link.addEventListener("error", () => reject(new Error("Navigation stylesheet failed to load")), { once: true })
+      }))
+    }
+    next.push(link)
+  }
+  let settled = false
+  let cancel
+  const update = {
+    ready: Promise.race([
+      Promise.all(loads),
+      new Promise((resolve, reject) => {
+        cancel = () => {
+          const error = new Error("Navigation stylesheet load was cancelled")
+          error.name = "AbortError"
+          reject(error)
+        }
+      })
+    ]),
+    commit() {
+      if (settled) return
+      settled = true
+      for (const link of byUrl.values()) link.remove()
+    },
+    rollback() {
+      if (settled) return
+      settled = true
+      place(current)
+      for (const link of created) link.remove()
+      cancel()
+    }
+  }
+  place(next)
+  return update
 }
 
 function commit(incoming, incomingNodes, initializeParams, pathname, search) {

package/package.json

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