@solidjs/web 2.0.0-experimental.4 → 2.0.0-experimental.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.js CHANGED
@@ -1,488 +1,24 @@
1
- import {
2
- createRoot,
3
- untrack,
4
- createRenderEffect,
5
- sharedConfig,
6
- flatten,
7
- enableHydration,
8
- createMemo,
9
- $DEVCOMP,
10
- omit
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,12 +331,11 @@ 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)) {
@@ -838,13 +348,11 @@ function classListToObject(classList) {
838
348
  function flattenClassList(list, result) {
839
349
  for (let i = 0, len = list.length; i < len; i++) {
840
350
  const item = list[i];
841
- if (Array.isArray(item)) flattenClassList(item, result);
842
- else if (typeof item === "object" && item != null) Object.assign(result, item);
843
- else if (item || item === 0) result[item] = true;
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;
844
352
  }
845
353
  }
846
354
  function assignProp(node, prop, value, prev, isSVG, skipRef) {
847
- let propAlias, forceProp;
355
+ let forceProp;
848
356
  if (prop === "style") return style(node, value, prev), value;
849
357
  if (prop === "class") return className(node, value, isSVG, prev), value;
850
358
  if (value === prev) return prev;
@@ -865,24 +373,12 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
865
373
  addEventListener(node, name, value, delegate);
866
374
  delegate && delegateEvents([name]);
867
375
  }
868
- } else if (prop.slice(0, 5) === "attr:") {
869
- setAttribute(node, prop.slice(5), value);
870
- } else if (prop.slice(0, 5) === "bool:") {
871
- setBoolAttribute(node, prop.slice(5), value);
872
- } else if (
873
- (forceProp = prop.slice(0, 5) === "prop:") ||
874
- ChildProperties.has(prop) ||
875
- (!isSVG && (propAlias = getPropAlias(prop, node.tagName))) ||
876
- Properties.has(prop)
877
- ) {
878
- if (forceProp) prop = prop.slice(5);
879
- if (prop === "value" && node.nodeName === "SELECT")
880
- queueMicrotask(() => (node.value = value)) || (node.value = value);
881
- 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;
882
379
  } else {
883
380
  const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
884
- if (ns) setAttributeNS(node, ns, prop, value);
885
- else setAttribute(node, prop, value);
381
+ if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
886
382
  }
887
383
  return value;
888
384
  }
@@ -894,11 +390,10 @@ function eventHandler(e) {
894
390
  const key = `$$${e.type}`;
895
391
  const oriTarget = e.target;
896
392
  const oriCurrentTarget = e.currentTarget;
897
- const retarget = value =>
898
- Object.defineProperty(e, "target", {
899
- configurable: true,
900
- value
901
- });
393
+ const retarget = value => Object.defineProperty(e, "target", {
394
+ configurable: true,
395
+ value
396
+ });
902
397
  const handleNode = () => {
903
398
  const handler = node[key];
904
399
  if (handler && !node.disabled) {
@@ -906,11 +401,7 @@ function eventHandler(e) {
906
401
  data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
907
402
  if (e.cancelBubble) return;
908
403
  }
909
- node.host &&
910
- typeof node.host !== "string" &&
911
- !node.host._$host &&
912
- node.contains(e.target) &&
913
- retarget(node.host);
404
+ node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
914
405
  return true;
915
406
  };
916
407
  const walkUpTree = () => {
@@ -938,10 +429,12 @@ function eventHandler(e) {
938
429
  break;
939
430
  }
940
431
  }
941
- } else walkUpTree();
432
+ }
433
+ else walkUpTree();
942
434
  retarget(oriTarget);
943
435
  }
944
436
  function insertExpression(parent, value, current, marker) {
437
+ if (isHydrating(parent)) return;
945
438
  if (value === current) return;
946
439
  const t = typeof value,
947
440
  multi = marker !== undefined;
@@ -984,9 +477,7 @@ function normalize(value, current, multi, doNotUnwrap) {
984
477
  const item = value[i],
985
478
  prev = current && current[i],
986
479
  t = typeof item;
987
- if (t === "string" || t === "number")
988
- value[i] =
989
- 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);
990
481
  }
991
482
  }
992
483
  return value;
@@ -995,36 +486,31 @@ function appendNodes(parent, array, marker = null) {
995
486
  for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
996
487
  }
997
488
  function cleanChildren(parent, current, marker, replacement) {
998
- if (marker === undefined) return (parent.textContent = "");
489
+ if (marker === undefined) return parent.textContent = "";
999
490
  if (current.length) {
1000
491
  let inserted = false;
1001
492
  for (let i = current.length - 1; i >= 0; i--) {
1002
493
  const el = current[i];
1003
494
  if (replacement !== el) {
1004
495
  const isParent = el.parentNode === parent;
1005
- if (replacement && !inserted && !i)
1006
- isParent
1007
- ? parent.replaceChild(replacement, el)
1008
- : parent.insertBefore(replacement, marker);
1009
- else isParent && el.remove();
496
+ if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
1010
497
  } else inserted = true;
1011
498
  }
1012
499
  } else if (replacement) parent.insertBefore(replacement, marker);
1013
500
  }
1014
501
  function gatherHydratable(element, root) {
1015
- const templates = element.querySelectorAll(`*[data-hk]`);
502
+ const templates = element.querySelectorAll(`*[_hk]`);
1016
503
  for (let i = 0; i < templates.length; i++) {
1017
504
  const node = templates[i];
1018
- const key = node.getAttribute("data-hk");
1019
- if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key))
1020
- 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);
1021
507
  }
1022
508
  }
1023
509
  function getHydrationKey() {
1024
510
  return sharedConfig.getNextContextId();
1025
511
  }
1026
512
  function NoHydration(props) {
1027
- return sharedConfig.context ? undefined : props.children;
513
+ return sharedConfig.hydrating ? undefined : props.children;
1028
514
  }
1029
515
  function Hydration(props) {
1030
516
  return props.children;
@@ -1057,8 +543,10 @@ function escape(html) {}
1057
543
  const isServer = false;
1058
544
  const isDev = true;
1059
545
  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
1060
- function createElement(tagName, isSVG = false) {
1061
- 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
+ });
1062
550
  }
1063
551
  const hydrate = (...args) => {
1064
552
  enableHydration();
@@ -1070,21 +558,18 @@ function Portal(props) {
1070
558
  endMarker = document.createTextNode(""),
1071
559
  mount = () => createElementProxy(props.mount || document.body, treeMarker);
1072
560
  let content = createMemo(() => [startMarker, props.children]);
1073
- createRenderEffect(
1074
- () => [mount(), content()],
1075
- ([m, c]) => {
1076
- m.appendChild(endMarker);
1077
- insert(m, c, endMarker);
1078
- return () => {
1079
- let c = startMarker;
1080
- while (c && c !== endMarker) {
1081
- const n = c.nextSibling;
1082
- m.removeChild(c);
1083
- c = n;
1084
- }
1085
- };
1086
- }
1087
- );
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
+ });
1088
573
  return treeMarker;
1089
574
  }
1090
575
  function createElementProxy(el, marker) {
@@ -1116,7 +601,7 @@ function createDynamic(component, props) {
1116
601
  return untrack(() => component(props));
1117
602
  case "string":
1118
603
  const isSvg = SVGElements.has(component);
1119
- const el = sharedConfig.context ? getNextElement() : createElement(component, isSvg);
604
+ const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
1120
605
  spread(el, props, isSvg);
1121
606
  return el;
1122
607
  }
@@ -1127,59 +612,4 @@ function Dynamic(props) {
1127
612
  return createDynamic(() => props.component, others);
1128
613
  }
1129
614
 
1130
- export {
1131
- voidFn as Assets,
1132
- ChildProperties,
1133
- DOMElements,
1134
- DelegatedEvents,
1135
- Dynamic,
1136
- Hydration,
1137
- voidFn as HydrationScript,
1138
- NoHydration,
1139
- Portal,
1140
- Properties,
1141
- RequestContext,
1142
- SVGElements,
1143
- SVGNamespace,
1144
- addEventListener,
1145
- assign,
1146
- className,
1147
- clearDelegatedEvents,
1148
- createDynamic,
1149
- delegateEvents,
1150
- dynamicProperty,
1151
- escape,
1152
- voidFn as generateHydrationScript,
1153
- voidFn as getAssets,
1154
- getHydrationKey,
1155
- getNextElement,
1156
- getNextMarker,
1157
- getNextMatch,
1158
- getPropAlias,
1159
- voidFn as getRequestEvent,
1160
- hydrate,
1161
- insert,
1162
- isDev,
1163
- isServer,
1164
- render,
1165
- renderToStream,
1166
- renderToString,
1167
- renderToStringAsync,
1168
- resolveSSRNode,
1169
- runHydrationEvents,
1170
- setAttribute,
1171
- setAttributeNS,
1172
- setBoolAttribute,
1173
- setProperty,
1174
- spread,
1175
- ssr,
1176
- ssrAttribute,
1177
- ssrClassList,
1178
- ssrElement,
1179
- ssrHydrationKey,
1180
- ssrStyle,
1181
- style,
1182
- template,
1183
- use,
1184
- voidFn as useAssets
1185
- };
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 };