@kudzujs/core 0.4.6 → 0.4.7

package/README.md

@@ -108,6 +108,7 @@ The handler above increments by two and patches its bound DOM once. Inspect the
 <input value={name} onInput={event => setName(event.currentTarget.value)} />
 <input type="checkbox" checked={subscribed} onChange={event => setSubscribed(event.currentTarget.checked)} />
 <select value={theme} onChange={event => setTheme(event.currentTarget.value)} />
+<div style={{ opacity: open ? 1 : 0, width: open ? 240 : 0 }} />
 ```
 
 Regular attributes use the same expressions without an allowlist:
@@ -121,7 +122,7 @@ 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. Reactive `style`, `ref`, and `dangerouslySetInnerHTML` remain unsupported.
+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 `ref` and `dangerouslySetInnerHTML` remain unsupported.
 
 ## Conditional DOM
 
@@ -228,6 +229,7 @@ Supported:
 - Serializable component-local captures
 - Direct text DOM patches
 - Reactive standard, `aria-*`, and `data-*` attributes
+- Reactive object `style` attributes
 - Controlled `value` and `checked` form properties
 - Conditional child `&&` and ternary DOM patches
 - Direct keyed local-state lists

package/framework/binding-runtime.js

@@ -1,5 +1,6 @@
 import { browserState, mountDom, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
 import { deserialize } from "./serialization.js"
+import { serializeStyle } from "./style.js"
 
 const imports = new Map()
 const bindingTargets = new Map()
@@ -8,7 +9,7 @@ const mountedBindings = new WeakSet()
 const mountedConditions = new WeakSet()
 const bindingRegistrations = new WeakMap()
 const conditionRegistrations = new WeakMap()
-const bindingTypes = ["class", "disabled", "value", "checked"]
+const bindingTypes = ["class", "disabled", "value", "checked", "style"]
 const bindingSelector = [...bindingTypes.map(target => `[data-k-bind-${target}]`), "[data-k-bind-attrs]"].join(",")
 
 export function patchBinding(node, target, value) {
@@ -19,6 +20,10 @@ export function patchBinding(node, target, value) {
   } else if (target === "value") {
     const next = value == null ? "" : String(value)
     if (node.value !== next) node.value = next
+  } else if (target === "style") {
+    const style = serializeStyle(value)
+    if (style) node.setAttribute("style", style)
+    else node.removeAttribute("style")
   } else if (target === "class" && (value == null || value === false)) {
     node.removeAttribute("class")
   } else if (target === "class") {

package/framework/build.mjs

@@ -73,9 +73,11 @@ export async function build({ quiet = false } = {}) {
   }
   if (bindingCount || hasNativeHandlers) await cp(new URL("./serialization.js", import.meta.url), join(assetsDirectory, "kudzu-serialization.js"))
   if (bindingCount) {
+    await cp(new URL("./style.js", import.meta.url), join(assetsDirectory, "kudzu-style.js"))
     const bindingRuntime = (await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
+      .replace('"./style.js"', '"./kudzu-style.js"')
     await writeFile(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime)
   }
   if (listCount) {
@@ -388,7 +390,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         }
       }
 
-      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !/^on/i.test(node.name.getText()) && !["style", "key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !/^on/i.test(node.name.getText()) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
         const expression = node.initializer.expression
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(expression, setters)

package/framework/core.mjs

@@ -1,3 +1,5 @@
+import { serializeStyle } from "./style.js"
+
 const signalMarker = Symbol("kudzu.signal")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
@@ -352,7 +354,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     if (rawName === "selected" && selectValue !== noSelectValue) continue
     if (/^on/i.test(rawName) && !/^on[A-Z]/.test(rawName)) throw new Error(`${rawName} must use a camelCase event handler`)
     if (rawName.toLowerCase().startsWith("data-k-")) throw new Error(`${rawName} uses Kudzu's reserved data-k-* prefix`)
-    if (["style", "ref", "dangerouslysetinnerhtml"].includes(rawName.toLowerCase()) && (value?.[signalMarker] || value?.[bindingMarker])) {
+    if (["ref", "dangerouslysetinnerhtml"].includes(rawName.toLowerCase()) && (value?.[signalMarker] || value?.[bindingMarker])) {
       throw new Error(`Reactive ${rawName} is not supported`)
     }
 
@@ -377,7 +379,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
 
     const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : rawName
-    const propertyTarget = name === "class" || name === "disabled" || name === "value" || name === "checked"
+    const propertyTarget = name === "class" || name === "disabled" || name === "value" || name === "checked" || name === "style"
     if (value?.[listFieldMarker]) {
       attributes += renderAttribute(name, value.value)
       listAttributes.push([name, value.field])
@@ -409,12 +411,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
 
     if (tag === "select" && name === "value") continue
-    if (name === "style" && value && typeof value === "object") {
-      const style = Object.entries(value).map(([property, entry]) => `${toKebabCase(property)}:${entry}`).join(";")
-      attributes += ` style="${escapeAttribute(style)}"`
-    } else {
-      attributes += renderAttribute(name, value)
-    }
+    attributes += renderAttribute(name, value)
   }
 
   if (attributeBindings.length) attributes += ` data-k-bind-attrs='${escapeJsonAttribute(attributeBindings)}'`
@@ -481,6 +478,10 @@ function reactiveStateIds(descriptor) {
 }
 
 function renderAttribute(name, value) {
+  if (name === "style") {
+    const style = serializeStyle(value)
+    return style ? ` style="${escapeAttribute(style)}"` : ""
+  }
   if (name === "disabled" || name === "checked") return value ? ` ${name}` : ""
   if (name === "value") return value == null ? "" : ` value="${escapeAttribute(value)}"`
   if (value == null || (value === false && !isStringBooleanAttribute(name))) return ""
@@ -525,7 +526,3 @@ function listSeed(items, fields) {
   }
   return seed
 }
-
-function toKebabCase(value) {
-  return value.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`)
-}

package/framework/style.js

@@ -0,0 +1,23 @@
+const unitless = new Set([
+  "animationIterationCount", "aspectRatio", "borderImageOutset", "borderImageSlice", "borderImageWidth",
+  "columnCount", "columns", "flex", "flexGrow", "flexShrink", "fontWeight", "gridArea", "gridColumn",
+  "gridColumnEnd", "gridColumnSpan", "gridColumnStart", "gridRow", "gridRowEnd", "gridRowSpan", "gridRowStart",
+  "lineClamp", "lineHeight", "opacity", "order", "orphans", "scale", "tabSize", "widows", "zIndex", "zoom",
+  "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit",
+  "strokeOpacity", "strokeWidth"
+])
+
+export function serializeStyle(value) {
+  if (value == null || value === false) return ""
+  if (typeof value !== "object" || Array.isArray(value)) throw new Error("style must be an object")
+  return Object.entries(value).flatMap(([property, entry]) => {
+    if (entry == null || typeof entry === "boolean") return []
+    if (typeof entry === "number" && !Number.isFinite(entry)) throw new Error(`style.${property} must be finite`)
+    const suffix = typeof entry === "number" && entry !== 0 && !property.startsWith("--") && !unitless.has(property) ? "px" : ""
+    return `${toKebabCase(property)}:${entry}${suffix}`
+  }).join(";")
+}
+
+function toKebabCase(value) {
+  return value.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`).replace(/^ms-/, "-ms-")
+}

package/package.json

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