@solidjs/web 2.0.0-experimental.0 → 2.0.0-experimental.10

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.js CHANGED
@@ -1,488 +1,24 @@
1
- import {
2
- createRoot,
3
- untrack,
4
- createRenderEffect,
5
- sharedConfig,
6
- flatten,
7
- enableHydration,
8
- createMemo,
9
- omit,
10
- $DEVCOMP
11
- } from "solid-js";
12
- export {
13
- ErrorBoundary,
14
- For,
15
- Match,
16
- Show,
17
- Suspense,
18
- Switch,
19
- createComponent,
20
- createRenderEffect as effect,
21
- getOwner,
22
- createMemo as memo,
23
- merge as mergeProps,
24
- untrack
25
- } from "solid-js";
1
+ import { createMemo, createRoot, flatten, untrack, createRenderEffect, sharedConfig, enableHydration, $DEVCOMP, omit } from 'solid-js';
2
+ export { ErrorBoundary, For, Match, Show, Suspense, Switch, createComponent, createRenderEffect as effect, getOwner, merge as mergeProps, untrack } from 'solid-js';
26
3
 
27
- const booleans = [
28
- "allowfullscreen",
29
- "async",
30
- "autofocus",
31
- "autoplay",
32
- "checked",
33
- "controls",
34
- "default",
35
- "disabled",
36
- "formnovalidate",
37
- "hidden",
38
- "indeterminate",
39
- "inert",
40
- "ismap",
41
- "loop",
42
- "multiple",
43
- "muted",
44
- "nomodule",
45
- "novalidate",
46
- "open",
47
- "playsinline",
48
- "readonly",
49
- "required",
50
- "reversed",
51
- "seamless",
52
- "selected"
53
- ];
54
- const Properties = /*#__PURE__*/ new Set([
55
- "value",
56
- "readOnly",
57
- "formNoValidate",
58
- "isMap",
59
- "noModule",
60
- "playsInline",
61
- ...booleans
62
- ]);
63
- const ChildProperties = /*#__PURE__*/ new Set([
64
- "innerHTML",
65
- "textContent",
66
- "innerText",
67
- "children"
68
- ]);
69
- const PropAliases = /*#__PURE__*/ Object.assign(Object.create(null), {
70
- class: "className",
71
- formnovalidate: {
72
- $: "formNoValidate",
73
- BUTTON: 1,
74
- INPUT: 1
75
- },
76
- ismap: {
77
- $: "isMap",
78
- IMG: 1
79
- },
80
- nomodule: {
81
- $: "noModule",
82
- SCRIPT: 1
83
- },
84
- playsinline: {
85
- $: "playsInline",
86
- VIDEO: 1
87
- },
88
- readonly: {
89
- $: "readOnly",
90
- INPUT: 1,
91
- TEXTAREA: 1
92
- }
93
- });
94
- function getPropAlias(prop, tagName) {
95
- const a = PropAliases[prop];
96
- return typeof a === "object" ? (a[tagName] ? a["$"] : undefined) : a;
97
- }
98
- const DelegatedEvents = /*#__PURE__*/ new Set([
99
- "beforeinput",
100
- "click",
101
- "dblclick",
102
- "contextmenu",
103
- "focusin",
104
- "focusout",
105
- "input",
106
- "keydown",
107
- "keyup",
108
- "mousedown",
109
- "mousemove",
110
- "mouseout",
111
- "mouseover",
112
- "mouseup",
113
- "pointerdown",
114
- "pointermove",
115
- "pointerout",
116
- "pointerover",
117
- "pointerup",
118
- "touchend",
119
- "touchmove",
120
- "touchstart"
121
- ]);
122
- const SVGElements = /*#__PURE__*/ new Set([
123
- "altGlyph",
124
- "altGlyphDef",
125
- "altGlyphItem",
126
- "animate",
127
- "animateColor",
128
- "animateMotion",
129
- "animateTransform",
130
- "circle",
131
- "clipPath",
132
- "color-profile",
133
- "cursor",
134
- "defs",
135
- "desc",
136
- "ellipse",
137
- "feBlend",
138
- "feColorMatrix",
139
- "feComponentTransfer",
140
- "feComposite",
141
- "feConvolveMatrix",
142
- "feDiffuseLighting",
143
- "feDisplacementMap",
144
- "feDistantLight",
145
- "feDropShadow",
146
- "feFlood",
147
- "feFuncA",
148
- "feFuncB",
149
- "feFuncG",
150
- "feFuncR",
151
- "feGaussianBlur",
152
- "feImage",
153
- "feMerge",
154
- "feMergeNode",
155
- "feMorphology",
156
- "feOffset",
157
- "fePointLight",
158
- "feSpecularLighting",
159
- "feSpotLight",
160
- "feTile",
161
- "feTurbulence",
162
- "filter",
163
- "font",
164
- "font-face",
165
- "font-face-format",
166
- "font-face-name",
167
- "font-face-src",
168
- "font-face-uri",
169
- "foreignObject",
170
- "g",
171
- "glyph",
172
- "glyphRef",
173
- "hkern",
174
- "image",
175
- "line",
176
- "linearGradient",
177
- "marker",
178
- "mask",
179
- "metadata",
180
- "missing-glyph",
181
- "mpath",
182
- "path",
183
- "pattern",
184
- "polygon",
185
- "polyline",
186
- "radialGradient",
187
- "rect",
188
- "set",
189
- "stop",
190
- "svg",
191
- "switch",
192
- "symbol",
193
- "text",
194
- "textPath",
195
- "tref",
196
- "tspan",
197
- "use",
198
- "view",
199
- "vkern"
200
- ]);
4
+ const Properties = /*#__PURE__*/new Set([
5
+ "value", "checked", "selected", "muted"]);
6
+ const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
7
+ 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"]);
8
+ const SVGElements = /*#__PURE__*/new Set([
9
+ "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",
10
+ "set", "stop",
11
+ "svg", "switch", "symbol", "text", "textPath",
12
+ "tref", "tspan", "use", "view", "vkern"]);
201
13
  const SVGNamespace = {
202
14
  xlink: "http://www.w3.org/1999/xlink",
203
15
  xml: "http://www.w3.org/XML/1998/namespace"
204
16
  };
205
- const DOMElements = /*#__PURE__*/ new Set([
206
- "html",
207
- "base",
208
- "head",
209
- "link",
210
- "meta",
211
- "style",
212
- "title",
213
- "body",
214
- "address",
215
- "article",
216
- "aside",
217
- "footer",
218
- "header",
219
- "main",
220
- "nav",
221
- "section",
222
- "body",
223
- "blockquote",
224
- "dd",
225
- "div",
226
- "dl",
227
- "dt",
228
- "figcaption",
229
- "figure",
230
- "hr",
231
- "li",
232
- "ol",
233
- "p",
234
- "pre",
235
- "ul",
236
- "a",
237
- "abbr",
238
- "b",
239
- "bdi",
240
- "bdo",
241
- "br",
242
- "cite",
243
- "code",
244
- "data",
245
- "dfn",
246
- "em",
247
- "i",
248
- "kbd",
249
- "mark",
250
- "q",
251
- "rp",
252
- "rt",
253
- "ruby",
254
- "s",
255
- "samp",
256
- "small",
257
- "span",
258
- "strong",
259
- "sub",
260
- "sup",
261
- "time",
262
- "u",
263
- "var",
264
- "wbr",
265
- "area",
266
- "audio",
267
- "img",
268
- "map",
269
- "track",
270
- "video",
271
- "embed",
272
- "iframe",
273
- "object",
274
- "param",
275
- "picture",
276
- "portal",
277
- "source",
278
- "svg",
279
- "math",
280
- "canvas",
281
- "noscript",
282
- "script",
283
- "del",
284
- "ins",
285
- "caption",
286
- "col",
287
- "colgroup",
288
- "table",
289
- "tbody",
290
- "td",
291
- "tfoot",
292
- "th",
293
- "thead",
294
- "tr",
295
- "button",
296
- "datalist",
297
- "fieldset",
298
- "form",
299
- "input",
300
- "label",
301
- "legend",
302
- "meter",
303
- "optgroup",
304
- "option",
305
- "output",
306
- "progress",
307
- "select",
308
- "textarea",
309
- "details",
310
- "dialog",
311
- "menu",
312
- "summary",
313
- "details",
314
- "slot",
315
- "template",
316
- "acronym",
317
- "applet",
318
- "basefont",
319
- "bgsound",
320
- "big",
321
- "blink",
322
- "center",
323
- "content",
324
- "dir",
325
- "font",
326
- "frame",
327
- "frameset",
328
- "hgroup",
329
- "image",
330
- "keygen",
331
- "marquee",
332
- "menuitem",
333
- "nobr",
334
- "noembed",
335
- "noframes",
336
- "plaintext",
337
- "rb",
338
- "rtc",
339
- "shadow",
340
- "spacer",
341
- "strike",
342
- "tt",
343
- "xmp",
344
- "a",
345
- "abbr",
346
- "acronym",
347
- "address",
348
- "applet",
349
- "area",
350
- "article",
351
- "aside",
352
- "audio",
353
- "b",
354
- "base",
355
- "basefont",
356
- "bdi",
357
- "bdo",
358
- "bgsound",
359
- "big",
360
- "blink",
361
- "blockquote",
362
- "body",
363
- "br",
364
- "button",
365
- "canvas",
366
- "caption",
367
- "center",
368
- "cite",
369
- "code",
370
- "col",
371
- "colgroup",
372
- "content",
373
- "data",
374
- "datalist",
375
- "dd",
376
- "del",
377
- "details",
378
- "dfn",
379
- "dialog",
380
- "dir",
381
- "div",
382
- "dl",
383
- "dt",
384
- "em",
385
- "embed",
386
- "fieldset",
387
- "figcaption",
388
- "figure",
389
- "font",
390
- "footer",
391
- "form",
392
- "frame",
393
- "frameset",
394
- "head",
395
- "header",
396
- "hgroup",
397
- "hr",
398
- "html",
399
- "i",
400
- "iframe",
401
- "image",
402
- "img",
403
- "input",
404
- "ins",
405
- "kbd",
406
- "keygen",
407
- "label",
408
- "legend",
409
- "li",
410
- "link",
411
- "main",
412
- "map",
413
- "mark",
414
- "marquee",
415
- "menu",
416
- "menuitem",
417
- "meta",
418
- "meter",
419
- "nav",
420
- "nobr",
421
- "noembed",
422
- "noframes",
423
- "noscript",
424
- "object",
425
- "ol",
426
- "optgroup",
427
- "option",
428
- "output",
429
- "p",
430
- "param",
431
- "picture",
432
- "plaintext",
433
- "portal",
434
- "pre",
435
- "progress",
436
- "q",
437
- "rb",
438
- "rp",
439
- "rt",
440
- "rtc",
441
- "ruby",
442
- "s",
443
- "samp",
444
- "script",
445
- "section",
446
- "select",
447
- "shadow",
448
- "slot",
449
- "small",
450
- "source",
451
- "spacer",
452
- "span",
453
- "strike",
454
- "strong",
455
- "style",
456
- "sub",
457
- "summary",
458
- "sup",
459
- "table",
460
- "tbody",
461
- "td",
462
- "template",
463
- "textarea",
464
- "tfoot",
465
- "th",
466
- "thead",
467
- "time",
468
- "title",
469
- "tr",
470
- "track",
471
- "tt",
472
- "u",
473
- "ul",
474
- "var",
475
- "video",
476
- "wbr",
477
- "xmp",
478
- "input",
479
- "h1",
480
- "h2",
481
- "h3",
482
- "h4",
483
- "h5",
484
- "h6"
485
- ]);
17
+ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
18
+ "webview",
19
+ "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
20
+
21
+ const memo = fn => createMemo(() => fn());
486
22
 
487
23
  function reconcileArrays(parentNode, a, b) {
488
24
  let bLength = b.length,
@@ -503,7 +39,7 @@ function reconcileArrays(parentNode, a, b) {
503
39
  bEnd--;
504
40
  }
505
41
  if (aEnd === aStart) {
506
- const node = bEnd < bLength ? (bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart]) : after;
42
+ const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
507
43
  while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node);
508
44
  } else if (bEnd === bStart) {
509
45
  while (aStart < aEnd) {
@@ -544,17 +80,15 @@ function reconcileArrays(parentNode, a, b) {
544
80
  const $$EVENTS = "_$DX_DELEGATE";
545
81
  function render(code, element, init, options = {}) {
546
82
  if (!element) {
547
- throw new Error(
548
- "The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document."
549
- );
83
+ throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
550
84
  }
551
85
  let disposer;
552
86
  createRoot(dispose => {
553
87
  disposer = dispose;
554
- element === document
555
- ? code()
556
- : insert(element, code(), element.firstChild ? null : undefined, init);
557
- }, options.owner);
88
+ element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
89
+ }, {
90
+ id: options.renderId
91
+ });
558
92
  return () => {
559
93
  disposer();
560
94
  element.textContent = "";
@@ -563,19 +97,12 @@ function render(code, element, init, options = {}) {
563
97
  function template(html, isImportNode, isSVG, isMathML) {
564
98
  let node;
565
99
  const create = () => {
566
- if (isHydrating())
567
- throw new Error(
568
- "Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration."
569
- );
570
- const t = isMathML
571
- ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template")
572
- : document.createElement("template");
100
+ if (isHydrating()) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
101
+ const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
573
102
  t.innerHTML = html;
574
103
  return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
575
104
  };
576
- return isImportNode
577
- ? () => untrack(() => document.importNode(node || (node = create()), true))
578
- : () => (node || (node = create())).cloneNode(true);
105
+ return isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
579
106
  }
580
107
  function delegateEvents(eventNames, document = window.document) {
581
108
  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -594,27 +121,25 @@ function clearDelegatedEvents(document = window.document) {
594
121
  }
595
122
  }
596
123
  function setProperty(node, name, value) {
124
+ if (isHydrating(node)) return;
597
125
  node[name] = value;
598
126
  }
599
127
  function setAttribute(node, name, value) {
600
- if (value == null) node.removeAttribute(name);
601
- else node.setAttribute(name, value);
128
+ if (isHydrating(node)) return;
129
+ if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
602
130
  }
603
131
  function setAttributeNS(node, namespace, name, value) {
604
- if (value == null) node.removeAttributeNS(namespace, name);
605
- else node.setAttributeNS(namespace, name, value);
606
- }
607
- function setBoolAttribute(node, name, value) {
608
132
  if (isHydrating(node)) return;
609
- value ? node.setAttribute(name, "") : node.removeAttribute(name);
133
+ if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
610
134
  }
611
135
  function className(node, value, isSVG, prev) {
612
- if (value == null) {
136
+ if (isHydrating(node)) return;
137
+ if (value == null || value === false) {
613
138
  prev && node.removeAttribute("class");
614
139
  return;
615
140
  }
616
141
  if (typeof value === "string") {
617
- value !== prev && (isSVG ? node.setAttribute("class", value) : (node.className = value));
142
+ value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
618
143
  return;
619
144
  }
620
145
  if (typeof prev === "string") {
@@ -645,7 +170,7 @@ function addEventListener(node, name, handler, delegate) {
645
170
  } else node[`$$${name}`] = handler;
646
171
  } else if (Array.isArray(handler)) {
647
172
  const handlerFn = handler[0];
648
- node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
173
+ node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
649
174
  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
650
175
  }
651
176
  function style(node, value, prev) {
@@ -654,7 +179,7 @@ function style(node, value, prev) {
654
179
  return;
655
180
  }
656
181
  const nodeStyle = node.style;
657
- if (typeof value === "string") return (nodeStyle.cssText = value);
182
+ if (typeof value === "string") return nodeStyle.cssText = value;
658
183
  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
659
184
  prev || (prev = {});
660
185
  value || (value = {});
@@ -666,32 +191,26 @@ function style(node, value, prev) {
666
191
  }
667
192
  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
668
193
  }
194
+ function setStyleProperty(node, name, value) {
195
+ value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
196
+ }
669
197
  function spread(node, props = {}, isSVG, skipChildren) {
670
198
  const prevProps = {};
671
199
  if (!skipChildren) {
672
- createRenderEffect(
673
- () => normalize(props.children, prevProps.children),
674
- value => {
675
- insertExpression(node, value, prevProps.children);
676
- prevProps.children = value;
677
- }
678
- );
200
+ createRenderEffect(() => normalize(props.children, prevProps.children), value => {
201
+ insertExpression(node, value, prevProps.children);
202
+ prevProps.children = value;
203
+ });
679
204
  }
680
- createRenderEffect(
681
- () => typeof props.ref === "function" && use(props.ref, node),
682
- () => {}
683
- );
684
- createRenderEffect(
685
- () => {
686
- const newProps = {};
687
- for (const prop in props) {
688
- if (prop === "children" || prop === "ref") continue;
689
- newProps[prop] = props[prop];
690
- }
691
- return newProps;
692
- },
693
- props => assign(node, props, isSVG, true, prevProps, true)
694
- );
205
+ createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
206
+ createRenderEffect(() => {
207
+ const newProps = {};
208
+ for (const prop in props) {
209
+ if (prop === "children" || prop === "ref") continue;
210
+ newProps[prop] = props[prop];
211
+ }
212
+ return newProps;
213
+ }, props => assign(node, props, isSVG, true, prevProps, true));
695
214
  return prevProps;
696
215
  }
697
216
  function dynamicProperty(props, key) {
@@ -714,11 +233,7 @@ function insert(parent, accessor, marker, initial) {
714
233
  accessor = normalize(accessor, initial, multi, true);
715
234
  if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
716
235
  }
717
- createRenderEffect(
718
- prev => normalize(accessor, prev, multi),
719
- (value, current) => insertExpression(parent, value, current, marker),
720
- initial
721
- );
236
+ createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
722
237
  }
723
238
  function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
724
239
  props || (props = {});
@@ -739,35 +254,29 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
739
254
  }
740
255
  function hydrate$1(code, element, options = {}) {
741
256
  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
257
+ options.renderId ||= "";
742
258
  sharedConfig.completed = globalThis._$HY.completed;
743
259
  sharedConfig.events = globalThis._$HY.events;
744
260
  sharedConfig.load = id => globalThis._$HY.r[id];
745
261
  sharedConfig.has = id => id in globalThis._$HY.r;
746
262
  sharedConfig.gather = root => gatherHydratable(element, root);
747
263
  sharedConfig.registry = new Map();
748
- sharedConfig.context = {
749
- id: options.renderId || "",
750
- count: 0
751
- };
264
+ sharedConfig.hydrating = true;
752
265
  try {
753
266
  gatherHydratable(element, options.renderId);
754
267
  return render(code, element, [...element.childNodes], options);
755
268
  } finally {
756
- sharedConfig.context = null;
269
+ sharedConfig.hydrating = false;
757
270
  }
758
271
  }
759
272
  function getNextElement(template) {
760
273
  let node,
761
274
  key,
762
275
  hydrating = isHydrating();
763
- if (!hydrating || !(node = sharedConfig.registry.get((key = getHydrationKey())))) {
276
+ if (!hydrating || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
764
277
  if (hydrating) {
765
278
  sharedConfig.done = true;
766
- throw new Error(
767
- `Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${
768
- template ? template().outerHTML : ""
769
- }`
770
- );
279
+ throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
771
280
  }
772
281
  return template();
773
282
  }
@@ -787,8 +296,7 @@ function getNextMarker(start) {
787
296
  while (end) {
788
297
  if (end.nodeType === 8) {
789
298
  const v = end.nodeValue;
790
- if (v === "$") count++;
791
- else if (v === "/") {
299
+ if (v === "$") count++;else if (v === "/") {
792
300
  if (count === 0) return [end, current];
793
301
  count--;
794
302
  }
@@ -802,7 +310,10 @@ function getNextMarker(start) {
802
310
  function runHydrationEvents() {
803
311
  if (sharedConfig.events && !sharedConfig.events.queued) {
804
312
  queueMicrotask(() => {
805
- const { completed, events } = sharedConfig;
313
+ const {
314
+ completed,
315
+ events
316
+ } = sharedConfig;
806
317
  if (!events) return;
807
318
  events.queued = false;
808
319
  while (events.length) {
@@ -820,27 +331,28 @@ function runHydrationEvents() {
820
331
  }
821
332
  }
822
333
  function isHydrating(node) {
823
- return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
334
+ return sharedConfig.hydrating && !sharedConfig.done && (!node || node.isConnected);
824
335
  }
825
336
  function toggleClassKey(node, key, value) {
826
337
  const classNames = key.trim().split(/\s+/);
827
- for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
828
- node.classList.toggle(classNames[i], value);
338
+ for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
829
339
  }
830
340
  function classListToObject(classList) {
831
341
  if (Array.isArray(classList)) {
832
342
  const result = {};
833
- for (let i = 0, len = classList.length; i < len; i++) {
834
- const key = classList[i];
835
- if (typeof key === "object" && key != null) Object.assign(result, key);
836
- else if (key || key === 0) result[key] = true;
837
- }
343
+ flattenClassList(classList, result);
838
344
  return result;
839
345
  }
840
346
  return classList;
841
347
  }
348
+ function flattenClassList(list, result) {
349
+ for (let i = 0, len = list.length; i < len; i++) {
350
+ const item = list[i];
351
+ 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;
352
+ }
353
+ }
842
354
  function assignProp(node, prop, value, prev, isSVG, skipRef) {
843
- let propAlias, forceProp;
355
+ let forceProp;
844
356
  if (prop === "style") return style(node, value, prev), value;
845
357
  if (prop === "class") return className(node, value, isSVG, prev), value;
846
358
  if (value === prev) return prev;
@@ -861,22 +373,12 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
861
373
  addEventListener(node, name, value, delegate);
862
374
  delegate && delegateEvents([name]);
863
375
  }
864
- } else if (prop.slice(0, 5) === "attr:") {
865
- setAttribute(node, prop.slice(5), value);
866
- } else if (prop.slice(0, 5) === "bool:") {
867
- setBoolAttribute(node, prop.slice(5), value);
868
- } else if (
869
- (forceProp = prop.slice(0, 5) === "prop:") ||
870
- ChildProperties.has(prop) ||
871
- (!isSVG && (propAlias = getPropAlias(prop, node.tagName))) ||
872
- Properties.has(prop)
873
- ) {
874
- if (forceProp) prop = prop.slice(5);
875
- else node[propAlias || prop] = value;
376
+ } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
377
+ if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
378
+ if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
876
379
  } else {
877
380
  const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
878
- if (ns) setAttributeNS(node, ns, prop, value);
879
- else setAttribute(node, prop, value);
381
+ if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
880
382
  }
881
383
  return value;
882
384
  }
@@ -888,11 +390,10 @@ function eventHandler(e) {
888
390
  const key = `$$${e.type}`;
889
391
  const oriTarget = e.target;
890
392
  const oriCurrentTarget = e.currentTarget;
891
- const retarget = value =>
892
- Object.defineProperty(e, "target", {
893
- configurable: true,
894
- value
895
- });
393
+ const retarget = value => Object.defineProperty(e, "target", {
394
+ configurable: true,
395
+ value
396
+ });
896
397
  const handleNode = () => {
897
398
  const handler = node[key];
898
399
  if (handler && !node.disabled) {
@@ -900,11 +401,7 @@ function eventHandler(e) {
900
401
  data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
901
402
  if (e.cancelBubble) return;
902
403
  }
903
- node.host &&
904
- typeof node.host !== "string" &&
905
- !node.host._$host &&
906
- node.contains(e.target) &&
907
- retarget(node.host);
404
+ node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
908
405
  return true;
909
406
  };
910
407
  const walkUpTree = () => {
@@ -932,10 +429,12 @@ function eventHandler(e) {
932
429
  break;
933
430
  }
934
431
  }
935
- } else walkUpTree();
432
+ }
433
+ else walkUpTree();
936
434
  retarget(oriTarget);
937
435
  }
938
436
  function insertExpression(parent, value, current, marker) {
437
+ if (isHydrating(parent)) return;
939
438
  if (value === current) return;
940
439
  const t = typeof value,
941
440
  multi = marker !== undefined;
@@ -972,15 +471,13 @@ function normalize(value, current, multi, doNotUnwrap) {
972
471
  doNotUnwrap
973
472
  });
974
473
  if (doNotUnwrap && typeof value === "function") return value;
975
- if (multi && value != null && !Array.isArray(value)) value = [value];
474
+ if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
976
475
  if (Array.isArray(value)) {
977
476
  for (let i = 0, len = value.length; i < len; i++) {
978
477
  const item = value[i],
979
478
  prev = current && current[i],
980
479
  t = typeof item;
981
- if (t === "string" || t === "number")
982
- value[i] =
983
- prev && prev.nodeType === 3 && prev.data === item ? prev : document.createTextNode(item);
480
+ if (t === "string" || t === "number") value[i] = prev && prev.nodeType === 3 && prev.data === item ? prev : document.createTextNode(item);
984
481
  }
985
482
  }
986
483
  return value;
@@ -989,36 +486,31 @@ function appendNodes(parent, array, marker = null) {
989
486
  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
990
487
  }
991
488
  function cleanChildren(parent, current, marker, replacement) {
992
- if (marker === undefined) return (parent.textContent = "");
489
+ if (marker === undefined) return parent.textContent = "";
993
490
  if (current.length) {
994
491
  let inserted = false;
995
492
  for (let i = current.length - 1; i >= 0; i--) {
996
493
  const el = current[i];
997
494
  if (replacement !== el) {
998
495
  const isParent = el.parentNode === parent;
999
- if (replacement && !inserted && !i)
1000
- isParent
1001
- ? parent.replaceChild(replacement, el)
1002
- : parent.insertBefore(replacement, marker);
1003
- else isParent && el.remove();
496
+ if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
1004
497
  } else inserted = true;
1005
498
  }
1006
499
  } else if (replacement) parent.insertBefore(replacement, marker);
1007
500
  }
1008
501
  function gatherHydratable(element, root) {
1009
- const templates = element.querySelectorAll(`*[data-hk]`);
502
+ const templates = element.querySelectorAll(`*[_hk]`);
1010
503
  for (let i = 0; i < templates.length; i++) {
1011
504
  const node = templates[i];
1012
- const key = node.getAttribute("data-hk");
1013
- if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key))
1014
- sharedConfig.registry.set(key, node);
505
+ const key = node.getAttribute("_hk");
506
+ if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
1015
507
  }
1016
508
  }
1017
509
  function getHydrationKey() {
1018
510
  return sharedConfig.getNextContextId();
1019
511
  }
1020
512
  function NoHydration(props) {
1021
- return sharedConfig.context ? undefined : props.children;
513
+ return sharedConfig.hydrating ? undefined : props.children;
1022
514
  }
1023
515
  function Hydration(props) {
1024
516
  return props.children;
@@ -1051,8 +543,10 @@ function escape(html) {}
1051
543
  const isServer = false;
1052
544
  const isDev = true;
1053
545
  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
1054
- function createElement(tagName, isSVG = false) {
1055
- return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
546
+ function createElement(tagName, isSVG = false, is = undefined) {
547
+ return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
548
+ is
549
+ });
1056
550
  }
1057
551
  const hydrate = (...args) => {
1058
552
  enableHydration();
@@ -1064,21 +558,18 @@ function Portal(props) {
1064
558
  endMarker = document.createTextNode(""),
1065
559
  mount = () => createElementProxy(props.mount || document.body, treeMarker);
1066
560
  let content = createMemo(() => [startMarker, props.children]);
1067
- createRenderEffect(
1068
- () => [mount(), content()],
1069
- ([m, c]) => {
1070
- m.appendChild(endMarker);
1071
- insert(m, c, endMarker);
1072
- return () => {
1073
- let c = startMarker;
1074
- while (c && c !== endMarker) {
1075
- const n = c.nextSibling;
1076
- m.removeChild(c);
1077
- c = n;
1078
- }
1079
- };
1080
- }
1081
- );
561
+ createRenderEffect(() => [mount(), content()], ([m, c]) => {
562
+ m.appendChild(endMarker);
563
+ insert(m, c, endMarker);
564
+ return () => {
565
+ let c = startMarker;
566
+ while (c && c !== endMarker) {
567
+ const n = c.nextSibling;
568
+ m.removeChild(c);
569
+ c = n;
570
+ }
571
+ };
572
+ });
1082
573
  return treeMarker;
1083
574
  }
1084
575
  function createElementProxy(el, marker) {
@@ -1098,9 +589,8 @@ function createElementProxy(el, marker) {
1098
589
  }
1099
590
  });
1100
591
  }
1101
- function Dynamic(props) {
1102
- const others = omit(props, "component");
1103
- const cached = createMemo(() => props.component);
592
+ function createDynamic(component, props) {
593
+ const cached = createMemo(component);
1104
594
  return createMemo(() => {
1105
595
  const component = cached();
1106
596
  switch (typeof component) {
@@ -1108,68 +598,18 @@ function Dynamic(props) {
1108
598
  Object.assign(component, {
1109
599
  [$DEVCOMP]: true
1110
600
  });
1111
- return untrack(() => component(others));
601
+ return untrack(() => component(props));
1112
602
  case "string":
1113
603
  const isSvg = SVGElements.has(component);
1114
- const el = sharedConfig.context ? getNextElement() : createElement(component, isSvg);
1115
- spread(el, others, isSvg);
604
+ const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
605
+ spread(el, props, isSvg);
1116
606
  return el;
1117
607
  }
1118
608
  });
1119
609
  }
610
+ function Dynamic(props) {
611
+ const others = omit(props, "component");
612
+ return createDynamic(() => props.component, others);
613
+ }
1120
614
 
1121
- export {
1122
- voidFn as Assets,
1123
- ChildProperties,
1124
- DOMElements,
1125
- DelegatedEvents,
1126
- Dynamic,
1127
- Hydration,
1128
- voidFn as HydrationScript,
1129
- NoHydration,
1130
- Portal,
1131
- Properties,
1132
- RequestContext,
1133
- SVGElements,
1134
- SVGNamespace,
1135
- addEventListener,
1136
- assign,
1137
- className,
1138
- clearDelegatedEvents,
1139
- delegateEvents,
1140
- dynamicProperty,
1141
- escape,
1142
- voidFn as generateHydrationScript,
1143
- voidFn as getAssets,
1144
- getHydrationKey,
1145
- getNextElement,
1146
- getNextMarker,
1147
- getNextMatch,
1148
- getPropAlias,
1149
- voidFn as getRequestEvent,
1150
- hydrate,
1151
- insert,
1152
- isDev,
1153
- isServer,
1154
- render,
1155
- renderToStream,
1156
- renderToString,
1157
- renderToStringAsync,
1158
- resolveSSRNode,
1159
- runHydrationEvents,
1160
- setAttribute,
1161
- setAttributeNS,
1162
- setBoolAttribute,
1163
- setProperty,
1164
- spread,
1165
- ssr,
1166
- ssrAttribute,
1167
- ssrClassList,
1168
- ssrElement,
1169
- ssrHydrationKey,
1170
- ssrStyle,
1171
- style,
1172
- template,
1173
- use,
1174
- voidFn as useAssets
1175
- };
615
+ export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, use, voidFn as useAssets };