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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/dev.cjs CHANGED
@@ -31,6 +31,7 @@ const DOMWithState = {
31
31
  }
32
32
  };
33
33
  const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
34
+ const $$SLOT = /*#__PURE__*/Symbol("slot");
34
35
  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"]);
35
36
  const SVGElements = /*#__PURE__*/new Set([
36
37
  "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 +65,18 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
64
65
  } : transparentOptions);
65
66
  const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
66
67
 
67
- function reconcileArrays(parentNode, a, b) {
68
+ function reconcileArrays(parentNode, a, b, marker) {
68
69
  let bLength = b.length,
69
70
  aEnd = a.length,
70
71
  bEnd = bLength,
71
72
  aStart = 0,
72
73
  bStart = 0,
73
- after = a[aEnd - 1].nextSibling,
74
- map = null;
74
+ tail = a[aEnd - 1],
75
+ tailTag = tail[$$SLOT],
76
+ after = tail.parentNode === parentNode && (!tailTag || tailTag === marker) ? tail.nextSibling : marker || null,
77
+ map = null,
78
+ anchor,
79
+ anchorTag;
75
80
  while (aStart < aEnd || bStart < bEnd) {
76
81
  if (a[aStart] === b[bStart]) {
77
82
  aStart++;
@@ -83,20 +88,43 @@ function reconcileArrays(parentNode, a, b) {
83
88
  bEnd--;
84
89
  }
85
90
  if (aEnd === aStart) {
86
- const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
87
- while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
91
+ let node;
92
+ if (bEnd < bLength) {
93
+ if (bStart) {
94
+ const prev = b[bStart - 1];
95
+ const prevTag = prev[$$SLOT];
96
+ node = prev.parentNode === parentNode && (!prevTag || prevTag === marker) ? prev.nextSibling : after;
97
+ } else node = b[bEnd - bStart];
98
+ } else node = after;
99
+ while (bStart < bEnd) {
100
+ const n = b[bStart++];
101
+ parentNode.insertBefore(n, node);
102
+ if (marker) n[$$SLOT] = marker;
103
+ }
88
104
  } else if (bEnd === bStart) {
89
105
  while (aStart < aEnd) {
90
- if (!map || !map.has(a[aStart])) a[aStart].remove();
91
- aStart++;
106
+ const n = a[aStart++];
107
+ if (!map || !map.has(n)) {
108
+ const tag = n[$$SLOT];
109
+ if (n.parentNode === parentNode && (!tag || tag === marker)) n.remove();
110
+ }
111
+ }
112
+ } else if ((anchor = a[aStart]) === b[bEnd - 1] && b[bStart] === a[aEnd - 1] && anchor.parentNode === parentNode && (!(anchorTag = anchor[$$SLOT]) || anchorTag === marker)) {
113
+ if (marker) {
114
+ do {
115
+ const n = a[--aEnd];
116
+ parentNode.insertBefore(n, anchor);
117
+ n[$$SLOT] = marker;
118
+ bStart++;
119
+ if (aStart >= aEnd - 1 || bStart >= bEnd) break;
120
+ } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
121
+ } else {
122
+ do {
123
+ parentNode.insertBefore(a[--aEnd], anchor);
124
+ bStart++;
125
+ if (aStart >= aEnd - 1 || bStart >= bEnd) break;
126
+ } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
92
127
  }
93
- } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
94
- const anchor = a[aStart];
95
- do {
96
- parentNode.insertBefore(a[--aEnd], anchor);
97
- bStart++;
98
- if (aStart >= aEnd - 1 || bStart >= bEnd) break;
99
- } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
100
128
  } else {
101
129
  if (!map) {
102
130
  map = new Map();
@@ -114,38 +142,67 @@ function reconcileArrays(parentNode, a, b) {
114
142
  sequence++;
115
143
  }
116
144
  if (sequence > index - bStart) {
117
- const node = a[aStart];
118
- while (bStart < index) parentNode.insertBefore(b[bStart++], node);
119
- } else parentNode.replaceChild(b[bStart++], a[aStart++]);
145
+ const head = a[aStart];
146
+ const headTag = head[$$SLOT];
147
+ const node = head.parentNode === parentNode && (!headTag || headTag === marker) ? head : after;
148
+ while (bStart < index) {
149
+ const n = b[bStart++];
150
+ parentNode.insertBefore(n, node);
151
+ if (marker) n[$$SLOT] = marker;
152
+ }
153
+ } else {
154
+ const oldNode = a[aStart++];
155
+ const newNode = b[bStart++];
156
+ const oldTag = oldNode[$$SLOT];
157
+ if (oldNode.parentNode === parentNode && (!oldTag || oldTag === marker)) {
158
+ parentNode.replaceChild(newNode, oldNode);
159
+ } else {
160
+ parentNode.insertBefore(newNode, after);
161
+ }
162
+ if (marker) newNode[$$SLOT] = marker;
163
+ }
120
164
  } else aStart++;
121
- } else a[aStart++].remove();
165
+ } else {
166
+ const n = a[aStart++];
167
+ const nTag = n[$$SLOT];
168
+ if (n.parentNode === parentNode && (!nTag || nTag === marker)) n.remove();
169
+ }
122
170
  }
123
171
  }
124
172
  }
125
173
 
126
- const $$EVENTS = "_$DX_DELEGATE";
174
+ const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
127
175
  const INNER_OWNED = {};
176
+ const delegatedEvents = new Set();
177
+ const delegatedContainers = new Map();
128
178
  function render$1(code, element, init, options = {}) {
129
179
  if (!element) {
130
180
  throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
131
181
  }
132
- const renderRoot = getChildRoot(element);
133
182
  let disposer;
134
- solidJs.createRoot(dispose => {
135
- disposer = dispose;
136
- if (element === document) {
137
- const tree = code();
138
- effect(() => solidJs.flatten(tree), () => {});
139
- } else {
140
- const tree = code();
141
- insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
142
- }
143
- }, {
144
- id: options.renderId
145
- });
183
+ registerDelegatedRoot(element);
184
+ try {
185
+ solidJs.createRoot(dispose => {
186
+ disposer = dispose;
187
+ if (element === document) {
188
+ const tree = code();
189
+ effect(() => solidJs.flatten(tree), () => {});
190
+ } else {
191
+ const tree = code();
192
+ insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
193
+ }
194
+ }, {
195
+ id: options.renderId
196
+ });
197
+ } catch (err) {
198
+ if (disposer) disposer();
199
+ unregisterDelegatedRoot(element);
200
+ throw err;
201
+ }
146
202
  return () => {
147
203
  disposer();
148
- renderRoot.textContent = "";
204
+ unregisterDelegatedRoot(element);
205
+ element.textContent = "";
149
206
  };
150
207
  }
151
208
  function create(html, bypassGuard, flag) {
@@ -160,20 +217,66 @@ function template(html, flag) {
160
217
  fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
161
218
  return fn;
162
219
  }
163
- function delegateEvents(eventNames, document = window.document) {
164
- const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
220
+ function delegateEvents(eventNames) {
165
221
  for (let i = 0, l = eventNames.length; i < l; i++) {
166
222
  const name = eventNames[i];
167
- if (!e.has(name)) {
168
- e.add(name);
169
- document.addEventListener(name, eventHandler);
223
+ if (!delegatedEvents.has(name)) {
224
+ delegatedEvents.add(name);
225
+ delegatedContainers.forEach((state, container) => attachDelegatedEvent(name, container, state));
170
226
  }
171
227
  }
172
228
  }
173
- function clearDelegatedEvents(document = window.document) {
174
- if (document[$$EVENTS]) {
175
- for (let name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
176
- delete document[$$EVENTS];
229
+ function registerDelegatedRoot(root) {
230
+ const state = registerDelegatedContainer(root, root);
231
+ if (state) state.roots = (state.roots || 0) + 1;
232
+ }
233
+ function unregisterDelegatedRoot(root) {
234
+ const state = delegatedContainers.get(root);
235
+ if (state) state.roots > 1 ? state.roots-- : delete state.roots;
236
+ unregisterDelegatedContainer(root, root);
237
+ }
238
+ function registerDelegatedContainer(container, owner = container) {
239
+ if (!container || !owner) return;
240
+ let state = delegatedContainers.get(container);
241
+ if (!state) delegatedContainers.set(container, state = {
242
+ owners: new Map(),
243
+ handlers: new Map()
244
+ });
245
+ state.owners.set(owner, (state.owners.get(owner) || 0) + 1);
246
+ delegatedEvents.forEach(name => attachDelegatedEvent(name, container, state));
247
+ return state;
248
+ }
249
+ function unregisterDelegatedContainer(container, owner = container) {
250
+ const state = delegatedContainers.get(container);
251
+ if (!state) return;
252
+ const count = state.owners.get(owner);
253
+ if (count > 1) state.owners.set(owner, count - 1);else state.owners.delete(owner);
254
+ if (state.owners.size) return;
255
+ state.handlers.forEach((handler, name) => container.removeEventListener(name, handler));
256
+ delegatedContainers.delete(container);
257
+ }
258
+ function attachDelegatedEvent(name, container, state) {
259
+ if (state.handlers.has(name)) return;
260
+ const handler = e => eventHandler(e, container, state);
261
+ state.handlers.set(name, handler);
262
+ container.addEventListener(name, handler);
263
+ }
264
+ function getDelegatedRoot(node) {
265
+ while (node) {
266
+ if (delegatedContainers.get(node)?.roots) return node;
267
+ node = node._$host || node.parentNode || node.host;
268
+ }
269
+ }
270
+ function findOwner(target, state) {
271
+ let node = target;
272
+ let distance = 0;
273
+ while (node) {
274
+ if (state.owners.has(node)) return {
275
+ owner: node,
276
+ distance
277
+ };
278
+ distance++;
279
+ node = node._$host || node.parentNode || node.host;
177
280
  }
178
281
  }
179
282
  function setProperty(node, name, value) {
@@ -218,7 +321,7 @@ function className(node, value, prev) {
218
321
  node.classList.add(key);
219
322
  }
220
323
  }
221
- function addEventListener(node, name, handler, delegate) {
324
+ function addEvent(node, name, handler, delegate) {
222
325
  if (delegate) {
223
326
  if (Array.isArray(handler)) {
224
327
  node[`$$${name}`] = handler[0];
@@ -284,11 +387,10 @@ function ref(fn, element) {
284
387
  solidJs.runWithOwner(null, () => applyRef(resolved, element));
285
388
  }
286
389
  function insert(parent, accessor, marker, initial, options) {
287
- const childRoot = getChildRoot(parent);
288
390
  const multi = marker !== undefined;
289
391
  if (multi && !initial) initial = [];
290
392
  if (isHydrating(parent)) {
291
- if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
393
+ if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
292
394
  if (Array.isArray(initial)) {
293
395
  let j = 0;
294
396
  for (let i = 0; i < initial.length; i++) {
@@ -303,7 +405,7 @@ function insert(parent, accessor, marker, initial, options) {
303
405
  }
304
406
  if (multi && initial.length === 0) {
305
407
  const placeholder = document.createTextNode("");
306
- childRoot.insertBefore(placeholder, marker);
408
+ parent.insertBefore(placeholder, marker);
307
409
  initial = [placeholder];
308
410
  }
309
411
  let current = initial;
@@ -358,7 +460,7 @@ function loadModuleAssets(mapping) {
358
460
  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
359
461
  }
360
462
  function hydrate$1(code, element, options = {}) {
361
- if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
463
+ if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
362
464
  options.renderId ||= "";
363
465
  if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
364
466
  if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -404,7 +506,7 @@ function hydrate$1(code, element, options = {}) {
404
506
  let disposer;
405
507
  p.then(() => {
406
508
  try {
407
- disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
509
+ disposer = render$1(code, element, [...element.childNodes], options);
408
510
  } finally {
409
511
  solidJs.sharedConfig.hydrating = false;
410
512
  }
@@ -416,7 +518,7 @@ function hydrate$1(code, element, options = {}) {
416
518
  }
417
519
  try {
418
520
  gatherHydratable(element, options.renderId);
419
- return render$1(code, element, [...getChildRoot(element).childNodes], options);
521
+ return render$1(code, element, [...element.childNodes], options);
420
522
  } finally {
421
523
  solidJs.sharedConfig.hydrating = false;
422
524
  }
@@ -465,7 +567,7 @@ function getNextMarker(start) {
465
567
  return [end, current];
466
568
  }
467
569
  function getFirstChild(node, expectedTag) {
468
- const child = getChildRoot(node).firstChild;
570
+ const child = node.firstChild;
469
571
  if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
470
572
  const isMissing = !child || child.nodeType !== 1;
471
573
  console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n " + describeSiblings(node, child, expectedTag, isMissing));
@@ -484,7 +586,7 @@ function getNextSibling(node, expectedTag) {
484
586
  function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
485
587
  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
486
588
  const children = [];
487
- let child = getChildRoot(parent).firstChild;
589
+ let child = parent.firstChild;
488
590
  while (child) {
489
591
  if (child.nodeType === 1) children.push(child);
490
592
  child = child.nextSibling;
@@ -521,7 +623,17 @@ function runHydrationEvents() {
521
623
  const [el, e] = events[0];
522
624
  if (!completed.has(el)) return;
523
625
  events.shift();
524
- eventHandler(e);
626
+ let match;
627
+ for (const [container, state] of delegatedContainers) {
628
+ if (!state.handlers.has(e.type)) continue;
629
+ const entry = findOwner(e.target, state);
630
+ if (entry && (!match || entry.distance < match.distance)) match = {
631
+ container,
632
+ state,
633
+ distance: entry.distance
634
+ };
635
+ }
636
+ if (match) eventHandler(e, match.container, match.state);
525
637
  }
526
638
  if (solidJs.sharedConfig.done) {
527
639
  solidJs.sharedConfig.events = _$HY.events = null;
@@ -534,9 +646,6 @@ function runHydrationEvents() {
534
646
  function isHydrating(node) {
535
647
  return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
536
648
  }
537
- function getChildRoot(node) {
538
- return node && node.localName === "template" ? node.content : node;
539
- }
540
649
  function classListToObject(classList) {
541
650
  if (Array.isArray(classList)) {
542
651
  const result = {};
@@ -571,11 +680,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
571
680
  return value;
572
681
  }
573
682
  const hasNamespace = prop.indexOf(":") > -1;
574
- if (hasNamespace && prop.slice(0, 3) === "on:") {
575
- const e = prop.slice(3);
576
- prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
577
- value && node.addEventListener(e, value, typeof value !== "function" && value);
578
- } else if (!hasNamespace && prop.slice(0, 2) === "on") {
683
+ if (!hasNamespace && prop.slice(0, 2) === "on") {
579
684
  const name = prop.slice(2).toLowerCase();
580
685
  const delegate = DelegatedEvents.has(name);
581
686
  if (!delegate && prev) {
@@ -583,7 +688,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
583
688
  node.removeEventListener(name, h);
584
689
  }
585
690
  if (delegate || value) {
586
- addEventListener(node, name, value, delegate);
691
+ addEvent(node, name, value, delegate);
587
692
  delegate && delegateEvents([name]);
588
693
  }
589
694
  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
@@ -595,14 +700,18 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
595
700
  }
596
701
  return value;
597
702
  }
598
- function eventHandler(e) {
703
+ function eventHandler(e, container, state) {
599
704
  if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
600
705
  if (solidJs.sharedConfig.events.find(([el, ev]) => ev === e)) return;
601
706
  }
707
+ if (e[$$EVENT_OWNER]) return;
708
+ const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
709
+ if (state && !owner) return;
710
+ e[$$EVENT_OWNER] = owner || true;
602
711
  let node = e.target;
603
712
  const key = `$$${e.type}`;
604
713
  const oriTarget = e.target;
605
- const oriCurrentTarget = e.currentTarget;
714
+ const boundary = owner || container || e.currentTarget;
606
715
  const retarget = value => Object.defineProperty(e, "target", {
607
716
  configurable: true,
608
717
  value
@@ -618,29 +727,34 @@ function eventHandler(e) {
618
727
  return true;
619
728
  };
620
729
  const walkUpTree = () => {
621
- while (handleNode() && (node = node._$host || node.parentNode || node.host));
730
+ while (handleNode()) {
731
+ if (node === boundary || node.parentNode === boundary) break;
732
+ node = node._$host || node.parentNode || node.host;
733
+ }
622
734
  };
623
735
  Object.defineProperty(e, "currentTarget", {
624
736
  configurable: true,
625
737
  get() {
626
- return node || document;
738
+ return node || boundary || document;
627
739
  }
628
740
  });
629
741
  if (e.composedPath) {
630
742
  const path = e.composedPath();
631
- retarget(path[0]);
632
- for (let i = 0; i < path.length - 2; i++) {
633
- node = path[i];
634
- if (!handleNode()) break;
635
- if (node._$host) {
636
- node = node._$host;
637
- walkUpTree();
638
- break;
639
- }
640
- if (node.parentNode === oriCurrentTarget) {
641
- break;
743
+ if (path.length) {
744
+ retarget(path[0]);
745
+ for (let i = 0; i < path.length; i++) {
746
+ node = path[i];
747
+ if (!handleNode()) break;
748
+ if (node._$host) {
749
+ node = node._$host;
750
+ walkUpTree();
751
+ break;
752
+ }
753
+ if (node === boundary || node.parentNode === boundary) {
754
+ break;
755
+ }
642
756
  }
643
- }
757
+ } else walkUpTree();
644
758
  }
645
759
  else walkUpTree();
646
760
  retarget(oriTarget);
@@ -648,22 +762,26 @@ function eventHandler(e) {
648
762
  function insertExpression(parent, value, current, marker) {
649
763
  if (isHydrating(parent)) return;
650
764
  if (value === current) return;
651
- const childRoot = getChildRoot(parent);
652
765
  const t = typeof value,
653
766
  multi = marker !== undefined;
654
767
  if (t === "string" || t === "number") {
655
768
  const tc = typeof current;
656
769
  if (tc === "string" || tc === "number") {
657
- childRoot.firstChild.data = value;
658
- } else childRoot.textContent = value;
770
+ parent.firstChild.data = value;
771
+ } else parent.textContent = value;
659
772
  } else if (value === undefined) {
660
773
  cleanChildren(parent, current, marker);
661
774
  } else if (value.nodeType) {
662
775
  if (Array.isArray(current)) {
663
776
  cleanChildren(parent, current, multi ? marker : null, value);
664
- } else if (current === undefined || !childRoot.firstChild) {
665
- childRoot.appendChild(value);
666
- } else childRoot.replaceChild(value, childRoot.firstChild);
777
+ } else if (current && current.nodeType) {
778
+ current.parentNode === parent ? parent.replaceChild(value, current) : parent.appendChild(value);
779
+ } else if (current && parent.firstChild) {
780
+ parent.replaceChild(value, parent.firstChild);
781
+ } else {
782
+ parent.appendChild(value);
783
+ }
784
+ if (marker) value[$$SLOT] = marker;
667
785
  } else if (Array.isArray(value)) {
668
786
  const currentArray = current && Array.isArray(current);
669
787
  if (value.length === 0) {
@@ -671,7 +789,7 @@ function insertExpression(parent, value, current, marker) {
671
789
  } else if (currentArray) {
672
790
  if (current.length === 0) {
673
791
  appendNodes(parent, value, marker);
674
- } else reconcileArrays(childRoot, current, value);
792
+ } else reconcileArrays(parent, current, value, marker);
675
793
  } else {
676
794
  current && cleanChildren(parent);
677
795
  appendNodes(parent, value);
@@ -696,22 +814,26 @@ function normalize(value, current, multi, doNotUnwrap) {
696
814
  return value;
697
815
  }
698
816
  function appendNodes(parent, array, marker = null) {
699
- parent = getChildRoot(parent);
700
- for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
817
+ for (let i = 0, len = array.length; i < len; i++) {
818
+ const n = array[i];
819
+ parent.insertBefore(n, marker);
820
+ if (marker) n[$$SLOT] = marker;
821
+ }
701
822
  }
702
823
  function cleanChildren(parent, current, marker, replacement) {
703
- parent = getChildRoot(parent);
704
824
  if (marker === undefined) return parent.textContent = "";
705
825
  if (current.length) {
706
826
  let inserted = false;
707
827
  for (let i = current.length - 1; i >= 0; i--) {
708
828
  const el = current[i];
709
829
  if (replacement !== el) {
710
- const isParent = el.parentNode === parent;
711
- if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
830
+ const tag = el[$$SLOT];
831
+ const owns = el.parentNode === parent && (!tag || tag === marker);
832
+ if (replacement && !inserted && !i) owns ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else if (owns) el.remove();
712
833
  } else inserted = true;
713
834
  }
714
835
  } else if (replacement) parent.insertBefore(replacement, marker);
836
+ if (replacement && marker) replacement[$$SLOT] = marker;
715
837
  }
716
838
  function gatherHydratable(element, root) {
717
839
  const templates = element.querySelectorAll(`*[_hk]`);
@@ -775,8 +897,8 @@ function Portal(props) {
775
897
  const treeMarker = document.createTextNode(""),
776
898
  startMarker = document.createTextNode(""),
777
899
  endMarker = document.createTextNode(""),
778
- mount = () => createElementProxy(props.mount || document.body, treeMarker);
779
- let content = solidJs.createMemo(() => [startMarker, props.children]);
900
+ mount = () => createElementProxy(props.mount || document.body, treeMarker),
901
+ content = solidJs.createMemo(() => [startMarker, props.children]);
780
902
  solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
781
903
  m.appendChild(endMarker);
782
904
  insert(m, c, endMarker);
@@ -789,6 +911,12 @@ function Portal(props) {
789
911
  }
790
912
  };
791
913
  });
914
+ solidJs.createEffect(mount, m => {
915
+ const ownerRoot = getDelegatedRoot(treeMarker);
916
+ if (!ownerRoot || ownerRoot.contains(m)) return;
917
+ registerDelegatedContainer(m, ownerRoot);
918
+ return () => unregisterDelegatedContainer(m, ownerRoot);
919
+ });
792
920
  return treeMarker;
793
921
  }
794
922
  function dynamic(source) {
@@ -905,11 +1033,10 @@ exports.RawTextElements = RawTextElements;
905
1033
  exports.RequestContext = RequestContext;
906
1034
  exports.SVGElements = SVGElements;
907
1035
  exports.VoidElements = VoidElements;
908
- exports.addEventListener = addEventListener;
1036
+ exports.addEvent = addEvent;
909
1037
  exports.applyRef = applyRef;
910
1038
  exports.assign = assign;
911
1039
  exports.className = className;
912
- exports.clearDelegatedEvents = clearDelegatedEvents;
913
1040
  exports.delegateEvents = delegateEvents;
914
1041
  exports.dynamic = dynamic;
915
1042
  exports.dynamicProperty = dynamicProperty;
@@ -917,6 +1044,7 @@ exports.effect = effect;
917
1044
  exports.escape = escape;
918
1045
  exports.generateHydrationScript = voidFn;
919
1046
  exports.getAssets = voidFn;
1047
+ exports.getDelegatedRoot = getDelegatedRoot;
920
1048
  exports.getFirstChild = getFirstChild;
921
1049
  exports.getHydrationKey = getHydrationKey;
922
1050
  exports.getNextElement = getNextElement;
@@ -931,6 +1059,8 @@ exports.isServer = isServer;
931
1059
  exports.memo = memo;
932
1060
  exports.mergeProps = mergeProps;
933
1061
  exports.ref = ref;
1062
+ exports.registerDelegatedContainer = registerDelegatedContainer;
1063
+ exports.registerDelegatedRoot = registerDelegatedRoot;
934
1064
  exports.render = render;
935
1065
  exports.renderToStream = renderToStream;
936
1066
  exports.renderToString = renderToString;
@@ -950,4 +1080,6 @@ exports.ssrHydrationKey = ssrHydrationKey;
950
1080
  exports.ssrStyle = ssrStyle;
951
1081
  exports.style = style;
952
1082
  exports.template = template;
1083
+ exports.unregisterDelegatedContainer = unregisterDelegatedContainer;
1084
+ exports.unregisterDelegatedRoot = unregisterDelegatedRoot;
953
1085
  exports.useAssets = voidFn;