@solidjs/web 2.0.0-beta.14 → 2.0.0-beta.15

package/dist/dev.cjs

@@ -32,6 +32,7 @@ const DOMWithState = {
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 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", "feDropShadow", "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",
@@ -388,6 +389,7 @@ function ref(fn, element) {
 }
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
@@ -401,7 +403,11 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
@@ -415,6 +421,7 @@ function insert(parent, accessor, marker, initial, options) {
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
       schedule: true
@@ -424,6 +431,7 @@ function insert(parent, accessor, marker, initial, options) {
     if (value === INNER_OWNED) return;
     insertExpression(parent, value, current, marker);
     current = value;
+    host && tagHost(current, host);
   }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
@@ -813,6 +821,17 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) {
     const n = array[i];
@@ -897,12 +916,20 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    mount = () => props.mount || document.body,
     content = solidJs.createMemo(() => [startMarker, props.children]);
-  solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
+  solidJs.createRenderEffect(
+  () => [mount(), content(), solidJs.getOwner()], ([, c, owner]) => {
+    const m = solidJs.untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = solidJs.runWithOwner(owner, () => solidJs.createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
       while (c && c !== endMarker) {
         const n = c.nextSibling;
@@ -910,8 +937,11 @@ function Portal(props) {
         c = n;
       }
     };
+  }, {
+    schedule: true
   });
-  solidJs.createEffect(mount, m => {
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
     if (!ownerRoot || ownerRoot.contains(m)) return;
     registerDelegatedContainer(m, ownerRoot);
@@ -949,23 +979,6 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createEffect, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, getOwner, createEffect, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -31,6 +31,7 @@ const DOMWithState = {
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 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", "feDropShadow", "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",
@@ -387,6 +388,7 @@ function ref(fn, element) {
 }
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
@@ -400,7 +402,11 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
@@ -414,6 +420,7 @@ function insert(parent, accessor, marker, initial, options) {
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
       schedule: true
@@ -423,6 +430,7 @@ function insert(parent, accessor, marker, initial, options) {
     if (value === INNER_OWNED) return;
     insertExpression(parent, value, current, marker);
     current = value;
+    host && tagHost(current, host);
   }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
@@ -812,6 +820,17 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) {
     const n = array[i];
@@ -896,12 +915,20 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    mount = () => props.mount || document.body,
     content = createMemo(() => [startMarker, props.children]);
-  createRenderEffect(() => [mount(), content()], ([m, c]) => {
+  createRenderEffect(
+  () => [mount(), content(), getOwner()], ([, c, owner]) => {
+    const m = untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = runWithOwner(owner, () => createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
       while (c && c !== endMarker) {
         const n = c.nextSibling;
@@ -909,8 +936,11 @@ function Portal(props) {
         c = n;
       }
     };
+  }, {
+    schedule: true
   });
-  createEffect(mount, m => {
+  createEffect(mount, () => {
+    const m = untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
     if (!ownerRoot || ownerRoot.contains(m)) return;
     registerDelegatedContainer(m, ownerRoot);
@@ -948,22 +978,5 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 
 export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

package/dist/web.cjs

@@ -32,6 +32,7 @@ const DOMWithState = {
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 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", "feDropShadow", "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",
@@ -383,6 +384,7 @@ function ref(fn, element) {
 }
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
@@ -396,7 +398,11 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
@@ -410,6 +416,7 @@ function insert(parent, accessor, marker, initial, options) {
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
       schedule: true
@@ -419,6 +426,7 @@ function insert(parent, accessor, marker, initial, options) {
     if (value === INNER_OWNED) return;
     insertExpression(parent, value, current, marker);
     current = value;
+    host && tagHost(current, host);
   }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
@@ -756,6 +764,17 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) {
     const n = array[i];
@@ -838,12 +857,20 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    mount = () => props.mount || document.body,
     content = solidJs.createMemo(() => [startMarker, props.children]);
-  solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
+  solidJs.createRenderEffect(
+  () => [mount(), content(), solidJs.getOwner()], ([, c, owner]) => {
+    const m = solidJs.untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = solidJs.runWithOwner(owner, () => solidJs.createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
       while (c && c !== endMarker) {
         const n = c.nextSibling;
@@ -851,8 +878,11 @@ function Portal(props) {
         c = n;
       }
     };
+  }, {
+    schedule: true
   });
-  solidJs.createEffect(mount, m => {
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
     if (!ownerRoot || ownerRoot.contains(m)) return;
     registerDelegatedContainer(m, ownerRoot);
@@ -887,23 +917,6 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,

package/dist/web.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createEffect, enableHydration, flush } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, getOwner, createEffect, enableHydration, flush } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -31,6 +31,7 @@ const DOMWithState = {
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 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", "feDropShadow", "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",
@@ -382,6 +383,7 @@ function ref(fn, element) {
 }
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
@@ -395,7 +397,11 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
@@ -409,6 +415,7 @@ function insert(parent, accessor, marker, initial, options) {
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
       schedule: true
@@ -418,6 +425,7 @@ function insert(parent, accessor, marker, initial, options) {
     if (value === INNER_OWNED) return;
     insertExpression(parent, value, current, marker);
     current = value;
+    host && tagHost(current, host);
   }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
@@ -755,6 +763,17 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) {
     const n = array[i];
@@ -837,12 +856,20 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    mount = () => props.mount || document.body,
     content = createMemo(() => [startMarker, props.children]);
-  createRenderEffect(() => [mount(), content()], ([m, c]) => {
+  createRenderEffect(
+  () => [mount(), content(), getOwner()], ([, c, owner]) => {
+    const m = untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = runWithOwner(owner, () => createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
       while (c && c !== endMarker) {
         const n = c.nextSibling;
@@ -850,8 +877,11 @@ function Portal(props) {
         c = n;
       }
     };
+  }, {
+    schedule: true
   });
-  createEffect(mount, m => {
+  createEffect(mount, () => {
+    const m = untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
     if (!ownerRoot || ownerRoot.contains(m)) return;
     registerDelegatedContainer(m, ownerRoot);
@@ -886,22 +916,5 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 
 export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -137,10 +137,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.14"
+    "solid-js": "^2.0.0-beta.15"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.14"
+    "solid-js": "2.0.0-beta.15"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/types/client.d.ts

@@ -30,7 +30,17 @@ export function insert<T>(
   parent: MountableElement,
   accessor: (() => T) | T,
   marker?: Node | null,
-  init?: JSX.Element
+  init?: JSX.Element,
+  options?: {
+    /**
+     * Live accessor for the slot's logical host in the source tree (portals).
+     * Each top-level node the slot manages is tagged with a `_$host` getter
+     * backed by this accessor so delegated events retarget correctly.
+     */
+    host?: () => Node | null;
+    /** Defer the insert effect to the queue instead of running it inline. */
+    schedule?: boolean;
+  }
 ): JSX.Element;
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function delegateEvents(eventNames: string[]): void;

package/types/jsx.d.ts

@@ -226,8 +226,12 @@ export namespace JSX {
 
   export type ClassValue =
     | string
+    | number
+    | boolean
+    | null
+    | undefined
     | Record<string, boolean>
-    | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+    | ClassValue[];
 
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {

package/types-cjs/client.d.cts

@@ -30,7 +30,17 @@ export function insert<T>(
   parent: MountableElement,
   accessor: (() => T) | T,
   marker?: Node | null,
-  init?: JSX.Element
+  init?: JSX.Element,
+  options?: {
+    /**
+     * Live accessor for the slot's logical host in the source tree (portals).
+     * Each top-level node the slot manages is tagged with a `_$host` getter
+     * backed by this accessor so delegated events retarget correctly.
+     */
+    host?: () => Node | null;
+    /** Defer the insert effect to the queue instead of running it inline. */
+    schedule?: boolean;
+  }
 ): JSX.Element;
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function delegateEvents(eventNames: string[]): void;

package/types-cjs/jsx.d.cts

@@ -226,8 +226,12 @@ export namespace JSX {
 
   export type ClassValue =
     | string
+    | number
+    | boolean
+    | null
+    | undefined
     | Record<string, boolean>
-    | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+    | ClassValue[];
 
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {