@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 CHANGED
@@ -3,8 +3,39 @@
3
3
  var solidJs = require('solid-js');
4
4
  var signals = require('@solidjs/signals');
5
5
 
6
- const Properties = /*#__PURE__*/new Set([
7
- "value", "checked", "selected", "muted"]);
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 SVGNamespace = {
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 template(html, isImportNode, isSVG, isMathML) {
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 create = bypassGuard => {
107
- if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
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, isSVG, prev) {
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 && (isSVG ? node.setAttribute("class", value) : node.className = value);
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 = {}, isSVG, skipChildren) {
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, isSVG, true, prevProps, true));
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, isSVG, skipChildren, prevProps = {}, skipRef = false) {
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], isSVG, skipRef);
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
- const value = props[prop];
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
- for (const [key, node] of solidJs.sharedConfig.registry.entries()) {
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, isSVG, skipRef) {
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, isSVG, prev), 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
- } else if (prop.slice(0, 3) === "on:") {
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 ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
482
- if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
483
- if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[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 = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
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 ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (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 Properties = /*#__PURE__*/new Set([
6
- "value", "checked", "selected", "muted"]);
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 SVGNamespace = {
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 template(html, isImportNode, isSVG, isMathML) {
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 create = bypassGuard => {
106
- if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
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, isSVG, prev) {
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 && (isSVG ? node.setAttribute("class", value) : node.className = value);
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 = {}, isSVG, skipChildren) {
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, isSVG, true, prevProps, true));
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, isSVG, skipChildren, prevProps = {}, skipRef = false) {
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], isSVG, skipRef);
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
- const value = props[prop];
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
- for (const [key, node] of sharedConfig.registry.entries()) {
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, isSVG, skipRef) {
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, isSVG, prev), 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
- } else if (prop.slice(0, 3) === "on:") {
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 ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
481
- if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
482
- if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[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 = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
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 ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (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, Portal, Properties, RequestContext, SVGElements, SVGNamespace, 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 };
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 };