@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.cjs
CHANGED
|
@@ -2,8 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
var solidJs = require('solid-js');
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const DOMWithState = {
|
|
6
|
+
INPUT: {
|
|
7
|
+
value: 1,
|
|
8
|
+
defaultValue: 2,
|
|
9
|
+
checked: 1,
|
|
10
|
+
defaultChecked: 2
|
|
11
|
+
},
|
|
12
|
+
SELECT: {
|
|
13
|
+
value: 1
|
|
14
|
+
},
|
|
15
|
+
OPTION: {
|
|
16
|
+
value: 1,
|
|
17
|
+
selected: 1,
|
|
18
|
+
defaultSelected: 2
|
|
19
|
+
},
|
|
20
|
+
TEXTAREA: {
|
|
21
|
+
value: 1,
|
|
22
|
+
defaultValue: 2
|
|
23
|
+
},
|
|
24
|
+
VIDEO: {
|
|
25
|
+
muted: 1,
|
|
26
|
+
defaultMuted: 2
|
|
27
|
+
},
|
|
28
|
+
AUDIO: {
|
|
29
|
+
muted: 1,
|
|
30
|
+
defaultMuted: 2
|
|
31
|
+
}
|
|
32
|
+
};
|
|
7
33
|
const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
|
|
8
34
|
const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
|
|
9
35
|
const SVGElements = /*#__PURE__*/new Set([
|
|
@@ -11,17 +37,26 @@ const SVGElements = /*#__PURE__*/new Set([
|
|
|
11
37
|
"set", "stop",
|
|
12
38
|
"svg", "switch", "symbol", "text", "textPath",
|
|
13
39
|
"tref", "tspan", "use", "view", "vkern"]);
|
|
14
|
-
const
|
|
40
|
+
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"]);
|
|
41
|
+
const Namespaces = {
|
|
42
|
+
svg: "http://www.w3.org/2000/svg",
|
|
43
|
+
mathml: "http://www.w3.org/1998/Math/MathML",
|
|
15
44
|
xlink: "http://www.w3.org/1999/xlink",
|
|
16
45
|
xml: "http://www.w3.org/XML/1998/namespace"
|
|
17
46
|
};
|
|
47
|
+
const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
|
|
48
|
+
const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
|
|
18
49
|
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",
|
|
19
50
|
"webview",
|
|
20
51
|
"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
|
|
21
52
|
|
|
22
|
-
const
|
|
53
|
+
const transparentOptions = {
|
|
23
54
|
transparent: true
|
|
24
|
-
}
|
|
55
|
+
};
|
|
56
|
+
const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
|
|
57
|
+
transparent: true,
|
|
58
|
+
...options
|
|
59
|
+
} : transparentOptions);
|
|
25
60
|
const memo = fn => solidJs.createMemo(() => fn());
|
|
26
61
|
|
|
27
62
|
function reconcileArrays(parentNode, a, b) {
|
|
@@ -82,27 +117,35 @@ function reconcileArrays(parentNode, a, b) {
|
|
|
82
117
|
}
|
|
83
118
|
|
|
84
119
|
const $$EVENTS = "_$DX_DELEGATE";
|
|
85
|
-
|
|
120
|
+
const INNER_OWNED = {};
|
|
121
|
+
function render$1(code, element, init, options = {}) {
|
|
122
|
+
const renderRoot = getChildRoot(element);
|
|
86
123
|
let disposer;
|
|
87
124
|
solidJs.createRoot(dispose => {
|
|
88
125
|
disposer = dispose;
|
|
89
|
-
element === document
|
|
126
|
+
if (element === document) {
|
|
127
|
+
const tree = code();
|
|
128
|
+
effect(() => solidJs.flatten(tree), () => {});
|
|
129
|
+
} else {
|
|
130
|
+
const tree = code();
|
|
131
|
+
insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
|
|
132
|
+
}
|
|
90
133
|
}, {
|
|
91
134
|
id: options.renderId
|
|
92
135
|
});
|
|
93
136
|
return () => {
|
|
94
137
|
disposer();
|
|
95
|
-
|
|
138
|
+
renderRoot.textContent = "";
|
|
96
139
|
};
|
|
97
140
|
}
|
|
98
|
-
function
|
|
141
|
+
function create(html, bypassGuard, flag) {
|
|
142
|
+
const t = document.createElement("template");
|
|
143
|
+
t.innerHTML = html;
|
|
144
|
+
return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
|
|
145
|
+
}
|
|
146
|
+
function template(html, flag) {
|
|
99
147
|
let node;
|
|
100
|
-
const
|
|
101
|
-
const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
|
|
102
|
-
t.innerHTML = html;
|
|
103
|
-
return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
|
|
104
|
-
};
|
|
105
|
-
const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
|
|
148
|
+
const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
|
|
106
149
|
return fn;
|
|
107
150
|
}
|
|
108
151
|
function delegateEvents(eventNames, document = window.document) {
|
|
@@ -131,16 +174,16 @@ function setAttribute(node, name, value) {
|
|
|
131
174
|
}
|
|
132
175
|
function setAttributeNS(node, namespace, name, value) {
|
|
133
176
|
if (isHydrating(node)) return;
|
|
134
|
-
if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
|
|
177
|
+
if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
|
|
135
178
|
}
|
|
136
|
-
function className(node, value,
|
|
179
|
+
function className(node, value, prev) {
|
|
137
180
|
if (isHydrating(node)) return;
|
|
138
181
|
if (value == null || value === false) {
|
|
139
182
|
prev && node.removeAttribute("class");
|
|
140
183
|
return;
|
|
141
184
|
}
|
|
142
185
|
if (typeof value === "string") {
|
|
143
|
-
value !== prev &&
|
|
186
|
+
value !== prev && node.setAttribute("class", value);
|
|
144
187
|
return;
|
|
145
188
|
}
|
|
146
189
|
if (typeof prev === "string") {
|
|
@@ -183,7 +226,6 @@ function style(node, value, prev) {
|
|
|
183
226
|
if (typeof value === "string") return nodeStyle.cssText = value;
|
|
184
227
|
typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
|
|
185
228
|
prev || (prev = {});
|
|
186
|
-
value || (value = {});
|
|
187
229
|
let v, s;
|
|
188
230
|
for (s in value) {
|
|
189
231
|
v = value[s];
|
|
@@ -195,14 +237,9 @@ function style(node, value, prev) {
|
|
|
195
237
|
function setStyleProperty(node, name, value) {
|
|
196
238
|
value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
|
|
197
239
|
}
|
|
198
|
-
function spread(node, props = {},
|
|
240
|
+
function spread(node, props = {}, skipChildren) {
|
|
199
241
|
const prevProps = {};
|
|
200
|
-
if (!skipChildren)
|
|
201
|
-
effect(() => normalize(props.children, prevProps.children), value => {
|
|
202
|
-
insertExpression(node, value, prevProps.children);
|
|
203
|
-
prevProps.children = value;
|
|
204
|
-
});
|
|
205
|
-
}
|
|
242
|
+
if (!skipChildren) insert(node, () => props.children);
|
|
206
243
|
effect(() => {
|
|
207
244
|
const r = props.ref;
|
|
208
245
|
(typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
|
|
@@ -214,7 +251,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
|
|
|
214
251
|
newProps[prop] = props[prop];
|
|
215
252
|
}
|
|
216
253
|
return newProps;
|
|
217
|
-
}, props => assign(node, props,
|
|
254
|
+
}, props => assign(node, props, true, prevProps, true));
|
|
218
255
|
return prevProps;
|
|
219
256
|
}
|
|
220
257
|
function dynamicProperty(props, key) {
|
|
@@ -234,11 +271,12 @@ function ref(fn, element) {
|
|
|
234
271
|
const resolved = solidJs.untrack(fn);
|
|
235
272
|
solidJs.runWithOwner(null, () => applyRef(resolved, element));
|
|
236
273
|
}
|
|
237
|
-
function insert(parent, accessor, marker, initial) {
|
|
274
|
+
function insert(parent, accessor, marker, initial, options) {
|
|
275
|
+
const childRoot = getChildRoot(parent);
|
|
238
276
|
const multi = marker !== undefined;
|
|
239
277
|
if (multi && !initial) initial = [];
|
|
240
278
|
if (isHydrating(parent)) {
|
|
241
|
-
if (!multi && initial === undefined && parent) initial = [...
|
|
279
|
+
if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
|
|
242
280
|
if (Array.isArray(initial)) {
|
|
243
281
|
let j = 0;
|
|
244
282
|
for (let i = 0; i < initial.length; i++) {
|
|
@@ -251,27 +289,61 @@ function insert(parent, accessor, marker, initial) {
|
|
|
251
289
|
accessor = normalize(accessor, initial, multi, true);
|
|
252
290
|
if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
|
|
253
291
|
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
292
|
+
if (multi && initial.length === 0) {
|
|
293
|
+
const placeholder = document.createTextNode("");
|
|
294
|
+
childRoot.insertBefore(placeholder, marker);
|
|
295
|
+
initial = [placeholder];
|
|
296
|
+
}
|
|
297
|
+
let current = initial;
|
|
298
|
+
effect(() => {
|
|
299
|
+
const value = normalize(accessor(), current, multi, true);
|
|
300
|
+
if (typeof value !== "function") return value;
|
|
301
|
+
effect(() => normalize(value, current, multi), inner => {
|
|
302
|
+
insertExpression(parent, inner, current, marker);
|
|
303
|
+
current = inner;
|
|
304
|
+
}, options);
|
|
305
|
+
return INNER_OWNED;
|
|
306
|
+
}, value => {
|
|
307
|
+
if (value === INNER_OWNED) return;
|
|
308
|
+
insertExpression(parent, value, current, marker);
|
|
309
|
+
current = value;
|
|
310
|
+
}, options);
|
|
311
|
+
}
|
|
312
|
+
function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
|
|
313
|
+
const nodeName = node.nodeName;
|
|
257
314
|
props || (props = {});
|
|
258
315
|
for (const prop in prevProps) {
|
|
259
316
|
if (!(prop in props)) {
|
|
260
317
|
if (prop === "children") continue;
|
|
261
|
-
prevProps[prop] = assignProp(node, prop, null, prevProps[prop],
|
|
318
|
+
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
|
|
262
319
|
}
|
|
263
320
|
}
|
|
264
321
|
for (const prop in props) {
|
|
265
322
|
if (prop === "children") {
|
|
266
|
-
if (!skipChildren) insertExpression(node, props.children);
|
|
323
|
+
if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
|
|
267
324
|
continue;
|
|
268
325
|
}
|
|
269
|
-
|
|
270
|
-
|
|
326
|
+
prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
function loadModuleAssets(mapping) {
|
|
330
|
+
const hy = globalThis._$HY;
|
|
331
|
+
if (!hy) return;
|
|
332
|
+
const pending = [];
|
|
333
|
+
for (const moduleUrl in mapping) {
|
|
334
|
+
if (hy.modules[moduleUrl]) continue;
|
|
335
|
+
const entryUrl = mapping[moduleUrl];
|
|
336
|
+
if (!hy.loading[moduleUrl]) {
|
|
337
|
+
hy.loading[moduleUrl] = import(entryUrl).then(mod => {
|
|
338
|
+
hy.modules[moduleUrl] = mod;
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
pending.push(hy.loading[moduleUrl]);
|
|
271
342
|
}
|
|
343
|
+
return pending.length ? Promise.all(pending).then(() => {}) : undefined;
|
|
272
344
|
}
|
|
273
345
|
function hydrate$1(code, element, options = {}) {
|
|
274
|
-
if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
|
|
346
|
+
if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
275
347
|
options.renderId ||= "";
|
|
276
348
|
if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
|
|
277
349
|
if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
|
|
@@ -280,6 +352,7 @@ function hydrate$1(code, element, options = {}) {
|
|
|
280
352
|
solidJs.sharedConfig.load = id => globalThis._$HY.r[id];
|
|
281
353
|
solidJs.sharedConfig.has = id => id in globalThis._$HY.r;
|
|
282
354
|
solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
|
|
355
|
+
solidJs.sharedConfig.loadModuleAssets = loadModuleAssets;
|
|
283
356
|
solidJs.sharedConfig.cleanupFragment = id => {
|
|
284
357
|
const tpl = document.getElementById("pl-" + id);
|
|
285
358
|
if (tpl) {
|
|
@@ -298,9 +371,27 @@ function hydrate$1(code, element, options = {}) {
|
|
|
298
371
|
};
|
|
299
372
|
solidJs.sharedConfig.registry = new Map();
|
|
300
373
|
solidJs.sharedConfig.hydrating = true;
|
|
374
|
+
const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
|
|
375
|
+
if (rootMapping && typeof rootMapping === "object") {
|
|
376
|
+
const p = loadModuleAssets(rootMapping);
|
|
377
|
+
if (p) {
|
|
378
|
+
gatherHydratable(element, options.renderId);
|
|
379
|
+
let disposer;
|
|
380
|
+
p.then(() => {
|
|
381
|
+
try {
|
|
382
|
+
disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
383
|
+
} finally {
|
|
384
|
+
solidJs.sharedConfig.hydrating = false;
|
|
385
|
+
}
|
|
386
|
+
}, () => {
|
|
387
|
+
solidJs.sharedConfig.hydrating = false;
|
|
388
|
+
});
|
|
389
|
+
return () => disposer && disposer();
|
|
390
|
+
}
|
|
391
|
+
}
|
|
301
392
|
try {
|
|
302
393
|
gatherHydratable(element, options.renderId);
|
|
303
|
-
return render(code, element, [...element.childNodes], options);
|
|
394
|
+
return render$1(code, element, [...getChildRoot(element).childNodes], options);
|
|
304
395
|
} finally {
|
|
305
396
|
solidJs.sharedConfig.hydrating = false;
|
|
306
397
|
}
|
|
@@ -343,7 +434,7 @@ function getNextMarker(start) {
|
|
|
343
434
|
return [end, current];
|
|
344
435
|
}
|
|
345
436
|
function getFirstChild(node, expectedTag) {
|
|
346
|
-
const child = node.firstChild;
|
|
437
|
+
const child = getChildRoot(node).firstChild;
|
|
347
438
|
return child;
|
|
348
439
|
}
|
|
349
440
|
function getNextSibling(node, expectedTag) {
|
|
@@ -376,6 +467,9 @@ function runHydrationEvents() {
|
|
|
376
467
|
function isHydrating(node) {
|
|
377
468
|
return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
|
|
378
469
|
}
|
|
470
|
+
function getChildRoot(node) {
|
|
471
|
+
return node && node.localName === "template" ? node.content : node;
|
|
472
|
+
}
|
|
379
473
|
function toggleClassKey(node, key, value) {
|
|
380
474
|
const classNames = key.trim().split(/\s+/);
|
|
381
475
|
for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
|
|
@@ -394,18 +488,20 @@ function flattenClassList(list, result) {
|
|
|
394
488
|
if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
|
|
395
489
|
}
|
|
396
490
|
}
|
|
397
|
-
function assignProp(node, prop, value, prev,
|
|
398
|
-
let forceProp;
|
|
491
|
+
function assignProp(node, prop, value, prev, skipRef, nodeName) {
|
|
399
492
|
if (prop === "style") return style(node, value, prev), value;
|
|
400
|
-
if (prop === "class") return className(node, value,
|
|
401
|
-
if (value === prev) return prev;
|
|
493
|
+
if (prop === "class") return className(node, value, prev), value;
|
|
494
|
+
if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
|
|
402
495
|
if (prop === "ref") {
|
|
403
496
|
if (!skipRef && value) ref(() => value, node);
|
|
404
|
-
|
|
497
|
+
return value;
|
|
498
|
+
}
|
|
499
|
+
const hasNamespace = prop.indexOf(":") > -1;
|
|
500
|
+
if (hasNamespace && prop.slice(0, 3) === "on:") {
|
|
405
501
|
const e = prop.slice(3);
|
|
406
502
|
prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
|
|
407
503
|
value && node.addEventListener(e, value, typeof value !== "function" && value);
|
|
408
|
-
} else if (prop.slice(0, 2) === "on") {
|
|
504
|
+
} else if (!hasNamespace && prop.slice(0, 2) === "on") {
|
|
409
505
|
const name = prop.slice(2).toLowerCase();
|
|
410
506
|
const delegate = DelegatedEvents.has(name);
|
|
411
507
|
if (!delegate && prev) {
|
|
@@ -416,11 +512,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
|
|
|
416
512
|
addEventListener(node, name, value, delegate);
|
|
417
513
|
delegate && delegateEvents([name]);
|
|
418
514
|
}
|
|
419
|
-
} else if (
|
|
420
|
-
if (
|
|
421
|
-
if (prop === "value" &&
|
|
515
|
+
} else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
|
|
516
|
+
if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
|
|
517
|
+
if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
|
|
422
518
|
} else {
|
|
423
|
-
const ns =
|
|
519
|
+
const ns = hasNamespace && Namespaces[prop.split(":")[0]];
|
|
424
520
|
if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
|
|
425
521
|
}
|
|
426
522
|
return value;
|
|
@@ -478,21 +574,22 @@ function eventHandler(e) {
|
|
|
478
574
|
function insertExpression(parent, value, current, marker) {
|
|
479
575
|
if (isHydrating(parent)) return;
|
|
480
576
|
if (value === current) return;
|
|
577
|
+
const childRoot = getChildRoot(parent);
|
|
481
578
|
const t = typeof value,
|
|
482
579
|
multi = marker !== undefined;
|
|
483
580
|
if (t === "string" || t === "number") {
|
|
484
581
|
const tc = typeof current;
|
|
485
582
|
if (tc === "string" || tc === "number") {
|
|
486
|
-
|
|
487
|
-
} else
|
|
583
|
+
childRoot.firstChild.data = value;
|
|
584
|
+
} else childRoot.textContent = value;
|
|
488
585
|
} else if (value === undefined) {
|
|
489
586
|
cleanChildren(parent, current, marker);
|
|
490
587
|
} else if (value.nodeType) {
|
|
491
588
|
if (Array.isArray(current)) {
|
|
492
589
|
cleanChildren(parent, current, multi ? marker : null, value);
|
|
493
|
-
} else if (current === undefined || !
|
|
494
|
-
|
|
495
|
-
} else
|
|
590
|
+
} else if (current === undefined || !childRoot.firstChild) {
|
|
591
|
+
childRoot.appendChild(value);
|
|
592
|
+
} else childRoot.replaceChild(value, childRoot.firstChild);
|
|
496
593
|
} else if (Array.isArray(value)) {
|
|
497
594
|
const currentArray = current && Array.isArray(current);
|
|
498
595
|
if (value.length === 0) {
|
|
@@ -500,7 +597,7 @@ function insertExpression(parent, value, current, marker) {
|
|
|
500
597
|
} else if (currentArray) {
|
|
501
598
|
if (current.length === 0) {
|
|
502
599
|
appendNodes(parent, value, marker);
|
|
503
|
-
} else reconcileArrays(
|
|
600
|
+
} else reconcileArrays(childRoot, current, value);
|
|
504
601
|
} else {
|
|
505
602
|
current && cleanChildren(parent);
|
|
506
603
|
appendNodes(parent, value);
|
|
@@ -525,9 +622,11 @@ function normalize(value, current, multi, doNotUnwrap) {
|
|
|
525
622
|
return value;
|
|
526
623
|
}
|
|
527
624
|
function appendNodes(parent, array, marker = null) {
|
|
625
|
+
parent = getChildRoot(parent);
|
|
528
626
|
for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
|
|
529
627
|
}
|
|
530
628
|
function cleanChildren(parent, current, marker, replacement) {
|
|
629
|
+
parent = getChildRoot(parent);
|
|
531
630
|
if (marker === undefined) return parent.textContent = "";
|
|
532
631
|
if (current.length) {
|
|
533
632
|
let inserted = false;
|
|
@@ -576,13 +675,21 @@ function ssrHydrationKey() {}
|
|
|
576
675
|
function resolveSSRNode(node) {}
|
|
577
676
|
function escape(html) {}
|
|
578
677
|
|
|
678
|
+
const mergeProps = solidJs.merge;
|
|
579
679
|
const isServer = false;
|
|
580
680
|
const isDev = false;
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
681
|
+
function render(code, element, init, options = {}) {
|
|
682
|
+
try {
|
|
683
|
+
const dispose = render$1(code, element, init, {
|
|
684
|
+
...options,
|
|
685
|
+
insertOptions: {
|
|
686
|
+
schedule: true
|
|
687
|
+
}
|
|
688
|
+
});
|
|
689
|
+
solidJs.flush();
|
|
690
|
+
return dispose;
|
|
691
|
+
} finally {
|
|
692
|
+
}
|
|
586
693
|
}
|
|
587
694
|
const hydrate = (...args) => {
|
|
588
695
|
solidJs.enableHydration();
|
|
@@ -608,6 +715,33 @@ function Portal(props) {
|
|
|
608
715
|
});
|
|
609
716
|
return treeMarker;
|
|
610
717
|
}
|
|
718
|
+
function dynamic(source) {
|
|
719
|
+
const cached = solidJs.createMemo(source, {
|
|
720
|
+
lazy: true
|
|
721
|
+
});
|
|
722
|
+
return props => {
|
|
723
|
+
return solidJs.createMemo(() => {
|
|
724
|
+
const component = cached();
|
|
725
|
+
switch (typeof component) {
|
|
726
|
+
case "function":
|
|
727
|
+
return solidJs.untrack(() => component(props));
|
|
728
|
+
case "string":
|
|
729
|
+
const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
|
|
730
|
+
spread(el, props);
|
|
731
|
+
return el;
|
|
732
|
+
}
|
|
733
|
+
});
|
|
734
|
+
};
|
|
735
|
+
}
|
|
736
|
+
function Dynamic(props) {
|
|
737
|
+
const Comp = dynamic(() => props.component);
|
|
738
|
+
return solidJs.createComponent(Comp, solidJs.omit(props, "component"));
|
|
739
|
+
}
|
|
740
|
+
function createElement(tagName, is = undefined) {
|
|
741
|
+
return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
|
|
742
|
+
is
|
|
743
|
+
});
|
|
744
|
+
}
|
|
611
745
|
function createElementProxy(el, marker) {
|
|
612
746
|
return new Proxy(el, {
|
|
613
747
|
get(target, prop) {
|
|
@@ -625,25 +759,6 @@ function createElementProxy(el, marker) {
|
|
|
625
759
|
}
|
|
626
760
|
});
|
|
627
761
|
}
|
|
628
|
-
function createDynamic(component, props) {
|
|
629
|
-
const cached = solidJs.createMemo(component);
|
|
630
|
-
return solidJs.createMemo(() => {
|
|
631
|
-
const component = cached();
|
|
632
|
-
switch (typeof component) {
|
|
633
|
-
case "function":
|
|
634
|
-
return solidJs.untrack(() => component(props));
|
|
635
|
-
case "string":
|
|
636
|
-
const isSvg = SVGElements.has(component);
|
|
637
|
-
const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
|
|
638
|
-
spread(el, props, isSvg);
|
|
639
|
-
return el;
|
|
640
|
-
}
|
|
641
|
-
});
|
|
642
|
-
}
|
|
643
|
-
function Dynamic(props) {
|
|
644
|
-
const others = solidJs.omit(props, "component");
|
|
645
|
-
return createDynamic(() => props.component, others);
|
|
646
|
-
}
|
|
647
762
|
|
|
648
763
|
Object.defineProperty(exports, "Errored", {
|
|
649
764
|
enumerable: true,
|
|
@@ -669,6 +784,14 @@ Object.defineProperty(exports, "NoHydration", {
|
|
|
669
784
|
enumerable: true,
|
|
670
785
|
get: function () { return solidJs.NoHydration; }
|
|
671
786
|
});
|
|
787
|
+
Object.defineProperty(exports, "Repeat", {
|
|
788
|
+
enumerable: true,
|
|
789
|
+
get: function () { return solidJs.Repeat; }
|
|
790
|
+
});
|
|
791
|
+
Object.defineProperty(exports, "Reveal", {
|
|
792
|
+
enumerable: true,
|
|
793
|
+
get: function () { return solidJs.Reveal; }
|
|
794
|
+
});
|
|
672
795
|
Object.defineProperty(exports, "Show", {
|
|
673
796
|
enumerable: true,
|
|
674
797
|
get: function () { return solidJs.Show; }
|
|
@@ -685,10 +808,6 @@ Object.defineProperty(exports, "getOwner", {
|
|
|
685
808
|
enumerable: true,
|
|
686
809
|
get: function () { return solidJs.getOwner; }
|
|
687
810
|
});
|
|
688
|
-
Object.defineProperty(exports, "mergeProps", {
|
|
689
|
-
enumerable: true,
|
|
690
|
-
get: function () { return solidJs.merge; }
|
|
691
|
-
});
|
|
692
811
|
Object.defineProperty(exports, "untrack", {
|
|
693
812
|
enumerable: true,
|
|
694
813
|
get: function () { return solidJs.untrack; }
|
|
@@ -696,21 +815,24 @@ Object.defineProperty(exports, "untrack", {
|
|
|
696
815
|
exports.Assets = voidFn;
|
|
697
816
|
exports.ChildProperties = ChildProperties;
|
|
698
817
|
exports.DOMElements = DOMElements;
|
|
818
|
+
exports.DOMWithState = DOMWithState;
|
|
699
819
|
exports.DelegatedEvents = DelegatedEvents;
|
|
700
820
|
exports.Dynamic = Dynamic;
|
|
701
821
|
exports.HydrationScript = voidFn;
|
|
822
|
+
exports.MathMLElements = MathMLElements;
|
|
823
|
+
exports.Namespaces = Namespaces;
|
|
702
824
|
exports.Portal = Portal;
|
|
703
|
-
exports.
|
|
825
|
+
exports.RawTextElements = RawTextElements;
|
|
704
826
|
exports.RequestContext = RequestContext;
|
|
705
827
|
exports.SVGElements = SVGElements;
|
|
706
|
-
exports.
|
|
828
|
+
exports.VoidElements = VoidElements;
|
|
707
829
|
exports.addEventListener = addEventListener;
|
|
708
830
|
exports.applyRef = applyRef;
|
|
709
831
|
exports.assign = assign;
|
|
710
832
|
exports.className = className;
|
|
711
833
|
exports.clearDelegatedEvents = clearDelegatedEvents;
|
|
712
|
-
exports.createDynamic = createDynamic;
|
|
713
834
|
exports.delegateEvents = delegateEvents;
|
|
835
|
+
exports.dynamic = dynamic;
|
|
714
836
|
exports.dynamicProperty = dynamicProperty;
|
|
715
837
|
exports.effect = effect;
|
|
716
838
|
exports.escape = escape;
|
|
@@ -728,6 +850,7 @@ exports.insert = insert;
|
|
|
728
850
|
exports.isDev = isDev;
|
|
729
851
|
exports.isServer = isServer;
|
|
730
852
|
exports.memo = memo;
|
|
853
|
+
exports.mergeProps = mergeProps;
|
|
731
854
|
exports.ref = ref;
|
|
732
855
|
exports.render = render;
|
|
733
856
|
exports.renderToStream = renderToStream;
|