@solidjs/web - npm Package Compare versions

Comparing version 2.0.0-beta.14 to 2.0.0-beta.15

dist/dev.cjs

@@ -35,2 +35,3 @@ 'use strict';
 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"]);
@@ -392,2 +393,3 @@ const SVGElements = /*#__PURE__*/new Set([
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
@@ -406,3 +408,7 @@ if (isHydrating(parent)) {
     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;
+    }
   }
@@ -421,2 +427,3 @@ if (multi && initial.length === 0) {
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -431,2 +438,3 @@ ...options,
     current = value;
+    host && tagHost(current, host);
   }, options);
@@ -821,2 +829,13 @@ }
 }
+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) {
@@ -906,8 +925,16 @@ for (let i = 0, len = array.length; i < len; i++) {
     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;
@@ -920,4 +947,7 @@ while (c && c !== endMarker) {
     };
+  }, {
+    schedule: true
   });
-  solidJs.createEffect(mount, m => {
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
@@ -960,19 +990,2 @@ if (!ownerRoot || ownerRoot.contains(m)) return;
 }
-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;
-    }
-  });
-}
 
@@ -979,0 +992,0 @@ Object.defineProperty(exports, "Errored", {

dist/dev.js

@@ -1,2 +0,2 @@
-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';
@@ -34,2 +34,3 @@
 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"]);
@@ -391,2 +392,3 @@ const SVGElements = /*#__PURE__*/new Set([
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
@@ -405,3 +407,7 @@ if (isHydrating(parent)) {
     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;
+    }
   }
@@ -420,2 +426,3 @@ if (multi && initial.length === 0) {
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -430,2 +437,3 @@ ...options,
     current = value;
+    host && tagHost(current, host);
   }, options);
@@ -820,2 +828,13 @@ }
 }
+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) {
@@ -905,8 +924,16 @@ for (let i = 0, len = array.length; i < len; i++) {
     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;
@@ -919,4 +946,7 @@ while (c && c !== endMarker) {
     };
+  }, {
+    schedule: true
   });
-  createEffect(mount, m => {
+  createEffect(mount, () => {
+    const m = untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
@@ -959,20 +989,3 @@ if (!ownerRoot || ownerRoot.contains(m)) return;
 }
-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 };

dist/web.cjs

@@ -35,2 +35,3 @@ 'use strict';
 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"]);
@@ -387,2 +388,3 @@ const SVGElements = /*#__PURE__*/new Set([
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
@@ -401,3 +403,7 @@ if (isHydrating(parent)) {
     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;
+    }
   }
@@ -416,2 +422,3 @@ if (multi && initial.length === 0) {
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -426,2 +433,3 @@ ...options,
     current = value;
+    host && tagHost(current, host);
   }, options);
@@ -764,2 +772,13 @@ }
 }
+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) {
@@ -847,8 +866,16 @@ for (let i = 0, len = array.length; i < len; i++) {
     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;
@@ -861,4 +888,7 @@ while (c && c !== endMarker) {
     };
+  }, {
+    schedule: true
   });
-  solidJs.createEffect(mount, m => {
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
@@ -898,19 +928,2 @@ if (!ownerRoot || ownerRoot.contains(m)) return;
 }
-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;
-    }
-  });
-}
 
@@ -917,0 +930,0 @@ Object.defineProperty(exports, "Errored", {

dist/web.js

@@ -1,2 +0,2 @@
-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';
@@ -34,2 +34,3 @@
 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"]);
@@ -386,2 +387,3 @@ const SVGElements = /*#__PURE__*/new Set([
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
@@ -400,3 +402,7 @@ if (isHydrating(parent)) {
     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;
+    }
   }
@@ -415,2 +421,3 @@ if (multi && initial.length === 0) {
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -425,2 +432,3 @@ ...options,
     current = value;
+    host && tagHost(current, host);
   }, options);
@@ -763,2 +771,13 @@ }
 }
+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) {
@@ -846,8 +865,16 @@ for (let i = 0, len = array.length; i < len; i++) {
     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;
@@ -860,4 +887,7 @@ while (c && c !== endMarker) {
     };
+  }, {
+    schedule: true
   });
-  createEffect(mount, m => {
+  createEffect(mount, () => {
+    const m = untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
@@ -897,20 +927,3 @@ if (!ownerRoot || ownerRoot.contains(m)) return;
 }
-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.json

 {
   "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",
@@ -140,6 +140,6 @@ "license": "MIT",
   "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"
   },
@@ -146,0 +146,0 @@ "scripts": {

types-cjs/client.d.cts

@@ -33,3 +33,13 @@ import { JSX } from "./jsx.cjs";
   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;
@@ -36,0 +46,0 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;

types/client.d.ts

@@ -33,3 +33,13 @@ import { JSX } from "./jsx.js";
   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;
@@ -36,0 +46,0 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;

No alert changes

Improved metrics

Total package byte prevSize

659679

0.31%

Lines of code

11726

0.57%

No dependency changes