solid-js 1.4.3 → 1.4.4

package/dist/dev.cjs

@@ -161,17 +161,21 @@ let rootCount = 0;
 function createRoot(fn, detachedOwner) {
   const listener = Listener,
         owner = Owner,
-        root = fn.length === 0 && !"_SOLID_DEV_" ? UNOWNED : {
+        unowned = fn.length === 0,
+        root = unowned && !"_SOLID_DEV_" ? UNOWNED : {
     owned: null,
     cleanups: null,
     context: null,
     owner: detachedOwner || owner
-  };
+  },
+        updateFn = unowned ? () => fn(() => {
+    throw new Error("Dispose method must be an explicit argument to createRoot function");
+  })  : () => fn(() => cleanNode(root));
   if (owner) root.name = `${owner.name}-r${rootCount++}`;
   Owner = root;
   Listener = null;
   try {
-    return runUpdates(() => fn(() => cleanNode(root)), true);
+    return runUpdates(updateFn, true);
   } finally {
     Listener = listener;
     Owner = owner;
@@ -946,6 +950,7 @@ function cleanNode(node) {
   }
   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
   node.context = null;
+  delete node.sourceMap;
 }
 function reset(node, top) {
   if (!top) {
@@ -1528,7 +1533,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context) {
+  if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     p = sharedConfig.load(key);
     if (p) {
@@ -1561,7 +1566,7 @@ function Suspense(props) {
           return flicker = undefined;
         }
         if (ctx && p === undefined) setHydrateContext();
-        const rendered = untrack(() => props.children);
+        const rendered = createMemo(() => props.children);
         return createMemo(() => {
           const inFallback = store.inFallback(),
                 visibleContent = showContent ? showContent() : true,
@@ -1571,7 +1576,7 @@ function Suspense(props) {
             store.resolved = true;
             ctx = p = undefined;
             resumeEffects(store.effects);
-            return rendered;
+            return rendered();
           }
           if (!visibleFallback) return;
           return createRoot(disposer => {

package/dist/dev.js

@@ -157,17 +157,21 @@ let rootCount = 0;
 function createRoot(fn, detachedOwner) {
   const listener = Listener,
         owner = Owner,
-        root = fn.length === 0 && !"_SOLID_DEV_" ? UNOWNED : {
+        unowned = fn.length === 0,
+        root = unowned && !"_SOLID_DEV_" ? UNOWNED : {
     owned: null,
     cleanups: null,
     context: null,
     owner: detachedOwner || owner
-  };
+  },
+        updateFn = unowned ? () => fn(() => {
+    throw new Error("Dispose method must be an explicit argument to createRoot function");
+  })  : () => fn(() => cleanNode(root));
   if (owner) root.name = `${owner.name}-r${rootCount++}`;
   Owner = root;
   Listener = null;
   try {
-    return runUpdates(() => fn(() => cleanNode(root)), true);
+    return runUpdates(updateFn, true);
   } finally {
     Listener = listener;
     Owner = owner;
@@ -942,6 +946,7 @@ function cleanNode(node) {
   }
   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
   node.context = null;
+  delete node.sourceMap;
 }
 function reset(node, top) {
   if (!top) {
@@ -1524,7 +1529,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context) {
+  if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     p = sharedConfig.load(key);
     if (p) {
@@ -1557,7 +1562,7 @@ function Suspense(props) {
           return flicker = undefined;
         }
         if (ctx && p === undefined) setHydrateContext();
-        const rendered = untrack(() => props.children);
+        const rendered = createMemo(() => props.children);
         return createMemo(() => {
           const inFallback = store.inFallback(),
                 visibleContent = showContent ? showContent() : true,
@@ -1567,7 +1572,7 @@ function Suspense(props) {
             store.resolved = true;
             ctx = p = undefined;
             resumeEffects(store.effects);
-            return rendered;
+            return rendered();
           }
           if (!visibleFallback) return;
           return createRoot(disposer => {

package/dist/solid.cjs

@@ -160,16 +160,18 @@ let ExecCount = 0;
 function createRoot(fn, detachedOwner) {
   const listener = Listener,
         owner = Owner,
-        root = fn.length === 0 && !false ? UNOWNED : {
+        unowned = fn.length === 0,
+        root = unowned && !false ? UNOWNED : {
     owned: null,
     cleanups: null,
     context: null,
     owner: detachedOwner || owner
-  };
+  },
+        updateFn = unowned ? fn : () => fn(() => cleanNode(root));
   Owner = root;
   Listener = null;
   try {
-    return runUpdates(() => fn(() => cleanNode(root)), true);
+    return runUpdates(updateFn, true);
   } finally {
     Listener = listener;
     Owner = owner;
@@ -1443,7 +1445,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context) {
+  if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     p = sharedConfig.load(key);
     if (p) {
@@ -1476,7 +1478,7 @@ function Suspense(props) {
           return flicker = undefined;
         }
         if (ctx && p === undefined) setHydrateContext();
-        const rendered = untrack(() => props.children);
+        const rendered = createMemo(() => props.children);
         return createMemo(() => {
           const inFallback = store.inFallback(),
                 visibleContent = showContent ? showContent() : true,
@@ -1486,7 +1488,7 @@ function Suspense(props) {
             store.resolved = true;
             ctx = p = undefined;
             resumeEffects(store.effects);
-            return rendered;
+            return rendered();
           }
           if (!visibleFallback) return;
           return createRoot(disposer => {

package/dist/solid.js

@@ -156,16 +156,18 @@ let ExecCount = 0;
 function createRoot(fn, detachedOwner) {
   const listener = Listener,
         owner = Owner,
-        root = fn.length === 0 && !false ? UNOWNED : {
+        unowned = fn.length === 0,
+        root = unowned && !false ? UNOWNED : {
     owned: null,
     cleanups: null,
     context: null,
     owner: detachedOwner || owner
-  };
+  },
+        updateFn = unowned ? fn : () => fn(() => cleanNode(root));
   Owner = root;
   Listener = null;
   try {
-    return runUpdates(() => fn(() => cleanNode(root)), true);
+    return runUpdates(updateFn, true);
   } finally {
     Listener = listener;
     Owner = owner;
@@ -1439,7 +1441,7 @@ function Suspense(props) {
     resolved: false
   },
         owner = getOwner();
-  if (sharedConfig.context) {
+  if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     p = sharedConfig.load(key);
     if (p) {
@@ -1472,7 +1474,7 @@ function Suspense(props) {
           return flicker = undefined;
         }
         if (ctx && p === undefined) setHydrateContext();
-        const rendered = untrack(() => props.children);
+        const rendered = createMemo(() => props.children);
         return createMemo(() => {
           const inFallback = store.inFallback(),
                 visibleContent = showContent ? showContent() : true,
@@ -1482,7 +1484,7 @@ function Suspense(props) {
             store.resolved = true;
             ctx = p = undefined;
             resumeEffects(store.effects);
-            return rendered;
+            return rendered();
           }
           if (!visibleFallback) return;
           return createRoot(disposer => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -151,5 +151,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "44197a3f304400b055baef40da9ac661c0585b85"
+  "gitHead": "9f1de6b3cea905aa0857789a0e4738cae73cb1b1"
 }

package/store/dist/dev.cjs

@@ -31,7 +31,8 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  let proto;
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -293,11 +294,15 @@ function modifyMutable(state, modifier) {
   solidJs.batch(() => modifier(unwrap(state)));
 }
 
+const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
   if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    target !== previous && setProperty(parent, property, target);
+    if (target !== previous) {
+      if (property === $ROOT) return target;
+      setProperty(parent, property, target);
+    }
     return;
   }
   if (Array.isArray(target)) {
@@ -369,10 +374,10 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    solidJs.batch(() => applyState(v, {
-      state
-    }, "state", merge, key));
-    return state;
+    const res = applyState(v, {
+      [$ROOT]: state
+    }, $ROOT, merge, key);
+    return res === undefined ? state : res;
   };
 }
 const producers = new WeakMap();

package/store/dist/dev.js

@@ -27,7 +27,8 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  let proto;
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -289,11 +290,15 @@ function modifyMutable(state, modifier) {
   batch(() => modifier(unwrap(state)));
 }
 
+const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
   if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    target !== previous && setProperty(parent, property, target);
+    if (target !== previous) {
+      if (property === $ROOT) return target;
+      setProperty(parent, property, target);
+    }
     return;
   }
   if (Array.isArray(target)) {
@@ -365,10 +370,10 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    batch(() => applyState(v, {
-      state
-    }, "state", merge, key));
-    return state;
+    const res = applyState(v, {
+      [$ROOT]: state
+    }, $ROOT, merge, key);
+    return res === undefined ? state : res;
   };
 }
 const producers = new WeakMap();

package/store/dist/server.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const $RAW = Symbol("state-raw");
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (Object.getPrototypeOf(obj) === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item) {
   return item;
@@ -22,6 +22,19 @@ function mergeStoreNode(state, value, force) {
     setProperty(state, key, value[key], force);
   }
 }
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  if (Array.isArray(next)) {
+    if (current === next) return;
+    let i = 0,
+        len = next.length;
+    for (; i < len; i++) {
+      const value = next[i];
+      if (current[i] !== value) setProperty(current, i, value);
+    }
+    setProperty(current, "length", len);
+  } else mergeStoreNode(current, next);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       next = current;
@@ -67,8 +80,9 @@ function updatePath(current, path, traversed = []) {
   } else setProperty(current, part, value);
 }
 function createStore(state) {
+  const isArray = Array.isArray(state);
   function setStore(...args) {
-    updatePath(state, args);
+    isArray && args.length === 1 ? updateArray(state, args[0]) : updatePath(state, args);
   }
   return [state, setStore];
 }

package/store/dist/server.js

@@ -1,6 +1,6 @@
 const $RAW = Symbol("state-raw");
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (Object.getPrototypeOf(obj) === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item) {
   return item;
@@ -18,6 +18,19 @@ function mergeStoreNode(state, value, force) {
     setProperty(state, key, value[key], force);
   }
 }
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  if (Array.isArray(next)) {
+    if (current === next) return;
+    let i = 0,
+        len = next.length;
+    for (; i < len; i++) {
+      const value = next[i];
+      if (current[i] !== value) setProperty(current, i, value);
+    }
+    setProperty(current, "length", len);
+  } else mergeStoreNode(current, next);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       next = current;
@@ -63,8 +76,9 @@ function updatePath(current, path, traversed = []) {
   } else setProperty(current, part, value);
 }
 function createStore(state) {
+  const isArray = Array.isArray(state);
   function setStore(...args) {
-    updatePath(state, args);
+    isArray && args.length === 1 ? updateArray(state, args[0]) : updatePath(state, args);
   }
   return [state, setStore];
 }

package/store/dist/store.cjs

@@ -28,7 +28,8 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  let proto;
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -271,11 +272,15 @@ function modifyMutable(state, modifier) {
   solidJs.batch(() => modifier(unwrap(state)));
 }
 
+const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
   if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    target !== previous && setProperty(parent, property, target);
+    if (target !== previous) {
+      if (property === $ROOT) return target;
+      setProperty(parent, property, target);
+    }
     return;
   }
   if (Array.isArray(target)) {
@@ -347,10 +352,10 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    solidJs.batch(() => applyState(v, {
-      state
-    }, "state", merge, key));
-    return state;
+    const res = applyState(v, {
+      [$ROOT]: state
+    }, $ROOT, merge, key);
+    return res === undefined ? state : res;
   };
 }
 const producers = new WeakMap();

package/store/dist/store.js

@@ -24,7 +24,8 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  let proto;
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;
@@ -267,11 +268,15 @@ function modifyMutable(state, modifier) {
   batch(() => modifier(unwrap(state)));
 }
 
+const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
   if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    target !== previous && setProperty(parent, property, target);
+    if (target !== previous) {
+      if (property === $ROOT) return target;
+      setProperty(parent, property, target);
+    }
     return;
   }
   if (Array.isArray(target)) {
@@ -343,10 +348,10 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    batch(() => applyState(v, {
-      state
-    }, "state", merge, key));
-    return state;
+    const res = applyState(v, {
+      [$ROOT]: state
+    }, $ROOT, merge, key);
+    return res === undefined ? state : res;
   };
 }
 const producers = new WeakMap();

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;
@@ -508,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() {}
@@ -561,8 +572,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 +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;

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;
@@ -505,7 +516,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 +569,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 +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/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"

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"

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;
@@ -507,7 +518,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 +571,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 +675,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/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;
@@ -504,7 +515,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 +568,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 +583,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;