@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 +225 -93
- package/dist/dev.js +221 -93
- package/dist/server.cjs +41 -1
- package/dist/server.js +32 -1
- package/dist/web.cjs +224 -92
- package/dist/web.js +220 -92
- package/package.json +3 -3
- package/types/client.d.ts +14 -11
- package/types/jsx-properties.d.ts +1 -0
- package/types/jsx.d.ts +21 -211
- package/types/server.d.ts +26 -7
- package/types-cjs/client.d.cts +14 -11
- package/types-cjs/jsx-properties.d.cts +1 -0
- package/types-cjs/jsx.d.cts +21 -211
- package/types-cjs/server.d.cts +26 -7
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
|
-
|
|
74
|
-
|
|
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
|
-
|
|
87
|
-
|
|
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
|
-
|
|
91
|
-
|
|
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
|
|
118
|
-
|
|
119
|
-
|
|
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
|
|
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 $$
|
|
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
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
|
|
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
|
|
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 (!
|
|
168
|
-
|
|
169
|
-
|
|
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
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
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
|
|
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 = [...
|
|
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
|
-
|
|
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, [...
|
|
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, [...
|
|
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, [...
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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
|
|
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()
|
|
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
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
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
|
-
|
|
658
|
-
} else
|
|
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
|
|
665
|
-
|
|
666
|
-
} else
|
|
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(
|
|
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
|
-
|
|
700
|
-
|
|
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
|
|
711
|
-
|
|
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
|
-
|
|
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.
|
|
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;
|