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

package/dist/dev.cjs

@@ -31,6 +31,8 @@ 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",
@@ -64,14 +66,18 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
-function reconcileArrays(parentNode, a, b) {
+function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
     aEnd = a.length,
     bEnd = bLength,
     aStart = 0,
     bStart = 0,
-    after = a[aEnd - 1].nextSibling,
-    map = null;
+    tail = a[aEnd - 1],
+    tailTag = tail[$$SLOT],
+    after = tail.parentNode === parentNode && (!tailTag || tailTag === marker) ? tail.nextSibling : marker || null,
+    map = null,
+    anchor,
+    anchorTag;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -83,20 +89,43 @@ function reconcileArrays(parentNode, a, b) {
       bEnd--;
     }
     if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
-      while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
+      let node;
+      if (bEnd < bLength) {
+        if (bStart) {
+          const prev = b[bStart - 1];
+          const prevTag = prev[$$SLOT];
+          node = prev.parentNode === parentNode && (!prevTag || prevTag === marker) ? prev.nextSibling : after;
+        } else node = b[bEnd - bStart];
+      } else node = after;
+      while (bStart < bEnd) {
+        const n = b[bStart++];
+        parentNode.insertBefore(n, node);
+        if (marker) n[$$SLOT] = marker;
+      }
     } else if (bEnd === bStart) {
       while (aStart < aEnd) {
-        if (!map || !map.has(a[aStart])) a[aStart].remove();
-        aStart++;
+        const n = a[aStart++];
+        if (!map || !map.has(n)) {
+          const tag = n[$$SLOT];
+          if (n.parentNode === parentNode && (!tag || tag === marker)) n.remove();
+        }
+      }
+    } else if ((anchor = a[aStart]) === b[bEnd - 1] && b[bStart] === a[aEnd - 1] && anchor.parentNode === parentNode && (!(anchorTag = anchor[$$SLOT]) || anchorTag === marker)) {
+      if (marker) {
+        do {
+          const n = a[--aEnd];
+          parentNode.insertBefore(n, anchor);
+          n[$$SLOT] = marker;
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
+      } else {
+        do {
+          parentNode.insertBefore(a[--aEnd], anchor);
+          bStart++;
+          if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+        } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
       }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const anchor = a[aStart];
-      do {
-        parentNode.insertBefore(a[--aEnd], anchor);
-        bStart++;
-        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
-      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
       if (!map) {
         map = new Map();
@@ -114,36 +143,66 @@ function reconcileArrays(parentNode, a, b) {
             sequence++;
           }
           if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) parentNode.insertBefore(b[bStart++], node);
-          } else parentNode.replaceChild(b[bStart++], a[aStart++]);
+            const head = a[aStart];
+            const headTag = head[$$SLOT];
+            const node = head.parentNode === parentNode && (!headTag || headTag === marker) ? head : after;
+            while (bStart < index) {
+              const n = b[bStart++];
+              parentNode.insertBefore(n, node);
+              if (marker) n[$$SLOT] = marker;
+            }
+          } else {
+            const oldNode = a[aStart++];
+            const newNode = b[bStart++];
+            const oldTag = oldNode[$$SLOT];
+            if (oldNode.parentNode === parentNode && (!oldTag || oldTag === marker)) {
+              parentNode.replaceChild(newNode, oldNode);
+            } else {
+              parentNode.insertBefore(newNode, after);
+            }
+            if (marker) newNode[$$SLOT] = marker;
+          }
         } else aStart++;
-      } else a[aStart++].remove();
+      } else {
+        const n = a[aStart++];
+        const nTag = n[$$SLOT];
+        if (n.parentNode === parentNode && (!nTag || nTag === marker)) n.remove();
+      }
     }
   }
 }
 
-const $$EVENTS = "_$DX_DELEGATE";
+const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
+const delegatedEvents = new Set();
+const delegatedContainers = new Map();
 function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
   let disposer;
-  solidJs.createRoot(dispose => {
-    disposer = dispose;
-    if (element === document) {
-      const tree = code();
-      effect(() => solidJs.flatten(tree), () => {});
-    } else {
-      const tree = code();
-      insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
-    }
-  }, {
-    id: options.renderId
-  });
+  registerDelegatedRoot(element);
+  try {
+    solidJs.createRoot(dispose => {
+      disposer = dispose;
+      if (element === document) {
+        const tree = code();
+        effect(() => solidJs.flatten(tree), () => {});
+      } else {
+        const tree = code();
+        insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
+      }
+    }, {
+      id: options.renderId
+    });
+  } catch (err) {
+    if (disposer) disposer();
+    unregisterDelegatedRoot(element);
+    throw err;
+  }
   return () => {
     disposer();
+    unregisterDelegatedRoot(element);
     element.textContent = "";
   };
 }
@@ -159,20 +218,66 @@ function template(html, flag) {
   fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
   return fn;
 }
-function delegateEvents(eventNames, document = window.document) {
-  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+function delegateEvents(eventNames) {
   for (let i = 0, l = eventNames.length; i < l; i++) {
     const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      document.addEventListener(name, eventHandler);
+    if (!delegatedEvents.has(name)) {
+      delegatedEvents.add(name);
+      delegatedContainers.forEach((state, container) => attachDelegatedEvent(name, container, state));
     }
   }
 }
-function clearDelegatedEvents(document = window.document) {
-  if (document[$$EVENTS]) {
-    for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
-    delete document[$$EVENTS];
+function registerDelegatedRoot(root) {
+  const state = registerDelegatedContainer(root, root);
+  if (state) state.roots = (state.roots || 0) + 1;
+}
+function unregisterDelegatedRoot(root) {
+  const state = delegatedContainers.get(root);
+  if (state) state.roots > 1 ? state.roots-- : delete state.roots;
+  unregisterDelegatedContainer(root, root);
+}
+function registerDelegatedContainer(container, owner = container) {
+  if (!container || !owner) return;
+  let state = delegatedContainers.get(container);
+  if (!state) delegatedContainers.set(container, state = {
+    owners: new Map(),
+    handlers: new Map()
+  });
+  state.owners.set(owner, (state.owners.get(owner) || 0) + 1);
+  delegatedEvents.forEach(name => attachDelegatedEvent(name, container, state));
+  return state;
+}
+function unregisterDelegatedContainer(container, owner = container) {
+  const state = delegatedContainers.get(container);
+  if (!state) return;
+  const count = state.owners.get(owner);
+  if (count > 1) state.owners.set(owner, count - 1);else state.owners.delete(owner);
+  if (state.owners.size) return;
+  state.handlers.forEach((handler, name) => container.removeEventListener(name, handler));
+  delegatedContainers.delete(container);
+}
+function attachDelegatedEvent(name, container, state) {
+  if (state.handlers.has(name)) return;
+  const handler = e => eventHandler(e, container, state);
+  state.handlers.set(name, handler);
+  container.addEventListener(name, handler);
+}
+function getDelegatedRoot(node) {
+  while (node) {
+    if (delegatedContainers.get(node)?.roots) return node;
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+function findOwner(target, state) {
+  let node = target;
+  let distance = 0;
+  while (node) {
+    if (state.owners.has(node)) return {
+      owner: node,
+      distance
+    };
+    distance++;
+    node = node._$host || node.parentNode || node.host;
   }
 }
 function setProperty(node, name, value) {
@@ -217,7 +322,7 @@ function className(node, value, prev) {
     node.classList.add(key);
   }
 }
-function addEventListener(node, name, handler, delegate) {
+function addEvent(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
       node[`$$${name}`] = handler[0];
@@ -284,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];
@@ -297,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("");
@@ -311,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
@@ -320,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) {
@@ -519,7 +631,17 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        eventHandler(e);
+        let match;
+        for (const [container, state] of delegatedContainers) {
+          if (!state.handlers.has(e.type)) continue;
+          const entry = findOwner(e.target, state);
+          if (entry && (!match || entry.distance < match.distance)) match = {
+            container,
+            state,
+            distance: entry.distance
+          };
+        }
+        if (match) eventHandler(e, match.container, match.state);
       }
       if (solidJs.sharedConfig.done) {
         solidJs.sharedConfig.events = _$HY.events = null;
@@ -574,7 +696,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
       node.removeEventListener(name, h);
     }
     if (delegate || value) {
-      addEventListener(node, name, value, delegate);
+      addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
   } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
@@ -586,14 +708,18 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
   }
   return value;
 }
-function eventHandler(e) {
+function eventHandler(e, container, state) {
   if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
     if (solidJs.sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
+  if (e[$$EVENT_OWNER]) return;
+  const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
+  if (state && !owner) return;
+  e[$$EVENT_OWNER] = owner || true;
   let node = e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
+  const boundary = owner || container || e.currentTarget;
   const retarget = value => Object.defineProperty(e, "target", {
     configurable: true,
     value
@@ -609,29 +735,34 @@ function eventHandler(e) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+    while (handleNode()) {
+      if (node === boundary || node.parentNode === boundary) break;
+      node = node._$host || node.parentNode || node.host;
+    }
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node || document;
+      return node || boundary || document;
     }
   });
   if (e.composedPath) {
     const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+    if (path.length) {
+      retarget(path[0]);
+      for (let i = 0; i < path.length; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          walkUpTree();
+          break;
+        }
+        if (node === boundary || node.parentNode === boundary) {
+          break;
+        }
       }
-    }
+    } else walkUpTree();
   }
   else walkUpTree();
   retarget(oriTarget);
@@ -651,9 +782,14 @@ function insertExpression(parent, value, current, marker) {
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
+    } else if (current && current.nodeType) {
+      current.parentNode === parent ? parent.replaceChild(value, current) : parent.appendChild(value);
+    } else if (current && parent.firstChild) {
+      parent.replaceChild(value, parent.firstChild);
+    } else {
       parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    }
+    if (marker) value[$$SLOT] = marker;
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -661,7 +797,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(parent, current, value, marker);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -685,8 +821,23 @@ 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++) parent.insertBefore(array[i], marker);
+  for (let i = 0, len = array.length; i < len; i++) {
+    const n = array[i];
+    parent.insertBefore(n, marker);
+    if (marker) n[$$SLOT] = marker;
+  }
 }
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
@@ -695,11 +846,13 @@ function cleanChildren(parent, current, marker, replacement) {
     for (let i = current.length - 1; i >= 0; i--) {
       const el = current[i];
       if (replacement !== el) {
-        const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
+        const tag = el[$$SLOT];
+        const owns = el.parentNode === parent && (!tag || tag === marker);
+        if (replacement && !inserted && !i) owns ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else if (owns) el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
+  if (replacement && marker) replacement[$$SLOT] = marker;
 }
 function gatherHydratable(element, root) {
   const templates = element.querySelectorAll(`*[_hk]`);
@@ -763,12 +916,20 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = solidJs.createMemo(() => [startMarker, props.children]);
-  solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
+    mount = () => props.mount || document.body,
+    content = solidJs.createMemo(() => [startMarker, props.children]);
+  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;
@@ -776,6 +937,15 @@ function Portal(props) {
         c = n;
       }
     };
+  }, {
+    schedule: true
+  });
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
+    const ownerRoot = getDelegatedRoot(treeMarker);
+    if (!ownerRoot || ownerRoot.contains(m)) return;
+    registerDelegatedContainer(m, ownerRoot);
+    return () => unregisterDelegatedContainer(m, ownerRoot);
   });
   return treeMarker;
 }
@@ -809,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,
@@ -893,11 +1046,10 @@ exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.VoidElements = VoidElements;
-exports.addEventListener = addEventListener;
+exports.addEvent = addEvent;
 exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
-exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
@@ -905,6 +1057,7 @@ exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = voidFn;
 exports.getAssets = voidFn;
+exports.getDelegatedRoot = getDelegatedRoot;
 exports.getFirstChild = getFirstChild;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
@@ -919,6 +1072,8 @@ exports.isServer = isServer;
 exports.memo = memo;
 exports.mergeProps = mergeProps;
 exports.ref = ref;
+exports.registerDelegatedContainer = registerDelegatedContainer;
+exports.registerDelegatedRoot = registerDelegatedRoot;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
@@ -938,4 +1093,6 @@ exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
+exports.unregisterDelegatedContainer = unregisterDelegatedContainer;
+exports.unregisterDelegatedRoot = unregisterDelegatedRoot;
 exports.useAssets = voidFn;