@solidjs/web 2.0.0-beta.4 → 2.0.0-beta.6
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 +78 -55
- package/dist/dev.js +73 -55
- package/dist/server.cjs +102 -12
- package/dist/server.js +98 -12
- package/dist/web.cjs +74 -49
- package/dist/web.js +69 -49
- package/package.json +5 -4
- package/storage/types/src/index.d.ts +1 -1
- package/types/client.d.ts +5 -6
- package/types/index.d.ts +1 -1
- package/types/server.d.ts +4 -5
package/dist/dev.cjs
CHANGED
|
@@ -3,8 +3,39 @@
|
|
|
3
3
|
var solidJs = require('solid-js');
|
|
4
4
|
var signals = require('@solidjs/signals');
|
|
5
5
|
|
|
6
|
-
const
|
|
7
|
-
|
|
6
|
+
const DOMWithState = {
|
|
7
|
+
INPUT: {
|
|
8
|
+
value: 1,
|
|
9
|
+
defaultValue: 1,
|
|
10
|
+
checked: 1,
|
|
11
|
+
defaultChecked: 1
|
|
12
|
+
},
|
|
13
|
+
SELECT: {
|
|
14
|
+
value: 1
|
|
15
|
+
},
|
|
16
|
+
OPTION: {
|
|
17
|
+
value: 1,
|
|
18
|
+
selected: 1,
|
|
19
|
+
defaultSelected: 1
|
|
20
|
+
},
|
|
21
|
+
TEXTAREA: {
|
|
22
|
+
value: 1,
|
|
23
|
+
defaultValue: 1
|
|
24
|
+
},
|
|
25
|
+
VIDEO: {
|
|
26
|
+
muted: 1,
|
|
27
|
+
defaultMuted: 1
|
|
28
|
+
},
|
|
29
|
+
AUDIO: {
|
|
30
|
+
muted: 1,
|
|
31
|
+
defaultMuted: 1
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
for (const tagName in DOMWithState) {
|
|
35
|
+
for (const propName in DOMWithState[tagName]) {
|
|
36
|
+
DOMWithState[tagName]["prop:" + propName] = 1;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
8
39
|
const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
|
|
9
40
|
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"]);
|
|
10
41
|
const SVGElements = /*#__PURE__*/new Set([
|
|
@@ -12,7 +43,10 @@ const SVGElements = /*#__PURE__*/new Set([
|
|
|
12
43
|
"set", "stop",
|
|
13
44
|
"svg", "switch", "symbol", "text", "textPath",
|
|
14
45
|
"tref", "tspan", "use", "view", "vkern"]);
|
|
15
|
-
const
|
|
46
|
+
const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
|
|
47
|
+
const Namespaces = {
|
|
48
|
+
svg: "http://www.w3.org/2000/svg",
|
|
49
|
+
mathml: "http://www.w3.org/1998/Math/MathML",
|
|
16
50
|
xlink: "http://www.w3.org/1999/xlink",
|
|
17
51
|
xml: "http://www.w3.org/XML/1998/namespace"
|
|
18
52
|
};
|
|
@@ -101,16 +135,16 @@ function render$1(code, element, init, options = {}) {
|
|
|
101
135
|
element.textContent = "";
|
|
102
136
|
};
|
|
103
137
|
}
|
|
104
|
-
function
|
|
138
|
+
function create(html, bypassGuard, flag) {
|
|
139
|
+
if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
|
|
140
|
+
const t = document.createElement("template");
|
|
141
|
+
t.innerHTML = html;
|
|
142
|
+
return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
|
|
143
|
+
}
|
|
144
|
+
function template(html, flag) {
|
|
105
145
|
let node;
|
|
106
|
-
const
|
|
107
|
-
|
|
108
|
-
const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
|
|
109
|
-
t.innerHTML = html;
|
|
110
|
-
return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
|
|
111
|
-
};
|
|
112
|
-
const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
|
|
113
|
-
fn._html = html;
|
|
146
|
+
const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
|
|
147
|
+
fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
|
|
114
148
|
return fn;
|
|
115
149
|
}
|
|
116
150
|
function delegateEvents(eventNames, document = window.document) {
|
|
@@ -139,16 +173,16 @@ function setAttribute(node, name, value) {
|
|
|
139
173
|
}
|
|
140
174
|
function setAttributeNS(node, namespace, name, value) {
|
|
141
175
|
if (isHydrating(node)) return;
|
|
142
|
-
if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
|
|
176
|
+
if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
|
|
143
177
|
}
|
|
144
|
-
function className(node, value,
|
|
178
|
+
function className(node, value, prev) {
|
|
145
179
|
if (isHydrating(node)) return;
|
|
146
180
|
if (value == null || value === false) {
|
|
147
181
|
prev && node.removeAttribute("class");
|
|
148
182
|
return;
|
|
149
183
|
}
|
|
150
184
|
if (typeof value === "string") {
|
|
151
|
-
value !== prev &&
|
|
185
|
+
value !== prev && node.setAttribute("class", value);
|
|
152
186
|
return;
|
|
153
187
|
}
|
|
154
188
|
if (typeof prev === "string") {
|
|
@@ -203,7 +237,7 @@ function style(node, value, prev) {
|
|
|
203
237
|
function setStyleProperty(node, name, value) {
|
|
204
238
|
value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
|
|
205
239
|
}
|
|
206
|
-
function spread(node, props = {},
|
|
240
|
+
function spread(node, props = {}, skipChildren) {
|
|
207
241
|
const prevProps = {};
|
|
208
242
|
if (!skipChildren) insert(node, () => props.children);
|
|
209
243
|
effect(() => {
|
|
@@ -217,7 +251,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
|
|
|
217
251
|
newProps[prop] = props[prop];
|
|
218
252
|
}
|
|
219
253
|
return newProps;
|
|
220
|
-
}, props => assign(node, props,
|
|
254
|
+
}, props => assign(node, props, true, prevProps, true));
|
|
221
255
|
return prevProps;
|
|
222
256
|
}
|
|
223
257
|
function dynamicProperty(props, key) {
|
|
@@ -262,21 +296,21 @@ function insert(parent, accessor, marker, initial) {
|
|
|
262
296
|
}
|
|
263
297
|
effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
|
|
264
298
|
}
|
|
265
|
-
function assign(node, props,
|
|
299
|
+
function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
|
|
300
|
+
const nodeName = node.nodeName;
|
|
266
301
|
props || (props = {});
|
|
267
302
|
for (const prop in prevProps) {
|
|
268
303
|
if (!(prop in props)) {
|
|
269
304
|
if (prop === "children") continue;
|
|
270
|
-
prevProps[prop] = assignProp(node, prop, null, prevProps[prop],
|
|
305
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
|
|
271
306
|
}
|
|
272
307
|
}
|
|
273
308
|
for (const prop in props) {
|
|
274
309
|
if (prop === "children") {
|
|
275
|
-
if (!skipChildren) insertExpression(node, props.children);
|
|
310
|
+
if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
|
|
276
311
|
continue;
|
|
277
312
|
}
|
|
278
|
-
|
|
279
|
-
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
|
|
313
|
+
prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
|
|
280
314
|
}
|
|
281
315
|
}
|
|
282
316
|
function hydrate$1(code, element, options = {}) {
|
|
@@ -310,10 +344,8 @@ function hydrate$1(code, element, options = {}) {
|
|
|
310
344
|
{
|
|
311
345
|
solidJs.sharedConfig.verifyHydration = () => {
|
|
312
346
|
if (solidJs.sharedConfig.registry && solidJs.sharedConfig.registry.size) {
|
|
313
|
-
const orphaned = [];
|
|
314
|
-
|
|
315
|
-
if (node.isConnected) orphaned.push(node);else solidJs.sharedConfig.registry.delete(key);
|
|
316
|
-
}
|
|
347
|
+
const orphaned = [...solidJs.sharedConfig.registry.values()].filter(node => node.isConnected);
|
|
348
|
+
solidJs.sharedConfig.registry.clear();
|
|
317
349
|
if (!orphaned.length) return;
|
|
318
350
|
console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => ` ${node.outerHTML.slice(0, 100)}`).join("\n"));
|
|
319
351
|
}
|
|
@@ -456,18 +488,20 @@ function flattenClassList(list, result) {
|
|
|
456
488
|
if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
|
|
457
489
|
}
|
|
458
490
|
}
|
|
459
|
-
function assignProp(node, prop, value, prev,
|
|
460
|
-
let forceProp;
|
|
491
|
+
function assignProp(node, prop, value, prev, skipRef, nodeName) {
|
|
461
492
|
if (prop === "style") return style(node, value, prev), value;
|
|
462
|
-
if (prop === "class") return className(node, value,
|
|
463
|
-
if (value === prev) return prev;
|
|
493
|
+
if (prop === "class") return className(node, value, prev), value;
|
|
494
|
+
if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
|
|
464
495
|
if (prop === "ref") {
|
|
465
496
|
if (!skipRef && value) ref(() => value, node);
|
|
466
|
-
|
|
497
|
+
return value;
|
|
498
|
+
}
|
|
499
|
+
const hasNamespace = prop.indexOf(":") > -1;
|
|
500
|
+
if (hasNamespace && prop.slice(0, 3) === "on:") {
|
|
467
501
|
const e = prop.slice(3);
|
|
468
502
|
prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
|
|
469
503
|
value && node.addEventListener(e, value, typeof value !== "function" && value);
|
|
470
|
-
} else if (prop.slice(0, 2) === "on") {
|
|
504
|
+
} else if (!hasNamespace && prop.slice(0, 2) === "on") {
|
|
471
505
|
const name = prop.slice(2).toLowerCase();
|
|
472
506
|
const delegate = DelegatedEvents.has(name);
|
|
473
507
|
if (!delegate && prev) {
|
|
@@ -478,11 +512,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
|
|
|
478
512
|
addEventListener(node, name, value, delegate);
|
|
479
513
|
delegate && delegateEvents([name]);
|
|
480
514
|
}
|
|
481
|
-
} else if (
|
|
482
|
-
if (
|
|
483
|
-
if (prop === "value" &&
|
|
515
|
+
} else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
|
|
516
|
+
if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
|
|
517
|
+
if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
|
|
484
518
|
} else {
|
|
485
|
-
const ns =
|
|
519
|
+
const ns = hasNamespace && Namespaces[prop.split(":")[0]];
|
|
486
520
|
if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
|
|
487
521
|
}
|
|
488
522
|
return value;
|
|
@@ -564,7 +598,6 @@ function insertExpression(parent, value, current, marker) {
|
|
|
564
598
|
appendNodes(parent, value, marker);
|
|
565
599
|
} else reconcileArrays(parent, current, value);
|
|
566
600
|
} else {
|
|
567
|
-
if (current && current.nodeType) clearHydrationRegistry(current);
|
|
568
601
|
current && cleanChildren(parent);
|
|
569
602
|
appendNodes(parent, value);
|
|
570
603
|
}
|
|
@@ -590,18 +623,6 @@ function normalize(value, current, multi, doNotUnwrap) {
|
|
|
590
623
|
function appendNodes(parent, array, marker = null) {
|
|
591
624
|
for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
|
|
592
625
|
}
|
|
593
|
-
function clearHydrationRegistry(node) {
|
|
594
|
-
if (!solidJs.sharedConfig.registry || !node || node.nodeType !== 1) return;
|
|
595
|
-
const key = node.getAttribute("_hk");
|
|
596
|
-
if (key) solidJs.sharedConfig.registry.delete(key);
|
|
597
|
-
const descendants = node.querySelectorAll?.(`*[_hk]`);
|
|
598
|
-
if (descendants) {
|
|
599
|
-
for (let i = 0; i < descendants.length; i++) {
|
|
600
|
-
const descendantKey = descendants[i].getAttribute("_hk");
|
|
601
|
-
if (descendantKey) solidJs.sharedConfig.registry.delete(descendantKey);
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
626
|
function cleanChildren(parent, current, marker, replacement) {
|
|
606
627
|
if (marker === undefined) return parent.textContent = "";
|
|
607
628
|
if (current.length) {
|
|
@@ -610,10 +631,7 @@ function cleanChildren(parent, current, marker, replacement) {
|
|
|
610
631
|
const el = current[i];
|
|
611
632
|
if (replacement !== el) {
|
|
612
633
|
const isParent = el.parentNode === parent;
|
|
613
|
-
if (replacement && !inserted && !i) isParent ?
|
|
614
|
-
clearHydrationRegistry(el);
|
|
615
|
-
el.remove();
|
|
616
|
-
}
|
|
634
|
+
if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
|
|
617
635
|
} else inserted = true;
|
|
618
636
|
}
|
|
619
637
|
} else if (replacement) parent.insertBefore(replacement, marker);
|
|
@@ -756,6 +774,10 @@ Object.defineProperty(exports, "NoHydration", {
|
|
|
756
774
|
enumerable: true,
|
|
757
775
|
get: function () { return solidJs.NoHydration; }
|
|
758
776
|
});
|
|
777
|
+
Object.defineProperty(exports, "Reveal", {
|
|
778
|
+
enumerable: true,
|
|
779
|
+
get: function () { return solidJs.Reveal; }
|
|
780
|
+
});
|
|
759
781
|
Object.defineProperty(exports, "Show", {
|
|
760
782
|
enumerable: true,
|
|
761
783
|
get: function () { return solidJs.Show; }
|
|
@@ -783,14 +805,15 @@ Object.defineProperty(exports, "untrack", {
|
|
|
783
805
|
exports.Assets = voidFn;
|
|
784
806
|
exports.ChildProperties = ChildProperties;
|
|
785
807
|
exports.DOMElements = DOMElements;
|
|
808
|
+
exports.DOMWithState = DOMWithState;
|
|
786
809
|
exports.DelegatedEvents = DelegatedEvents;
|
|
787
810
|
exports.Dynamic = Dynamic;
|
|
788
811
|
exports.HydrationScript = voidFn;
|
|
812
|
+
exports.MathMLElements = MathMLElements;
|
|
813
|
+
exports.Namespaces = Namespaces;
|
|
789
814
|
exports.Portal = Portal;
|
|
790
|
-
exports.Properties = Properties;
|
|
791
815
|
exports.RequestContext = RequestContext;
|
|
792
816
|
exports.SVGElements = SVGElements;
|
|
793
|
-
exports.SVGNamespace = SVGNamespace;
|
|
794
817
|
exports.addEventListener = addEventListener;
|
|
795
818
|
exports.applyRef = applyRef;
|
|
796
819
|
exports.assign = assign;
|
package/dist/dev.js
CHANGED
|
@@ -1,9 +1,40 @@
|
|
|
1
1
|
import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
|
|
2
|
-
export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
|
|
2
|
+
export { Errored, For, Hydration, Loading, Match, NoHydration, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
|
|
3
3
|
import { createMemo } from '@solidjs/signals';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const DOMWithState = {
|
|
6
|
+
INPUT: {
|
|
7
|
+
value: 1,
|
|
8
|
+
defaultValue: 1,
|
|
9
|
+
checked: 1,
|
|
10
|
+
defaultChecked: 1
|
|
11
|
+
},
|
|
12
|
+
SELECT: {
|
|
13
|
+
value: 1
|
|
14
|
+
},
|
|
15
|
+
OPTION: {
|
|
16
|
+
value: 1,
|
|
17
|
+
selected: 1,
|
|
18
|
+
defaultSelected: 1
|
|
19
|
+
},
|
|
20
|
+
TEXTAREA: {
|
|
21
|
+
value: 1,
|
|
22
|
+
defaultValue: 1
|
|
23
|
+
},
|
|
24
|
+
VIDEO: {
|
|
25
|
+
muted: 1,
|
|
26
|
+
defaultMuted: 1
|
|
27
|
+
},
|
|
28
|
+
AUDIO: {
|
|
29
|
+
muted: 1,
|
|
30
|
+
defaultMuted: 1
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
for (const tagName in DOMWithState) {
|
|
34
|
+
for (const propName in DOMWithState[tagName]) {
|
|
35
|
+
DOMWithState[tagName]["prop:" + propName] = 1;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
7
38
|
const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
|
|
8
39
|
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"]);
|
|
9
40
|
const SVGElements = /*#__PURE__*/new Set([
|
|
@@ -11,7 +42,10 @@ const SVGElements = /*#__PURE__*/new Set([
|
|
|
11
42
|
"set", "stop",
|
|
12
43
|
"svg", "switch", "symbol", "text", "textPath",
|
|
13
44
|
"tref", "tspan", "use", "view", "vkern"]);
|
|
14
|
-
const
|
|
45
|
+
const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
|
|
46
|
+
const Namespaces = {
|
|
47
|
+
svg: "http://www.w3.org/2000/svg",
|
|
48
|
+
mathml: "http://www.w3.org/1998/Math/MathML",
|
|
15
49
|
xlink: "http://www.w3.org/1999/xlink",
|
|
16
50
|
xml: "http://www.w3.org/XML/1998/namespace"
|
|
17
51
|
};
|
|
@@ -100,16 +134,16 @@ function render$1(code, element, init, options = {}) {
|
|
|
100
134
|
element.textContent = "";
|
|
101
135
|
};
|
|
102
136
|
}
|
|
103
|
-
function
|
|
137
|
+
function create(html, bypassGuard, flag) {
|
|
138
|
+
if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
|
|
139
|
+
const t = document.createElement("template");
|
|
140
|
+
t.innerHTML = html;
|
|
141
|
+
return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
|
|
142
|
+
}
|
|
143
|
+
function template(html, flag) {
|
|
104
144
|
let node;
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
|
|
108
|
-
t.innerHTML = html;
|
|
109
|
-
return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
|
|
110
|
-
};
|
|
111
|
-
const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
|
|
112
|
-
fn._html = html;
|
|
145
|
+
const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
|
|
146
|
+
fn._html = flag === 2 ? html.replace(/^<[^>]+>/, "") : html;
|
|
113
147
|
return fn;
|
|
114
148
|
}
|
|
115
149
|
function delegateEvents(eventNames, document = window.document) {
|
|
@@ -138,16 +172,16 @@ function setAttribute(node, name, value) {
|
|
|
138
172
|
}
|
|
139
173
|
function setAttributeNS(node, namespace, name, value) {
|
|
140
174
|
if (isHydrating(node)) return;
|
|
141
|
-
if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
|
|
175
|
+
if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
|
|
142
176
|
}
|
|
143
|
-
function className(node, value,
|
|
177
|
+
function className(node, value, prev) {
|
|
144
178
|
if (isHydrating(node)) return;
|
|
145
179
|
if (value == null || value === false) {
|
|
146
180
|
prev && node.removeAttribute("class");
|
|
147
181
|
return;
|
|
148
182
|
}
|
|
149
183
|
if (typeof value === "string") {
|
|
150
|
-
value !== prev &&
|
|
184
|
+
value !== prev && node.setAttribute("class", value);
|
|
151
185
|
return;
|
|
152
186
|
}
|
|
153
187
|
if (typeof prev === "string") {
|
|
@@ -202,7 +236,7 @@ function style(node, value, prev) {
|
|
|
202
236
|
function setStyleProperty(node, name, value) {
|
|
203
237
|
value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
|
|
204
238
|
}
|
|
205
|
-
function spread(node, props = {},
|
|
239
|
+
function spread(node, props = {}, skipChildren) {
|
|
206
240
|
const prevProps = {};
|
|
207
241
|
if (!skipChildren) insert(node, () => props.children);
|
|
208
242
|
effect(() => {
|
|
@@ -216,7 +250,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
|
|
|
216
250
|
newProps[prop] = props[prop];
|
|
217
251
|
}
|
|
218
252
|
return newProps;
|
|
219
|
-
}, props => assign(node, props,
|
|
253
|
+
}, props => assign(node, props, true, prevProps, true));
|
|
220
254
|
return prevProps;
|
|
221
255
|
}
|
|
222
256
|
function dynamicProperty(props, key) {
|
|
@@ -261,21 +295,21 @@ function insert(parent, accessor, marker, initial) {
|
|
|
261
295
|
}
|
|
262
296
|
effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
|
|
263
297
|
}
|
|
264
|
-
function assign(node, props,
|
|
298
|
+
function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
|
|
299
|
+
const nodeName = node.nodeName;
|
|
265
300
|
props || (props = {});
|
|
266
301
|
for (const prop in prevProps) {
|
|
267
302
|
if (!(prop in props)) {
|
|
268
303
|
if (prop === "children") continue;
|
|
269
|
-
prevProps[prop] = assignProp(node, prop, null, prevProps[prop],
|
|
304
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
|
|
270
305
|
}
|
|
271
306
|
}
|
|
272
307
|
for (const prop in props) {
|
|
273
308
|
if (prop === "children") {
|
|
274
|
-
if (!skipChildren) insertExpression(node, props.children);
|
|
309
|
+
if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
|
|
275
310
|
continue;
|
|
276
311
|
}
|
|
277
|
-
|
|
278
|
-
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
|
|
312
|
+
prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
|
|
279
313
|
}
|
|
280
314
|
}
|
|
281
315
|
function hydrate$1(code, element, options = {}) {
|
|
@@ -309,10 +343,8 @@ function hydrate$1(code, element, options = {}) {
|
|
|
309
343
|
{
|
|
310
344
|
sharedConfig.verifyHydration = () => {
|
|
311
345
|
if (sharedConfig.registry && sharedConfig.registry.size) {
|
|
312
|
-
const orphaned = [];
|
|
313
|
-
|
|
314
|
-
if (node.isConnected) orphaned.push(node);else sharedConfig.registry.delete(key);
|
|
315
|
-
}
|
|
346
|
+
const orphaned = [...sharedConfig.registry.values()].filter(node => node.isConnected);
|
|
347
|
+
sharedConfig.registry.clear();
|
|
316
348
|
if (!orphaned.length) return;
|
|
317
349
|
console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => ` ${node.outerHTML.slice(0, 100)}`).join("\n"));
|
|
318
350
|
}
|
|
@@ -455,18 +487,20 @@ function flattenClassList(list, result) {
|
|
|
455
487
|
if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
|
|
456
488
|
}
|
|
457
489
|
}
|
|
458
|
-
function assignProp(node, prop, value, prev,
|
|
459
|
-
let forceProp;
|
|
490
|
+
function assignProp(node, prop, value, prev, skipRef, nodeName) {
|
|
460
491
|
if (prop === "style") return style(node, value, prev), value;
|
|
461
|
-
if (prop === "class") return className(node, value,
|
|
462
|
-
if (value === prev) return prev;
|
|
492
|
+
if (prop === "class") return className(node, value, prev), value;
|
|
493
|
+
if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
|
|
463
494
|
if (prop === "ref") {
|
|
464
495
|
if (!skipRef && value) ref(() => value, node);
|
|
465
|
-
|
|
496
|
+
return value;
|
|
497
|
+
}
|
|
498
|
+
const hasNamespace = prop.indexOf(":") > -1;
|
|
499
|
+
if (hasNamespace && prop.slice(0, 3) === "on:") {
|
|
466
500
|
const e = prop.slice(3);
|
|
467
501
|
prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
|
|
468
502
|
value && node.addEventListener(e, value, typeof value !== "function" && value);
|
|
469
|
-
} else if (prop.slice(0, 2) === "on") {
|
|
503
|
+
} else if (!hasNamespace && prop.slice(0, 2) === "on") {
|
|
470
504
|
const name = prop.slice(2).toLowerCase();
|
|
471
505
|
const delegate = DelegatedEvents.has(name);
|
|
472
506
|
if (!delegate && prev) {
|
|
@@ -477,11 +511,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
|
|
|
477
511
|
addEventListener(node, name, value, delegate);
|
|
478
512
|
delegate && delegateEvents([name]);
|
|
479
513
|
}
|
|
480
|
-
} else if (
|
|
481
|
-
if (
|
|
482
|
-
if (prop === "value" &&
|
|
514
|
+
} else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
|
|
515
|
+
if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
|
|
516
|
+
if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
|
|
483
517
|
} else {
|
|
484
|
-
const ns =
|
|
518
|
+
const ns = hasNamespace && Namespaces[prop.split(":")[0]];
|
|
485
519
|
if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
|
|
486
520
|
}
|
|
487
521
|
return value;
|
|
@@ -563,7 +597,6 @@ function insertExpression(parent, value, current, marker) {
|
|
|
563
597
|
appendNodes(parent, value, marker);
|
|
564
598
|
} else reconcileArrays(parent, current, value);
|
|
565
599
|
} else {
|
|
566
|
-
if (current && current.nodeType) clearHydrationRegistry(current);
|
|
567
600
|
current && cleanChildren(parent);
|
|
568
601
|
appendNodes(parent, value);
|
|
569
602
|
}
|
|
@@ -589,18 +622,6 @@ function normalize(value, current, multi, doNotUnwrap) {
|
|
|
589
622
|
function appendNodes(parent, array, marker = null) {
|
|
590
623
|
for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
|
|
591
624
|
}
|
|
592
|
-
function clearHydrationRegistry(node) {
|
|
593
|
-
if (!sharedConfig.registry || !node || node.nodeType !== 1) return;
|
|
594
|
-
const key = node.getAttribute("_hk");
|
|
595
|
-
if (key) sharedConfig.registry.delete(key);
|
|
596
|
-
const descendants = node.querySelectorAll?.(`*[_hk]`);
|
|
597
|
-
if (descendants) {
|
|
598
|
-
for (let i = 0; i < descendants.length; i++) {
|
|
599
|
-
const descendantKey = descendants[i].getAttribute("_hk");
|
|
600
|
-
if (descendantKey) sharedConfig.registry.delete(descendantKey);
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
625
|
function cleanChildren(parent, current, marker, replacement) {
|
|
605
626
|
if (marker === undefined) return parent.textContent = "";
|
|
606
627
|
if (current.length) {
|
|
@@ -609,10 +630,7 @@ function cleanChildren(parent, current, marker, replacement) {
|
|
|
609
630
|
const el = current[i];
|
|
610
631
|
if (replacement !== el) {
|
|
611
632
|
const isParent = el.parentNode === parent;
|
|
612
|
-
if (replacement && !inserted && !i) isParent ?
|
|
613
|
-
clearHydrationRegistry(el);
|
|
614
|
-
el.remove();
|
|
615
|
-
}
|
|
633
|
+
if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
|
|
616
634
|
} else inserted = true;
|
|
617
635
|
}
|
|
618
636
|
} else if (replacement) parent.insertBefore(replacement, marker);
|
|
@@ -731,4 +749,4 @@ function Dynamic(props) {
|
|
|
731
749
|
return createDynamic(() => props.component, others);
|
|
732
750
|
}
|
|
733
751
|
|
|
734
|
-
export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript,
|
|
752
|
+
export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
|