dom-expressions 0.34.0 → 0.34.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "csstype": "^3.0"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.34.0",
+    "babel-plugin-jsx-dom-expressions": "^0.34.1",
     "csstype": "^3.1.0"
   },
-  "gitHead": "4a2f5a8af46437c71b0c30a5242213fc87669515"
+  "gitHead": "5e49406921a4fde147b9b64edbfa8fc8c096fbda"
 }

package/src/client.d.ts

@@ -67,4 +67,4 @@ export function getAssets(): string;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export function HydrationScript(): JSX.Element;
 export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
-export function getHydrationScript(): string;
+export function generateHydrationScript(): string;

package/src/client.js

@@ -223,6 +223,7 @@ export function hydrate(code, element, options = {}) {
 export function getNextElement(template) {
   let node, key;
   if (!sharedConfig.context || !(node = sharedConfig.registry.get((key = getHydrationKey())))) {
+    if ("_DX_DEV_" && !template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
     return template.cloneNode(true);
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
@@ -462,7 +463,11 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic =
-          normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], prev) || dynamic;
+          normalizeIncomingArray(
+            normalized,
+            Array.isArray(item) ? item : [item],
+            Array.isArray(prev) ? prev : [prev]
+          ) || dynamic;
       } else {
         normalized.push(item);
         dynamic = true;

package/src/jsx-h.d.ts

@@ -283,9 +283,10 @@ export namespace JSX {
     onanimationiteration?: EventHandlerUnion<T, AnimationEvent>;
     ontransitionend?: EventHandlerUnion<T, TransitionEvent>;
   }
-  
+
   interface CSSProperties extends csstype.PropertiesHyphen {
     // Override
+    [key: `—${string}`]: string | number | undefined
   }
 
   type HTMLAutocapitalize = "off" | "none" | "on" | "sentences" | "words" | "characters";
@@ -527,6 +528,77 @@ export namespace JSX {
     "aria-valuenow"?: number | string;
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string;
+    role?: FunctionMaybe<
+    | "alert"
+    | "alertdialog"
+    | "application"
+    | "article"
+    | "banner"
+    | "button"
+    | "cell"
+    | "checkbox"
+    | "columnheader"
+    | "combobox"
+    | "complementary"
+    | "contentinfo"
+    | "definition"
+    | "dialog"
+    | "directory"
+    | "document"
+    | "feed"
+    | "figure"
+    | "form"
+    | "grid"
+    | "gridcell"
+    | "group"
+    | "heading"
+    | "img"
+    | "link"
+    | "list"
+    | "listbox"
+    | "listitem"
+    | "log"
+    | "main"
+    | "marquee"
+    | "math"
+    | "menu"
+    | "menubar"
+    | "menuitem"
+    | "menuitemcheckbox"
+    | "menuitemradio"
+    | "meter"
+    | "navigation"
+    | "none"
+    | "note"
+    | "option"
+    | "presentation"
+    | "progressbar"
+    | "radio"
+    | "radiogroup"
+    | "region"
+    | "row"
+    | "rowgroup"
+    | "rowheader"
+    | "scrollbar"
+    | "search"
+    | "searchbox"
+    | "separator"
+    | "slider"
+    | "spinbutton"
+    | "status"
+    | "switch"
+    | "tab"
+    | "table"
+    | "tablist"
+    | "tabpanel"
+    | "term"
+    | "textbox"
+    | "timer"
+    | "toolbar"
+    | "tooltip"
+    | "tree"
+    | "treegrid"
+    | "treeitem">;
   }
 
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
@@ -552,77 +624,6 @@ export namespace JSX {
     resource?: FunctionMaybe<string>;
     typeof?: FunctionMaybe<string>;
     vocab?: FunctionMaybe<string>;
-    role?: FunctionMaybe<
-      | "alert"
-      | "alertdialog"
-      | "application"
-      | "article"
-      | "banner"
-      | "button"
-      | "cell"
-      | "checkbox"
-      | "columnheader"
-      | "combobox"
-      | "complementary"
-      | "contentinfo"
-      | "definition"
-      | "dialog"
-      | "directory"
-      | "document"
-      | "feed"
-      | "figure"
-      | "form"
-      | "grid"
-      | "gridcell"
-      | "group"
-      | "heading"
-      | "img"
-      | "link"
-      | "list"
-      | "listbox"
-      | "listitem"
-      | "log"
-      | "main"
-      | "marquee"
-      | "math"
-      | "menu"
-      | "menubar"
-      | "menuitem"
-      | "menuitemcheckbox"
-      | "menuitemradio"
-      | "meter"
-      | "navigation"
-      | "none"
-      | "note"
-      | "option"
-      | "presentation"
-      | "progressbar"
-      | "radio"
-      | "radiogroup"
-      | "region"
-      | "row"
-      | "rowgroup"
-      | "rowheader"
-      | "scrollbar"
-      | "search"
-      | "searchbox"
-      | "separator"
-      | "slider"
-      | "spinbutton"
-      | "status"
-      | "switch"
-      | "tab"
-      | "table"
-      | "tablist"
-      | "tabpanel"
-      | "term"
-      | "textbox"
-      | "timer"
-      | "toolbar"
-      | "tooltip"
-      | "tree"
-      | "treegrid"
-      | "treeitem">;
     autocapitalize?: FunctionMaybe<HTMLAutocapitalize>;
     slot?: FunctionMaybe<string>;
     color?: FunctionMaybe<string>;
@@ -1082,7 +1083,7 @@ export namespace JSX {
     | "defer xMidYMax slice"
     | "defer xMaxYMax slice";
   type SVGUnits = "userSpaceOnUse" | "objectBoundingBox";
-  interface CoreSVGAttributes<T> extends DOMAttributes<T> {
+  interface CoreSVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     id?: FunctionMaybe<string>;
     lang?: FunctionMaybe<string>;
     tabIndex?: FunctionMaybe<number | string>;

package/src/jsx.d.ts

@@ -285,6 +285,7 @@ export namespace JSX {
 
   interface CSSProperties extends csstype.PropertiesHyphen {
     // Override
+    [key: `—${string}`]: string | number | undefined
   }
 
   type HTMLAutocapitalize = "off" | "none" | "on" | "sentences" | "words" | "characters";
@@ -526,40 +527,6 @@ export namespace JSX {
     "aria-valuenow"?: number | string;
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string;
-  }
-
-  // TODO: Should we allow this?
-  // type ClassKeys = `class:${string}`;
-  // type CSSKeys = Exclude<keyof csstype.PropertiesHyphen, `-${string}`>;
-
-  // type CSSAttributes = {
-  //   [key in CSSKeys as `style:${key}`]: csstype.PropertiesHyphen[key];
-  // };
-
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    // [key: ClassKeys]: boolean;
-    accessKey?: string;
-    class?: string;
-    contenteditable?: boolean | "inherit";
-    contextmenu?: string;
-    dir?: HTMLDir;
-    draggable?: boolean;
-    hidden?: boolean;
-    id?: string;
-    lang?: string;
-    spellcheck?: boolean;
-    style?: CSSProperties | string;
-    tabindex?: number | string;
-    title?: string;
-    translate?: "yes" | "no";
-    about?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    property?: string;
-    resource?: string;
-    typeof?: string;
-    vocab?: string;
     role?:
       | "alert"
       | "alertdialog"
@@ -631,6 +598,40 @@ export namespace JSX {
       | "tree"
       | "treegrid"
       | "treeitem";
+  }
+
+  // TODO: Should we allow this?
+  // type ClassKeys = `class:${string}`;
+  // type CSSKeys = Exclude<keyof csstype.PropertiesHyphen, `-${string}`>;
+
+  // type CSSAttributes = {
+  //   [key in CSSKeys as `style:${key}`]: csstype.PropertiesHyphen[key];
+  // };
+
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    // [key: ClassKeys]: boolean;
+    accessKey?: string;
+    class?: string;
+    contenteditable?: boolean | "inherit";
+    contextmenu?: string;
+    dir?: HTMLDir;
+    draggable?: boolean;
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    spellcheck?: boolean;
+    style?: CSSProperties | string;
+    tabindex?: number | string;
+    title?: string;
+    translate?: "yes" | "no";
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
     autocapitalize?: HTMLAutocapitalize;
     slot?: string;
     color?: string;
@@ -1090,7 +1091,7 @@ export namespace JSX {
     | "defer xMidYMax slice"
     | "defer xMaxYMax slice";
   type SVGUnits = "userSpaceOnUse" | "objectBoundingBox";
-  interface CoreSVGAttributes<T> extends DOMAttributes<T> {
+  interface CoreSVGAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     id?: string;
     lang?: string;
     tabIndex?: number | string;

package/src/server.js

@@ -290,8 +290,9 @@ export function ssrElement(tag, props, children, needsId) {
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
-    if (ChildProperties.has(prop) && children === undefined) {
-      children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
+    if (ChildProperties.has(prop)) {
+      if (children === undefined)
+        children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];