@kudzujs/core 0.6.10 → 0.6.12

package/README.md

@@ -180,7 +180,17 @@ const [todos, dispatch] = useReducer(todoReducer, [])
 dispatch({ type: "add", title: "Ship" })
 ```
 
-The reduced migration form requires `[state, dispatch]`, exactly two hook arguments, and a synchronous two-parameter reducer exported as a default or named value from a relative TypeScript module. Dispatches in compiled handlers lower to functional state updates; lazy initializers, package, namespace, local, async, and generator reducers are not supported. Reducer dispatch functions cannot be passed through props or context.
+The reduced migration form requires `[state, dispatch]`, exactly two hook arguments, and a synchronous two-parameter reducer exported as a default or named value from a relative TypeScript module. Dispatches in compiled handlers lower to functional state updates. A dispatch may cross one direct prop boundary into a same-file or relative-imported synchronous component whose intrinsic root contains the compiled handler:
+
+```tsx
+function Controls({ dispatch }: { dispatch: Dispatch<TodoAction> }) {
+  return <button onClick={() => dispatch({ type: "add", title: "Ship" })}>Add</button>
+}
+
+return <Controls dispatch={dispatch} />
+```
+
+Kudzu specializes that call at build time; no function prop or child component survives in the browser. Lazy initializers, package, namespace, local, async, and generator reducers, runtime imports in imported dispatch components, forwarding across another component, and reducer dispatch through context remain unsupported.
 
 ## Reactive Attributes
 
@@ -208,6 +218,14 @@ Regular attributes use the same expressions without an allowlist:
 
 Kudzu compiles derived expressions to external ESM and patches only the bound DOM attribute or property. `aria-*` and `data-*` boolean values serialize as `"true"` or `"false"`; ordinary false values remove the attribute. Object `style` values use React-shaped camelCase properties, add `px` to nonzero dimensional numbers, and preserve unitless properties and CSS custom properties. Reactive `dangerouslySetInnerHTML` remains unsupported.
 
+Inline SVG accepts React-shaped presentation props for static and reactive values. Kudzu preserves native camelCase SVG names such as `viewBox` while mapping common aliases such as `fillRule`, `clipRule`, `strokeWidth`, `strokeLinecap`, `strokeLinejoin`, opacity/color props, `textAnchor`, and `vectorEffect` to their SVG attribute names:
+
+```tsx
+<svg viewBox="0 0 24 24">
+  <path fillRule="evenodd" strokeWidth={active ? 2 : 1} strokeLinecap="round" />
+</svg>
+```
+
 ## DOM Refs
 
 Use an object ref to access an element from a normal event handler:
@@ -544,6 +562,7 @@ Supported:
 - Direct text DOM patches
 - Reactive standard, `aria-*`, and `data-*` attributes
 - Reactive object `style` attributes
+- Static and reactive React-shaped SVG presentation attributes
 - Object DOM refs in native event handlers
 - Default, nested, and reactive context providers
 - Controlled `value` and `checked` form properties

package/framework/README.md

@@ -21,9 +21,11 @@ Exact relative `.worker.ts` constructors in inline effects are validated and bun
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime. Source CSS and global `kudzu.config` styles are emitted in document heads before `afterBuild()` runs; static stylesheet links in component JSX fail compilation instead of loading from the body.
 
+Inline SVG rendering normalizes an explicit set of common React presentation aliases before static serialization and binding descriptor creation. Reactive aliases therefore use the existing generic `setAttribute` path; static SVG adds no JavaScript and reactive SVG adds no SVG-specific runtime.
+
 Same-file and relative-imported components receiving a direct local-state array prop are specialized to intrinsic JSX before keyed-list analysis, so their component function is not retained in the browser. Handler modules are emitted only when a rendered descriptor references them, preventing specialized imported components from adding dead browser assets. Direct JSON-safe primitive keyed-item dependencies subscribe each row record to its owning list commit and compare selected fields after `list-runtime.js` synchronously refreshes the row marker. Only changed rows rerun with the complete latest item; reorder compares equal, unrelated fields do nothing, and key changes remain remove plus mount. Builds without item dependencies emit no item reader or list-state subscription code.
 
-The reduced `useReducer` form reuses ordinary state slots. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
+The reduced `useReducer` form reuses ordinary state slots. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. One direct dispatch prop into a same-file or relative-imported synchronous component is specialized to intrinsic JSX at the call site, so its handler retains the parent reducer scope and no dispatch capture or child handler asset is emitted. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
 
 `kudzu.config` may opt one emitted shared-layout group into same-document navigation with legacy `navigation: { routes: ["/product", "/items/[id]"] }`, or multiple groups with `navigation: { groups: [{ routes: [...] }, { routes: [...] }] }`. The forms are mutually exclusive. Identities are globally unique emitted exact paths or `runtimeParams` patterns; each group uses one page-exported layout function identity. Runtime records securely match concrete pathnames under `base`, and their cache-safe parameter initializer runs before route DOM/effects mount on every transition. Each group receives a deterministic route-hashed asset specialized to only its records, pattern decoder, and effect/parameter lifecycle needs. Cross-group and ungrouped anchors remain native and are not prefetched; overlapping path domains across groups fail the build. Route effect entries export cache-safe layout and route mount functions: layout effects, including conditional/keyed DOM-owned effects, persist for the group session; route effects receive a fresh owner registry after each route insertion; and non-persisted page disposal cleans route before layout. Direct primitive state, runtime parameter, and keyed-item property dependencies and cleanup are supported. Fragment payloads and coordinated View Transitions are not implemented.
 

package/framework/build.mjs

@@ -1774,6 +1774,43 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         stateBackedComponentRoots.push(specialization.root)
       }
     }
+    for (const [name, component] of components) {
+      const calls = jsxTagUses(sourceFile, name)
+      const dispatchCalls = calls.filter(call => jsxCallHasDirectReducerProp(call, reducersForNode(call, reducersByFunction)))
+      if (!dispatchCalls.length) continue
+      if (isExportedDeclaration(component.declaration)) fail(component.declaration, `Reducer-dispatch component ${name} cannot be exported`)
+      if (identifierReferenceCount(sourceFile, name) !== calls.length) fail(component.declaration, `Reducer-dispatch component ${name} may only be referenced as JSX`)
+      if (dispatchCalls.length !== calls.length) fail(component.declaration, `Reducer-dispatch component ${name} must receive a direct local reducer dispatch at every call`)
+      for (const call of dispatchCalls) {
+        if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
+        const specialization = specializeComponentCall(call, component.function, sourceFile, factory, context, fail, "Reducer-dispatch")
+        if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        componentSpecializations.set(call, specialization)
+      }
+      specializedDeclarations.add(component.declaration)
+    }
+    for (const [name, binding] of importBindings) {
+      if (binding.kind === "namespace") continue
+      const calls = jsxTagUses(sourceFile, name)
+      const dispatchCalls = calls.filter(call => jsxCallHasDirectReducerProp(call, reducersForNode(call, reducersByFunction)))
+      if (!dispatchCalls.length) continue
+      const imported = binding.kind === "default" ? "default" : binding.imported
+      let component
+      try {
+        component = resolveComponentExport(binding.target, imported, importedSource, sourceFiles)
+      } catch {
+        fail(dispatchCalls[0], `Reducer dispatch props require a component imported from a relative TypeScript module`)
+      }
+      const componentSource = component.getSourceFile()
+      if (clientImportBindings(componentSource, componentSource.fileName, sourceFiles).size) fail(dispatchCalls[0], "Imported reducer-dispatch components cannot use runtime imports")
+      for (const call of dispatchCalls) {
+        if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
+        const specialization = specializeComponentCall(call, component, sourceFile, factory, context, fail, "Reducer-dispatch")
+        if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        synthesizeTree(specialization.root)
+        componentSpecializations.set(call, specialization)
+      }
+    }
     const rawRenderedLists = []
     const collectRenderedLists = node => {
       const specialization = componentSpecializations.get(node)
@@ -2259,6 +2296,14 @@ function jsxCallHasDirectStateProp(call, setters) {
   })
 }
 
+function jsxCallHasDirectReducerProp(call, reducers) {
+  const attributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
+  return attributes.properties.some(attribute => {
+    const value = ts.isJsxAttribute(attribute) && attribute.initializer && ts.isJsxExpression(attribute.initializer) ? unwrapExpression(attribute.initializer.expression) : undefined
+    return value && ts.isIdentifier(value) && reducers.has(value.text)
+  })
+}
+
 function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions) {
   const fail = (node, message) => {
     throw sourceNodeError(node, sourceFile, message)
@@ -2314,17 +2359,17 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
   visit(root)
 }
 
-function specializeComponentCall(call, component, sourceFile, factory, context, fail) {
-  if (component.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.AsyncKeyword) || component.asteriskToken) fail(component, "Keyed list components must be synchronous")
-  if (component.parameters.length !== 1 || !ts.isObjectBindingPattern(component.parameters[0].name)) fail(component, "Keyed list components must use one destructured props parameter")
-  if (ts.isJsxElement(call) && call.children.some(child => !ts.isJsxText(child) || child.text.trim())) fail(call, "Keyed list component children are not supported")
+function specializeComponentCall(call, component, sourceFile, factory, context, fail, label = "Keyed list") {
+  if (component.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.AsyncKeyword) || component.asteriskToken) fail(component, `${label} components must be synchronous`)
+  if (component.parameters.length !== 1 || !ts.isObjectBindingPattern(component.parameters[0].name)) fail(component, `${label} components must use one destructured props parameter`)
+  if (ts.isJsxElement(call) && call.children.some(child => !ts.isJsxText(child) || child.text.trim())) fail(call, `${label} component children are not supported`)
   const callAttributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
   const props = new Map()
   let key
   for (const attribute of callAttributes.properties) {
-    if (ts.isJsxSpreadAttribute(attribute)) fail(attribute, "Keyed list component prop spreads are not supported")
+    if (ts.isJsxSpreadAttribute(attribute)) fail(attribute, `${label} component prop spreads are not supported`)
     const name = attribute.name.getText()
-    if (props.has(name) || name === "key" && key) fail(attribute, `Duplicate keyed list component prop "${name}"`)
+    if (props.has(name) || name === "key" && key) fail(attribute, `Duplicate ${label.toLowerCase()} component prop "${name}"`)
     const value = !attribute.initializer
       ? factory.createTrue()
       : ts.isStringLiteral(attribute.initializer)
@@ -2338,12 +2383,12 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
   const substitutions = new Map()
   const acceptedProps = new Set()
   for (const element of component.parameters[0].name.elements) {
-    if (element.dotDotDotToken || element.initializer || !ts.isIdentifier(element.name)) fail(element, "Keyed list component props cannot use rest, defaults, or nested destructuring")
+    if (element.dotDotDotToken || element.initializer || !ts.isIdentifier(element.name)) fail(element, `${label} component props cannot use rest, defaults, or nested destructuring`)
     const prop = (element.propertyName ?? element.name).getText()
     acceptedProps.add(prop)
     substitutions.set(element.name.text, props.get(prop) ?? factory.createIdentifier("undefined"))
   }
-  for (const prop of props.keys()) if (!acceptedProps.has(prop)) fail(call, `Unknown keyed list component prop "${prop}"`)
+  for (const prop of props.keys()) if (!acceptedProps.has(prop)) fail(call, `Unknown ${label.toLowerCase()} component prop "${prop}"`)
 
   let returned
   const calculations = []
@@ -2353,15 +2398,15 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
   } else {
     const statements = [...component.body.statements]
     const last = statements.pop()
-    if (!last || !ts.isReturnStatement(last) || !last.expression) fail(component.body, "Keyed list component must end with one JSX return")
+    if (!last || !ts.isReturnStatement(last) || !last.expression) fail(component.body, `${label} component must end with one JSX return`)
     for (const statement of statements) {
       if (ts.isExpressionStatement(statement) && ts.isCallExpression(statement.expression) && ts.isIdentifier(statement.expression.expression) && statement.expression.expression.text === "useEffect") {
         effectCalls.push(statement.expression)
         continue
       }
-      if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Const) === 0 || statement.declarationList.declarations.length !== 1) fail(statement, "Keyed list component locals must be single const declarations")
+      if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Const) === 0 || statement.declarationList.declarations.length !== 1) fail(statement, `${label} component locals must be single const declarations`)
       const declaration = statement.declarationList.declarations[0]
-      if (!ts.isIdentifier(declaration.name) || !declaration.initializer) fail(declaration, "Keyed list component locals must be initialized identifiers")
+      if (!ts.isIdentifier(declaration.name) || !declaration.initializer) fail(declaration, `${label} component locals must be initialized identifiers`)
       const calculation = substituteClone(declaration.initializer, substitutions, factory, context)
       calculations.push(calculation)
       substitutions.set(declaration.name.text, calculation)
@@ -2369,11 +2414,11 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
     returned = last.expression
   }
   let root = unwrapExpression(substituteClone(returned, substitutions, factory, context))
-  if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(returned, "Keyed list component must return one JSX element")
+  if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) fail(returned, `${label} component must return one JSX element`)
   const tag = jsxTagName(root)
-  if (!ts.isIdentifier(tag) || tag.text[0] !== tag.text[0].toLowerCase()) fail(returned, "Keyed list component must directly return an intrinsic JSX element")
+  if (!ts.isIdentifier(tag) || tag.text[0] !== tag.text[0].toLowerCase()) fail(returned, `${label} component must directly return an intrinsic JSX element`)
   const rootAttributes = ts.isJsxElement(root) ? root.openingElement.attributes : root.attributes
-  if (rootAttributes.properties.some(attribute => ts.isJsxAttribute(attribute) && attribute.name.text === "key")) fail(root, "Keyed list component intrinsic root cannot declare key")
+  if (rootAttributes.properties.some(attribute => ts.isJsxAttribute(attribute) && attribute.name.text === "key")) fail(root, `${label} component intrinsic root cannot declare key`)
   if (key) root = addJsxAttribute(root, cloneAst(key, factory, context), factory)
   ts.setParentRecursive(root, false)
   root.parent = call.parent

package/framework/core.mjs

@@ -17,6 +17,28 @@ const contextMarker = Symbol("kudzu.context")
 const contextProviderMarker = Symbol("kudzu.contextProvider")
 const routeScopeMarker = Symbol("kudzu.routeScope")
 const noSelectValue = Symbol("kudzu.no-select-value")
+const svgAttributeAliases = {
+  clipRule: "clip-rule",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  dominantBaseline: "dominant-baseline",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  shapeRendering: "shape-rendering",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  strokeWidth: "stroke-width",
+  textAnchor: "text-anchor",
+  vectorEffect: "vector-effect"
+}
 
 let renderContext
 
@@ -576,6 +598,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   const childNamespace = tag === "svg" || tag === "math"
     ? tag
     : namespace === "svg" && tag === "foreignObject" ? undefined : namespace
+  const svg = tag === "svg" || namespace === "svg"
   let attributes = ""
   const attributeBindings = []
   const listAttributes = []
@@ -636,7 +659,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
       continue
     }
 
-    const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : rawName
+    const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : svg ? svgAttributeAliases[rawName] ?? rawName : rawName
     const propertyTarget = name === "class" || name === "disabled" || name === "value" || name === "checked" || name === "style"
     if (value?.[listFieldMarker]) {
       attributes += renderAttribute(name, value.value)

package/package.json

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