@solidjs/web 2.0.0-beta.1 → 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 +223 -95
- package/dist/dev.js +211 -91
- package/dist/server.cjs +184 -79
- package/dist/server.js +178 -79
- package/dist/web.cjs +209 -86
- package/dist/web.js +197 -82
- 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 -15
- 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 -17
- 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, Hydration, Loading, Match, NoHydration, 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,11 +270,12 @@ 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
277
|
if (isHydrating(parent)) {
|
|
240
|
-
if (!multi && initial === undefined && parent) initial = [...
|
|
278
|
+
if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
|
|
241
279
|
if (Array.isArray(initial)) {
|
|
242
280
|
let j = 0;
|
|
243
281
|
for (let i = 0; i < initial.length; i++) {
|
|
@@ -250,27 +288,61 @@ function insert(parent, accessor, marker, initial) {
|
|
|
250
288
|
accessor = normalize(accessor, initial, multi, true);
|
|
251
289
|
if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
|
|
252
290
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
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;
|
|
256
313
|
props || (props = {});
|
|
257
314
|
for (const prop in prevProps) {
|
|
258
315
|
if (!(prop in props)) {
|
|
259
316
|
if (prop === "children") continue;
|
|
260
|
-
prevProps[prop] = assignProp(node, prop, null, prevProps[prop],
|
|
317
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
|
|
261
318
|
}
|
|
262
319
|
}
|
|
263
320
|
for (const prop in props) {
|
|
264
321
|
if (prop === "children") {
|
|
265
|
-
if (!skipChildren) insertExpression(node, props.children);
|
|
322
|
+
if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
|
|
266
323
|
continue;
|
|
267
324
|
}
|
|
268
|
-
|
|
269
|
-
|
|
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]);
|
|
270
341
|
}
|
|
342
|
+
return pending.length ? Promise.all(pending).then(() => {}) : undefined;
|
|
271
343
|
}
|
|
272
344
|
function hydrate$1(code, element, options = {}) {
|
|
273
|
-
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);
|
|
274
346
|
options.renderId ||= "";
|
|
275
347
|
if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
|
|
276
348
|
if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
|
|
@@ -279,6 +351,7 @@ function hydrate$1(code, element, options = {}) {
|
|
|
279
351
|
sharedConfig.load = id => globalThis._$HY.r[id];
|
|
280
352
|
sharedConfig.has = id => id in globalThis._$HY.r;
|
|
281
353
|
sharedConfig.gather = root => gatherHydratable(element, root);
|
|
354
|
+
sharedConfig.loadModuleAssets = loadModuleAssets;
|
|
282
355
|
sharedConfig.cleanupFragment = id => {
|
|
283
356
|
const tpl = document.getElementById("pl-" + id);
|
|
284
357
|
if (tpl) {
|
|
@@ -297,9 +370,27 @@ function hydrate$1(code, element, options = {}) {
|
|
|
297
370
|
};
|
|
298
371
|
sharedConfig.registry = new Map();
|
|
299
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
|
+
}
|
|
300
391
|
try {
|
|
301
392
|
gatherHydratable(element, options.renderId);
|
|
302
|
-
return render(code, element, [...element.childNodes], options);
|
|
393
|
+
return render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
303
394
|
} finally {
|
|
304
395
|
sharedConfig.hydrating = false;
|
|
305
396
|
}
|
|
@@ -342,7 +433,7 @@ function getNextMarker(start) {
|
|
|
342
433
|
return [end, current];
|
|
343
434
|
}
|
|
344
435
|
function getFirstChild(node, expectedTag) {
|
|
345
|
-
const child = node.firstChild;
|
|
436
|
+
const child = getChildRoot(node).firstChild;
|
|
346
437
|
return child;
|
|
347
438
|
}
|
|
348
439
|
function getNextSibling(node, expectedTag) {
|
|
@@ -375,6 +466,9 @@ function runHydrationEvents() {
|
|
|
375
466
|
function isHydrating(node) {
|
|
376
467
|
return sharedConfig.hydrating && (!node || node.isConnected);
|
|
377
468
|
}
|
|
469
|
+
function getChildRoot(node) {
|
|
470
|
+
return node && node.localName === "template" ? node.content : node;
|
|
471
|
+
}
|
|
378
472
|
function toggleClassKey(node, key, value) {
|
|
379
473
|
const classNames = key.trim().split(/\s+/);
|
|
380
474
|
for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
|
|
@@ -393,18 +487,20 @@ function flattenClassList(list, result) {
|
|
|
393
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;
|
|
394
488
|
}
|
|
395
489
|
}
|
|
396
|
-
function assignProp(node, prop, value, prev,
|
|
397
|
-
let forceProp;
|
|
490
|
+
function assignProp(node, prop, value, prev, skipRef, nodeName) {
|
|
398
491
|
if (prop === "style") return style(node, value, prev), value;
|
|
399
|
-
if (prop === "class") return className(node, value,
|
|
400
|
-
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;
|
|
401
494
|
if (prop === "ref") {
|
|
402
495
|
if (!skipRef && value) ref(() => value, node);
|
|
403
|
-
|
|
496
|
+
return value;
|
|
497
|
+
}
|
|
498
|
+
const hasNamespace = prop.indexOf(":") > -1;
|
|
499
|
+
if (hasNamespace && prop.slice(0, 3) === "on:") {
|
|
404
500
|
const e = prop.slice(3);
|
|
405
501
|
prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
|
|
406
502
|
value && node.addEventListener(e, value, typeof value !== "function" && value);
|
|
407
|
-
} else if (prop.slice(0, 2) === "on") {
|
|
503
|
+
} else if (!hasNamespace && prop.slice(0, 2) === "on") {
|
|
408
504
|
const name = prop.slice(2).toLowerCase();
|
|
409
505
|
const delegate = DelegatedEvents.has(name);
|
|
410
506
|
if (!delegate && prev) {
|
|
@@ -415,11 +511,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
|
|
|
415
511
|
addEventListener(node, name, value, delegate);
|
|
416
512
|
delegate && delegateEvents([name]);
|
|
417
513
|
}
|
|
418
|
-
} else if (
|
|
419
|
-
if (
|
|
420
|
-
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;
|
|
421
517
|
} else {
|
|
422
|
-
const ns =
|
|
518
|
+
const ns = hasNamespace && Namespaces[prop.split(":")[0]];
|
|
423
519
|
if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
|
|
424
520
|
}
|
|
425
521
|
return value;
|
|
@@ -477,21 +573,22 @@ function eventHandler(e) {
|
|
|
477
573
|
function insertExpression(parent, value, current, marker) {
|
|
478
574
|
if (isHydrating(parent)) return;
|
|
479
575
|
if (value === current) return;
|
|
576
|
+
const childRoot = getChildRoot(parent);
|
|
480
577
|
const t = typeof value,
|
|
481
578
|
multi = marker !== undefined;
|
|
482
579
|
if (t === "string" || t === "number") {
|
|
483
580
|
const tc = typeof current;
|
|
484
581
|
if (tc === "string" || tc === "number") {
|
|
485
|
-
|
|
486
|
-
} else
|
|
582
|
+
childRoot.firstChild.data = value;
|
|
583
|
+
} else childRoot.textContent = value;
|
|
487
584
|
} else if (value === undefined) {
|
|
488
585
|
cleanChildren(parent, current, marker);
|
|
489
586
|
} else if (value.nodeType) {
|
|
490
587
|
if (Array.isArray(current)) {
|
|
491
588
|
cleanChildren(parent, current, multi ? marker : null, value);
|
|
492
|
-
} else if (current === undefined || !
|
|
493
|
-
|
|
494
|
-
} else
|
|
589
|
+
} else if (current === undefined || !childRoot.firstChild) {
|
|
590
|
+
childRoot.appendChild(value);
|
|
591
|
+
} else childRoot.replaceChild(value, childRoot.firstChild);
|
|
495
592
|
} else if (Array.isArray(value)) {
|
|
496
593
|
const currentArray = current && Array.isArray(current);
|
|
497
594
|
if (value.length === 0) {
|
|
@@ -499,7 +596,7 @@ function insertExpression(parent, value, current, marker) {
|
|
|
499
596
|
} else if (currentArray) {
|
|
500
597
|
if (current.length === 0) {
|
|
501
598
|
appendNodes(parent, value, marker);
|
|
502
|
-
} else reconcileArrays(
|
|
599
|
+
} else reconcileArrays(childRoot, current, value);
|
|
503
600
|
} else {
|
|
504
601
|
current && cleanChildren(parent);
|
|
505
602
|
appendNodes(parent, value);
|
|
@@ -524,9 +621,11 @@ function normalize(value, current, multi, doNotUnwrap) {
|
|
|
524
621
|
return value;
|
|
525
622
|
}
|
|
526
623
|
function appendNodes(parent, array, marker = null) {
|
|
624
|
+
parent = getChildRoot(parent);
|
|
527
625
|
for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
|
|
528
626
|
}
|
|
529
627
|
function cleanChildren(parent, current, marker, replacement) {
|
|
628
|
+
parent = getChildRoot(parent);
|
|
530
629
|
if (marker === undefined) return parent.textContent = "";
|
|
531
630
|
if (current.length) {
|
|
532
631
|
let inserted = false;
|
|
@@ -575,13 +674,21 @@ function ssrHydrationKey() {}
|
|
|
575
674
|
function resolveSSRNode(node) {}
|
|
576
675
|
function escape(html) {}
|
|
577
676
|
|
|
677
|
+
const mergeProps = merge;
|
|
578
678
|
const isServer = false;
|
|
579
679
|
const isDev = false;
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
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
|
+
}
|
|
585
692
|
}
|
|
586
693
|
const hydrate = (...args) => {
|
|
587
694
|
enableHydration();
|
|
@@ -607,6 +714,33 @@ function Portal(props) {
|
|
|
607
714
|
});
|
|
608
715
|
return treeMarker;
|
|
609
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
|
+
}
|
|
610
744
|
function createElementProxy(el, marker) {
|
|
611
745
|
return new Proxy(el, {
|
|
612
746
|
get(target, prop) {
|
|
@@ -624,24 +758,5 @@ function createElementProxy(el, marker) {
|
|
|
624
758
|
}
|
|
625
759
|
});
|
|
626
760
|
}
|
|
627
|
-
function createDynamic(component, props) {
|
|
628
|
-
const cached = createMemo(component);
|
|
629
|
-
return createMemo(() => {
|
|
630
|
-
const component = cached();
|
|
631
|
-
switch (typeof component) {
|
|
632
|
-
case "function":
|
|
633
|
-
return untrack(() => component(props));
|
|
634
|
-
case "string":
|
|
635
|
-
const isSvg = SVGElements.has(component);
|
|
636
|
-
const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
|
|
637
|
-
spread(el, props, isSvg);
|
|
638
|
-
return el;
|
|
639
|
-
}
|
|
640
|
-
});
|
|
641
|
-
}
|
|
642
|
-
function Dynamic(props) {
|
|
643
|
-
const others = omit(props, "component");
|
|
644
|
-
return createDynamic(() => props.component, others);
|
|
645
|
-
}
|
|
646
761
|
|
|
647
|
-
export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal,
|
|
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 };
|