yaml-flow 8.2.3 → 8.2.5
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/browser/asset-integrity.json +3 -3
- package/browser/board-livecards-client.js +1 -1
- package/browser/board-livecards-localstorage.js +4 -4
- package/cli/browser-api/card-store-browser-api.js +1 -1
- package/cli/node/board-live-cards-cli.js +9 -9
- package/cli/node/card-store-cli.js +5 -5
- package/cli/node/fs-board-adapter.js +9 -9
- package/examples/board/demo-shell-with-server.html +195 -2
- package/examples/board-local/demo-shell-localstorage.html +3 -3
- package/lib/board-live-cards-node.cjs +9 -9
- package/lib/board-live-cards-node.js +9 -9
- package/lib/board-live-cards-public.cjs +2 -2
- package/lib/board-live-cards-public.js +2 -2
- package/lib/board-live-cards-server-runtime.cjs +3 -3
- package/lib/board-live-cards-server-runtime.js +3 -3
- package/lib/server-runtime/index.cjs +3 -3
- package/lib/server-runtime/index.js +3 -3
- package/package.json +1 -1
|
@@ -14,13 +14,31 @@
|
|
|
14
14
|
.lc-result p { font-size: 0.8rem; margin: 0 0 0.25rem; }
|
|
15
15
|
.lc-result ul, .lc-result ol { font-size: 0.8rem; margin: 0 0 0.25rem; padding-left: 1.2rem; }
|
|
16
16
|
.lc-result li { margin-bottom: 0.15rem; }
|
|
17
|
+
.demo-docs pre {
|
|
18
|
+
background: #0f172a;
|
|
19
|
+
border-radius: 0.75rem;
|
|
20
|
+
color: #e2e8f0;
|
|
21
|
+
font-size: 0.8rem;
|
|
22
|
+
margin: 0;
|
|
23
|
+
overflow-x: auto;
|
|
24
|
+
padding: 0.9rem 1rem;
|
|
25
|
+
white-space: pre-wrap;
|
|
26
|
+
}
|
|
27
|
+
.demo-docs code {
|
|
28
|
+
color: inherit;
|
|
29
|
+
font-size: inherit;
|
|
30
|
+
}
|
|
31
|
+
.demo-docs .list-inline-item {
|
|
32
|
+
margin-right: 0.35rem;
|
|
33
|
+
margin-bottom: 0.35rem;
|
|
34
|
+
}
|
|
17
35
|
</style>
|
|
18
36
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
19
37
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
20
38
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
|
21
39
|
<script src="https://cdn.jsdelivr.net/npm/leader-line/leader-line.min.js"></script>
|
|
22
|
-
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.
|
|
23
|
-
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.
|
|
40
|
+
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.5/browser/live-cards.js"></script>
|
|
41
|
+
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.5/browser/board-livecards-client.js"></script>
|
|
24
42
|
</head>
|
|
25
43
|
<body class="bg-light">
|
|
26
44
|
<div class="container-fluid py-3">
|
|
@@ -54,6 +72,153 @@
|
|
|
54
72
|
Source execution and event processing happen on the server side.
|
|
55
73
|
</div>
|
|
56
74
|
|
|
75
|
+
<div class="card shadow-sm border-0 mb-3 demo-docs">
|
|
76
|
+
<div class="card-body">
|
|
77
|
+
<div class="d-flex flex-wrap justify-content-between gap-3 mb-3">
|
|
78
|
+
<div>
|
|
79
|
+
<h2 class="h6 mb-1">Advanced Composition Model</h2>
|
|
80
|
+
<p class="small text-muted mb-0">
|
|
81
|
+
This demo still mounts the full board, but the same client now exposes the shared runtime session
|
|
82
|
+
needed for filtered or projected live views. Host applications do not need to reimplement SSE,
|
|
83
|
+
client identity, notification reduction, or card chat subscribe or unsubscribe.
|
|
84
|
+
</p>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="small text-muted text-end">
|
|
87
|
+
<div><strong>Active board:</strong> <span id="docActiveBoard">default</span></div>
|
|
88
|
+
<div><strong>Shared client id:</strong> <span id="docClientId">pending</span></div>
|
|
89
|
+
<div><strong>Session state:</strong> <span id="docSessionState">not connected</span></div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="row g-3">
|
|
94
|
+
<div class="col-lg-4">
|
|
95
|
+
<div class="border rounded-3 p-3 h-100 bg-white">
|
|
96
|
+
<h3 class="h6 mb-2">What is public now</h3>
|
|
97
|
+
<ul class="list-inline small mb-0">
|
|
98
|
+
<li class="list-inline-item badge text-bg-light">createBoardRuntimeSession()</li>
|
|
99
|
+
<li class="list-inline-item badge text-bg-light">createDerivedBoardRuntime()</li>
|
|
100
|
+
<li class="list-inline-item badge text-bg-light">applyBoardNotifications()</li>
|
|
101
|
+
<li class="list-inline-item badge text-bg-light">serverPayloadToBoardState()</li>
|
|
102
|
+
<li class="list-inline-item badge text-bg-light">pickBoardState()</li>
|
|
103
|
+
<li class="list-inline-item badge text-bg-light">subtractBoardState()</li>
|
|
104
|
+
<li class="list-inline-item badge text-bg-light">deriveBoardState()</li>
|
|
105
|
+
<li class="list-inline-item badge text-bg-light">session.attachProvidedState()</li>
|
|
106
|
+
<li class="list-inline-item badge text-bg-light">session.subscribeCardChats()</li>
|
|
107
|
+
<li class="list-inline-item badge text-bg-light">session.unsubscribeCardChats()</li>
|
|
108
|
+
</ul>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="col-lg-4">
|
|
112
|
+
<div class="border rounded-3 p-3 h-100 bg-white">
|
|
113
|
+
<h3 class="h6 mb-2">Recommended shape</h3>
|
|
114
|
+
<ol class="small mb-0 ps-3">
|
|
115
|
+
<li>Create one shared runtime session per logical board.</li>
|
|
116
|
+
<li>Mount the full board or any number of derived views from that same session.</li>
|
|
117
|
+
<li>Reuse the shared client id for all chat subscribe or unsubscribe calls.</li>
|
|
118
|
+
<li>Use the public reducer helpers instead of mutating projected state by hand.</li>
|
|
119
|
+
</ol>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="col-lg-4">
|
|
123
|
+
<div class="border rounded-3 p-3 h-100 bg-white">
|
|
124
|
+
<h3 class="h6 mb-2">When to use this</h3>
|
|
125
|
+
<ul class="small mb-0 ps-3">
|
|
126
|
+
<li>split views over one board</li>
|
|
127
|
+
<li>plugin or secondary mounts</li>
|
|
128
|
+
<li>filtered card subsets</li>
|
|
129
|
+
<li>provided-state boot with live SSE attached afterward</li>
|
|
130
|
+
</ul>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div class="row g-3 mt-1">
|
|
136
|
+
<div class="col-xl-4">
|
|
137
|
+
<div class="border rounded-3 overflow-hidden bg-white h-100">
|
|
138
|
+
<div class="px-3 py-2 border-bottom small fw-semibold">1. Share one session</div>
|
|
139
|
+
<pre><code>const client = BoardLiveCardsClient.createBoardRuntimeClient({
|
|
140
|
+
fetchServer,
|
|
141
|
+
boardPaths,
|
|
142
|
+
getServerOrigin,
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
await client.bootstrapBoard({
|
|
146
|
+
boardId: 'default',
|
|
147
|
+
rootElement: boardRoot,
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const session = client.getRuntimeSession();</code></pre>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="col-xl-4">
|
|
154
|
+
<div class="border rounded-3 overflow-hidden bg-white h-100">
|
|
155
|
+
<div class="px-3 py-2 border-bottom small fw-semibold">2. Mount derived live views</div>
|
|
156
|
+
<pre><code>const alertsView = client.createDerivedRuntime({
|
|
157
|
+
includeCard: (model) => model.id.startsWith('alert-'),
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
alertsView.mountBoard({
|
|
161
|
+
rootElement: alertsRoot,
|
|
162
|
+
mode: 'board',
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
// shares SSE + chat session with the main board</code></pre>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="col-xl-4">
|
|
169
|
+
<div class="border rounded-3 overflow-hidden bg-white h-100">
|
|
170
|
+
<div class="px-3 py-2 border-bottom small fw-semibold">3. Start from provided state</div>
|
|
171
|
+
<pre><code>const session = BoardLiveCardsClient.createBoardRuntimeSession({
|
|
172
|
+
fetchServer,
|
|
173
|
+
boardPaths,
|
|
174
|
+
getServerOrigin,
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
session.attachProvidedState({ boardId, payload });
|
|
178
|
+
await session.bootstrap({ boardId, skipInitBoard: true });
|
|
179
|
+
|
|
180
|
+
const view = BoardLiveCardsClient.createDerivedBoardRuntime({
|
|
181
|
+
session,
|
|
182
|
+
includeCard: (model) => model.id !== 'hidden-card',
|
|
183
|
+
});</code></pre>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div class="row g-3 mt-1">
|
|
189
|
+
<div class="col-xl-6">
|
|
190
|
+
<div class="border rounded-3 overflow-hidden bg-white h-100">
|
|
191
|
+
<div class="px-3 py-2 border-bottom small fw-semibold">Reducer helpers for host-managed state</div>
|
|
192
|
+
<pre><code>const state = BoardLiveCardsClient.serverPayloadToBoardState(payload);
|
|
193
|
+
|
|
194
|
+
const nextState = BoardLiveCardsClient.applyBoardNotifications(
|
|
195
|
+
state,
|
|
196
|
+
notifications,
|
|
197
|
+
() => payload,
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const leftPane = BoardLiveCardsClient.pickBoardState(nextState, ['card-a']);
|
|
201
|
+
const rightPane = BoardLiveCardsClient.subtractBoardState(nextState, ['card-a']);</code></pre>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="col-xl-6">
|
|
205
|
+
<div class="border rounded-3 overflow-hidden bg-white h-100">
|
|
206
|
+
<div class="px-3 py-2 border-bottom small fw-semibold">Chat lifecycle stays with the session</div>
|
|
207
|
+
<pre><code>const session = client.getRuntimeSession();
|
|
208
|
+
|
|
209
|
+
await session.subscribeCardChats(cardId);
|
|
210
|
+
await session.unsubscribeCardChats(cardId);
|
|
211
|
+
|
|
212
|
+
// same shared client id is reused automatically
|
|
213
|
+
console.log(session.getClientId());
|
|
214
|
+
|
|
215
|
+
// incoming notifications keep mounted chat UIs synchronized</code></pre>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
57
222
|
<div id="boardRoot">
|
|
58
223
|
<div class="d-flex align-items-center justify-content-center" style="height: 72vh;">
|
|
59
224
|
<div class="text-center">
|
|
@@ -80,6 +245,31 @@
|
|
|
80
245
|
let activeBoardId = 'default';
|
|
81
246
|
let runtimeClient = null;
|
|
82
247
|
|
|
248
|
+
function refreshDocsRuntimeState() {
|
|
249
|
+
const boardEl = document.getElementById('docActiveBoard');
|
|
250
|
+
const clientIdEl = document.getElementById('docClientId');
|
|
251
|
+
const sessionStateEl = document.getElementById('docSessionState');
|
|
252
|
+
const session = runtimeClient && typeof runtimeClient.getRuntimeSession === 'function'
|
|
253
|
+
? runtimeClient.getRuntimeSession()
|
|
254
|
+
: null;
|
|
255
|
+
|
|
256
|
+
if (boardEl) boardEl.textContent = activeBoardId || 'default';
|
|
257
|
+
if (!session) {
|
|
258
|
+
if (clientIdEl) clientIdEl.textContent = 'unavailable';
|
|
259
|
+
if (sessionStateEl) sessionStateEl.textContent = 'not connected';
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
if (clientIdEl) clientIdEl.textContent = session.getClientId();
|
|
264
|
+
if (sessionStateEl) {
|
|
265
|
+
const state = session.getState();
|
|
266
|
+
const status = session.isConnected()
|
|
267
|
+
? `connected, ${Array.isArray(state && state.cardIds) ? state.cardIds.length : 0} cards in session state`
|
|
268
|
+
: 'not connected';
|
|
269
|
+
sessionStateEl.textContent = status;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
83
273
|
function boardPaths(boardId) {
|
|
84
274
|
return defaultBoardPaths(boardId || activeBoardId || 'default');
|
|
85
275
|
}
|
|
@@ -162,6 +352,7 @@
|
|
|
162
352
|
runtimeClient.dispose();
|
|
163
353
|
bootstrapCompleted = false;
|
|
164
354
|
activeBoardId = boardId;
|
|
355
|
+
refreshDocsRuntimeState();
|
|
165
356
|
document.getElementById('boardRoot').innerHTML =
|
|
166
357
|
'<div class="d-flex align-items-center justify-content-center" style="height:72vh">'
|
|
167
358
|
+ '<div class="text-center"><div class="spinner-border mb-3" role="status">'
|
|
@@ -187,6 +378,7 @@
|
|
|
187
378
|
});
|
|
188
379
|
|
|
189
380
|
bootstrapCompleted = true;
|
|
381
|
+
refreshDocsRuntimeState();
|
|
190
382
|
}
|
|
191
383
|
|
|
192
384
|
document.getElementById('modeBoard').addEventListener('click', function () {
|
|
@@ -256,6 +448,7 @@
|
|
|
256
448
|
});
|
|
257
449
|
|
|
258
450
|
loadBoardList().then(function () {
|
|
451
|
+
refreshDocsRuntimeState();
|
|
259
452
|
return bootstrap(activeBoardId);
|
|
260
453
|
}).catch(function (err) {
|
|
261
454
|
console.error(err);
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
<title>Example Board Demo (LocalStorage Runtime)</title>
|
|
7
7
|
<link rel="icon" type="image/svg+xml" href="../../browser/favicon.svg" />
|
|
8
8
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.5/browser/compute-jsonata.js"></script>
|
|
10
10
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
11
11
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
12
12
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
|
13
13
|
<script src="https://cdn.jsdelivr.net/npm/leader-line/leader-line.min.js"></script>
|
|
14
|
-
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.
|
|
15
|
-
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.5/browser/live-cards.js"></script>
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/yaml-flow@8.2.5/browser/board-livecards-localstorage.js"></script>
|
|
16
16
|
</head>
|
|
17
17
|
<body class="bg-light">
|
|
18
18
|
<div class="container-fluid py-3">
|