@kudzujs/core 0.6.10 → 0.6.11

package/README.md

@@ -208,6 +208,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 +552,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,6 +21,8 @@ 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.

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.11",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",