@solidjs/web 2.0.0-rc.1 → 2.0.0-rc.3
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.cjs +116 -66
- package/dist/dev.js +109 -65
- package/dist/server.cjs +386 -109
- package/dist/server.js +378 -113
- package/dist/web.cjs +113 -64
- package/dist/web.js +106 -63
- package/frames/dist/client.cjs +100 -14
- package/frames/dist/client.dev.cjs +103 -14
- package/frames/dist/client.dev.js +104 -15
- package/frames/dist/client.js +101 -15
- package/frames/dist/server.cjs +285 -154
- package/frames/dist/server.js +287 -156
- package/package.json +20 -22
- package/serialization/dist/decode.cjs +22 -5
- package/serialization/dist/decode.js +23 -6
- package/serialization/dist/serialization.cjs +26 -13
- package/serialization/dist/serialization.js +26 -8
- package/serialization/types/index.d.ts +69 -157
- package/serialization/types/serializer-decode.d.ts +89 -112
- package/serialization/types/serializer.d.ts +94 -0
- package/serialization/types-cjs/index.d.cts +69 -157
- package/serialization/types-cjs/serializer-decode.d.cts +89 -112
- package/serialization/types-cjs/serializer.d.cts +94 -0
- package/server-functions/dist/client.cjs +48 -7
- package/server-functions/dist/client.js +48 -8
- package/server-functions/dist/server.cjs +76 -5
- package/server-functions/dist/server.dev.cjs +76 -5
- package/server-functions/dist/server.dev.js +76 -6
- package/server-functions/dist/server.js +76 -6
- package/types/client.d.ts +150 -290
- package/types/constants.d.ts +18 -0
- package/types/cookies.d.ts +31 -75
- package/types/frames/frame-client.d.ts +287 -259
- package/types/frames/frame-container-plugin.d.ts +71 -0
- package/types/frames/frame-sink.d.ts +58 -160
- package/types/frames/frame-transport.d.ts +161 -194
- package/types/frames/serializer-decode.d.ts +159 -0
- package/types/frames/serializer.d.ts +69 -157
- package/types/head.d.ts +16 -0
- package/types/index.d.ts +0 -65
- package/types/index.server.d.ts +125 -0
- package/types/jsx.d.ts +5 -13
- package/types/reconcile.d.ts +1 -0
- package/types/render.d.ts +4 -0
- package/types/response.d.ts +41 -153
- package/types/serializer-decode.d.ts +89 -112
- package/types/serializer.d.ts +69 -157
- package/types/server-functions/client.d.ts +101 -199
- package/types/server-functions/flash.d.ts +10 -30
- package/types/server-functions/registry.d.ts +63 -0
- package/types/server-functions/rich-args.d.ts +1 -10
- package/types/server-functions/server.d.ts +301 -518
- package/types/server-functions/shared.d.ts +112 -458
- package/types/server-mock.d.ts +13 -4
- package/types/server.d.ts +256 -427
- package/types-cjs/client.d.cts +150 -290
- package/types-cjs/constants.d.cts +18 -0
- package/types-cjs/cookies.d.cts +31 -75
- package/types-cjs/frames/frame-client.d.cts +287 -259
- package/types-cjs/frames/frame-container-plugin.d.cts +71 -0
- package/types-cjs/frames/frame-sink.d.cts +58 -160
- package/types-cjs/frames/frame-transport.d.cts +161 -194
- package/types-cjs/frames/serializer-decode.d.cts +159 -0
- package/types-cjs/frames/serializer.d.cts +69 -157
- package/types-cjs/head.d.cts +16 -0
- package/types-cjs/index.d.cts +0 -65
- package/types-cjs/index.server.d.cts +125 -0
- package/types-cjs/jsx.d.cts +5 -13
- package/types-cjs/reconcile.d.cts +1 -0
- package/types-cjs/render.d.cts +4 -0
- package/types-cjs/response.d.cts +41 -153
- package/types-cjs/serializer-decode.d.cts +89 -112
- package/types-cjs/serializer.d.cts +69 -157
- package/types-cjs/server-functions/client.d.cts +101 -199
- package/types-cjs/server-functions/flash.d.cts +10 -30
- package/types-cjs/server-functions/registry.d.cts +63 -0
- package/types-cjs/server-functions/rich-args.d.cts +1 -10
- package/types-cjs/server-functions/server.d.cts +301 -518
- package/types-cjs/server-functions/shared.d.cts +112 -458
- package/types-cjs/server-mock.d.cts +13 -4
- package/types-cjs/server.d.cts +256 -427
- package/LICENSE +0 -21
- package/types/core.d.ts +0 -6
- package/types-cjs/core.d.cts +0 -6
|
@@ -7,7 +7,7 @@ var client = require('@solidjs/web/server-functions/client');
|
|
|
7
7
|
const ELEMENT_NODE = 1;
|
|
8
8
|
const TEXT_NODE = 3;
|
|
9
9
|
const COMMENT_NODE = 8;
|
|
10
|
-
const CLAIM_SEAM = Symbol.for("
|
|
10
|
+
const CLAIM_SEAM = Symbol.for("solid.element-claims");
|
|
11
11
|
const CLAIMED_ELEMENTS = "a[href], form[action]";
|
|
12
12
|
function claimHandlers() {
|
|
13
13
|
const handlers = globalThis[CLAIM_SEAM];
|
|
@@ -17,6 +17,74 @@ function claimNode(handlers, el) {
|
|
|
17
17
|
for (let i = 0; i < handlers.length; i++) handlers[i](el);
|
|
18
18
|
}
|
|
19
19
|
const claimedAttr = name => name === "href" || name === "action";
|
|
20
|
+
const BOUND_SEAM = Symbol.for("solid.bnd");
|
|
21
|
+
const boundSeam = globalThis[BOUND_SEAM] || (globalThis[BOUND_SEAM] = {});
|
|
22
|
+
const BND_ATTR = "_bnd";
|
|
23
|
+
const BND_SELECTOR = "[_bnd]";
|
|
24
|
+
function bndMap(el) {
|
|
25
|
+
const s = el.getAttribute(BND_ATTR);
|
|
26
|
+
if (!s) return undefined;
|
|
27
|
+
const map = {};
|
|
28
|
+
for (const entry of s.split(",")) {
|
|
29
|
+
const eq = entry.indexOf("=");
|
|
30
|
+
if (eq < 1) continue;
|
|
31
|
+
const pos = entry.slice(0, eq);
|
|
32
|
+
const prop = decodeURIComponent(entry.slice(eq + 1));
|
|
33
|
+
const prev = map[pos];
|
|
34
|
+
if (prev === undefined) map[pos] = prop;else if (Array.isArray(prev)) prev.push(prop);else map[pos] = [prev, prop];
|
|
35
|
+
}
|
|
36
|
+
return map;
|
|
37
|
+
}
|
|
38
|
+
boundSeam.resolve = (el, type) => {
|
|
39
|
+
const frame = el._$bndFrame;
|
|
40
|
+
if (!frame) return undefined;
|
|
41
|
+
const map = bndMap(el);
|
|
42
|
+
const prop = map && map[type];
|
|
43
|
+
if (typeof prop !== "string") return undefined;
|
|
44
|
+
return claimFn(frame, type, prop);
|
|
45
|
+
};
|
|
46
|
+
function claimFn(frame, pos, prop) {
|
|
47
|
+
const fn = frame.clientProp(prop);
|
|
48
|
+
if (typeof fn === "function") return fn;
|
|
49
|
+
if (fn !== undefined) {
|
|
50
|
+
console.warn(`A server element claims \`${pos}\` from client prop \`${prop}\`, but the mounted ` + `frame's prop is not a function.`);
|
|
51
|
+
}
|
|
52
|
+
return undefined;
|
|
53
|
+
}
|
|
54
|
+
function sweepBound(root, frame, delegate, scope) {
|
|
55
|
+
const isElement = root.nodeType === ELEMENT_NODE;
|
|
56
|
+
if (!isElement && root.nodeType !== 11 ) return;
|
|
57
|
+
let els;
|
|
58
|
+
if (isElement && root.hasAttribute(BND_ATTR)) (els = []).push(root);
|
|
59
|
+
const found = root.querySelectorAll(BND_SELECTOR);
|
|
60
|
+
if (found.length) {
|
|
61
|
+
els || (els = []);
|
|
62
|
+
for (let i = 0; i < found.length; i++) els.push(found[i]);
|
|
63
|
+
}
|
|
64
|
+
if (!els) return;
|
|
65
|
+
const run = () => {
|
|
66
|
+
let types;
|
|
67
|
+
for (const el of els) {
|
|
68
|
+
el._$bndFrame = frame;
|
|
69
|
+
const map = bndMap(el);
|
|
70
|
+
if (!map) continue;
|
|
71
|
+
for (const pos in map) {
|
|
72
|
+
if (pos === "ref") fireRefs(frame, el, map.ref);else (types || (types = [])).push(pos);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
if (types && delegate) delegate(types);
|
|
76
|
+
};
|
|
77
|
+
scope ? scope(run) : run();
|
|
78
|
+
}
|
|
79
|
+
function fireRefs(frame, el, prop) {
|
|
80
|
+
const fired = el._$bndFired || (el._$bndFired = new Set());
|
|
81
|
+
for (const p of Array.isArray(prop) ? prop : [prop]) {
|
|
82
|
+
if (fired.has(p)) continue;
|
|
83
|
+
fired.add(p);
|
|
84
|
+
const fn = claimFn(frame, "ref", p);
|
|
85
|
+
if (fn) fn(el);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
20
88
|
function claimTree(handlers, root) {
|
|
21
89
|
const isElement = root.nodeType === ELEMENT_NODE;
|
|
22
90
|
if (!isElement && root.nodeType !== 11 ) return;
|
|
@@ -116,6 +184,7 @@ function createFrameHost(options = {}) {
|
|
|
116
184
|
return true;
|
|
117
185
|
};
|
|
118
186
|
return {
|
|
187
|
+
delegate: options.delegate,
|
|
119
188
|
register(id, frame) {
|
|
120
189
|
let set = frames.get(id);
|
|
121
190
|
if (!set) frames.set(id, set = new Set());
|
|
@@ -210,10 +279,18 @@ class FrameImpl {
|
|
|
210
279
|
if (!this.#disposed) this.#flush();
|
|
211
280
|
};
|
|
212
281
|
#claimTree = (node, direct) => {
|
|
282
|
+
if (!direct && node.nodeType !== TEXT_NODE && node.nodeType !== COMMENT_NODE) {
|
|
283
|
+
const o = this.#options;
|
|
284
|
+
sweepBound(node, this, o.delegate || o.host && o.host.delegate, o.ownerScope);
|
|
285
|
+
}
|
|
213
286
|
const handlers = claimHandlers();
|
|
214
287
|
if (!handlers) return;
|
|
215
288
|
this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
|
|
216
289
|
};
|
|
290
|
+
clientProp(name) {
|
|
291
|
+
const props = this.#options.props;
|
|
292
|
+
return props ? props[name] : undefined;
|
|
293
|
+
}
|
|
217
294
|
#scoped(fn) {
|
|
218
295
|
const scope = this.#options.ownerScope;
|
|
219
296
|
return scope ? scope(fn) : fn();
|
|
@@ -663,7 +740,7 @@ class FrameImpl {
|
|
|
663
740
|
parent.insertBefore(fragment, this.#end);
|
|
664
741
|
this.#hasContent = true;
|
|
665
742
|
} else {
|
|
666
|
-
const claim =
|
|
743
|
+
const claim = this.#claimTree;
|
|
667
744
|
const ranges = new Map();
|
|
668
745
|
this.#collectSlots(ranges);
|
|
669
746
|
const grafts = [];
|
|
@@ -682,8 +759,7 @@ class FrameImpl {
|
|
|
682
759
|
}
|
|
683
760
|
return false;
|
|
684
761
|
}
|
|
685
|
-
|
|
686
|
-
reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
|
|
762
|
+
reconcileChildren(open.parentNode, parseFragment(html), open, close, this.#claimTree);
|
|
687
763
|
return true;
|
|
688
764
|
}
|
|
689
765
|
#applyAttrs(addr, text, removed) {
|
|
@@ -707,7 +783,6 @@ class FrameImpl {
|
|
|
707
783
|
removeUntil(this.#parent(), this.#firstContent(), this.#end);
|
|
708
784
|
}
|
|
709
785
|
#claimContent() {
|
|
710
|
-
if (!claimHandlers()) return;
|
|
711
786
|
let n = this.#firstContent();
|
|
712
787
|
while (n && n !== this.#end) {
|
|
713
788
|
this.#claimTree(n);
|
|
@@ -780,7 +855,7 @@ class FrameImpl {
|
|
|
780
855
|
function createFrame(boundary, options) {
|
|
781
856
|
return new FrameImpl(boundary, null, null, options);
|
|
782
857
|
}
|
|
783
|
-
const FRAME_TAG = "
|
|
858
|
+
const FRAME_TAG = "solid-frame";
|
|
784
859
|
const FRAME_ID_ATTR = "data-fid";
|
|
785
860
|
function createFrameElement(options) {
|
|
786
861
|
const el = makeFrameElement(options.id);
|
|
@@ -1245,9 +1320,9 @@ async function applyFrameResponse(response, host, options = {}) {
|
|
|
1245
1320
|
}
|
|
1246
1321
|
return as !== undefined ? as : rootId;
|
|
1247
1322
|
}
|
|
1248
|
-
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("
|
|
1249
|
-
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("
|
|
1250
|
-
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("
|
|
1323
|
+
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("solid.server-component");
|
|
1324
|
+
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("solid.server-component-address");
|
|
1325
|
+
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("solid.component-binding");
|
|
1251
1326
|
let resolveServerComponent;
|
|
1252
1327
|
function parseServerComponent(value, ctx) {
|
|
1253
1328
|
return {
|
|
@@ -1256,7 +1331,7 @@ function parseServerComponent(value, ctx) {
|
|
|
1256
1331
|
};
|
|
1257
1332
|
}
|
|
1258
1333
|
const ServerComponentPlugin = {
|
|
1259
|
-
tag: "
|
|
1334
|
+
tag: "solid/server-component",
|
|
1260
1335
|
test(value) {
|
|
1261
1336
|
return typeof value === "function" && SERVER_COMPONENT in value;
|
|
1262
1337
|
},
|
|
@@ -1402,7 +1477,7 @@ function createServerComponentHandler({
|
|
|
1402
1477
|
}
|
|
1403
1478
|
}
|
|
1404
1479
|
|
|
1405
|
-
const STATE = Symbol.for("
|
|
1480
|
+
const STATE = Symbol.for("solid.container-trace-state");
|
|
1406
1481
|
const state = globalThis[STATE] || (globalThis[STATE] = {
|
|
1407
1482
|
materialized: new WeakMap(),
|
|
1408
1483
|
materializedValues: new WeakSet()
|
|
@@ -1423,7 +1498,9 @@ function isMaterializedContainer(value) {
|
|
|
1423
1498
|
return value !== null && typeof value === "object" && state.materializedValues.has(value);
|
|
1424
1499
|
}
|
|
1425
1500
|
function isContainerTraceMarker(value) {
|
|
1426
|
-
|
|
1501
|
+
if (value == null || typeof value !== "object" || value.$tr == null) return false;
|
|
1502
|
+
const tr = value.$tr;
|
|
1503
|
+
return tr.__SEROVAL_STREAM__ === true || typeof tr[Symbol.asyncIterator] === "function";
|
|
1427
1504
|
}
|
|
1428
1505
|
function reviveContainerTraces(value) {
|
|
1429
1506
|
if (!state.materializeTrace || value == null || typeof value !== "object") return value;
|
|
@@ -1469,7 +1546,8 @@ function getFrameHost() {
|
|
|
1469
1546
|
applyData: c => tableFor(c.id)?.apply(c),
|
|
1470
1547
|
resolve: (ref, id) => tableFor(id)?.resolve(ref),
|
|
1471
1548
|
revive: reviveContainerTraces,
|
|
1472
|
-
isContainer: isMaterializedContainer
|
|
1549
|
+
isContainer: isMaterializedContainer,
|
|
1550
|
+
delegate: web.delegateEvents
|
|
1473
1551
|
});
|
|
1474
1552
|
}
|
|
1475
1553
|
return sharedHost;
|
|
@@ -1545,7 +1623,16 @@ function slotArgsProxy(args) {
|
|
|
1545
1623
|
if (!isAsyncValue(v)) return v;
|
|
1546
1624
|
let read = asyncReads.get(key);
|
|
1547
1625
|
if (!read) {
|
|
1548
|
-
const make = () => solidJs.createMemo(() =>
|
|
1626
|
+
const make = () => solidJs.createMemo(() => {
|
|
1627
|
+
const raw = args()[key];
|
|
1628
|
+
if (raw != null && typeof raw.then === "function") {
|
|
1629
|
+
if (raw.s === 1) return raw.v;
|
|
1630
|
+
if (raw.s === 2) throw raw.v;
|
|
1631
|
+
}
|
|
1632
|
+
return raw;
|
|
1633
|
+
}, {
|
|
1634
|
+
transparent: true
|
|
1635
|
+
});
|
|
1549
1636
|
read = owner ? solidJs.runWithOwner(owner, make) : make();
|
|
1550
1637
|
asyncReads.set(key, read);
|
|
1551
1638
|
}
|
|
@@ -1664,6 +1751,7 @@ function boundaryComponent(host, fnId) {
|
|
|
1664
1751
|
host,
|
|
1665
1752
|
id,
|
|
1666
1753
|
slots: slotsFor(props),
|
|
1754
|
+
props,
|
|
1667
1755
|
ownerScope: boundaryScope(owner),
|
|
1668
1756
|
reveal: revealSeam(owner),
|
|
1669
1757
|
onApply: () => {
|
|
@@ -1848,6 +1936,7 @@ function adoptBoundary(host, id, el, props, binding) {
|
|
|
1848
1936
|
host,
|
|
1849
1937
|
id: address,
|
|
1850
1938
|
slots: slotsFor(props),
|
|
1939
|
+
props,
|
|
1851
1940
|
ownerScope: boundaryScope(owner),
|
|
1852
1941
|
reveal: revealSeam(owner),
|
|
1853
1942
|
onApply: () => {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } from 'solid-js';
|
|
2
|
-
import { insert } from '@solidjs/web';
|
|
2
|
+
import { delegateEvents, insert } from '@solidjs/web';
|
|
3
3
|
import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
|
|
4
4
|
|
|
5
5
|
const ELEMENT_NODE = 1;
|
|
6
6
|
const TEXT_NODE = 3;
|
|
7
7
|
const COMMENT_NODE = 8;
|
|
8
|
-
const CLAIM_SEAM = Symbol.for("
|
|
8
|
+
const CLAIM_SEAM = Symbol.for("solid.element-claims");
|
|
9
9
|
const CLAIMED_ELEMENTS = "a[href], form[action]";
|
|
10
10
|
function claimHandlers() {
|
|
11
11
|
const handlers = globalThis[CLAIM_SEAM];
|
|
@@ -15,6 +15,74 @@ function claimNode(handlers, el) {
|
|
|
15
15
|
for (let i = 0; i < handlers.length; i++) handlers[i](el);
|
|
16
16
|
}
|
|
17
17
|
const claimedAttr = name => name === "href" || name === "action";
|
|
18
|
+
const BOUND_SEAM = Symbol.for("solid.bnd");
|
|
19
|
+
const boundSeam = globalThis[BOUND_SEAM] || (globalThis[BOUND_SEAM] = {});
|
|
20
|
+
const BND_ATTR = "_bnd";
|
|
21
|
+
const BND_SELECTOR = "[_bnd]";
|
|
22
|
+
function bndMap(el) {
|
|
23
|
+
const s = el.getAttribute(BND_ATTR);
|
|
24
|
+
if (!s) return undefined;
|
|
25
|
+
const map = {};
|
|
26
|
+
for (const entry of s.split(",")) {
|
|
27
|
+
const eq = entry.indexOf("=");
|
|
28
|
+
if (eq < 1) continue;
|
|
29
|
+
const pos = entry.slice(0, eq);
|
|
30
|
+
const prop = decodeURIComponent(entry.slice(eq + 1));
|
|
31
|
+
const prev = map[pos];
|
|
32
|
+
if (prev === undefined) map[pos] = prop;else if (Array.isArray(prev)) prev.push(prop);else map[pos] = [prev, prop];
|
|
33
|
+
}
|
|
34
|
+
return map;
|
|
35
|
+
}
|
|
36
|
+
boundSeam.resolve = (el, type) => {
|
|
37
|
+
const frame = el._$bndFrame;
|
|
38
|
+
if (!frame) return undefined;
|
|
39
|
+
const map = bndMap(el);
|
|
40
|
+
const prop = map && map[type];
|
|
41
|
+
if (typeof prop !== "string") return undefined;
|
|
42
|
+
return claimFn(frame, type, prop);
|
|
43
|
+
};
|
|
44
|
+
function claimFn(frame, pos, prop) {
|
|
45
|
+
const fn = frame.clientProp(prop);
|
|
46
|
+
if (typeof fn === "function") return fn;
|
|
47
|
+
if (fn !== undefined) {
|
|
48
|
+
console.warn(`A server element claims \`${pos}\` from client prop \`${prop}\`, but the mounted ` + `frame's prop is not a function.`);
|
|
49
|
+
}
|
|
50
|
+
return undefined;
|
|
51
|
+
}
|
|
52
|
+
function sweepBound(root, frame, delegate, scope) {
|
|
53
|
+
const isElement = root.nodeType === ELEMENT_NODE;
|
|
54
|
+
if (!isElement && root.nodeType !== 11 ) return;
|
|
55
|
+
let els;
|
|
56
|
+
if (isElement && root.hasAttribute(BND_ATTR)) (els = []).push(root);
|
|
57
|
+
const found = root.querySelectorAll(BND_SELECTOR);
|
|
58
|
+
if (found.length) {
|
|
59
|
+
els || (els = []);
|
|
60
|
+
for (let i = 0; i < found.length; i++) els.push(found[i]);
|
|
61
|
+
}
|
|
62
|
+
if (!els) return;
|
|
63
|
+
const run = () => {
|
|
64
|
+
let types;
|
|
65
|
+
for (const el of els) {
|
|
66
|
+
el._$bndFrame = frame;
|
|
67
|
+
const map = bndMap(el);
|
|
68
|
+
if (!map) continue;
|
|
69
|
+
for (const pos in map) {
|
|
70
|
+
if (pos === "ref") fireRefs(frame, el, map.ref);else (types || (types = [])).push(pos);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
if (types && delegate) delegate(types);
|
|
74
|
+
};
|
|
75
|
+
scope ? scope(run) : run();
|
|
76
|
+
}
|
|
77
|
+
function fireRefs(frame, el, prop) {
|
|
78
|
+
const fired = el._$bndFired || (el._$bndFired = new Set());
|
|
79
|
+
for (const p of Array.isArray(prop) ? prop : [prop]) {
|
|
80
|
+
if (fired.has(p)) continue;
|
|
81
|
+
fired.add(p);
|
|
82
|
+
const fn = claimFn(frame, "ref", p);
|
|
83
|
+
if (fn) fn(el);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
18
86
|
function claimTree(handlers, root) {
|
|
19
87
|
const isElement = root.nodeType === ELEMENT_NODE;
|
|
20
88
|
if (!isElement && root.nodeType !== 11 ) return;
|
|
@@ -114,6 +182,7 @@ function createFrameHost(options = {}) {
|
|
|
114
182
|
return true;
|
|
115
183
|
};
|
|
116
184
|
return {
|
|
185
|
+
delegate: options.delegate,
|
|
117
186
|
register(id, frame) {
|
|
118
187
|
let set = frames.get(id);
|
|
119
188
|
if (!set) frames.set(id, set = new Set());
|
|
@@ -208,10 +277,18 @@ class FrameImpl {
|
|
|
208
277
|
if (!this.#disposed) this.#flush();
|
|
209
278
|
};
|
|
210
279
|
#claimTree = (node, direct) => {
|
|
280
|
+
if (!direct && node.nodeType !== TEXT_NODE && node.nodeType !== COMMENT_NODE) {
|
|
281
|
+
const o = this.#options;
|
|
282
|
+
sweepBound(node, this, o.delegate || o.host && o.host.delegate, o.ownerScope);
|
|
283
|
+
}
|
|
211
284
|
const handlers = claimHandlers();
|
|
212
285
|
if (!handlers) return;
|
|
213
286
|
this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
|
|
214
287
|
};
|
|
288
|
+
clientProp(name) {
|
|
289
|
+
const props = this.#options.props;
|
|
290
|
+
return props ? props[name] : undefined;
|
|
291
|
+
}
|
|
215
292
|
#scoped(fn) {
|
|
216
293
|
const scope = this.#options.ownerScope;
|
|
217
294
|
return scope ? scope(fn) : fn();
|
|
@@ -661,7 +738,7 @@ class FrameImpl {
|
|
|
661
738
|
parent.insertBefore(fragment, this.#end);
|
|
662
739
|
this.#hasContent = true;
|
|
663
740
|
} else {
|
|
664
|
-
const claim =
|
|
741
|
+
const claim = this.#claimTree;
|
|
665
742
|
const ranges = new Map();
|
|
666
743
|
this.#collectSlots(ranges);
|
|
667
744
|
const grafts = [];
|
|
@@ -680,8 +757,7 @@ class FrameImpl {
|
|
|
680
757
|
}
|
|
681
758
|
return false;
|
|
682
759
|
}
|
|
683
|
-
|
|
684
|
-
reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
|
|
760
|
+
reconcileChildren(open.parentNode, parseFragment(html), open, close, this.#claimTree);
|
|
685
761
|
return true;
|
|
686
762
|
}
|
|
687
763
|
#applyAttrs(addr, text, removed) {
|
|
@@ -705,7 +781,6 @@ class FrameImpl {
|
|
|
705
781
|
removeUntil(this.#parent(), this.#firstContent(), this.#end);
|
|
706
782
|
}
|
|
707
783
|
#claimContent() {
|
|
708
|
-
if (!claimHandlers()) return;
|
|
709
784
|
let n = this.#firstContent();
|
|
710
785
|
while (n && n !== this.#end) {
|
|
711
786
|
this.#claimTree(n);
|
|
@@ -778,7 +853,7 @@ class FrameImpl {
|
|
|
778
853
|
function createFrame(boundary, options) {
|
|
779
854
|
return new FrameImpl(boundary, null, null, options);
|
|
780
855
|
}
|
|
781
|
-
const FRAME_TAG = "
|
|
856
|
+
const FRAME_TAG = "solid-frame";
|
|
782
857
|
const FRAME_ID_ATTR = "data-fid";
|
|
783
858
|
function createFrameElement(options) {
|
|
784
859
|
const el = makeFrameElement(options.id);
|
|
@@ -1243,9 +1318,9 @@ async function applyFrameResponse(response, host, options = {}) {
|
|
|
1243
1318
|
}
|
|
1244
1319
|
return as !== undefined ? as : rootId;
|
|
1245
1320
|
}
|
|
1246
|
-
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("
|
|
1247
|
-
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("
|
|
1248
|
-
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("
|
|
1321
|
+
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("solid.server-component");
|
|
1322
|
+
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("solid.server-component-address");
|
|
1323
|
+
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("solid.component-binding");
|
|
1249
1324
|
let resolveServerComponent;
|
|
1250
1325
|
function parseServerComponent(value, ctx) {
|
|
1251
1326
|
return {
|
|
@@ -1254,7 +1329,7 @@ function parseServerComponent(value, ctx) {
|
|
|
1254
1329
|
};
|
|
1255
1330
|
}
|
|
1256
1331
|
const ServerComponentPlugin = {
|
|
1257
|
-
tag: "
|
|
1332
|
+
tag: "solid/server-component",
|
|
1258
1333
|
test(value) {
|
|
1259
1334
|
return typeof value === "function" && SERVER_COMPONENT in value;
|
|
1260
1335
|
},
|
|
@@ -1400,7 +1475,7 @@ function createServerComponentHandler({
|
|
|
1400
1475
|
}
|
|
1401
1476
|
}
|
|
1402
1477
|
|
|
1403
|
-
const STATE = Symbol.for("
|
|
1478
|
+
const STATE = Symbol.for("solid.container-trace-state");
|
|
1404
1479
|
const state = globalThis[STATE] || (globalThis[STATE] = {
|
|
1405
1480
|
materialized: new WeakMap(),
|
|
1406
1481
|
materializedValues: new WeakSet()
|
|
@@ -1421,7 +1496,9 @@ function isMaterializedContainer(value) {
|
|
|
1421
1496
|
return value !== null && typeof value === "object" && state.materializedValues.has(value);
|
|
1422
1497
|
}
|
|
1423
1498
|
function isContainerTraceMarker(value) {
|
|
1424
|
-
|
|
1499
|
+
if (value == null || typeof value !== "object" || value.$tr == null) return false;
|
|
1500
|
+
const tr = value.$tr;
|
|
1501
|
+
return tr.__SEROVAL_STREAM__ === true || typeof tr[Symbol.asyncIterator] === "function";
|
|
1425
1502
|
}
|
|
1426
1503
|
function reviveContainerTraces(value) {
|
|
1427
1504
|
if (!state.materializeTrace || value == null || typeof value !== "object") return value;
|
|
@@ -1467,7 +1544,8 @@ function getFrameHost() {
|
|
|
1467
1544
|
applyData: c => tableFor(c.id)?.apply(c),
|
|
1468
1545
|
resolve: (ref, id) => tableFor(id)?.resolve(ref),
|
|
1469
1546
|
revive: reviveContainerTraces,
|
|
1470
|
-
isContainer: isMaterializedContainer
|
|
1547
|
+
isContainer: isMaterializedContainer,
|
|
1548
|
+
delegate: delegateEvents
|
|
1471
1549
|
});
|
|
1472
1550
|
}
|
|
1473
1551
|
return sharedHost;
|
|
@@ -1543,7 +1621,16 @@ function slotArgsProxy(args) {
|
|
|
1543
1621
|
if (!isAsyncValue(v)) return v;
|
|
1544
1622
|
let read = asyncReads.get(key);
|
|
1545
1623
|
if (!read) {
|
|
1546
|
-
const make = () => createMemo(() =>
|
|
1624
|
+
const make = () => createMemo(() => {
|
|
1625
|
+
const raw = args()[key];
|
|
1626
|
+
if (raw != null && typeof raw.then === "function") {
|
|
1627
|
+
if (raw.s === 1) return raw.v;
|
|
1628
|
+
if (raw.s === 2) throw raw.v;
|
|
1629
|
+
}
|
|
1630
|
+
return raw;
|
|
1631
|
+
}, {
|
|
1632
|
+
transparent: true
|
|
1633
|
+
});
|
|
1547
1634
|
read = owner ? runWithOwner(owner, make) : make();
|
|
1548
1635
|
asyncReads.set(key, read);
|
|
1549
1636
|
}
|
|
@@ -1662,6 +1749,7 @@ function boundaryComponent(host, fnId) {
|
|
|
1662
1749
|
host,
|
|
1663
1750
|
id,
|
|
1664
1751
|
slots: slotsFor(props),
|
|
1752
|
+
props,
|
|
1665
1753
|
ownerScope: boundaryScope(owner),
|
|
1666
1754
|
reveal: revealSeam(owner),
|
|
1667
1755
|
onApply: () => {
|
|
@@ -1846,6 +1934,7 @@ function adoptBoundary(host, id, el, props, binding) {
|
|
|
1846
1934
|
host,
|
|
1847
1935
|
id: address,
|
|
1848
1936
|
slots: slotsFor(props),
|
|
1937
|
+
props,
|
|
1849
1938
|
ownerScope: boundaryScope(owner),
|
|
1850
1939
|
reveal: revealSeam(owner),
|
|
1851
1940
|
onApply: () => {
|
package/frames/dist/client.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getOwner, onCleanup, createMemo, runWithOwner, createSignal, createRenderEffect, createLoadingBoundary, createOwner, sharedConfig, materializeContainerTrace } from 'solid-js';
|
|
2
|
-
import { insert } from '@solidjs/web';
|
|
2
|
+
import { delegateEvents, insert } from '@solidjs/web';
|
|
3
3
|
import { ChunkReader, frameAddress, SINGLE_FLIGHT_HEADER, deserializeStream, getServerFunctionsCodec, createChunk, getFlightDataConsumer, ERROR_HEADER, REVALIDATE_HEADER, configureServerFunctionsClient } from '@solidjs/web/server-functions/client';
|
|
4
4
|
|
|
5
5
|
const ELEMENT_NODE = 1;
|
|
6
6
|
const TEXT_NODE = 3;
|
|
7
7
|
const COMMENT_NODE = 8;
|
|
8
|
-
const CLAIM_SEAM = Symbol.for("
|
|
8
|
+
const CLAIM_SEAM = Symbol.for("solid.element-claims");
|
|
9
9
|
const CLAIMED_ELEMENTS = "a[href], form[action]";
|
|
10
10
|
function claimHandlers() {
|
|
11
11
|
const handlers = globalThis[CLAIM_SEAM];
|
|
@@ -15,6 +15,71 @@ function claimNode(handlers, el) {
|
|
|
15
15
|
for (let i = 0; i < handlers.length; i++) handlers[i](el);
|
|
16
16
|
}
|
|
17
17
|
const claimedAttr = name => name === "href" || name === "action";
|
|
18
|
+
const BOUND_SEAM = Symbol.for("solid.bnd");
|
|
19
|
+
const boundSeam = globalThis[BOUND_SEAM] || (globalThis[BOUND_SEAM] = {});
|
|
20
|
+
const BND_ATTR = "_bnd";
|
|
21
|
+
const BND_SELECTOR = "[_bnd]";
|
|
22
|
+
function bndMap(el) {
|
|
23
|
+
const s = el.getAttribute(BND_ATTR);
|
|
24
|
+
if (!s) return undefined;
|
|
25
|
+
const map = {};
|
|
26
|
+
for (const entry of s.split(",")) {
|
|
27
|
+
const eq = entry.indexOf("=");
|
|
28
|
+
if (eq < 1) continue;
|
|
29
|
+
const pos = entry.slice(0, eq);
|
|
30
|
+
const prop = decodeURIComponent(entry.slice(eq + 1));
|
|
31
|
+
const prev = map[pos];
|
|
32
|
+
if (prev === undefined) map[pos] = prop;else if (Array.isArray(prev)) prev.push(prop);else map[pos] = [prev, prop];
|
|
33
|
+
}
|
|
34
|
+
return map;
|
|
35
|
+
}
|
|
36
|
+
boundSeam.resolve = (el, type) => {
|
|
37
|
+
const frame = el._$bndFrame;
|
|
38
|
+
if (!frame) return undefined;
|
|
39
|
+
const map = bndMap(el);
|
|
40
|
+
const prop = map && map[type];
|
|
41
|
+
if (typeof prop !== "string") return undefined;
|
|
42
|
+
return claimFn(frame, type, prop);
|
|
43
|
+
};
|
|
44
|
+
function claimFn(frame, pos, prop) {
|
|
45
|
+
const fn = frame.clientProp(prop);
|
|
46
|
+
if (typeof fn === "function") return fn;
|
|
47
|
+
return undefined;
|
|
48
|
+
}
|
|
49
|
+
function sweepBound(root, frame, delegate, scope) {
|
|
50
|
+
const isElement = root.nodeType === ELEMENT_NODE;
|
|
51
|
+
if (!isElement && root.nodeType !== 11 ) return;
|
|
52
|
+
let els;
|
|
53
|
+
if (isElement && root.hasAttribute(BND_ATTR)) (els = []).push(root);
|
|
54
|
+
const found = root.querySelectorAll(BND_SELECTOR);
|
|
55
|
+
if (found.length) {
|
|
56
|
+
els || (els = []);
|
|
57
|
+
for (let i = 0; i < found.length; i++) els.push(found[i]);
|
|
58
|
+
}
|
|
59
|
+
if (!els) return;
|
|
60
|
+
const run = () => {
|
|
61
|
+
let types;
|
|
62
|
+
for (const el of els) {
|
|
63
|
+
el._$bndFrame = frame;
|
|
64
|
+
const map = bndMap(el);
|
|
65
|
+
if (!map) continue;
|
|
66
|
+
for (const pos in map) {
|
|
67
|
+
if (pos === "ref") fireRefs(frame, el, map.ref);else (types || (types = [])).push(pos);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (types && delegate) delegate(types);
|
|
71
|
+
};
|
|
72
|
+
scope ? scope(run) : run();
|
|
73
|
+
}
|
|
74
|
+
function fireRefs(frame, el, prop) {
|
|
75
|
+
const fired = el._$bndFired || (el._$bndFired = new Set());
|
|
76
|
+
for (const p of Array.isArray(prop) ? prop : [prop]) {
|
|
77
|
+
if (fired.has(p)) continue;
|
|
78
|
+
fired.add(p);
|
|
79
|
+
const fn = claimFn(frame, "ref", p);
|
|
80
|
+
if (fn) fn(el);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
18
83
|
function claimTree(handlers, root) {
|
|
19
84
|
const isElement = root.nodeType === ELEMENT_NODE;
|
|
20
85
|
if (!isElement && root.nodeType !== 11 ) return;
|
|
@@ -114,6 +179,7 @@ function createFrameHost(options = {}) {
|
|
|
114
179
|
return true;
|
|
115
180
|
};
|
|
116
181
|
return {
|
|
182
|
+
delegate: options.delegate,
|
|
117
183
|
register(id, frame) {
|
|
118
184
|
let set = frames.get(id);
|
|
119
185
|
if (!set) frames.set(id, set = new Set());
|
|
@@ -208,10 +274,18 @@ class FrameImpl {
|
|
|
208
274
|
if (!this.#disposed) this.#flush();
|
|
209
275
|
};
|
|
210
276
|
#claimTree = (node, direct) => {
|
|
277
|
+
if (!direct && node.nodeType !== TEXT_NODE && node.nodeType !== COMMENT_NODE) {
|
|
278
|
+
const o = this.#options;
|
|
279
|
+
sweepBound(node, this, o.delegate || o.host && o.host.delegate, o.ownerScope);
|
|
280
|
+
}
|
|
211
281
|
const handlers = claimHandlers();
|
|
212
282
|
if (!handlers) return;
|
|
213
283
|
this.#scoped(() => direct ? claimNode(handlers, node) : claimTree(handlers, node));
|
|
214
284
|
};
|
|
285
|
+
clientProp(name) {
|
|
286
|
+
const props = this.#options.props;
|
|
287
|
+
return props ? props[name] : undefined;
|
|
288
|
+
}
|
|
215
289
|
#scoped(fn) {
|
|
216
290
|
const scope = this.#options.ownerScope;
|
|
217
291
|
return scope ? scope(fn) : fn();
|
|
@@ -660,7 +734,7 @@ class FrameImpl {
|
|
|
660
734
|
parent.insertBefore(fragment, this.#end);
|
|
661
735
|
this.#hasContent = true;
|
|
662
736
|
} else {
|
|
663
|
-
const claim =
|
|
737
|
+
const claim = this.#claimTree;
|
|
664
738
|
const ranges = new Map();
|
|
665
739
|
this.#collectSlots(ranges);
|
|
666
740
|
const grafts = [];
|
|
@@ -676,8 +750,7 @@ class FrameImpl {
|
|
|
676
750
|
if (!close) {
|
|
677
751
|
return false;
|
|
678
752
|
}
|
|
679
|
-
|
|
680
|
-
reconcileChildren(open.parentNode, parseFragment(html), open, close, claim);
|
|
753
|
+
reconcileChildren(open.parentNode, parseFragment(html), open, close, this.#claimTree);
|
|
681
754
|
return true;
|
|
682
755
|
}
|
|
683
756
|
#applyAttrs(addr, text, removed) {
|
|
@@ -701,7 +774,6 @@ class FrameImpl {
|
|
|
701
774
|
removeUntil(this.#parent(), this.#firstContent(), this.#end);
|
|
702
775
|
}
|
|
703
776
|
#claimContent() {
|
|
704
|
-
if (!claimHandlers()) return;
|
|
705
777
|
let n = this.#firstContent();
|
|
706
778
|
while (n && n !== this.#end) {
|
|
707
779
|
this.#claimTree(n);
|
|
@@ -771,7 +843,7 @@ class FrameImpl {
|
|
|
771
843
|
function createFrame(boundary, options) {
|
|
772
844
|
return new FrameImpl(boundary, null, null, options);
|
|
773
845
|
}
|
|
774
|
-
const FRAME_TAG = "
|
|
846
|
+
const FRAME_TAG = "solid-frame";
|
|
775
847
|
const FRAME_ID_ATTR = "data-fid";
|
|
776
848
|
function createFrameElement(options) {
|
|
777
849
|
const el = makeFrameElement(options.id);
|
|
@@ -1226,9 +1298,9 @@ async function applyFrameResponse(response, host, options = {}) {
|
|
|
1226
1298
|
}
|
|
1227
1299
|
return as !== undefined ? as : rootId;
|
|
1228
1300
|
}
|
|
1229
|
-
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("
|
|
1230
|
-
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("
|
|
1231
|
-
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("
|
|
1301
|
+
const SERVER_COMPONENT = /*#__PURE__*/Symbol.for("solid.server-component");
|
|
1302
|
+
const SERVER_COMPONENT_ADDRESS = /*#__PURE__*/Symbol.for("solid.server-component-address");
|
|
1303
|
+
const COMPONENT_BINDING = /*#__PURE__*/Symbol.for("solid.component-binding");
|
|
1232
1304
|
let resolveServerComponent;
|
|
1233
1305
|
function parseServerComponent(value, ctx) {
|
|
1234
1306
|
return {
|
|
@@ -1237,7 +1309,7 @@ function parseServerComponent(value, ctx) {
|
|
|
1237
1309
|
};
|
|
1238
1310
|
}
|
|
1239
1311
|
const ServerComponentPlugin = {
|
|
1240
|
-
tag: "
|
|
1312
|
+
tag: "solid/server-component",
|
|
1241
1313
|
test(value) {
|
|
1242
1314
|
return typeof value === "function" && SERVER_COMPONENT in value;
|
|
1243
1315
|
},
|
|
@@ -1383,7 +1455,7 @@ function createServerComponentHandler({
|
|
|
1383
1455
|
}
|
|
1384
1456
|
}
|
|
1385
1457
|
|
|
1386
|
-
const STATE = Symbol.for("
|
|
1458
|
+
const STATE = Symbol.for("solid.container-trace-state");
|
|
1387
1459
|
const state = globalThis[STATE] || (globalThis[STATE] = {
|
|
1388
1460
|
materialized: new WeakMap(),
|
|
1389
1461
|
materializedValues: new WeakSet()
|
|
@@ -1404,7 +1476,9 @@ function isMaterializedContainer(value) {
|
|
|
1404
1476
|
return value !== null && typeof value === "object" && state.materializedValues.has(value);
|
|
1405
1477
|
}
|
|
1406
1478
|
function isContainerTraceMarker(value) {
|
|
1407
|
-
|
|
1479
|
+
if (value == null || typeof value !== "object" || value.$tr == null) return false;
|
|
1480
|
+
const tr = value.$tr;
|
|
1481
|
+
return tr.__SEROVAL_STREAM__ === true || typeof tr[Symbol.asyncIterator] === "function";
|
|
1408
1482
|
}
|
|
1409
1483
|
function reviveContainerTraces(value) {
|
|
1410
1484
|
if (!state.materializeTrace || value == null || typeof value !== "object") return value;
|
|
@@ -1450,7 +1524,8 @@ function getFrameHost() {
|
|
|
1450
1524
|
applyData: c => tableFor(c.id)?.apply(c),
|
|
1451
1525
|
resolve: (ref, id) => tableFor(id)?.resolve(ref),
|
|
1452
1526
|
revive: reviveContainerTraces,
|
|
1453
|
-
isContainer: isMaterializedContainer
|
|
1527
|
+
isContainer: isMaterializedContainer,
|
|
1528
|
+
delegate: delegateEvents
|
|
1454
1529
|
});
|
|
1455
1530
|
}
|
|
1456
1531
|
return sharedHost;
|
|
@@ -1526,7 +1601,16 @@ function slotArgsProxy(args) {
|
|
|
1526
1601
|
if (!isAsyncValue(v)) return v;
|
|
1527
1602
|
let read = asyncReads.get(key);
|
|
1528
1603
|
if (!read) {
|
|
1529
|
-
const make = () => createMemo(() =>
|
|
1604
|
+
const make = () => createMemo(() => {
|
|
1605
|
+
const raw = args()[key];
|
|
1606
|
+
if (raw != null && typeof raw.then === "function") {
|
|
1607
|
+
if (raw.s === 1) return raw.v;
|
|
1608
|
+
if (raw.s === 2) throw raw.v;
|
|
1609
|
+
}
|
|
1610
|
+
return raw;
|
|
1611
|
+
}, {
|
|
1612
|
+
transparent: true
|
|
1613
|
+
});
|
|
1530
1614
|
read = owner ? runWithOwner(owner, make) : make();
|
|
1531
1615
|
asyncReads.set(key, read);
|
|
1532
1616
|
}
|
|
@@ -1645,6 +1729,7 @@ function boundaryComponent(host, fnId) {
|
|
|
1645
1729
|
host,
|
|
1646
1730
|
id,
|
|
1647
1731
|
slots: slotsFor(props),
|
|
1732
|
+
props,
|
|
1648
1733
|
ownerScope: boundaryScope(owner),
|
|
1649
1734
|
reveal: revealSeam(owner),
|
|
1650
1735
|
onApply: () => {
|
|
@@ -1829,6 +1914,7 @@ function adoptBoundary(host, id, el, props, binding) {
|
|
|
1829
1914
|
host,
|
|
1830
1915
|
id: address,
|
|
1831
1916
|
slots: slotsFor(props),
|
|
1917
|
+
props,
|
|
1832
1918
|
ownerScope: boundaryScope(owner),
|
|
1833
1919
|
reveal: revealSeam(owner),
|
|
1834
1920
|
onApply: () => {
|