solid-js 1.4.3 → 1.4.6

package/web/dist/dev.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var solidJs = require('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"
@@ -19,8 +19,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",
@@ -29,7 +29,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 solidJs.createMemo(fn, undefined, !equals ? {
@@ -146,7 +146,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 = {}) {
@@ -310,14 +311,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 {
@@ -349,7 +360,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;
@@ -397,7 +408,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)) {
       solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
@@ -409,7 +421,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);
@@ -430,26 +442,29 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   } else console.warn(`Unrecognized value. Skipped inserting`, value);
   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;
 }
@@ -508,7 +523,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() {}
@@ -561,8 +576,9 @@ function Portal(props) {
 }
 function Dynamic(props) {
   const [p, others] = solidJs.splitProps(props, ["component"]);
+  const cached = solidJs.createMemo(() => p.component);
   return solidJs.createMemo(() => {
-    const component = p.component;
+    const component = cached();
     switch (typeof component) {
       case "function":
         Object.assign(component, {
@@ -667,7 +683,7 @@ exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
 exports.spread = spread;
 exports.ssr = ssr;
-exports.ssrBoolean = ssrBoolean;
+exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;

package/web/dist/dev.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 ? {
@@ -143,7 +143,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 = {}) {
@@ -307,14 +308,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 {
@@ -346,7 +357,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;
@@ -394,7 +405,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;
     }
@@ -406,7 +418,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);
@@ -427,26 +439,29 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   } else console.warn(`Unrecognized value. Skipped inserting`, value);
   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;
 }
@@ -505,7 +520,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() {}
@@ -558,8 +573,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":
         Object.assign(component, {
@@ -575,4 +591,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/dist/server.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var solidJs = require('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 BooleanAttributes = new Set(booleans);
-new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const BooleanAttributes = /*#__PURE__*/new Set(booleans);
+/*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -273,7 +273,10 @@ function renderToStringAsync(code, options = {}) {
       p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
-  const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  let timeoutHandle;
+  const timeout = new Promise((_, reject) => {
+    timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
+  });
   function asyncWrap(fn) {
     return new Promise(resolve => {
       const registry = new Set();
@@ -304,6 +307,7 @@ function renderToStringAsync(code, options = {}) {
     });
   }
   return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+    clearTimeout(timeoutHandle);
     let html = injectAssets(context.assets, resolveSSRNode(res));
     if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;

package/web/dist/server.js

@@ -2,8 +2,8 @@ import { sharedConfig, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, 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 BooleanAttributes = new Set(booleans);
-new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const BooleanAttributes = /*#__PURE__*/new Set(booleans);
+/*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -270,7 +270,10 @@ function renderToStringAsync(code, options = {}) {
       p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
-  const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
+  let timeoutHandle;
+  const timeout = new Promise((_, reject) => {
+    timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
+  });
   function asyncWrap(fn) {
     return new Promise(resolve => {
       const registry = new Set();
@@ -301,6 +304,7 @@ function renderToStringAsync(code, options = {}) {
     });
   }
   return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+    clearTimeout(timeoutHandle);
     let html = injectAssets(context.assets, resolveSSRNode(res));
     if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;

package/web/dist/web.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var solidJs = require('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"
@@ -19,8 +19,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",
@@ -29,7 +29,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 solidJs.createMemo(fn, undefined, !equals ? {
@@ -145,7 +145,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 = {}) {
@@ -309,14 +310,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 {
@@ -348,7 +359,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;
@@ -396,7 +407,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)) {
       solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
@@ -408,7 +420,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);
@@ -429,26 +441,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;
 }
@@ -507,7 +522,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() {}
@@ -560,8 +575,9 @@ function Portal(props) {
 }
 function Dynamic(props) {
   const [p, others] = solidJs.splitProps(props, ["component"]);
+  const cached = solidJs.createMemo(() => p.component);
   return solidJs.createMemo(() => {
-    const component = p.component;
+    const component = cached();
     switch (typeof component) {
       case "function":
         return solidJs.untrack(() => component(others));
@@ -663,7 +679,7 @@ exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
 exports.spread = spread;
 exports.ssr = ssr;
-exports.ssrBoolean = ssrBoolean;
+exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;