dom-expressions 0.40.8 → 0.40.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.40.8",
+  "version": "0.40.11",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -20,14 +20,14 @@
   },
   "peerDependencies": {
     "csstype": "^3.0",
-    "seroval": "~1.5.0",
-    "seroval-plugins": "~1.5.0"
+    "seroval": "~1.6.8",
+    "seroval-plugins": "~1.6.8"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.40.7",
+    "babel-plugin-jsx-dom-expressions": "^0.40.11",
     "csstype": "^3.1",
-    "seroval": "~1.5.0",
-    "seroval-plugins": "~1.5.0"
+    "seroval": "~1.6.8",
+    "seroval-plugins": "~1.6.8"
   },
-  "gitHead": "56bd4054237b031c0cca8c1ec69da162c52ed4a6"
+  "gitHead": "3eba17b37754abaae2346c0237a4a65de802a316"
 }

package/src/client.js

@@ -54,9 +54,10 @@ export function render(code, element, init, options = {}) {
   let disposer;
   root(dispose => {
     disposer = dispose;
+    // Hydration owns the whole container, including nodes streamed in after init.
     element === document
       ? code()
-      : insert(element, code(), element.firstChild ? null : undefined, init);
+      : insert(element, code(), !init && element.firstChild ? null : undefined, init);
   }, options.owner);
   return () => {
     disposer();
@@ -107,7 +108,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 +392,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]];
@@ -435,27 +449,35 @@ function eventHandler(e) {
   // cancel hydration
   if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
 
-  if (e.composedPath) {
-    const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        // bubble up from portal mount instead of composedPath
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break; // don't bubble above root of event delegation
+  try {
+    if (e.composedPath) {
+      const path = e.composedPath();
+      retarget(path[0]);
+      for (let i = 0; i < path.length - 2; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          // bubble up from portal mount instead of composedPath
+          walkUpTree();
+          break;
+        }
+        if (node.parentNode === oriCurrentTarget) {
+          break; // don't bubble above root of event delegation
+        }
       }
     }
+    // fallback for browsers that don't support composedPath
+    else walkUpTree();
+    // Mixing portals and shadow dom can lead to a nonstandard target, so reset here.
+    retarget(oriTarget);
+  } finally {
+    // The currentTarget getter shares this closure scope. Chromium keeps the
+    // getter from the first event of each event interface reachable for the
+    // page's lifetime (via the interface's shared map descriptors), so release
+    // the event and the last walked node to not pin a detached DOM tree.
+    e = node = null;
   }
-  // fallback for browsers that don't support composedPath
-  else walkUpTree();
-  // Mixing portals and shadow dom can lead to a nonstandard target, so reset here.
-  retarget(oriTarget);
 }
 
 function insertExpression(parent, value, current, marker, unwrapArray) {

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 ? '"' : "<";

package/src/universal.js

@@ -63,7 +63,7 @@ export function createRenderer({
           if (current.length === 0) {
             appendNodes(parent, array, marker);
           } else reconcileArrays(parent, current, array);
-        } else if (current == null || current === "") {
+        } else if (current == null || !getFirstChild(parent)) {
           appendNodes(parent, array);
         } else {
           reconcileArrays(parent, (multi && current) || [getFirstChild(parent)], array);
@@ -74,7 +74,7 @@ export function createRenderer({
       if (Array.isArray(current)) {
         if (multi) return (current = cleanChildren(parent, current, marker, value));
         cleanChildren(parent, current, null, value);
-      } else if (current == null || current === "" || !getFirstChild(parent)) {
+      } else if (current == null || !getFirstChild(parent)) {
         insertNode(parent, value);
       } else replaceNode(parent, value, getFirstChild(parent));
       current = value;