@sigil-dev/runtime 0.9.7 → 0.9.10

package/index.test.ts

@@ -805,6 +805,28 @@ describe("setProp", () => {
 		setProp(input, "value", "hello");
 		expect(input.value).toBe("hello");
 	});
+
+	test("routes getter-only HTML properties through setAttribute", () => {
+		const input = claim([], "input") as HTMLInputElement;
+		expect(() => setProp(input, "list", "people")).not.toThrow();
+		expect(input.getAttribute("list")).toBe("people");
+		setProp(input, "list", null);
+		expect(input.hasAttribute("list")).toBe(false);
+	});
+
+	test("routes unknown HTML props through setAttribute", () => {
+		const div = claim([], "div");
+		setProp(div, "popovertarget", "menu");
+		expect(div.getAttribute("popovertarget")).toBe("menu");
+	});
+
+	test("keeps IDL semantics for writable props like checked", () => {
+		const input = claim([], "input") as HTMLInputElement;
+		input.type = "checkbox";
+		setProp(input, "checked", true);
+		expect(input.checked).toBe(true);
+		expect(input.hasAttribute("checked")).toBe(false);
+	});
 });
 
 describe("claimText", () => {

package/index.ts

@@ -629,11 +629,14 @@ export function claim(
 }
 
 /**
- * Write a JSX prop to an element. On HTML elements this is the classic blind
- * `el[name] = value` (preserves IDL semantics for value/checked/etc). On
- * SVG-namespace elements it goes through setAttribute instead — IDL property
- * assignment throws on real SVG elements (`svg.width = 15` hits a
- * getter-only property and aborts the whole render).
+ * Write a JSX prop to an element. On HTML elements this is `el[name] = value`
+ * (preserves IDL semantics for value/checked/etc) whenever the element has a
+ * writable property of that name. Names with no writable property go through
+ * setAttribute instead, like SSR does: some IDL attributes are getter-only
+ * (`input.list`, `input.form`, `button.form`), and assigning them throws and
+ * aborts the whole render; unknown names would otherwise land as a bare JS
+ * expando the DOM never sees. On SVG-namespace elements everything is
+ * attribute-routed — IDL property assignment throws there too (`svg.width`).
  */
 const SVG_ATTR_FIX: Record<string, string> = {
 	className: "class",
@@ -643,13 +646,43 @@ const SVG_ATTR_FIX: Record<string, string> = {
 // Never attribute-routed, even inside SVG.
 const SVG_PROP_ONLY = new Set(["textContent", "innerHTML", "outerHTML"]);
 
+// Per-prototype cache of "can `el[name] = v` be assigned?".
+const writableCache = new WeakMap<object, Map<string, boolean>>();
+
+function isWritableProp(el: Element, name: string): boolean {
+	const proto = Object.getPrototypeOf(el) as object;
+	let cache = writableCache.get(proto);
+	if (!cache) writableCache.set(proto, (cache = new Map()));
+	let writable = cache.get(name);
+	if (writable === undefined) {
+		writable = false;
+		for (let o: object | null = proto; o; o = Object.getPrototypeOf(o)) {
+			const d = Object.getOwnPropertyDescriptor(o, name);
+			if (d) {
+				writable = !!(d.set || d.writable);
+				break;
+			}
+		}
+		cache.set(name, writable);
+	}
+	// Own properties (expandos set earlier) are always assignable.
+	return writable || Object.hasOwn(el, name);
+}
+
+function setAttr(el: Element, attr: string, value: unknown): void {
+	if (value == null || value === false) el.removeAttribute(attr);
+	else el.setAttribute(attr, value === true ? "" : String(value));
+}
+
 export function setProp(el: Element, name: string, value: unknown): void {
-	if (el.namespaceURI === SVG_NS && !SVG_PROP_ONLY.has(name)) {
-		const attr = SVG_ATTR_FIX[name] ?? name;
-		if (value == null || value === false) el.removeAttribute(attr);
-		else el.setAttribute(attr, value === true ? "" : String(value));
-	} else {
+	if (el.namespaceURI === SVG_NS) {
+		if (SVG_PROP_ONLY.has(name))
+			(el as unknown as Record<string, unknown>)[name] = value;
+		else setAttr(el, SVG_ATTR_FIX[name] ?? name, value);
+	} else if (isWritableProp(el, name)) {
 		(el as unknown as Record<string, unknown>)[name] = value;
+	} else {
+		setAttr(el, name, value);
 	}
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@sigil-dev/runtime",
   "module": "index.ts",
   "type": "module",
-  "version": "0.9.7",
+  "version": "0.9.10",
   "description": "Runtime for the Sigil framework",
   "private": false,
   "devDependencies": {