dom-expressions 0.32.13 → 0.32.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dom-expressions",
   "description": "A Fine-Grained Runtime for Performant DOM Rendering",
-  "version": "0.32.13",
+  "version": "0.32.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -11,8 +11,8 @@
   "readmeFilename": "README.md",
   "sideEffects": false,
   "scripts": {
-    "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test": "jest --no-cache",
+    "test:coverage": "jest --coverage --no-cache",
     "report:coverage": "cat ./coverage/lcov.info | ../../node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage"
   },
   "dependencies": {
@@ -20,7 +20,7 @@
     "devalue": "^2.0.1"
   },
   "devDependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.32.11"
+    "babel-plugin-jsx-dom-expressions": "^0.32.16"
   },
-  "gitHead": "b810a46464dce9e5824f26f90e0fbf49d0b95581"
+  "gitHead": "e8f40d02a9e46bf37be05662a7bcb19bd42126b1"
 }

package/src/client.js

@@ -13,6 +13,7 @@ export {
   ChildProperties,
   PropAliases,
   Aliases,
+  DOMElements,
   SVGElements,
   SVGNamespace,
   DelegatedEvents
@@ -315,6 +316,12 @@ function eventHandler(e) {
     }
   });
 
+  // cancel html streaming
+  if (sharedConfig.registry && !sharedConfig.done) {
+    sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+  }
+
   while (node !== null) {
     const handler = node[key];
     if (handler && !node.disabled) {

package/src/constants.d.ts

@@ -13,3 +13,5 @@ export const DelegatedEvents: Set<string>;
 export const SVGElements: Set<string>;
 
 export const SVGNamespace: Record<string, string>;
+
+export const DOMElements: Set<string>;

package/src/constants.js

@@ -160,6 +160,283 @@ const SVGNamespace = {
   xml: "http://www.w3.org/XML/1998/namespace"
 };
 
+const DOMElements = new Set([
+  "html",
+  "base",
+  "head",
+  "link",
+  "meta",
+  "style",
+  "title",
+  "body",
+  "address",
+  "article",
+  "aside",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "body",
+  "blockquote",
+  "dd",
+  "div",
+  "dl",
+  "dt",
+  "figcaption",
+  "figure",
+  "hr",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "ul",
+  "a",
+  "abbr",
+  "b",
+  "bdi",
+  "bdo",
+  "br",
+  "cite",
+  "code",
+  "data",
+  "dfn",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "time",
+  "u",
+  "var",
+  "wbr",
+  "area",
+  "audio",
+  "img",
+  "map",
+  "track",
+  "video",
+  "embed",
+  "iframe",
+  "object",
+  "param",
+  "picture",
+  "portal",
+  "source",
+  "svg",
+  "math",
+  "canvas",
+  "noscript",
+  "script",
+  "del",
+  "ins",
+  "caption",
+  "col",
+  "colgroup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "button",
+  "datalist",
+  "fieldset",
+  "form",
+  "input",
+  "label",
+  "legend",
+  "meter",
+  "optgroup",
+  "option",
+  "output",
+  "progress",
+  "select",
+  "textarea",
+  "details",
+  "dialog",
+  "menu",
+  "summary",
+  "details",
+  "slot",
+  "template",
+  "acronym",
+  "applet",
+  "basefont",
+  "bgsound",
+  "big",
+  "blink",
+  "center",
+  "content",
+  "dir",
+  "font",
+  "frame",
+  "frameset",
+  "hgroup",
+  "image",
+  "keygen",
+  "marquee",
+  "menuitem",
+  "nobr",
+  "noembed",
+  "noframes",
+  "plaintext",
+  "rb",
+  "rtc",
+  "shadow",
+  "spacer",
+  "strike",
+  "tt",
+  "xmp",
+  "a",
+  "abbr",
+  "acronym",
+  "address",
+  "applet",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "basefont",
+  "bdi",
+  "bdo",
+  "bgsound",
+  "big",
+  "blink",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "center",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "content",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dir",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "font",
+  "footer",
+  "form",
+  "frame",
+  "frameset",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "image",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "marquee",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "nobr",
+  "noembed",
+  "noframes",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "plaintext",
+  "portal",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "shadow",
+  "slot",
+  "small",
+  "source",
+  "spacer",
+  "span",
+  "strike",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "tt",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  "xmp",
+  "input",
+]);
+
+
 export {
   BooleanAttributes,
   Properties,
@@ -168,5 +445,6 @@ export {
   Aliases,
   DelegatedEvents,
   SVGElements,
-  SVGNamespace
+  SVGNamespace,
+  DOMElements
 };

package/src/jsx.d.ts

@@ -24,6 +24,9 @@ export namespace JSX {
     // empty, libs can define requirements downstream
   }
   type LibraryManagedAttributes<Component, Props> = Props;
+  interface ElementAttributesProperty {
+    // empty, libs can define requirements downstream
+  }
   interface ElementChildrenAttribute {
     children: {};
   }
@@ -1997,6 +2000,7 @@ export namespace JSX {
       | "treegrid"
       | "treeitem";
     autocapitalize?: HTMLAutocapitalize;
+    slot?: string;
     color?: string;
     itemprop?: string;
     itemscope?: boolean;

package/src/server.d.ts

@@ -33,7 +33,7 @@ export function ssr(template: string[] | string, ...nodes: any[]): { t: string }
 export function resolveSSRNode(node: any): string;
 export function ssrClassList(value: { [k: string]: boolean }): string;
 export function ssrStyle(value: { [k: string]: string }): string;
-export function ssrSpread(accessor: any): () => string;
+export function ssrSpread(props: any, isSVG: boolean, skipChildren: boolean): string;
 export function ssrBoolean(key: string, value: boolean): string;
 export function ssrHydrationKey(): string;
 export function escape(html: string): string;

package/src/server.js

@@ -3,7 +3,7 @@ import { sharedConfig } from "rxcore";
 import devalue from "devalue";
 export { createComponent } from "rxcore";
 
-const REPLACE_SCRIPT = `function $df(e,y,t,g){t=document.getElementById(e),g=document.getElementById("pl"+e),g&&g.replaceWith(...t.childNodes),_$HY.set(e,y||null)}`;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
 const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
 
 export function renderToString(code, options = {}) {
@@ -295,6 +295,7 @@ export function ssrSpread(props, isSVG, skipChildren) {
   // TODO: figure out how to handle props.children
   const keys = Object.keys(props);
   let result = "";
+  let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (prop === "children") {
@@ -304,8 +305,13 @@ export function ssrSpread(props, isSVG, skipChildren) {
     const value = props[prop];
     if (prop === "style") {
       result += `style="${ssrStyle(value)}"`;
-    } else if (prop === "classList") {
-      result += `class="${ssrClassList(value)}"`;
+    } else if (prop === "class" || prop === "className" || prop === "classList") {
+      if (classResolved) continue;
+      let n;
+      result += `class="${(n = props.class) ? n + " " : ""}${
+        (n = props.className) ? n + " " : ""
+      }${ssrClassList(props.classList)}"`;
+      classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;
       else continue;