@kudzujs/core 0.5.5 → 0.5.7

package/README.md

@@ -6,7 +6,7 @@
 
 HTML-first TSX framework with synchronous state semantics and no virtual DOM.
 
-Kudzu keeps the familiar function-component, props, children, event-handler, and `useState` shape. Static components compile to HTML. Simple interactions compile to small behavior commands, while normal sync or async JavaScript handlers compile to external ESM.
+Kudzu keeps the familiar function-component, props, children, event-handler, `useState`, and mount-effect shape. Static components compile to HTML. Simple interactions compile to small behavior commands, while normal sync or async JavaScript handlers and mount effects compile to external ESM.
 
 > Experimental `0.4.x`: the compiler API and supported TSX surface may change.
 
@@ -97,6 +97,27 @@ export default function Post({ title }: { title: string }) {
 
 This emits `/posts/oak` and `/posts/pine`. Parameter values must be safe single path segments; missing, unsafe, and duplicate routes fail the build.
 
+When a bracket value exists only in the request URL, opt into one static fallback document and read it with `useParams()`:
+
+```tsx
+// src/pages/items/[id].tsx
+import { useEffect, useParams } from "@kudzujs/core"
+
+export const runtimeParams = true
+
+export default function ItemPage() {
+  const { id } = useParams<{ id: string }>()
+
+  useEffect(() => {
+    fetch(`/api/items/${encodeURIComponent(id)}`)
+  }, [])
+
+  return <h1>Item {id}</h1>
+}
+```
+
+This emits `dist/items/[id]/index.html` and a route-specific pathname matcher. `getStaticPaths()` and `runtimeParams` are mutually exclusive. Runtime parameters occupy complete path segments, decode once, and reject empty, malformed, separator, control, and traversal-like values. The development server resolves deep links automatically. Production static hosts must try exact files first, then internally rewrite matching paths to the fallback file while preserving the browser URL; `.kudzu/kudzu-plan.json` and `afterBuild()` expose ordered `rewrites` for host adapters. Navigation remains ordinary `<a>` document navigation, not an SPA router.
+
 Static trusted HTML can be rendered without a transform layer:
 
 ```tsx
@@ -110,8 +131,8 @@ Every CSS file under `src` is copied to the same relative path under `dist/asset
 ```js
 export default {
   base: "/newsletter",
-  async afterBuild({ outDir, routes, plans, base }) {
-    // Write RSS, sitemap, search indexes, or other static artifacts.
+  async afterBuild({ outDir, routes, plans, rewrites, base }) {
+    // Write host rewrites, RSS, sitemap, or other static artifacts.
   }
 }
 ```
@@ -308,6 +329,27 @@ The original component remains reusable across multiple lists and ordinary JSX.
 
 Each item must be an ordinary plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, ordinary plain objects, and primitive values. Null-prototype objects are rejected to preserve JSON round-trip parity. The current syntax requires a local-state `.map`, one identifier callback parameter, one intrinsic JSX root or top-level local or relative-imported row component, and `key={item.<field>}`. Row components accept destructured projected props and top-level single-`const` calculations before one intrinsic return. A list alias may only be rendered once and cannot be read by other JavaScript. Derived expressions must be pure and synchronous: item reads, literals, operators, templates, approved read-only string/array methods, deterministic `Math` methods, and `String`/`Number`/`Boolean` conversion are supported. Component state, imported helpers used inside calculations, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Package or namespace row imports, same-file exported rows, reusable aliases, prop spreads/defaults/rest, children, nested item conditions, lists, or component tags, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
 
+## Mount Effects
+
+Browser-only initial work uses the familiar empty-dependency effect shape:
+
+```tsx
+import { useEffect, useState } from "@kudzujs/core"
+
+const [items, setItems] = useState([])
+
+useEffect(async () => {
+  const response = await fetch("/api/items")
+  setItems(await response.json())
+}, [])
+```
+
+Kudzu does not execute the effect during static rendering and does not ship the component. It emits one route-specific effect entry that invokes the compiled callback against existing logical state and direct DOM commit capabilities. Effects may update reactive text, attributes, conditions, and keyed lists. Multiple effects start independently in source order, and one synchronous or asynchronous failure is reported without suppressing later effects.
+
+Only inline block-bodied callbacks with a literal empty dependency array are supported. Dependencies, cleanup or other return values, callback parameters, and non-serializable captures are rejected at build time. Pages without effects receive no effect entry and retain their existing output.
+
+A matched mount-fetch benchmark renders a title and two keyed rows from local JSON. With one warm-up and seven rotating clean builds, Kudzu shipped initial HTML, 3.4 KB initial JS gzip, 8.1 KB total output, and built in 374 ms. React CSR shipped no initial content, 59.3 KB initial JS gzip, 189.2 KB total output, and built in 992 ms. Hand-written ESM shipped 534 B initial JS gzip, 1.2 KB total output, and built in 210 ms. Fresh-profile Chrome medians to loaded data were 157.9 ms, 166.5 ms, and 153.4 ms respectively.
+
 ## Normal JavaScript
 
 Command-only setters use the smallest optimized path. Conditions, local variables, browser globals, events, and `async`/`await` compile to external ESM without `eval`, `new Function`, or inline executable code.
@@ -374,9 +416,11 @@ Supported:
 - File-based static routes
 - Build-time async components
 - Dynamic static routes with build-time props
+- Runtime bracket parameters with static fallback documents and host rewrite metadata
 - Static trusted `dangerouslySetInnerHTML`
 - Base-path deployments, multiple CSS files, and `afterBuild`
 - Primitive `useState` bindings
+- Mount-only `useEffect(fn, [])` compiled to route-specific ESM
 - Synchronous and async event handlers
 - Relative imported helpers in native handlers
 - Serializable component-local captures

package/framework/README.md

@@ -1,6 +1,6 @@
 # Framework Internals
 
-- `build.mjs`: TSX compilation, static and `getStaticPaths` routes, base paths, CSS collection, post-build hooks, behavior extraction, static HTML output, and the development server.
+- `build.mjs`: TSX compilation, static, `getStaticPaths`, and runtime-fallback routes, base paths, CSS collection, post-build hooks, behavior extraction, static HTML output, and the development server.
 - `core.mjs`: server-side JSX rendering, state slots, context providers, behavior metadata, and serializable capture validation.
 - `jsx-runtime.mjs`: automatic JSX runtime used by TypeScript.
 - `runtime.js`: command-only runtime for direct state-to-text patches.
@@ -8,10 +8,11 @@
 - `binding-runtime.js`: optional generic attributes, form properties, comment-bounded text patches, and conditional range patches.
 - `list-runtime.js`: optional keyed list validation, external item-expression evaluation, item-local conditional ranges, dynamic styles and item-handler scopes, moves, and cleanup.
 - `serialization.js`: capture deserialization shared by binding and native handlers.
+- `effect-runtime.js`: optional state and capture context for route-specific mount-effect entries.
 - `native-runtime.js`: optional runtime for normal synchronous and asynchronous ESM handlers.
 - `dev-state.js`: dev-only, short-lived logical-state snapshot validation and restoration.
 - `*.d.ts`: public TypeScript and JSX declarations.
 
-Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes and conditions add `binding-runtime.js`; keyed lists add `list-runtime.js`; native handlers add `native-runtime.js`. Capability runtimes share state and lifecycle hooks through `shared-runtime.js`. Generated evaluators and their bundled relative TypeScript helpers live under `dist/assets/handlers/`; shared helper chunks are emitted only when multiple handler entries need them. The dev server derives stable state identities from route-unique state variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
+Static routes receive no browser runtime. Command routes receive `runtime.js`; runtime bracket pages using `useParams()` add one route-specific pathname matcher; reactive attributes and conditions add `binding-runtime.js`; keyed lists add `list-runtime.js`; native handlers add `native-runtime.js`; mount effects add `effect-runtime.js` and one route-specific entry. List builds remove unused text-range, attribute, event, expression, condition, seed, and mount branches. Effect builds omit capture deserialization entirely when every effect scope is empty. Capability runtimes share state and lifecycle hooks through `shared-runtime.js`. Generated evaluators and their bundled relative TypeScript helpers live under `dist/assets/handlers/`; shared helper chunks are emitted only when multiple handler entries need them. Runtime fallback rewrites are ordered by specificity in `.kudzu/kudzu-plan.json` and passed to `afterBuild()`; exact static files take precedence in development. The dev server derives stable state identities from route-unique state variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime.

package/framework/build.mjs

@@ -46,6 +46,9 @@ export async function build({ quiet = false, minify = true } = {}) {
   let listStyleCount = 0
   let stateSeedCount = 0
   const plans = []
+  const effectEntries = []
+  const paramEntries = []
+  const rewrites = []
   const emittedRoutes = new Set()
   const styleUrls = cssFiles.map(file => assetPath(base, `assets/${relative(sourceDirectory, file).replaceAll(sep, "/")}`))
 
@@ -54,21 +57,40 @@ export async function build({ quiet = false, minify = true } = {}) {
     const module = await import(`${pathToFileURL(compiledFile).href}?v=${Date.now()}`)
     if (typeof module.default !== "function") throw new Error(`${relative(root, pageFile)} must export a default component`)
 
-    const entries = await staticPathEntries(module, pageFile)
+    const runtimeSchema = runtimeRouteSchema(module, pageFile)
+    if (runtimeSchema) {
+      const conflicting = rewrites.find(rewrite => sameRuntimePrecedence(rewrite, runtimeSchema))
+      if (conflicting) throw new Error(`Ambiguous runtime routes: ${conflicting.route} and ${runtimeSchema.route}`)
+      rewrites.push({
+        route: runtimeSchema.route,
+        pattern: withBase(base, `/${runtimeSchema.route}`),
+        file: `${runtimeSchema.route}/index.html`,
+        params: runtimeSchema.params,
+        segments: runtimeSchema.segments
+      })
+    }
+    const entries = runtimeSchema ? [{ params: {}, props: {} }] : await staticPathEntries(module, pageFile)
     for (const { params, props } of entries) {
-      const route = routeFromPage(pageFile, params)
+      const route = runtimeSchema?.route ?? routeFromPage(pageFile, params)
       const routePath = withBase(base, `/${route}`)
+      const effectPath = `effects/${route ? `${route}/index` : "index"}.js`
+      const paramPath = `params/${route}/index.js`
       if (emittedRoutes.has(routePath)) throw new Error(`Duplicate route: ${routePath}`)
       emittedRoutes.add(routePath)
       const result = await renderPage(module.default, {
         ...(module.metadata ?? {}),
         styles: styleUrls.length ? styleUrls : false,
-        base
+        base,
+        effectAsset: assetPath(base, `assets/${effectPath}`),
+        paramAsset: assetPath(base, `assets/${paramPath}`),
+        runtimeParams: runtimeSchema?.params
       }, props)
       const routeDirectory = join(outputDirectory, route)
       await mkdir(routeDirectory, { recursive: true })
       await writeFile(join(routeDirectory, "index.html"), result.html)
       plans.push({ route: routePath, ...result.plan })
+      if (result.hasParams) paramEntries.push({ path: paramPath, schema: runtimeSchema, params: result.plan.params })
+      if (result.hasEffects) effectEntries.push({ path: effectPath, effects: result.plan.effects, paramPath: result.hasParams ? paramPath : undefined })
       if (result.hasBehaviors) behaviorCount++
       if (result.hasBindings) bindingCount++
       if (result.hasLists) listCount++
@@ -83,19 +105,37 @@ export async function build({ quiet = false, minify = true } = {}) {
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
   const hasTextBindings = plans.some(plan => plan.bindings.some(binding => binding.target === "text"))
   const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
+  const hasListTextRanges = plans.some(plan => plan.lists.some(list => list.textRanges))
+  const hasListAttributes = plans.some(plan => plan.lists.some(list => list.attributes))
+  const hasListEvents = plans.some(plan => plan.lists.some(list => list.events))
+  const hasListExpressions = plans.some(plan => plan.lists.some(list => list.expressions))
+  const hasListExpressionAttributes = plans.some(plan => plan.lists.some(list => list.expressionAttributes))
+  const hasListSeeds = plans.some(plan => plan.lists.some(list => list.seed))
+  const hasListAsyncParts = hasListExpressions || hasListExpressionAttributes || hasListConditions
+  const hasListMounts = hasListConditions || plans.some(plan => plan.lists.some(list => list.mount))
   const hasNestedStateCaptures = hasNestedCaptureState(plans)
   const hasSetterCaptures = hasCaptureType(plans, "setter")
+  const hasEffectCaptures = plans.some(plan => plan.effects.some(effect => Object.keys(effect.scope).length))
   const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => assetPath(base, `assets/${module.path}`))
   const hasNativeHandlers = nativeModules.length > 0
+  const hasEffects = effectEntries.length > 0
   if (behaviorCount) {
     const runtimeFile = bindingCount || listCount || hasNativeHandlers ? "./shared-runtime.js" : "./runtime.js"
     const runtime = specializeRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), commandEvents, stateSeedCount > 0)
     await writeJavaScript(join(assetsDirectory, "kudzu.js"), runtime, minify)
   }
-  if (bindingCount || hasNativeHandlers) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), 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) {
+    let effectRuntime = await readFile(new URL("./effect-runtime.js", import.meta.url), "utf8")
+    effectRuntime = hasEffectCaptures ? effectRuntime.replace('"./serialization.js"', '"./kudzu-serialization.js"') : effectRuntime.replace(/^import[^\n]+\n/, "")
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-effect.js"), effectRuntime, minify, {
+      "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures),
+      "globalThis.__KUDZU_EFFECT_CAPTURES__": String(hasEffectCaptures)
+    })
+  }
   if (bindingCount || listStyleCount) await writeJavaScript(join(assetsDirectory, "kudzu-style.js"), await readFile(new URL("./style.js", import.meta.url), "utf8"), minify)
   if (bindingCount) {
     const bindingRuntime = (await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"))
@@ -118,7 +158,17 @@ export async function build({ quiet = false, minify = true } = {}) {
   }`
     listRuntime = listRuntime.replace("  /* list-style */", listStyleCount ? stylePatch : "")
     if (listStyleCount) listRuntime = `import { serializeStyle } from "./kudzu-style.js"\n${listRuntime}`
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify, { __KUDZU_LIST_CONDITIONS__: String(hasListConditions) })
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify, {
+      __KUDZU_LIST_CONDITIONS__: String(hasListConditions),
+      __KUDZU_LIST_TEXT_RANGES__: String(hasListTextRanges),
+      __KUDZU_LIST_ATTRIBUTES__: String(hasListAttributes),
+      __KUDZU_LIST_EVENTS__: String(hasListEvents),
+      __KUDZU_LIST_EXPRESSIONS__: String(hasListExpressions),
+      __KUDZU_LIST_EXPRESSION_ATTRIBUTES__: String(hasListExpressionAttributes),
+      __KUDZU_LIST_SEEDS__: String(hasListSeeds),
+      __KUDZU_LIST_ASYNC_PARTS__: String(hasListAsyncParts),
+      __KUDZU_LIST_MOUNTS__: String(hasListMounts)
+    })
   }
   if (hasNativeHandlers) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
@@ -133,6 +183,16 @@ export async function build({ quiet = false, minify = true } = {}) {
     await mkdir(resolve(output, ".."), { recursive: true })
     await writeJavaScript(output, handlerModule.code, minify)
   }
+  for (const entry of paramEntries) {
+    const output = join(assetsDirectory, entry.path)
+    await mkdir(dirname(output), { recursive: true })
+    await writeJavaScript(output, printParamEntry(entry.schema, entry.params, output, assetsDirectory, base), minify)
+  }
+  for (const entry of effectEntries) {
+    const output = join(assetsDirectory, entry.path)
+    await mkdir(dirname(output), { recursive: true })
+    await writeJavaScript(output, printEffectEntry(entry.effects, output, handlerModules, assetsDirectory, base, entry.paramPath), minify)
+  }
   const clientModules = await collectClientModules(handlerModules.flatMap(module => module.clientImports), sourceFileSet)
   for (const file of clientModules) {
     const output = join(assetsDirectory, clientModulePath(file))
@@ -157,7 +217,8 @@ export async function build({ quiet = false, minify = true } = {}) {
     })
     await rm(join(assetsDirectory, "modules"), { recursive: true, force: true })
   }
-  await writeFile(join(workDirectory, "kudzu-plan.json"), JSON.stringify({ routes: plans }, null, 2))
+  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))
   for (const file of cssFiles) {
     const output = join(assetsDirectory, relative(sourceDirectory, file))
     await mkdir(dirname(output), { recursive: true })
@@ -166,7 +227,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   if (await exists(join(root, "public"))) await cp(join(root, "public"), outputDirectory, { recursive: true })
   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 })
+    await config.afterBuild({ root, outDir: outputDirectory, sourceDir: sourceDirectory, base, routes: plans.map(plan => plan.route), plans, rewrites: sortedRewrites })
   }
 
   if (!quiet) console.log(`Built ${plans.length} page(s), ${behaviorCount} interactive page(s) into dist/`)
@@ -182,6 +243,69 @@ function specializeNativeRuntime(source, events, modules) {
   return `${imports}\n${specializeEvents(source, events).replace(/const modules = new Map\(\[[^\n]*\]\)/, `const modules = new Map([${entries}])`)}`
 }
 
+function printEffectEntry(effects, output, handlerModules, assetsDirectory, base, paramPath) {
+  const moduleUrls = [...new Set(effects.map(effect => effect.module))]
+  const modules = moduleUrls.map(url => {
+    const module = handlerModules.find(entry => assetPath(base, `assets/${entry.path}`) === url)
+    if (!module) throw new Error(`Effect handler module was not emitted: ${url}`)
+    return module
+  })
+  const imports = [
+    `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}`,
+    `import { createEffectContext } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu-effect.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)))}`)
+  ]
+  const entries = moduleUrls.map((url, index) => `[${JSON.stringify(url)}, __kEffectModule${index}]`).join(",")
+  return `${imports.join("\n")}
+const effects = ${inlineJson(effects)}
+const modules = new Map([${entries}])
+for (const effect of effects) {
+  try {
+    const result = modules.get(effect.module)[effect.handler](createEffectContext(browserState, effect.states, commitDom, effect.scope))
+    if (result && typeof result.then === "function") result.catch(error => console.error(error))
+  } catch (error) {
+    console.error(error)
+  }
+}`
+}
+
+function printParamEntry(schema, params, output, assetsDirectory, base) {
+  return `import { browserState, commitDom } from ${JSON.stringify(relativeModulePath(output, join(assetsDirectory, "kudzu.js")))}
+const base = ${inlineJson(browserPath(base).slice(1).split("/").filter(Boolean).map(segment => decodeURIComponent(segment)))}
+const schema = ${inlineJson(schema.segments)}
+const params = ${inlineJson(params)}
+let path = location.pathname
+if (base.length) {
+  const pathSegments = path.slice(1).split("/")
+  if (pathSegments.length < base.length || base.some((segment, index) => decodeSegment(pathSegments[index], false) !== segment)) throw new Error("Runtime route is outside the configured base")
+  path = "/" + pathSegments.slice(base.length).join("/")
+}
+if (path.length > 1 && path.endsWith("/")) path = path.slice(0, -1)
+const segments = path.slice(1).split("/")
+if (segments.length !== schema.length) throw new Error("Runtime route does not match its fallback pattern")
+const values = Object.create(null)
+for (let index = 0; index < schema.length; index++) {
+  const segment = schema[index]
+  const value = decodeSegment(segments[index], Boolean(segment.param))
+  if (segment.literal !== undefined && value !== segment.literal) throw new Error("Runtime route literal does not match")
+  if (segment.param) values[segment.param] = value
+}
+for (const param of params) {
+  const value = values[param.name]
+  browserState.set(param.id, value)
+  commitDom(param.id, value)
+}
+function decodeSegment(raw, param) {
+  if (param && /%(?:2f|5c)/i.test(raw)) throw new Error("Runtime route parameter contains an encoded separator")
+  let value
+  try { value = decodeURIComponent(raw) } catch { throw new Error("Runtime route parameter has malformed encoding") }
+  const decodedDots = value.replace(/%2e/gi, ".")
+  if (param && (!value || value === "." || value === ".." || decodedDots === "." || decodedDots === ".." || /[\\/?#]/.test(value) || [...value].some(character => character.charCodeAt(0) < 32 || character.charCodeAt(0) >= 127 && character.charCodeAt(0) <= 159) || /%(?:2f|5c)/i.test(value))) throw new Error("Runtime route parameter is invalid")
+  return value
+}`
+}
+
 function hasCaptureType(value, type) {
   if (!value || typeof value !== "object") return false
   if (value.type === type) return true
@@ -253,7 +377,8 @@ export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
   const server = createServer(async (request, response) => {
     try {
       const url = new URL(request.url, "http://localhost")
-      const pathname = decodeURIComponent(url.pathname)
+      const rawPathname = url.pathname
+      const pathname = decodeURIComponent(rawPathname)
       if (pathname === "/__kudzu_reload") {
         response.writeHead(200, {
           "content-type": "text/event-stream; charset=utf-8",
@@ -273,15 +398,24 @@ export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
         return
       }
 
-      const relativePath = stripBase(pathname, base).replace(/^\/+/, "")
+      const relativePath = stripBaseStrict(pathname, decodeURIComponent(base)).replace(/^\/+/, "")
       let file = resolve(outputDirectory, relativePath)
       if (!file.startsWith(`${outputDirectory}${sep}`) && file !== outputDirectory) throw new Error("Invalid path")
 
       if ((await exists(file)) && (await stat(file)).isDirectory()) file = join(file, "index.html")
       if (!(await exists(file)) && !extname(file)) file = join(file, "index.html")
+      let matchedRoute
+      if (!(await exists(file)) && !buildError) {
+        const plan = JSON.parse(await readFile(join(workDirectory, "kudzu-plan.json"), "utf8"))
+        const rewrite = plan.rewrites?.find(entry => runtimePathValues(rawPathname, entry, browserPath(base)))
+        if (rewrite) {
+          file = resolve(outputDirectory, rewrite.file)
+          matchedRoute = rewrite.pattern
+        }
+      }
       const isHtml = extname(file) === ".html"
       const content = isHtml
-        ? injectDevClient(buildError ? errorPage(buildError) : await readFile(file, "utf8"), session, revision, buildError ? [] : await devSchema(pathname))
+        ? injectDevClient(buildError ? errorPage(buildError) : await readFile(file, "utf8"), session, revision, buildError ? [] : await devSchema(withBase(base, stripBaseStrict(pathname, decodeURIComponent(base))), matchedRoute))
         : await readFile(file)
       response.writeHead(200, {
         "content-type": contentType(file),
@@ -334,22 +468,58 @@ function injectDevClient(html, session, revision, schema) {
   return `${html}${devClient(session, revision, schema)}`
 }
 
-function stripBase(path, base) {
+function stripBaseStrict(path, base) {
   if (!base) return path
   if (path === base) return "/"
-  return path.startsWith(`${base}/`) ? path.slice(base.length) : path
+  if (path.startsWith(`${base}/`)) return path.slice(base.length)
+  throw new Error("Path is outside the configured base")
 }
 
-async function devSchema(pathname) {
+async function devSchema(pathname, matchedRoute) {
   try {
     const plan = JSON.parse(await readFile(join(workDirectory, "kudzu-plan.json"), "utf8"))
-    const route = pathname.replace(/\/(?:index\.html)?$/, "") || "/"
+    const route = matchedRoute ?? (pathname.replace(/\/(?:index\.html)?$/, "") || "/")
     return stateSchema(plan.routes.find(entry => entry.route === route)?.states ?? [])
   } catch {
     return []
   }
 }
 
+function runtimePathValues(pathname, rewrite, base) {
+  try {
+    let path = stripBrowserBase(pathname, base)
+    if (path.length > 1 && path.endsWith("/")) path = path.slice(0, -1)
+    const rawSegments = path.slice(1).split("/")
+    if (rawSegments.length !== rewrite.segments.length) return undefined
+    const values = Object.create(null)
+    for (let index = 0; index < rewrite.segments.length; index++) {
+      const segment = rewrite.segments[index]
+      const value = decodeRuntimeSegment(rawSegments[index], Boolean(segment.param))
+      if (segment.literal !== undefined && value !== segment.literal) return undefined
+      if (segment.param) values[segment.param] = value
+    }
+    return values
+  } catch {
+    return undefined
+  }
+}
+
+function stripBrowserBase(path, base) {
+  if (!base) return path
+  const pathSegments = path.slice(1).split("/")
+  const baseSegments = base.slice(1).split("/").map(segment => decodeURIComponent(segment))
+  if (pathSegments.length < baseSegments.length || baseSegments.some((segment, index) => decodeRuntimeSegment(pathSegments[index], false) !== segment)) throw new Error("Path is outside the configured base")
+  return `/${pathSegments.slice(baseSegments.length).join("/")}`
+}
+
+function decodeRuntimeSegment(raw, param) {
+  if (param && /%(?:2f|5c)/i.test(raw)) throw new Error("Encoded separator")
+  const value = decodeURIComponent(raw)
+  const decodedDots = value.replace(/%2e/gi, ".")
+  if (param && (!value || value === "." || value === ".." || decodedDots === "." || decodedDots === ".." || /[\\/?#]/.test(value) || [...value].some(character => character.charCodeAt(0) < 32 || character.charCodeAt(0) >= 127 && character.charCodeAt(0) <= 159) || /%(?:2f|5c)/i.test(value))) throw new Error("Invalid runtime parameter")
+  return value
+}
+
 function inlineJson(value) {
   return JSON.stringify(value).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029")
 }
@@ -373,6 +543,7 @@ function escapeHtml(value) {
 async function compile(file, sourceFiles, sourceIndex, base) {
   const source = sourceIndex.get(file)
   const nativeHandlers = []
+  const effectHandlers = []
   const reactiveBindings = []
   const listExpressions = []
   const clientImports = new Set()
@@ -385,7 +556,7 @@ async function compile(file, sourceFiles, sourceIndex, base) {
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, assetPath(base, `assets/${handlerPath}`), file, sourceFiles, sourceIndex, clientImports)] },
+    transformers: { before: [createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings, listExpressions, assetPath(base, `assets/${handlerPath}`), file, sourceFiles, sourceIndex, clientImports)] },
     reportDiagnostics: true
   })
 
@@ -398,10 +569,11 @@ async function compile(file, sourceFiles, sourceIndex, base) {
   await mkdir(resolve(output, ".."), { recursive: true })
   await writeFile(output, result.outputText)
 
-  if (!nativeHandlers.length && !reactiveBindings.length && !listExpressions.length) return undefined
+  if (!nativeHandlers.length && !effectHandlers.length && !reactiveBindings.length && !listExpressions.length) return undefined
+  const callbacks = [...nativeHandlers, ...effectHandlers]
   const moduleSource = [
-    printClientImports(nativeHandlers.flatMap(handler => handler.imports), handlerPath),
-    ...nativeHandlers.map(handler => printNativeHandler(handler)),
+    printClientImports(callbacks.flatMap(handler => handler.imports), handlerPath),
+    ...callbacks.map(handler => printNativeHandler(handler)),
     ...reactiveBindings.map(entry => printReactiveBinding(entry)),
     ...listExpressions.map(entry => printListExpression(entry))
   ].join("\n")
@@ -411,15 +583,16 @@ async function compile(file, sourceFiles, sourceIndex, base) {
   })
   const moduleErrors = moduleResult.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
   if (moduleErrors.length) throw new Error(moduleErrors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
-  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, clientImports: [...clientImports] }
+  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, hasEffects: effectHandlers.length > 0, clientImports: [...clientImports] }
 }
 
-function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, sourceIndex, clientImports) {
+function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, sourceIndex, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
     sourceFile = normalizeRenderControlFlow(sourceFile, factory, context)
     ts.setParentRecursive(sourceFile, false)
     const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
+    const hasUseEffectImport = sourceFile.statements.some(statement => ts.isImportDeclaration(statement) && statement.moduleSpecifier.text === "@kudzujs/core" && statement.importClause?.namedBindings && ts.isNamedImports(statement.importClause.namedBindings) && statement.importClause.namedBindings.elements.some(entry => !entry.propertyName && entry.name.text === "useEffect"))
     const importedSources = new Map()
     const importedSource = target => {
       let imported = importedSources.get(target)
@@ -628,6 +801,31 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(relativeModulePath(compiledPath(file), compiledPath(target))), node.attributes)
       }
 
+      if (hasUseEffectImport && ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "useEffect") {
+        if (node.arguments.length !== 2) fail(node, "useEffect() requires exactly a callback and literal empty dependency array")
+        const [callback, dependencies] = node.arguments
+        if (!ts.isArrowFunction(callback) && !ts.isFunctionExpression(callback)) fail(callback, "useEffect() callback must be an inline function")
+        if (ts.isFunctionExpression(callback) && callback.name) fail(callback, "useEffect() callback function must be anonymous")
+        if (callback.parameters.length) fail(callback, "useEffect() callback cannot declare parameters")
+        if (!ts.isArrayLiteralExpression(dependencies) || dependencies.elements.length) fail(dependencies, "useEffect() dependencies must be a literal empty array")
+        if (!nearestFunction(node)) fail(node, "useEffect() cannot be used outside a Kudzu component")
+        if (returnsCleanup(callback)) fail(callback, "useEffect() cleanup functions are not supported")
+        if (!ts.isBlock(callback.body)) fail(callback, "useEffect() callback must use a block body")
+        if (returnsEffectValue(callback)) fail(callback, "useEffect() return values are not supported")
+        const setters = settersForNode(node, settersByFunction)
+        const descriptor = compileNativeCallback(callback, setters, factory, effectHandlers, importBindings, clientImports, "effect", undefined, true)
+        usesBehavior = true
+        return factory.updateCallExpression(node, node.expression, node.typeArguments, [
+          callback,
+          dependencies,
+          factory.createStringLiteral(handlerUrl),
+          factory.createStringLiteral(descriptor.exportName),
+          descriptor.states,
+          descriptor.scope,
+          factory.createStringLiteral(sourceLocation(node, sourceFile))
+        ])
+      }
+
       if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && node.initializer.expression.text === "useState" && node.initializer.arguments.length === 1) {
         const stateElement = node.name.elements[0]
         if (!stateElement || !ts.isBindingElement(stateElement) || !ts.isIdentifier(stateElement.name)) return node
@@ -1273,26 +1471,37 @@ function compileEvent(expression, setters, functions, factory, nativeHandlers, h
   const optimized = compileOptimizedEvent(expression, setters, factory)
   if (optimized) return optimized
 
+  const descriptor = compileNativeCallback(expression, setters, factory, nativeHandlers, importBindings, clientImports, "handler", listItem)
+  return factory.createCallExpression(factory.createIdentifier("__kNativeBehavior"), undefined, [
+    factory.createStringLiteral(handlerUrl),
+    factory.createStringLiteral(descriptor.exportName),
+    descriptor.states,
+    descriptor.scope
+  ])
+}
+
+function compileNativeCallback(expression, setters, factory, entries, importBindings, clientImports, prefix, listItem, deferValues = false) {
   const allCaptures = nativeCaptureNames(expression, setters)
   const imports = [...referencedImportedBindings(expression, importBindings)].map(name => importBindings.get(name))
   const captures = new Set([...allCaptures].filter(name => !importBindings.has(name)))
   for (const entry of imports) clientImports.add(entry.target)
   const usedStates = nativeStateNames(expression, setters)
-  const exportName = `handler${nativeHandlers.length}`
-  nativeHandlers.push({ exportName, expression, captures, imports, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
-  const states = [...usedStates].map(name => factory.createArrayLiteralExpression([
-    factory.createStringLiteral(name),
-    factory.createIdentifier(name)
-  ]))
-  return factory.createCallExpression(factory.createIdentifier("__kNativeBehavior"), undefined, [
-    factory.createStringLiteral(handlerUrl),
-    factory.createStringLiteral(exportName),
-    factory.createArrayLiteralExpression(states),
-    factory.createArrayLiteralExpression([...captures].map(name => factory.createArrayLiteralExpression([
+  const exportName = `${prefix}${entries.length}`
+  entries.push({ exportName, expression, captures, imports, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
+  const value = name => deferValues
+    ? factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), factory.createIdentifier(name))
+    : factory.createIdentifier(name)
+  return {
+    exportName,
+    states: factory.createArrayLiteralExpression([...usedStates].map(name => factory.createArrayLiteralExpression([
       factory.createStringLiteral(name),
-      name === listItem ? factory.createCallExpression(factory.createIdentifier("__kListItem"), undefined, []) : factory.createIdentifier(name)
+      value(name)
+    ]))),
+    scope: factory.createArrayLiteralExpression([...captures].map(name => factory.createArrayLiteralExpression([
+      factory.createStringLiteral(name),
+      name === listItem ? factory.createCallExpression(factory.createIdentifier("__kListItem"), undefined, []) : value(name)
     ])))
-  ])
+  }
 }
 
 function nativeStateNames(expression, setters) {
@@ -1303,7 +1512,8 @@ function referencedStateNames(root, setters, scopeRoot = root) {
   const stateNames = new Set(setters.values())
   const used = new Set()
   const visit = node => {
-    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && setters.has(node.expression.text)) used.add(setters.get(node.expression.text))
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && setters.has(node.expression.text) && !isShadowedIdentifier(node.expression, scopeRoot)) used.add(setters.get(node.expression.text))
+    if (ts.isIdentifier(node) && setters.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, scopeRoot)) used.add(setters.get(node.text))
     if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, scopeRoot)) used.add(node.text)
     ts.forEachChild(node, visit)
   }
@@ -1342,20 +1552,22 @@ function referencedImportedBindings(expression, imports) {
 
 function captureNames(declarationRoot, referenceRoot, setters) {
   const local = new Set()
-  const collectDeclarations = node => {
-    if (ts.isVariableDeclaration(node)) for (const name of bindingNames(node.name)) local.add(name)
-    if (ts.isParameter(node)) for (const name of bindingNames(node.name)) local.add(name)
-    if ((ts.isFunctionDeclaration(node) || ts.isClassDeclaration(node)) && node.name) local.add(node.name.text)
-    ts.forEachChild(node, collectDeclarations)
+  if (!isFunctionLike(declarationRoot)) {
+    const collectDeclarations = node => {
+      if (ts.isVariableDeclaration(node)) for (const name of bindingNames(node.name)) local.add(name)
+      if (ts.isParameter(node)) for (const name of bindingNames(node.name)) local.add(name)
+      if ((ts.isFunctionDeclaration(node) || ts.isClassDeclaration(node)) && node.name) local.add(node.name.text)
+      ts.forEachChild(node, collectDeclarations)
+    }
+    collectDeclarations(declarationRoot)
   }
-  collectDeclarations(declarationRoot)
-
   const stateNames = new Set(setters.values())
   const captures = new Set()
   const visit = node => {
     if (ts.isTypeNode(node)) return
-    if (ts.isIdentifier(node) && isReferenceIdentifier(node) && !local.has(node.text) && !setters.has(node.text) && !stateNames.has(node.text) && !nativeGlobals.has(node.text)) {
-      captures.add(node.text)
+    if (ts.isIdentifier(node)) {
+      const declared = isFunctionLike(declarationRoot) ? isShadowedIdentifier(node, declarationRoot) : local.has(node.text)
+      if (isReferenceIdentifier(node) && !declared && !setters.has(node.text) && !stateNames.has(node.text) && !nativeGlobals.has(node.text)) captures.add(node.text)
     }
     ts.forEachChild(node, visit)
   }
@@ -1377,7 +1589,7 @@ function isReferenceIdentifier(node) {
       (ts.isVariableDeclaration(parent) && parent.name === node) ||
       (ts.isParameter(parent) && parent.name === node) ||
       (ts.isFunctionDeclaration(parent) && parent.name === node) ||
-      (ts.isBindingElement(parent) && parent.name === node) ||
+      (ts.isBindingElement(parent) && (parent.name === node || parent.propertyName === node)) ||
       ts.isImportSpecifier(parent) || ts.isImportClause(parent)) return false
   return true
 }
@@ -1397,6 +1609,43 @@ function isShadowedByParameter(node, scopeRoot) {
   return false
 }
 
+function isShadowedIdentifier(node, scopeRoot) {
+  if (isShadowedByParameter(node, scopeRoot)) return true
+  if (node === scopeRoot) return false
+  if (isFunctionLike(scopeRoot) && scopeRoot.name?.text === node.text) return true
+  if (isFunctionLike(scopeRoot) && functionVarDeclaresName(scopeRoot, node.text)) return true
+  for (let current = node.parent; current; current = current.parent) {
+    if (current === scopeRoot) break
+    if (ts.isBlock(current) && current.statements.some(statement => statementDeclaresName(statement, node.text))) return true
+    if (ts.isCaseBlock(current) && current.clauses.some(clause => clause.statements.some(statement => statementDeclaresName(statement, node.text)))) return true
+    if (ts.isCatchClause(current) && current.variableDeclaration && bindingNames(current.variableDeclaration.name).includes(node.text)) return true
+    if ((ts.isForStatement(current) || ts.isForInStatement(current) || ts.isForOfStatement(current)) && loopDeclaresName(current, node.text)) return true
+    if (isFunctionLike(current) && functionVarDeclaresName(current, node.text)) return true
+  }
+  return false
+}
+
+function statementDeclaresName(statement, name) {
+  if (ts.isVariableStatement(statement)) return statement.declarationList.declarations.some(declaration => bindingNames(declaration.name).includes(name))
+  return (ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) && statement.name?.text === name
+}
+
+function loopDeclaresName(loop, name) {
+  const declaration = ts.isForStatement(loop) ? loop.initializer : loop.initializer
+  return declaration && ts.isVariableDeclarationList(declaration) && declaration.declarations.some(entry => bindingNames(entry.name).includes(name))
+}
+
+function functionVarDeclaresName(fn, name) {
+  let found = false
+  const visit = node => {
+    if (found || node !== fn.body && isFunctionLike(node)) return
+    if (ts.isVariableDeclarationList(node) && (node.flags & ts.NodeFlags.BlockScoped) === 0 && node.declarations.some(entry => bindingNames(entry.name).includes(name))) found = true
+    if (!found) ts.forEachChild(node, visit)
+  }
+  if (fn.body) visit(fn.body)
+  return found
+}
+
 function settersForNode(node, settersByFunction) {
   for (let current = node.parent; current; current = current.parent) {
     if (!ts.isFunctionDeclaration(current) && !ts.isFunctionExpression(current) && !ts.isArrowFunction(current)) continue
@@ -1477,6 +1726,42 @@ function sourceNodeError(node, fallbackSource, message) {
   return new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
 }
 
+function sourceLocation(node, fallbackSource) {
+  const original = ts.getOriginalNode(node)
+  const sourceFile = original.getSourceFile?.()?.fileName ? original.getSourceFile() : fallbackSource
+  const position = sourceFile.getLineAndCharacterOfPosition(original.getStart(sourceFile))
+  return `${sourceFile.fileName}:${position.line + 1}:${position.character + 1}`
+}
+
+function returnsCleanup(callback) {
+  if (ts.isArrowFunction(callback) && !ts.isBlock(callback.body)) {
+    const body = unwrapExpression(callback.body)
+    return ts.isArrowFunction(body) || ts.isFunctionExpression(body)
+  }
+  let found = false
+  const visit = node => {
+    if (found || node !== callback.body && isFunctionLike(node)) return
+    if (ts.isReturnStatement(node) && node.expression) {
+      const expression = unwrapExpression(node.expression)
+      if (ts.isArrowFunction(expression) || ts.isFunctionExpression(expression)) found = true
+    }
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(callback.body)
+  return found
+}
+
+function returnsEffectValue(callback) {
+  let found = false
+  const visit = node => {
+    if (found || node !== callback.body && isFunctionLike(node)) return
+    if (ts.isReturnStatement(node) && node.expression) found = true
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(callback.body)
+  return found
+}
+
 function printClientImports(entries, handlerPath) {
   const unique = new Map(entries.map(entry => [`${entry.target}:${entry.kind}:${entry.imported ?? ""}:${entry.local}`, entry]))
   const groups = Map.groupBy(unique.values(), entry => entry.target)
@@ -1594,24 +1879,33 @@ function printNativeHandler({ exportName, expression, captures, setters }) {
   const stateNames = new Set(setters.values())
   const transformer = context => root => {
     const visitor = node => {
-      if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && setters.has(node.expression.text)) {
+      if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && setters.has(node.expression.text) && !isShadowedIdentifier(node.expression, expression)) {
         return factory.createCallExpression(
           factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "set"),
           undefined,
           [factory.createStringLiteral(setters.get(node.expression.text)), ...node.arguments.map(argument => ts.visitNode(argument, visitor))]
         )
       }
-      if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedByParameter(node, expression)) {
+      if (ts.isShorthandPropertyAssignment(node) && setters.has(node.name.text) && !isShadowedIdentifier(node.name, expression)) {
+        return factory.createPropertyAssignment(node.name, setterReference(factory, setters.get(node.name.text)))
+      }
+      if (ts.isIdentifier(node) && setters.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, expression)) {
+        return setterReference(factory, setters.get(node.text))
+      }
+      if (ts.isShorthandPropertyAssignment(node) && stateNames.has(node.name.text) && !isShadowedIdentifier(node.name, expression)) {
+        return factory.createPropertyAssignment(node.name, factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "get"), undefined, [factory.createStringLiteral(node.name.text)]))
+      }
+      if (ts.isIdentifier(node) && stateNames.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, expression)) {
         return factory.createCallExpression(
           factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "get"),
           undefined,
           [factory.createStringLiteral(node.text)]
         )
       }
-      if (ts.isShorthandPropertyAssignment(node) && captures.has(node.name.text)) {
+      if (ts.isShorthandPropertyAssignment(node) && captures.has(node.name.text) && !isShadowedIdentifier(node.name, expression)) {
         return factory.createPropertyAssignment(node.name, scopeRead(factory, node.name.text))
       }
-      if (ts.isIdentifier(node) && captures.has(node.text) && isReferenceIdentifier(node)) {
+      if (ts.isIdentifier(node) && captures.has(node.text) && isReferenceIdentifier(node) && !isShadowedIdentifier(node, expression)) {
         return scopeRead(factory, node.text)
       }
       return ts.visitEachChild(node, visitor, context)
@@ -1640,6 +1934,17 @@ function printNativeHandler({ exportName, expression, captures, setters }) {
   }
 }
 
+function setterReference(factory, stateName) {
+  return factory.createArrowFunction(
+    undefined,
+    undefined,
+    [factory.createParameterDeclaration(undefined, undefined, "value")],
+    undefined,
+    factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+    factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier("__k"), "set"), undefined, [factory.createStringLiteral(stateName), factory.createIdentifier("value")])
+  )
+}
+
 function printReactiveBinding({ exportName, expression, captures, states }) {
   const factory = ts.factory
   const transformer = context => root => {
@@ -1762,10 +2067,17 @@ async function loadConfig() {
 
 function normalizeBase(value) {
   if (value == null || value === "" || value === "/") return ""
-  if (typeof value !== "string" || !value.startsWith("/") || /[?#\0]/.test(value) || value.split("/").includes("..")) throw new Error("kudzu.config base must be a root-relative path")
+  if (typeof value !== "string" || !value.startsWith("/") || /[?#\0]/.test(value) || /%(?:2f|5c)/i.test(value)) throw new Error("kudzu.config base must be a root-relative path")
+  let decoded
+  try { decoded = decodeURIComponent(value) } catch { throw new Error("kudzu.config base must be a root-relative path") }
+  if (/[\\?#\0]/.test(decoded) || decoded.split("/").includes("..") || [...decoded].some(character => character.charCodeAt(0) < 32 || character.charCodeAt(0) >= 127 && character.charCodeAt(0) <= 159)) throw new Error("kudzu.config base must be a root-relative path")
   return value.replace(/\/+$/, "")
 }
 
+function browserPath(path) {
+  return path ? new URL(path, "http://kudzu.local").pathname : ""
+}
+
 function assetPath(base, path) {
   return `${base}/${path}`
 }
@@ -1788,6 +2100,43 @@ async function staticPathEntries(module, file) {
   })
 }
 
+function runtimeRouteSchema(module, file) {
+  if (!Object.hasOwn(module, "runtimeParams")) return undefined
+  if (module.runtimeParams !== true) throw new Error(`${relative(root, file)} runtimeParams must be exactly true`)
+  if (typeof module.getStaticPaths === "function") throw new Error(`${relative(root, file)} runtimeParams cannot be combined with getStaticPaths()`)
+  const route = pageRoutePattern(file)
+  if (route.includes("[...")) throw new Error(`Catch-all routes are not supported: ${route}`)
+  const names = new Set()
+  const segments = route.split("/").map(segment => {
+    const match = segment.match(/^\[([^\]]+)\]$/)
+    if (!match) {
+      if (/[\[\]]/.test(segment)) throw new Error(`${relative(root, file)} runtime parameters must occupy a complete path segment`)
+      return { literal: segment }
+    }
+    const name = match[1]
+    if (!/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name) || ["__proto__", "constructor", "prototype"].includes(name)) throw new Error(`${relative(root, file)} invalid runtime parameter name ${JSON.stringify(name)}`)
+    if (names.has(name)) throw new Error(`${relative(root, file)} duplicate runtime parameter ${JSON.stringify(name)}`)
+    names.add(name)
+    return { param: name }
+  })
+  if (!names.size) throw new Error(`${relative(root, file)} runtimeParams requires a bracket page`)
+  return { route, segments, params: [...names] }
+}
+
+function pageRoutePattern(file) {
+  const page = relative(pagesDirectory, file).replace(/\\/g, "/").replace(/\.tsx$/, "")
+  return page === "index" ? "" : page.replace(/\/index$/, "")
+}
+
+function runtimeSpecificity(schema) {
+  return schema.segments.filter(segment => segment.literal !== undefined).length
+}
+
+function sameRuntimePrecedence(left, right) {
+  if (left.segments.length !== right.segments.length || runtimeSpecificity(left) !== runtimeSpecificity(right)) return false
+  return left.segments.every((segment, index) => segment.literal === undefined || right.segments[index].literal === undefined || segment.literal === right.segments[index].literal)
+}
+
 function routeFromPage(file, params = {}) {
   const page = relative(pagesDirectory, file).replace(/\\/g, "/").replace(/\.tsx$/, "")
   if (page.includes("[...")) throw new Error(`Catch-all routes are not supported: ${page}`)

package/framework/core.d.ts

@@ -1,6 +1,8 @@
 export type StateSetter<T> = (value: T | ((previous: T) => T)) => void
 
 export function useState<T>(initialValue: T): [T, StateSetter<T>]
+export function useEffect(effect: () => void | Promise<void>, dependencies: readonly []): void
+export function useParams<Params extends Record<string, string> = Record<string, string>>(): Readonly<Params>
 
 export interface RefObject<T> {
   readonly current: T | null
@@ -46,22 +48,29 @@ export function renderPage<Props = Record<string, never>>(
     manifest?: string
     styles?: boolean | string[]
     base?: string
+    effectAsset?: string
+    paramAsset?: string
+    runtimeParams?: string[]
   },
   props?: Props
 ): Promise<{
   html: string
   hasBehaviors: boolean
+  hasEffects: boolean
+  hasParams: boolean
   hasBindings: boolean
   hasLists: boolean
   hasListStyles: boolean
   hasStateSeed: boolean
   plan: {
     states: Array<{ id: string; name: string; initialValue: unknown }>
+    params: Array<{ name: string; id: string }>
     events: Array<{
       event: string
       commands?: Array<[string, string, unknown]>
       native?: { module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown> }
     }>
+    effects: Array<{ module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown> }>
     bindings: Array<{
       target: string
       state?: string

package/framework/core.mjs

@@ -24,10 +24,37 @@ export function useState(initialValue, name) {
   }
 
   const id = `s${renderContext.nextState++}`
-  const signal = {
+  const signal = createSignal(id, initialValue)
+
+  const setter = () => {
+    throw new Error("State setters are compiled into ordered browser behaviors")
+  }
+  Object.defineProperty(setter, setterMarker, { value: id })
+  renderContext.states[id] = { name: name ?? id, initialValue }
+  return [signal, setter]
+}
+
+export function useParams() {
+  if (!renderContext?.runtimeParamNames?.length) throw new Error("useParams() requires export const runtimeParams = true on a bracket page")
+  if (!renderContext.params) {
+    const params = Object.create(null)
+    renderContext.paramEntries = renderContext.runtimeParamNames.map((name, index) => {
+      const id = `p${index}`
+      params[name] = createSignal(id, "")
+      return { name, id }
+    })
+    renderContext.params = Object.freeze(params)
+    renderContext.hasBehaviors = true
+    renderContext.hasParams = true
+  }
+  return renderContext.params
+}
+
+function createSignal(id, value) {
+  return {
     [signalMarker]: true,
     id,
-    value: initialValue,
+    value,
     valueOf() {
       return this.value
     },
@@ -35,13 +62,16 @@ export function useState(initialValue, name) {
       return String(this.value)
     }
   }
+}
 
-  const setter = () => {
-    throw new Error("State setters are compiled into ordered browser behaviors")
+export function useEffect(callback, dependencies, module, handler, states, scope, source) {
+  if (!renderContext) throw new Error("useEffect() can only run while rendering a Kudzu component")
+  if (typeof callback !== "function" || !Array.isArray(dependencies) || dependencies.length || !module || !handler) {
+    throw new Error("useEffect() must be compiled with a literal empty dependency array")
   }
-  Object.defineProperty(setter, setterMarker, { value: id })
-  renderContext.states[id] = { name: name ?? id, initialValue }
-  return [signal, setter]
+  renderContext.effects.push({ module, handler, states, scope, source })
+  renderContext.hasBehaviors = true
+  renderContext.hasEffects = true
 }
 
 export function useRef(initialValue) {
@@ -82,8 +112,14 @@ export function nativeBehavior(module, handler, states, scope) {
     [nativeBehaviorMarker]: true,
     module,
     handler,
+    ...nativeDescriptor(states, scope)
+  }
+}
+
+function nativeDescriptor(states, scope) {
+  return {
     states: Object.fromEntries(states.map(([name, signal]) => {
-      if (!signal?.[signalMarker]) throw new Error("A native behavior must target framework state")
+      if (!signal?.[signalMarker]) throw new Error("A native callback must target framework state")
       return [name, signal.id]
     })),
     scope: Object.fromEntries(scope.map(([name, value]) => [name, value?.[signalMarker] ? { type: "state", id: value.id } : serializeCapture(name, value, new Set())]))
@@ -226,10 +262,21 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}, props = {}) {
-  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], textBindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false, hasListStyles: false }
+  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
     const body = await renderNode({ type: component, props })
+    renderContext.effects = renderContext.effects.map(effect => {
+      try {
+        return {
+          module: effect.module,
+          handler: effect.handler,
+          ...nativeDescriptor(effect.states.map(([name, read]) => [name, read()]), effect.scope.map(([name, read]) => [name, read()]))
+        }
+      } catch (error) {
+        throw new Error(`${effect.source} ${error.message}`)
+      }
+    })
     const title = escapeHtml(metadata.title ?? "Kudzu")
     const head = renderMetadata(metadata)
     const styles = metadata.styles === false
@@ -241,12 +288,18 @@ export async function renderPage(component, metadata = {}, props = {}) {
     const nativeRuntime = renderContext.hasNativeBehaviors
       ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-native.js")}"></script>`
       : ""
+    const paramRuntime = renderContext.hasParams
+      ? `<script type="module" src="${escapeAttribute(metadata.paramAsset)}"></script>`
+      : ""
     const bindingRuntime = renderContext.hasBindings
       ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-binding.js")}"></script>`
       : ""
     const listRuntime = renderContext.hasLists
       ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-list.js")}"></script>`
       : ""
+    const effectRuntime = renderContext.hasEffects
+      ? `<script type="module" src="${escapeAttribute(metadata.effectAsset)}"></script>`
+      : ""
     const listStates = new Set(renderContext.lists.map(list => list.state))
     const seededListStates = new Set(renderContext.lists.filter(list => list.seed && !renderContext.textStates.has(list.state) && !renderContext.conditionStates.has(list.state)).map(list => list.state))
     const initialState = renderContext.hasBehaviors
@@ -263,15 +316,19 @@ export async function renderPage(component, metadata = {}, props = {}) {
       : ""
 
     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}</head><body${state}${textBindings}>${body}${runtime}${bindingRuntime}${listRuntime}${nativeRuntime}</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}${styles}</head><body${state}${textBindings}>${body}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
+      hasEffects: renderContext.hasEffects,
+      hasParams: renderContext.hasParams,
       hasBindings: renderContext.hasBindings,
       hasLists: renderContext.hasLists,
       hasListStyles: renderContext.hasListStyles,
       hasStateSeed: initialState.length > 0,
       plan: {
         states: Object.entries(renderContext.states).map(([id, state]) => ({ id, ...state })),
+        params: renderContext.paramEntries,
         events: renderContext.events,
+        effects: renderContext.effects,
         bindings: renderContext.bindings,
         conditions: renderContext.conditions,
         lists: renderContext.lists
@@ -552,6 +609,11 @@ async function renderList(node, namespace, selectValue) {
     const template = await renderNode(node.render({}), namespace, selectValue)
     if (template.includes("data-k-native-")) descriptor.mount = true
     if (template.includes("data-k-list-condition")) descriptor.conditions = true
+    if (template.includes("data-k-list-text-end")) descriptor.textRanges = true
+    if (template.includes("data-k-list-attrs")) descriptor.attributes = true
+    if (template.includes("data-k-list-events")) descriptor.events = true
+    if (template.includes("data-k-list-expression=")) descriptor.expressions = true
+    if (template.includes("data-k-list-expression-attrs")) descriptor.expressionAttributes = true
     const seed = listSeed(node.items.value, renderContext.listFields)
     if (seed) descriptor.seed = seed
     let current = ""

package/framework/effect-runtime.js

@@ -0,0 +1,39 @@
+import { deserialize } from "./serialization.js"
+
+export function createEffectContext(state, stateIds, commit, serializedScope = {}) {
+  const changed = new Set()
+  let scheduled = false
+
+  const flush = () => {
+    scheduled = false
+    const ids = [...changed]
+    changed.clear()
+    for (const id of ids) commit(id, state.get(id))
+  }
+
+  const setId = (id, value) => {
+    const current = state.get(id)
+    state.set(id, typeof value === "function" ? value(current) : value)
+    changed.add(id)
+    if (!scheduled) {
+      scheduled = true
+      queueMicrotask(flush)
+    }
+  }
+
+  const scope = globalThis.__KUDZU_EFFECT_CAPTURES__
+    ? Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value, id => state.get(id), globalThis.__KUDZU_CAPTURE_SETTER__ ? setId : undefined)]))
+    : undefined
+
+  return {
+    get(name) {
+      return state.get(stateIds[name])
+    },
+    scope(name) {
+      return globalThis.__KUDZU_EFFECT_CAPTURES__ ? serializedScope[name]?.type === "state" ? state.get(serializedScope[name].id) : scope[name] : undefined
+    },
+    set(name, value) {
+      setId(stateIds[name], value)
+    }
+  }
+}

package/framework/list-runtime.js

@@ -3,11 +3,11 @@ import { browserState, mountDom, registerCommitter, registerMountHook, registerU
 const listTargets = new Map()
 const listRegistrations = new WeakMap()
 const mountedLists = new WeakSet()
-const imports = new Map()
-const revisions = new WeakMap()
+const imports = __KUDZU_LIST_ASYNC_PARTS__ ? new Map() : undefined
+const revisions = __KUDZU_LIST_ASYNC_PARTS__ ? new WeakMap() : undefined
 const itemParts = new WeakMap()
-const conditionOwners = new WeakMap()
-const itemPartsSelector = `[data-k-list-text],[data-k-list-attrs],[data-k-list-events],[data-k-list-expression],[data-k-list-expression-attrs]${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}`
+const conditionOwners = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
+const itemPartsSelector = `[data-k-list-text]${__KUDZU_LIST_ATTRIBUTES__ ? ",[data-k-list-attrs]" : ""}${__KUDZU_LIST_EVENTS__ ? ",[data-k-list-events]" : ""}${__KUDZU_LIST_EXPRESSIONS__ ? ",[data-k-list-expression]" : ""}${__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? ",[data-k-list-expression-attrs]" : ""}${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}`
 
 function commitLists(id) {
   const lists = listTargets.get(id)
@@ -34,13 +34,13 @@ function mountLists(root) {
     const templateRoot = start.content.firstElementChild
     const parts = listItemPartPlan(templateRoot)
     for (const root of roots) __KUDZU_LIST_CONDITIONS__ && descriptor.conditions ? listItemParts(root) : mapListItemParts(parts, root)
-    if (descriptor.seed && !browserState.has(descriptor.state)) browserState.set(descriptor.state, roots.map((root, index) => seedListItem(root, descriptor, index)))
+    if (__KUDZU_LIST_SEEDS__ && descriptor.seed && !browserState.has(descriptor.state)) browserState.set(descriptor.state, roots.map((root, index) => seedListItem(root, descriptor, index)))
     const items = browserState.get(descriptor.state)
     const list = {
       start,
       descriptor,
       parts,
-      seedFields: descriptor.seed && Object.keys(descriptor.seed),
+      seedFields: __KUDZU_LIST_SEEDS__ && descriptor.seed && Object.keys(descriptor.seed),
       roots: new Map(roots.map((node, index) => [keyToken(descriptor.keys[index]), node])),
       values: new Map(),
       container: roots[0]?.parentNode,
@@ -77,7 +77,7 @@ function updateList(list) {
     const key = item?.[list.descriptor.key]
     if (!validListKey(key)) throw new Error(`Keyed list key "${list.descriptor.key}" must be a string or finite number`)
     assertListItem(item)
-    const seededValue = list.seedFields && seededListValue(item, list.seedFields, list.descriptor.seed)
+    const seededValue = __KUDZU_LIST_SEEDS__ ? list.seedFields && seededListValue(item, list.seedFields, list.descriptor.seed) : undefined
     if (seededValue === undefined) assertListValue(item, seen, true)
     const token = keyToken(key)
     if (keys.has(token)) throw new Error(`Duplicate keyed list key: ${String(key)}`)
@@ -108,13 +108,13 @@ function updateList(list) {
   }
   for (const [token, node] of list.roots) {
     if (keys.has(token)) continue
-    if (list.descriptor.mount) {
+    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
       unmountDom(node)
       node.remove()
     } else node.remove()
   }
   if (added) {
-    if (list.descriptor.mount) mountDom(additions)
+    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(additions)
     parent.insertBefore(additions, list.boundary)
     list.container ??= parent
   }
@@ -142,8 +142,8 @@ function updateList(list) {
 }
 
 function fillListItem(root, item) {
-  const revision = (revisions.get(root) ?? 0) + 1
-  revisions.set(root, revision)
+  const revision = __KUDZU_LIST_ASYNC_PARTS__ ? (revisions.get(root) ?? 0) + 1 : 0
+  if (__KUDZU_LIST_ASYNC_PARTS__) revisions.set(root, revision)
   const parts = listItemParts(root)
   fillListParts(root, parts, item, revision)
 }
@@ -159,30 +159,38 @@ function fillListParts(root, parts, item, revision) {
       node.textContent = value
     }
   }
-  for (const [marker, field] of parts.texts) {
-    patchListText(marker, "template[data-k-list-text-end]", item?.[field])
+  if (__KUDZU_LIST_TEXT_RANGES__) {
+    for (const [marker, field] of parts.texts) patchListText(marker, "template[data-k-list-text-end]", item?.[field])
   }
-  for (const [node, attributes] of parts.attributes) {
-    for (const [target, field] of attributes) patchBinding(node, target, item?.[field])
-  }
-  for (const [node, events] of parts.events) {
-    for (const [event, native] of JSON.parse(events)) {
-      native.scope = Object.fromEntries(Object.entries(native.scope).map(([name, value]) => [name, value?.type === "list-item" ? serializeItem(item) : value]))
-      node.dataset[`kNative${capitalize(event)}`] = JSON.stringify(native)
+  if (__KUDZU_LIST_ATTRIBUTES__) {
+    for (const [node, attributes] of parts.attributes) {
+      for (const [target, field] of attributes) patchBinding(node, target, item?.[field])
     }
   }
-  for (const [marker, descriptor] of parts.expressions) {
-    evaluate(descriptor, item).then(value => {
-      if (revisions.get(root) === revision && root.isConnected) patchListText(marker, "template[data-k-list-expression-end]", value)
-    }).catch(error => console.error(error))
+  if (__KUDZU_LIST_EVENTS__) {
+    for (const [node, events] of parts.events) {
+      for (const [event, native] of JSON.parse(events)) {
+        native.scope = Object.fromEntries(Object.entries(native.scope).map(([name, value]) => [name, value?.type === "list-item" ? serializeItem(item) : value]))
+        node.dataset[`kNative${capitalize(event)}`] = JSON.stringify(native)
+      }
+    }
   }
-  for (const [node, attributes] of parts.expressionAttributes) {
-    for (const [target, module, handler] of attributes) {
-      evaluate({ module, handler }, item).then(value => {
-        if (revisions.get(root) === revision && root.isConnected) patchBinding(node, target, value)
+  if (__KUDZU_LIST_EXPRESSIONS__) {
+    for (const [marker, descriptor] of parts.expressions) {
+      evaluate(descriptor, item).then(value => {
+        if (revisions.get(root) === revision && root.isConnected) patchListText(marker, "template[data-k-list-expression-end]", value)
       }).catch(error => console.error(error))
     }
   }
+  if (__KUDZU_LIST_EXPRESSION_ATTRIBUTES__) {
+    for (const [node, attributes] of parts.expressionAttributes) {
+      for (const [target, module, handler] of attributes) {
+        evaluate({ module, handler }, item).then(value => {
+          if (revisions.get(root) === revision && root.isConnected) patchBinding(node, target, value)
+        }).catch(error => console.error(error))
+      }
+    }
+  }
   if (__KUDZU_LIST_CONDITIONS__) {
     for (const [marker, descriptor] of parts.conditions) {
       evaluate(descriptor, item).then(value => {
@@ -198,10 +206,10 @@ function listItemParts(root) {
   parts = { directTexts: [], texts: [], attributes: [], events: [], expressions: [], expressionAttributes: [], conditions: [] }
   for (const node of matching(root, itemPartsSelector)) {
     if (node.hasAttribute("data-k-list-text")) (node.tagName === "TEMPLATE" ? parts.texts : parts.directTexts).push([node, node.dataset.kListText])
-    if (node.hasAttribute("data-k-list-attrs")) parts.attributes.push([node, JSON.parse(node.dataset.kListAttrs)])
-    if (node.hasAttribute("data-k-list-events")) parts.events.push([node, node.dataset.kListEvents])
-    if (node.hasAttribute("data-k-list-expression")) parts.expressions.push([node, JSON.parse(node.dataset.kListExpression)])
-    if (node.hasAttribute("data-k-list-expression-attrs")) parts.expressionAttributes.push([node, JSON.parse(node.dataset.kListExpressionAttrs)])
+    if (__KUDZU_LIST_ATTRIBUTES__ && node.hasAttribute("data-k-list-attrs")) parts.attributes.push([node, JSON.parse(node.dataset.kListAttrs)])
+    if (__KUDZU_LIST_EVENTS__ && node.hasAttribute("data-k-list-events")) parts.events.push([node, node.dataset.kListEvents])
+    if (__KUDZU_LIST_EXPRESSIONS__ && node.hasAttribute("data-k-list-expression")) parts.expressions.push([node, JSON.parse(node.dataset.kListExpression)])
+    if (__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ && node.hasAttribute("data-k-list-expression-attrs")) parts.expressionAttributes.push([node, JSON.parse(node.dataset.kListExpressionAttrs)])
     if (__KUDZU_LIST_CONDITIONS__ && node.hasAttribute("data-k-list-condition")) {
       parts.conditions.push([node, JSON.parse(node.dataset.kListCondition)])
       conditionOwners.set(node, root)
@@ -217,11 +225,11 @@ function listItemPartPlan(template) {
   const parts = listItemParts(template)
   return {
     directTexts: parts.directTexts.map(([node, field]) => [indexes.get(node), field]),
-    texts: parts.texts.map(([node, field]) => [indexes.get(node), field]),
-    attributes: parts.attributes.map(([node, attributes]) => [indexes.get(node), attributes]),
-    events: parts.events.map(([node, events]) => [indexes.get(node), events]),
-    expressions: parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]),
-    expressionAttributes: parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]),
+    texts: __KUDZU_LIST_TEXT_RANGES__ ? parts.texts.map(([node, field]) => [indexes.get(node), field]) : [],
+    attributes: __KUDZU_LIST_ATTRIBUTES__ ? parts.attributes.map(([node, attributes]) => [indexes.get(node), attributes]) : [],
+    events: __KUDZU_LIST_EVENTS__ ? parts.events.map(([node, events]) => [indexes.get(node), events]) : [],
+    expressions: __KUDZU_LIST_EXPRESSIONS__ ? parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : [],
+    expressionAttributes: __KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]) : [],
     conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : []
   }
 }
@@ -230,11 +238,11 @@ function mapListItemParts(parts, root) {
   const target = [root, ...root.querySelectorAll("*")]
   itemParts.set(root, {
     directTexts: parts.directTexts.map(([index, field]) => [target[index], field]),
-    texts: parts.texts.map(([index, field]) => [target[index], field]),
-    attributes: parts.attributes.map(([index, attributes]) => [target[index], attributes]),
-    events: parts.events.map(([index, events]) => [target[index], events]),
-    expressions: parts.expressions.map(([index, descriptor]) => [target[index], descriptor]),
-    expressionAttributes: parts.expressionAttributes.map(([index, attributes]) => [target[index], attributes]),
+    texts: __KUDZU_LIST_TEXT_RANGES__ ? parts.texts.map(([index, field]) => [target[index], field]) : [],
+    attributes: __KUDZU_LIST_ATTRIBUTES__ ? parts.attributes.map(([index, attributes]) => [target[index], attributes]) : [],
+    events: __KUDZU_LIST_EVENTS__ ? parts.events.map(([index, events]) => [target[index], events]) : [],
+    expressions: __KUDZU_LIST_EXPRESSIONS__ ? parts.expressions.map(([index, descriptor]) => [target[index], descriptor]) : [],
+    expressionAttributes: __KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? parts.expressionAttributes.map(([index, attributes]) => [target[index], attributes]) : [],
     conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([index, descriptor]) => {
       conditionOwners.set(target[index], root)
       return [target[index], descriptor]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "build": "node ./bin/kudzu.mjs build",
     "dev": "node ./bin/kudzu.mjs dev",
     "check": "tsc --noEmit && tsc -p test/fixtures/tsconfig.json --noEmit && node ./bin/kudzu.mjs build",
-    "test": "node --test",
+    "test": "node --test test/*.test.mjs",
     "prepublishOnly": "npm run check && npm test",
     "deploy": "wrangler deploy",
     "preview": "wrangler dev"