@solidjs/web 2.0.0-beta.0 → 2.0.0-beta.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/README.md +27 -4
- package/dist/dev.cjs +238 -107
- package/dist/dev.js +218 -101
- package/dist/server.cjs +196 -105
- package/dist/server.js +182 -103
- package/dist/web.cjs +224 -98
- package/dist/web.js +204 -92
- package/package.json +98 -33
- package/storage/package.json +8 -3
- package/storage/types/src/index.d.ts +147 -21
- package/storage/types/src/jsx.d.ts +29 -0
- package/storage/types/src/server-mock.d.ts +89 -0
- package/storage/types-cjs/index.d.cts +2 -0
- package/storage/types-cjs/package.json +3 -0
- package/storage/types-cjs/src/client.d.cts +1 -0
- package/storage/types-cjs/src/index.d.cts +171 -0
- package/storage/types-cjs/src/jsx.d.cts +29 -0
- package/storage/types-cjs/src/server-mock.d.cts +161 -0
- package/storage/types-cjs/storage/src/index.d.cts +2 -0
- package/types/client.d.ts +31 -17
- package/types/core.d.ts +1 -1
- package/types/index.d.ts +147 -21
- package/types/jsx-properties.d.ts +92 -0
- package/types/jsx.d.ts +4321 -1
- package/types/server-mock.d.ts +89 -0
- package/types/server.d.ts +35 -16
- package/types-cjs/client.d.cts +104 -0
- package/types-cjs/core.d.cts +3 -0
- package/types-cjs/index.d.cts +171 -0
- package/types-cjs/jsx-properties.d.cts +92 -0
- package/types-cjs/jsx.d.cts +4321 -0
- package/types-cjs/package.json +3 -0
- package/types-cjs/server-mock.d.cts +161 -0
- package/types-cjs/server.d.cts +174 -0
package/dist/web.js
CHANGED
|
@@ -1,8 +1,34 @@
|
|
|
1
|
-
import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot,
|
|
2
|
-
export { Errored, For, Loading, Match, Show, Switch, createComponent, getOwner,
|
|
1
|
+
import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, enableHydration, flush } from 'solid-js';
|
|
2
|
+
export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
|
|
3
3
|
|
|
4
|
-
const
|
|
5
|
-
|
|
4
|
+
const DOMWithState = {
|
|
5
|
+
INPUT: {
|
|
6
|
+
value: 1,
|
|
7
|
+
defaultValue: 2,
|
|
8
|
+
checked: 1,
|
|
9
|
+
defaultChecked: 2
|
|
10
|
+
},
|
|
11
|
+
SELECT: {
|
|
12
|
+
value: 1
|
|
13
|
+
},
|
|
14
|
+
OPTION: {
|
|
15
|
+
value: 1,
|
|
16
|
+
selected: 1,
|
|
17
|
+
defaultSelected: 2
|
|
18
|
+
},
|
|
19
|
+
TEXTAREA: {
|
|
20
|
+
value: 1,
|
|
21
|
+
defaultValue: 2
|
|
22
|
+
},
|
|
23
|
+
VIDEO: {
|
|
24
|
+
muted: 1,
|
|
25
|
+
defaultMuted: 2
|
|
26
|
+
},
|
|
27
|
+
AUDIO: {
|
|
28
|
+
muted: 1,
|
|
29
|
+
defaultMuted: 2
|
|
30
|
+
}
|
|
31
|
+
};
|
|
6
32
|
const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
|
|
7
33
|
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
34
|
const SVGElements = /*#__PURE__*/new Set([
|
|
@@ -10,17 +36,26 @@ const SVGElements = /*#__PURE__*/new Set([
|
|
|
10
36
|
"set", "stop",
|
|
11
37
|
"svg", "switch", "symbol", "text", "textPath",
|
|
12
38
|
"tref", "tspan", "use", "view", "vkern"]);
|
|
13
|
-
const
|
|
39
|
+
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"]);
|
|
40
|
+
const Namespaces = {
|
|
41
|
+
svg: "http://www.w3.org/2000/svg",
|
|
42
|
+
mathml: "http://www.w3.org/1998/Math/MathML",
|
|
14
43
|
xlink: "http://www.w3.org/1999/xlink",
|
|
15
44
|
xml: "http://www.w3.org/XML/1998/namespace"
|
|
16
45
|
};
|
|
46
|
+
const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
|
|
47
|
+
const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
|
|
17
48
|
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
49
|
"webview",
|
|
19
50
|
"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
|
|
20
51
|
|
|
21
|
-
const
|
|
52
|
+
const transparentOptions = {
|
|
22
53
|
transparent: true
|
|
23
|
-
}
|
|
54
|
+
};
|
|
55
|
+
const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
|
|
56
|
+
transparent: true,
|
|
57
|
+
...options
|
|
58
|
+
} : transparentOptions);
|
|
24
59
|
const memo = fn => createMemo(() => fn());
|
|
25
60
|
|
|
26
61
|
function reconcileArrays(parentNode, a, b) {
|
|
@@ -81,27 +116,35 @@ function reconcileArrays(parentNode, a, b) {
|
|
|
81
116
|
}
|
|
82
117
|
|
|
83
118
|
const $$EVENTS = "_$DX_DELEGATE";
|
|
84
|
-
|
|
119
|
+
const INNER_OWNED = {};
|
|
120
|
+
function render$1(code, element, init, options = {}) {
|
|
121
|
+
const renderRoot = getChildRoot(element);
|
|
85
122
|
let disposer;
|
|
86
123
|
createRoot(dispose => {
|
|
87
124
|
disposer = dispose;
|
|
88
|
-
element === document
|
|
125
|
+
if (element === document) {
|
|
126
|
+
const tree = code();
|
|
127
|
+
effect(() => flatten(tree), () => {});
|
|
128
|
+
} else {
|
|
129
|
+
const tree = code();
|
|
130
|
+
insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
|
|
131
|
+
}
|
|
89
132
|
}, {
|
|
90
133
|
id: options.renderId
|
|
91
134
|
});
|
|
92
135
|
return () => {
|
|
93
136
|
disposer();
|
|
94
|
-
|
|
137
|
+
renderRoot.textContent = "";
|
|
95
138
|
};
|
|
96
139
|
}
|
|
97
|
-
function
|
|
140
|
+
function create(html, bypassGuard, flag) {
|
|
141
|
+
const t = document.createElement("template");
|
|
142
|
+
t.innerHTML = html;
|
|
143
|
+
return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
|
|
144
|
+
}
|
|
145
|
+
function template(html, flag) {
|
|
98
146
|
let node;
|
|
99
|
-
const
|
|
100
|
-
const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
|
|
101
|
-
t.innerHTML = html;
|
|
102
|
-
return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
|
|
103
|
-
};
|
|
104
|
-
const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
|
|
147
|
+
const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
|
|
105
148
|
return fn;
|
|
106
149
|
}
|
|
107
150
|
function delegateEvents(eventNames, document = window.document) {
|
|
@@ -130,16 +173,16 @@ function setAttribute(node, name, value) {
|
|
|
130
173
|
}
|
|
131
174
|
function setAttributeNS(node, namespace, name, value) {
|
|
132
175
|
if (isHydrating(node)) return;
|
|
133
|
-
if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
|
|
176
|
+
if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
|
|
134
177
|
}
|
|
135
|
-
function className(node, value,
|
|
178
|
+
function className(node, value, prev) {
|
|
136
179
|
if (isHydrating(node)) return;
|
|
137
180
|
if (value == null || value === false) {
|
|
138
181
|
prev && node.removeAttribute("class");
|
|
139
182
|
return;
|
|
140
183
|
}
|
|
141
184
|
if (typeof value === "string") {
|
|
142
|
-
value !== prev &&
|
|
185
|
+
value !== prev && node.setAttribute("class", value);
|
|
143
186
|
return;
|
|
144
187
|
}
|
|
145
188
|
if (typeof prev === "string") {
|
|
@@ -182,7 +225,6 @@ function style(node, value, prev) {
|
|
|
182
225
|
if (typeof value === "string") return nodeStyle.cssText = value;
|
|
183
226
|
typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
|
|
184
227
|
prev || (prev = {});
|
|
185
|
-
value || (value = {});
|
|
186
228
|
let v, s;
|
|
187
229
|
for (s in value) {
|
|
188
230
|
v = value[s];
|
|
@@ -194,14 +236,9 @@ function style(node, value, prev) {
|
|
|
194
236
|
function setStyleProperty(node, name, value) {
|
|
195
237
|
value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
|
|
196
238
|
}
|
|
197
|
-
function spread(node, props = {},
|
|
239
|
+
function spread(node, props = {}, skipChildren) {
|
|
198
240
|
const prevProps = {};
|
|
199
|
-
if (!skipChildren)
|
|
200
|
-
effect(() => normalize(props.children, prevProps.children), value => {
|
|
201
|
-
insertExpression(node, value, prevProps.children);
|
|
202
|
-
prevProps.children = value;
|
|
203
|
-
});
|
|
204
|
-
}
|
|
241
|
+
if (!skipChildren) insert(node, () => props.children);
|
|
205
242
|
effect(() => {
|
|
206
243
|
const r = props.ref;
|
|
207
244
|
(typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
|
|
@@ -213,7 +250,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
|
|
|
213
250
|
newProps[prop] = props[prop];
|
|
214
251
|
}
|
|
215
252
|
return newProps;
|
|
216
|
-
}, props => assign(node, props,
|
|
253
|
+
}, props => assign(node, props, true, prevProps, true));
|
|
217
254
|
return prevProps;
|
|
218
255
|
}
|
|
219
256
|
function dynamicProperty(props, key) {
|
|
@@ -233,41 +270,79 @@ function ref(fn, element) {
|
|
|
233
270
|
const resolved = untrack(fn);
|
|
234
271
|
runWithOwner(null, () => applyRef(resolved, element));
|
|
235
272
|
}
|
|
236
|
-
function insert(parent, accessor, marker, initial) {
|
|
273
|
+
function insert(parent, accessor, marker, initial, options) {
|
|
274
|
+
const childRoot = getChildRoot(parent);
|
|
237
275
|
const multi = marker !== undefined;
|
|
238
276
|
if (multi && !initial) initial = [];
|
|
239
|
-
if (isHydrating(parent)
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
277
|
+
if (isHydrating(parent)) {
|
|
278
|
+
if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
|
|
279
|
+
if (Array.isArray(initial)) {
|
|
280
|
+
let j = 0;
|
|
281
|
+
for (let i = 0; i < initial.length; i++) {
|
|
282
|
+
if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
|
|
283
|
+
}
|
|
284
|
+
initial.length = j;
|
|
243
285
|
}
|
|
244
|
-
initial.length = j;
|
|
245
286
|
}
|
|
246
287
|
if (typeof accessor !== "function") {
|
|
247
288
|
accessor = normalize(accessor, initial, multi, true);
|
|
248
289
|
if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
|
|
249
290
|
}
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
291
|
+
if (multi && initial.length === 0) {
|
|
292
|
+
const placeholder = document.createTextNode("");
|
|
293
|
+
childRoot.insertBefore(placeholder, marker);
|
|
294
|
+
initial = [placeholder];
|
|
295
|
+
}
|
|
296
|
+
let current = initial;
|
|
297
|
+
effect(() => {
|
|
298
|
+
const value = normalize(accessor(), current, multi, true);
|
|
299
|
+
if (typeof value !== "function") return value;
|
|
300
|
+
effect(() => normalize(value, current, multi), inner => {
|
|
301
|
+
insertExpression(parent, inner, current, marker);
|
|
302
|
+
current = inner;
|
|
303
|
+
}, options);
|
|
304
|
+
return INNER_OWNED;
|
|
305
|
+
}, value => {
|
|
306
|
+
if (value === INNER_OWNED) return;
|
|
307
|
+
insertExpression(parent, value, current, marker);
|
|
308
|
+
current = value;
|
|
309
|
+
}, options);
|
|
310
|
+
}
|
|
311
|
+
function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
|
|
312
|
+
const nodeName = node.nodeName;
|
|
253
313
|
props || (props = {});
|
|
254
314
|
for (const prop in prevProps) {
|
|
255
315
|
if (!(prop in props)) {
|
|
256
316
|
if (prop === "children") continue;
|
|
257
|
-
prevProps[prop] = assignProp(node, prop, null, prevProps[prop],
|
|
317
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
|
|
258
318
|
}
|
|
259
319
|
}
|
|
260
320
|
for (const prop in props) {
|
|
261
321
|
if (prop === "children") {
|
|
262
|
-
if (!skipChildren) insertExpression(node, props.children);
|
|
322
|
+
if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
|
|
263
323
|
continue;
|
|
264
324
|
}
|
|
265
|
-
|
|
266
|
-
|
|
325
|
+
prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
function loadModuleAssets(mapping) {
|
|
329
|
+
const hy = globalThis._$HY;
|
|
330
|
+
if (!hy) return;
|
|
331
|
+
const pending = [];
|
|
332
|
+
for (const moduleUrl in mapping) {
|
|
333
|
+
if (hy.modules[moduleUrl]) continue;
|
|
334
|
+
const entryUrl = mapping[moduleUrl];
|
|
335
|
+
if (!hy.loading[moduleUrl]) {
|
|
336
|
+
hy.loading[moduleUrl] = import(entryUrl).then(mod => {
|
|
337
|
+
hy.modules[moduleUrl] = mod;
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
pending.push(hy.loading[moduleUrl]);
|
|
267
341
|
}
|
|
342
|
+
return pending.length ? Promise.all(pending).then(() => {}) : undefined;
|
|
268
343
|
}
|
|
269
344
|
function hydrate$1(code, element, options = {}) {
|
|
270
|
-
if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
|
|
345
|
+
if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
271
346
|
options.renderId ||= "";
|
|
272
347
|
if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
|
|
273
348
|
if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
|
|
@@ -276,6 +351,7 @@ function hydrate$1(code, element, options = {}) {
|
|
|
276
351
|
sharedConfig.load = id => globalThis._$HY.r[id];
|
|
277
352
|
sharedConfig.has = id => id in globalThis._$HY.r;
|
|
278
353
|
sharedConfig.gather = root => gatherHydratable(element, root);
|
|
354
|
+
sharedConfig.loadModuleAssets = loadModuleAssets;
|
|
279
355
|
sharedConfig.cleanupFragment = id => {
|
|
280
356
|
const tpl = document.getElementById("pl-" + id);
|
|
281
357
|
if (tpl) {
|
|
@@ -294,9 +370,27 @@ function hydrate$1(code, element, options = {}) {
|
|
|
294
370
|
};
|
|
295
371
|
sharedConfig.registry = new Map();
|
|
296
372
|
sharedConfig.hydrating = true;
|
|
373
|
+
const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
|
|
374
|
+
if (rootMapping && typeof rootMapping === "object") {
|
|
375
|
+
const p = loadModuleAssets(rootMapping);
|
|
376
|
+
if (p) {
|
|
377
|
+
gatherHydratable(element, options.renderId);
|
|
378
|
+
let disposer;
|
|
379
|
+
p.then(() => {
|
|
380
|
+
try {
|
|
381
|
+
disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
382
|
+
} finally {
|
|
383
|
+
sharedConfig.hydrating = false;
|
|
384
|
+
}
|
|
385
|
+
}, () => {
|
|
386
|
+
sharedConfig.hydrating = false;
|
|
387
|
+
});
|
|
388
|
+
return () => disposer && disposer();
|
|
389
|
+
}
|
|
390
|
+
}
|
|
297
391
|
try {
|
|
298
392
|
gatherHydratable(element, options.renderId);
|
|
299
|
-
return render(code, element, [...element.childNodes], options);
|
|
393
|
+
return render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
300
394
|
} finally {
|
|
301
395
|
sharedConfig.hydrating = false;
|
|
302
396
|
}
|
|
@@ -339,7 +433,7 @@ function getNextMarker(start) {
|
|
|
339
433
|
return [end, current];
|
|
340
434
|
}
|
|
341
435
|
function getFirstChild(node, expectedTag) {
|
|
342
|
-
const child = node.firstChild;
|
|
436
|
+
const child = getChildRoot(node).firstChild;
|
|
343
437
|
return child;
|
|
344
438
|
}
|
|
345
439
|
function getNextSibling(node, expectedTag) {
|
|
@@ -372,6 +466,9 @@ function runHydrationEvents() {
|
|
|
372
466
|
function isHydrating(node) {
|
|
373
467
|
return sharedConfig.hydrating && (!node || node.isConnected);
|
|
374
468
|
}
|
|
469
|
+
function getChildRoot(node) {
|
|
470
|
+
return node && node.localName === "template" ? node.content : node;
|
|
471
|
+
}
|
|
375
472
|
function toggleClassKey(node, key, value) {
|
|
376
473
|
const classNames = key.trim().split(/\s+/);
|
|
377
474
|
for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
|
|
@@ -390,18 +487,20 @@ function flattenClassList(list, result) {
|
|
|
390
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;
|
|
391
488
|
}
|
|
392
489
|
}
|
|
393
|
-
function assignProp(node, prop, value, prev,
|
|
394
|
-
let forceProp;
|
|
490
|
+
function assignProp(node, prop, value, prev, skipRef, nodeName) {
|
|
395
491
|
if (prop === "style") return style(node, value, prev), value;
|
|
396
|
-
if (prop === "class") return className(node, value,
|
|
397
|
-
if (value === prev) return prev;
|
|
492
|
+
if (prop === "class") return className(node, value, prev), value;
|
|
493
|
+
if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
|
|
398
494
|
if (prop === "ref") {
|
|
399
495
|
if (!skipRef && value) ref(() => value, node);
|
|
400
|
-
|
|
496
|
+
return value;
|
|
497
|
+
}
|
|
498
|
+
const hasNamespace = prop.indexOf(":") > -1;
|
|
499
|
+
if (hasNamespace && prop.slice(0, 3) === "on:") {
|
|
401
500
|
const e = prop.slice(3);
|
|
402
501
|
prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
|
|
403
502
|
value && node.addEventListener(e, value, typeof value !== "function" && value);
|
|
404
|
-
} else if (prop.slice(0, 2) === "on") {
|
|
503
|
+
} else if (!hasNamespace && prop.slice(0, 2) === "on") {
|
|
405
504
|
const name = prop.slice(2).toLowerCase();
|
|
406
505
|
const delegate = DelegatedEvents.has(name);
|
|
407
506
|
if (!delegate && prev) {
|
|
@@ -412,11 +511,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
|
|
|
412
511
|
addEventListener(node, name, value, delegate);
|
|
413
512
|
delegate && delegateEvents([name]);
|
|
414
513
|
}
|
|
415
|
-
} else if (
|
|
416
|
-
if (
|
|
417
|
-
if (prop === "value" &&
|
|
514
|
+
} else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
|
|
515
|
+
if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
|
|
516
|
+
if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
|
|
418
517
|
} else {
|
|
419
|
-
const ns =
|
|
518
|
+
const ns = hasNamespace && Namespaces[prop.split(":")[0]];
|
|
420
519
|
if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
|
|
421
520
|
}
|
|
422
521
|
return value;
|
|
@@ -474,21 +573,22 @@ function eventHandler(e) {
|
|
|
474
573
|
function insertExpression(parent, value, current, marker) {
|
|
475
574
|
if (isHydrating(parent)) return;
|
|
476
575
|
if (value === current) return;
|
|
576
|
+
const childRoot = getChildRoot(parent);
|
|
477
577
|
const t = typeof value,
|
|
478
578
|
multi = marker !== undefined;
|
|
479
579
|
if (t === "string" || t === "number") {
|
|
480
580
|
const tc = typeof current;
|
|
481
581
|
if (tc === "string" || tc === "number") {
|
|
482
|
-
|
|
483
|
-
} else
|
|
582
|
+
childRoot.firstChild.data = value;
|
|
583
|
+
} else childRoot.textContent = value;
|
|
484
584
|
} else if (value === undefined) {
|
|
485
585
|
cleanChildren(parent, current, marker);
|
|
486
586
|
} else if (value.nodeType) {
|
|
487
587
|
if (Array.isArray(current)) {
|
|
488
588
|
cleanChildren(parent, current, multi ? marker : null, value);
|
|
489
|
-
} else if (current === undefined || !
|
|
490
|
-
|
|
491
|
-
} else
|
|
589
|
+
} else if (current === undefined || !childRoot.firstChild) {
|
|
590
|
+
childRoot.appendChild(value);
|
|
591
|
+
} else childRoot.replaceChild(value, childRoot.firstChild);
|
|
492
592
|
} else if (Array.isArray(value)) {
|
|
493
593
|
const currentArray = current && Array.isArray(current);
|
|
494
594
|
if (value.length === 0) {
|
|
@@ -496,7 +596,7 @@ function insertExpression(parent, value, current, marker) {
|
|
|
496
596
|
} else if (currentArray) {
|
|
497
597
|
if (current.length === 0) {
|
|
498
598
|
appendNodes(parent, value, marker);
|
|
499
|
-
} else reconcileArrays(
|
|
599
|
+
} else reconcileArrays(childRoot, current, value);
|
|
500
600
|
} else {
|
|
501
601
|
current && cleanChildren(parent);
|
|
502
602
|
appendNodes(parent, value);
|
|
@@ -521,9 +621,11 @@ function normalize(value, current, multi, doNotUnwrap) {
|
|
|
521
621
|
return value;
|
|
522
622
|
}
|
|
523
623
|
function appendNodes(parent, array, marker = null) {
|
|
624
|
+
parent = getChildRoot(parent);
|
|
524
625
|
for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
|
|
525
626
|
}
|
|
526
627
|
function cleanChildren(parent, current, marker, replacement) {
|
|
628
|
+
parent = getChildRoot(parent);
|
|
527
629
|
if (marker === undefined) return parent.textContent = "";
|
|
528
630
|
if (current.length) {
|
|
529
631
|
let inserted = false;
|
|
@@ -547,12 +649,6 @@ function gatherHydratable(element, root) {
|
|
|
547
649
|
function getHydrationKey() {
|
|
548
650
|
return sharedConfig.getNextContextId();
|
|
549
651
|
}
|
|
550
|
-
function NoHydration(props) {
|
|
551
|
-
return sharedConfig.hydrating ? undefined : props.children;
|
|
552
|
-
}
|
|
553
|
-
function Hydration(props) {
|
|
554
|
-
return props.children;
|
|
555
|
-
}
|
|
556
652
|
const voidFn = () => undefined;
|
|
557
653
|
const RequestContext = Symbol();
|
|
558
654
|
|
|
@@ -578,13 +674,21 @@ function ssrHydrationKey() {}
|
|
|
578
674
|
function resolveSSRNode(node) {}
|
|
579
675
|
function escape(html) {}
|
|
580
676
|
|
|
677
|
+
const mergeProps = merge;
|
|
581
678
|
const isServer = false;
|
|
582
679
|
const isDev = false;
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
680
|
+
function render(code, element, init, options = {}) {
|
|
681
|
+
try {
|
|
682
|
+
const dispose = render$1(code, element, init, {
|
|
683
|
+
...options,
|
|
684
|
+
insertOptions: {
|
|
685
|
+
schedule: true
|
|
686
|
+
}
|
|
687
|
+
});
|
|
688
|
+
flush();
|
|
689
|
+
return dispose;
|
|
690
|
+
} finally {
|
|
691
|
+
}
|
|
588
692
|
}
|
|
589
693
|
const hydrate = (...args) => {
|
|
590
694
|
enableHydration();
|
|
@@ -610,6 +714,33 @@ function Portal(props) {
|
|
|
610
714
|
});
|
|
611
715
|
return treeMarker;
|
|
612
716
|
}
|
|
717
|
+
function dynamic(source) {
|
|
718
|
+
const cached = createMemo(source, {
|
|
719
|
+
lazy: true
|
|
720
|
+
});
|
|
721
|
+
return props => {
|
|
722
|
+
return createMemo(() => {
|
|
723
|
+
const component = cached();
|
|
724
|
+
switch (typeof component) {
|
|
725
|
+
case "function":
|
|
726
|
+
return untrack(() => component(props));
|
|
727
|
+
case "string":
|
|
728
|
+
const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
|
|
729
|
+
spread(el, props);
|
|
730
|
+
return el;
|
|
731
|
+
}
|
|
732
|
+
});
|
|
733
|
+
};
|
|
734
|
+
}
|
|
735
|
+
function Dynamic(props) {
|
|
736
|
+
const Comp = dynamic(() => props.component);
|
|
737
|
+
return createComponent(Comp, omit(props, "component"));
|
|
738
|
+
}
|
|
739
|
+
function createElement(tagName, is = undefined) {
|
|
740
|
+
return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
|
|
741
|
+
is
|
|
742
|
+
});
|
|
743
|
+
}
|
|
613
744
|
function createElementProxy(el, marker) {
|
|
614
745
|
return new Proxy(el, {
|
|
615
746
|
get(target, prop) {
|
|
@@ -627,24 +758,5 @@ function createElementProxy(el, marker) {
|
|
|
627
758
|
}
|
|
628
759
|
});
|
|
629
760
|
}
|
|
630
|
-
function createDynamic(component, props) {
|
|
631
|
-
const cached = createMemo(component);
|
|
632
|
-
return createMemo(() => {
|
|
633
|
-
const component = cached();
|
|
634
|
-
switch (typeof component) {
|
|
635
|
-
case "function":
|
|
636
|
-
return untrack(() => component(props));
|
|
637
|
-
case "string":
|
|
638
|
-
const isSvg = SVGElements.has(component);
|
|
639
|
-
const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
|
|
640
|
-
spread(el, props, isSvg);
|
|
641
|
-
return el;
|
|
642
|
-
}
|
|
643
|
-
});
|
|
644
|
-
}
|
|
645
|
-
function Dynamic(props) {
|
|
646
|
-
const others = omit(props, "component");
|
|
647
|
-
return createDynamic(() => props.component, others);
|
|
648
|
-
}
|
|
649
761
|
|
|
650
|
-
export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic,
|
|
762
|
+
export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
|