dom-expressions 0.40.7 → 0.40.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.40.7",
+  "version": "0.40.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -24,10 +24,10 @@
     "seroval-plugins": "~1.5.0"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.40.7",
+    "babel-plugin-jsx-dom-expressions": "^0.40.10",
     "csstype": "^3.1",
     "seroval": "~1.5.0",
     "seroval-plugins": "~1.5.0"
   },
-  "gitHead": "3c01eb2ac61b193d4164319befe3f1b2634549cb"
+  "gitHead": "727298ff79a54ef5299d3649ab7f4105a326e9b3"
 }

package/src/client.d.ts

@@ -56,9 +56,9 @@ export function addEventListener(
 ): void;
 export function classList(
   node: Element,
-  value: { [k: string]: boolean },
-  prev?: { [k: string]: boolean }
-): { [k: string]: boolean };
+  value: JSX.ClassList,
+  prev?: JSX.ClassList
+): JSX.ClassList;
 export function style(
   node: Element,
   value: { [k: string]: string },

package/src/client.js

@@ -107,7 +107,14 @@ export function clearDelegatedEvents(document = window.document) {
 
 export function setProperty(node, name, value) {
   if (isHydrating(node)) return;
-  node[name] = value;
+  // Compiler on next emits `el.value = v ?? ""` for input/textarea. 0.40.x
+  // still goes through setProperty, so apply the same rule here (#2957).
+  if (
+    (name === "value" || name === "defaultValue") &&
+    (node.nodeName === "INPUT" || node.nodeName === "TEXTAREA")
+  )
+    node[name] = value ?? "";
+  else node[name] = value;
 }
 
 export function setAttribute(node, name, value) {
@@ -384,6 +391,12 @@ function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
     } else if (isHydrating(node)) return value;
     if (prop === "class" || prop === "className") className(node, value);
     else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
+    else if (
+      (prop === "value" || prop === "defaultValue") &&
+      (node.nodeName === "INPUT" || node.nodeName === "TEXTAREA")
+    )
+      // Spread path assigned raw, so value={undefined} painted "undefined" (#2957).
+      node[propAlias || prop] = value ?? "";
     else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];

package/src/jsx-h.d.ts

@@ -140,14 +140,13 @@ export namespace JSX {
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void) | undefined;
   }
+  export type ClassList = {
+    [k: string]: boolean | undefined;
+  };
   interface CustomAttributes<T> {
     ref?: T | ((el: T) => void) | undefined;
     children?: FunctionMaybe<Element | undefined>;
-    classList?:
-      | {
-          [k: string]: boolean | undefined;
-        }
-      | undefined;
+    classList?: ClassList | undefined;
     $ServerOnly?: boolean | undefined;
   }
   type Accessor<T> = () => T;

package/src/jsx.d.ts

@@ -137,14 +137,13 @@ export namespace JSX {
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void) | undefined;
   }
+  export type ClassList = {
+    [k: string]: boolean | undefined;
+  };
   interface CustomAttributes<T> {
     ref?: T | ((el: T) => void) | undefined;
     children?: Element | undefined;
-    classList?:
-      | {
-          [k: string]: boolean | undefined;
-        }
-      | undefined;
+    classList?: ClassList | undefined;
     $ServerOnly?: boolean | undefined;
   }
   type Accessor<T> = () => T;

package/src/server.d.ts

@@ -50,7 +50,7 @@ export function ssrElement(
   children: any,
   needsId: boolean
 ): { t: string };
-export function ssrClassList(value: { [k: string]: boolean }): string;
+export function ssrClassList(value: JSX.ClassList): string;
 export function ssrStyle(value: { [k: string]: string }): string;
 export function ssrAttribute(key: string, value: any, isBoolean: boolean): string;
 export function ssrHydrationKey(): string;
@@ -107,9 +107,9 @@ export function untrack<T>(fn: () => T): T;
 /** @deprecated not supported on the server side */
 export function classList(
   node: Element,
-  value: { [k: string]: boolean },
-  prev?: { [k: string]: boolean }
-): { [k: string]: boolean };
+  value: JSX.ClassList,
+  prev?: JSX.ClassList
+): JSX.ClassList;
 
 /** @deprecated not supported on the server side */
 export function style(

package/src/server.js

@@ -432,7 +432,16 @@ export function escape(s, attr) {
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
     }
-    if (attr && t === "boolean") return String(s);
+    if (attr) {
+      if (t === "boolean") return String(s);
+      // Nullish values pass through so callers can omit the attribute, and
+      // numbers can never contain `&` or `"`. Everything else (arrays,
+      // objects) would be stringified by the surrounding template literal
+      // anyway, so coerce to the final string here first — matching what the
+      // client DOM receives — and run it through the normal string path.
+      if (s == null || t === "number") return s;
+      return escape(String(s), attr);
+    }
     return s;
   }
   const delim = attr ? '"' : "<";