solid-js 1.4.3 → 1.4.6

package/web/dist/web.js

@@ -2,8 +2,8 @@ import { createMemo, createRoot, createRenderEffect, sharedConfig, enableHydrati
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, mergeProps } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
-const Properties = new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
-const ChildProperties = new Set(["innerHTML", "textContent", "innerText", "children"]);
+const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -16,8 +16,8 @@ const PropAliases = {
   playsinline: "playsInline",
   readonly: "readOnly"
 };
-const DelegatedEvents = new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
-const SVGElements = new Set([
+const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
@@ -26,7 +26,7 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   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"]);
+const DOMElements = /*#__PURE__*/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"]);
 
 function memo(fn, equals) {
   return createMemo(fn, undefined, !equals ? {
@@ -142,7 +142,8 @@ function addEventListener(node, name, handler, delegate) {
       node[`$$${name}Data`] = handler[1];
     } else node[`$$${name}`] = handler;
   } else if (Array.isArray(handler)) {
-    node.addEventListener(name, e => handler[0](handler[1], e));
+    const handlerFn = handler[0];
+    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
   } else node.addEventListener(name, handler);
 }
 function classList(node, value, prev = {}) {
@@ -306,14 +307,24 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       value(node);
     }
   } else if (prop.slice(0, 3) === "on:") {
-    node.addEventListener(prop.slice(3), value);
+    const e = prop.slice(3);
+    prev && node.removeEventListener(e, prev);
+    value && node.addEventListener(e, value);
   } else if (prop.slice(0, 10) === "oncapture:") {
-    node.addEventListener(prop.slice(10), value, true);
+    const e = prop.slice(10);
+    prev && node.removeEventListener(e, prev, true);
+    value && node.addEventListener(e, value, true);
   } else if (prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
-    addEventListener(node, name, value, delegate);
-    delegate && delegateEvents([name]);
+    if (!delegate && prev) {
+      const h = Array.isArray(prev) ? prev[0] : prev;
+      node.removeEventListener(name, h);
+    }
+    if (delegate || value) {
+      addEventListener(node, name, value, delegate);
+      delegate && delegateEvents([name]);
+    }
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
     if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
@@ -345,7 +356,7 @@ function eventHandler(e) {
     const handler = node[key];
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
-      data !== undefined ? handler(data, e) : handler(e);
+      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
       if (e.cancelBubble) return;
     }
     node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
@@ -393,7 +404,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     return () => current;
   } else if (Array.isArray(value)) {
     const array = [];
-    if (normalizeIncomingArray(array, value, unwrapArray)) {
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
       createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
@@ -405,7 +417,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
       if (multi) return current;
-    } else if (Array.isArray(current)) {
+    } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, array, marker);
       } else reconcileArrays(parent, current, array);
@@ -426,26 +438,29 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   } else ;
   return current;
 }
-function normalizeIncomingArray(normalized, array, unwrap) {
+function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-        t;
+        prev = current && current[i];
     if (item instanceof Node) {
       normalized.push(item);
     } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
-      dynamic = normalizeIncomingArray(normalized, item) || dynamic;
-    } else if ((t = typeof item) === "string") {
-      normalized.push(document.createTextNode(item));
-    } else if (t === "function") {
+      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+    } else if ((typeof item) === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
-        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item]) || dynamic;
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], prev) || dynamic;
       } else {
         normalized.push(item);
         dynamic = true;
       }
-    } else normalized.push(document.createTextNode(item.toString()));
+    } else {
+      const value = String(item);
+      if (prev && prev.nodeType === 3 && prev.data === value) {
+        normalized.push(prev);
+      } else normalized.push(document.createTextNode(value));
+    }
   }
   return dynamic;
 }
@@ -504,7 +519,7 @@ function resolveSSRNode(node) {}
 function ssrClassList(value) {}
 function ssrStyle(value) {}
 function ssrSpread(accessor) {}
-function ssrBoolean(key, value) {}
+function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
 function escape(html) {}
 function generateHydrationScript() {}
@@ -557,8 +572,9 @@ function Portal(props) {
 }
 function Dynamic(props) {
   const [p, others] = splitProps(props, ["component"]);
+  const cached = createMemo(() => p.component);
   return createMemo(() => {
-    const component = p.component;
+    const component = cached();
     switch (typeof component) {
       case "function":
         return untrack(() => component(others));
@@ -571,4 +587,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/types/index.d.ts

@@ -12,10 +12,13 @@ export declare const hydrate: typeof hydrateCore;
  *
  * @description https://www.solidjs.com/docs/latest/api#%3Cportal%3E
  */
-export declare function Portal(props: {
+export declare function Portal<T extends boolean = false, S extends boolean = false>(props: {
     mount?: Node;
-    useShadow?: boolean;
-    isSVG?: boolean;
+    useShadow?: T;
+    isSVG?: S;
+    ref?: (S extends true ? SVGGElement : HTMLDivElement) | ((el: (T extends true ? {
+        readonly shadowRoot: ShadowRoot;
+    } : {}) & (S extends true ? SVGGElement : HTMLDivElement)) => void);
     children: JSX.Element;
 }): Text;
 declare type DynamicProps<T> = T & {

package/web/types/server-mock.d.ts

@@ -33,7 +33,7 @@ export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
 export declare function ssrSpread(accessor: any): () => string;
-export declare function ssrBoolean(key: string, value: boolean): string;
+export declare function ssrAttribute(key: string, value: boolean): string;
 export declare function ssrHydrationKey(): string;
 export declare function escape(html: string): string;
 export declare function generateHydrationScript(): string;