dom-expressions 0.32.9 → 0.32.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.32.9",
+  "version": "0.32.12",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,7 @@
     "devalue": "^2.0.1"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.32.9"
+    "babel-plugin-jsx-dom-expressions": "^0.32.11"
   },
-  "gitHead": "8a9b236619e0d18abee5da391cae33e25e82f92a"
+  "gitHead": "4faa817f76c32e3eb1a59887183599155145def5"
 }

package/src/client.js

@@ -107,8 +107,10 @@ export function classList(node, value, prev = {}) {
 
 export function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return (nodeStyle.cssText = value);
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if ((value == null && prevString) || typeof value === "string") return (nodeStyle.cssText = value);
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -162,11 +164,11 @@ export function insert(parent, accessor, marker, initial) {
   effect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 
-export function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+export function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -175,7 +177,7 @@ export function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 
@@ -259,13 +261,15 @@ function toggleClassKey(node, key, value) {
     node.classList.toggle(classNames[i], value);
 }
 
-function assignProp(node, prop, value, prev, isSVG) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   let isCE, isProp, isChildProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    value(node);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -325,7 +329,8 @@ function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
   if (!skipChildren && "children" in props) {
     effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)));
   }
-  effect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  effect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 
@@ -453,7 +458,8 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key))
+      sharedConfig.registry.set(key, node);
   }
 }
 

package/src/jsx.d.ts

@@ -21,7 +21,7 @@ export namespace JSX {
     (): Element;
   }
   interface ElementClass {
-    render(props: any): Element;
+    // empty, libs can define requirements downstream
   }
   type LibraryManagedAttributes<Component, Props> = Props;
   interface ElementChildrenAttribute {
@@ -3112,7 +3112,7 @@ export namespace JSX {
       ZoomAndPanSVGAttributes,
       PresentationSVGAttributes {
     version?: string;
-    "base-profile"?: string;
+    baseProfile?: string;
     x?: number | string;
     y?: number | string;
     width?: number | string;

package/src/server.js

@@ -428,7 +428,19 @@ function injectScripts(html, scripts, nonce) {
 }
 
 function serializeError(error) {
-  return error.message ? `new Error(${devalue(error.message)})` : devalue(error);
+  if (error.message) {
+    const fields = {};
+    const keys = Object.getOwnPropertyNames(error);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = error[key];
+      if (!value || (key !== "message" && typeof value !== "function")) {
+        fields[key] = value;
+      }
+    }
+    return `Object.assign(new Error(${devalue(error.message)}), ${devalue(fields)})`;
+  }
+  return devalue(error);
 }
 
 function waitForFragments(registry, key) {

package/src/universal.js

@@ -218,16 +218,14 @@ export function createRenderer({
         () => (prevProps.children = insertExpression(node, props.children, prevProps.children))
       );
     }
+    props.ref && props.ref(node);
     effect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);
-        else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;