@supersoniks/concorde 4.9.1 → 4.9.2
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/build-infos.json +1 -1
- package/concorde-core.bundle.js +106 -106
- package/concorde-core.es.js +4 -7
- package/dist/concorde-core.bundle.js +106 -106
- package/dist/concorde-core.es.js +4 -7
- package/dist/docs-mock-api-sw.js +1 -0
- package/dist/js/core/utils/HTML.js +4 -5
- package/dist/js/core/utils/HTML.js.map +1 -1
- package/dist/robots.txt +15 -1
- package/dist/types/core/utils/HTML.d.ts.map +1 -1
- package/docs/assets/{index-CZLTFws2.css → index-Bnp7gVaA.css} +1 -1
- package/docs/assets/{index-nkkwC13U.js → index-hElUgV9_.js} +505 -438
- package/docs/crawl/core/components/functional/date/date.html +190 -0
- package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
- package/docs/crawl/core/components/functional/if/if.html +27 -0
- package/docs/crawl/core/components/functional/list/list.html +70 -0
- package/docs/crawl/core/components/functional/mix/mix.html +45 -0
- package/docs/crawl/core/components/functional/queue/queue.html +96 -0
- package/docs/crawl/core/components/functional/router/router.html +106 -0
- package/docs/crawl/core/components/functional/sdui/sdui.html +269 -0
- package/docs/crawl/core/components/functional/states/states.html +66 -0
- package/docs/crawl/core/components/functional/submit/submit.html +160 -0
- package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
- package/docs/crawl/core/components/functional/value/value.html +51 -0
- package/docs/crawl/core/components/ui/alert/alert.html +110 -0
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +23 -0
- package/docs/crawl/core/components/ui/badge/badge.html +119 -0
- package/docs/crawl/core/components/ui/button/button.html +149 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +30 -0
- package/docs/crawl/core/components/ui/card/card.html +99 -0
- package/docs/crawl/core/components/ui/divider/divider.html +58 -0
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +135 -0
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +79 -0
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +62 -0
- package/docs/crawl/core/components/ui/form/input/input.html +109 -0
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +106 -0
- package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
- package/docs/crawl/core/components/ui/form/select/select.html +73 -0
- package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
- package/docs/crawl/core/components/ui/group/group.html +82 -0
- package/docs/crawl/core/components/ui/icon/icon.html +133 -0
- package/docs/crawl/core/components/ui/image/image.html +110 -0
- package/docs/crawl/core/components/ui/link/link.html +42 -0
- package/docs/crawl/core/components/ui/loader/loader.html +50 -0
- package/docs/crawl/core/components/ui/menu/menu.html +322 -0
- package/docs/crawl/core/components/ui/modal/modal.html +117 -0
- package/docs/crawl/core/components/ui/pop/pop.html +102 -0
- package/docs/crawl/core/components/ui/progress/progress.html +58 -0
- package/docs/crawl/core/components/ui/table/table.html +413 -0
- package/docs/crawl/core/components/ui/toast/toast.html +122 -0
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +79 -0
- package/docs/crawl/docs/_core-concept/dataFlow.html +166 -0
- package/docs/crawl/docs/_core-concept/overview.html +66 -0
- package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +116 -0
- package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
- package/docs/crawl/docs/_decorators/bind.html +141 -0
- package/docs/crawl/docs/_decorators/get.html +120 -0
- package/docs/crawl/docs/_decorators/handle.html +165 -0
- package/docs/crawl/docs/_decorators/on-assign.html +355 -0
- package/docs/crawl/docs/_decorators/patch.html +52 -0
- package/docs/crawl/docs/_decorators/post.html +102 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +49 -0
- package/docs/crawl/docs/_decorators/subscribe.html +109 -0
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
- package/docs/crawl/docs/_directives/sub.html +93 -0
- package/docs/crawl/docs/_getting-started/ai-agents.html +134 -0
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
- package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
- package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
- package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
- package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
- package/docs/crawl/docs/_getting-started/start.html +76 -0
- package/docs/crawl/docs/_getting-started/theming.html +85 -0
- package/docs/crawl/docs/_misc/api-configuration.html +149 -0
- package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
- package/docs/crawl/docs/_misc/docs-mock-api.html +146 -0
- package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
- package/docs/crawl/docs/_misc/endpoint.html +50 -0
- package/docs/crawl/docs/_misc/html-integration.html +47 -0
- package/docs/crawl/hubs/decorators.html +467 -0
- package/docs/crawl/hubs/form-components.html +357 -0
- package/docs/crawl/hubs/remote-data.html +374 -0
- package/docs/crawl/index.html +99 -0
- package/docs/docs-mock-api-sw.js +3 -1
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +3 -2
- package/docs/llms-full.txt +5423 -0
- package/docs/llms.txt +102 -0
- package/docs/robots.txt +15 -1
- package/docs/sitemap.xml +231 -0
- package/docs/src/docs/_decorators/get.md +47 -1
- package/docs/src/docs/search/docs-search.json +31 -1
- package/index.html +1 -0
- package/package.json +1 -1
- package/public/docs-mock-api-sw.js +1 -0
- package/public/robots.txt +15 -1
- package/scripts/generate-crawl-docs.mjs +569 -0
- package/scripts/post-build-docs.js +18 -14
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +42 -0
- package/src/core/utils/HTML.ts +4 -5
- package/src/docs/search/docs-search.json +61 -1
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html" data-doc-id="docs/_decorators/on-assign">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@onAssign — Concorde</title>
|
|
7
|
+
<meta name="description" content="> New apps: use @handle with DataProviderKey (Data flow). @onAssign uses untyped string paths; it remains documented for existing codebases — see Migrating to @handle below.">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/on-assign, on-assign, @onAssign, decorator, onAssign, DataProviderKey, set, get, User n°${userNumber}, user-${userNumber}@example.com">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/on-assign">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/on-assign.md/on-assign" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @onAssign</strong>. > New apps: use @handle with DataProviderKey (Data flow). @onAssign uses untyped string paths; it remains documented for existing codebases — see Migrating to @handle below. <span>Doc ID: <code>docs/_decorators/on-assign</code>. Keywords: Concorde, supersoniks, docs/_decorators/on-assign, on-assign, @onAssign, decorator, onAssign, DataProviderKey, set, get, User n°${userNumber}, user-${userNumber}@example.com. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html">https://concorde.supersoniks.org/crawl/docs/_decorators/on-assign.html</a>.</span></p>
|
|
19
|
+
<h1 id="onassign">@onAssign</h1>
|
|
20
|
+
<blockquote>
|
|
21
|
+
<p><strong>New apps:</strong> use <a href="./handle.html#handle">@handle</a> with <code>DataProviderKey</code> (<a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>). <code>@onAssign</code> uses untyped string paths; it remains documented for existing codebases — see <strong>Migrating to @handle</strong> below.</p>
|
|
22
|
+
</blockquote>
|
|
23
|
+
<p>The <code>@onAssign</code> decorator allows you to execute a method when one or more publishers are updated. The method is called only when all specified publishers have been assigned values.</p>
|
|
24
|
+
<p>For a <strong>typed</strong> equivalent (recommended), use <a href="./handle.html#handle">@handle</a>.</p>
|
|
25
|
+
<h2 id="principle">Principle</h2>
|
|
26
|
+
<p>This decorator subscribes to one or more publishers by <strong>string path</strong> (legacy). When all specified publishers have been assigned values (via <code>set</code>), the decorated method is called with all the values as arguments. Prefer <a href="./handle.html#handle">@handle</a> + <code>DataProviderKey</code> and <code>get</code> / <code>set</code> from <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>.</p>
|
|
27
|
+
<p>This is particularly useful when you need to wait for multiple data sources to be ready before executing logic.</p>
|
|
28
|
+
<h2 id="usage">Usage</h2>
|
|
29
|
+
<h3 id="import">Import</h3>
|
|
30
|
+
<pre><code class="language-typescript">import { onAssign } from "@supersoniks/concorde/decorators";
|
|
31
|
+
</code></pre>
|
|
32
|
+
<h3 id="basic-example">Basic example</h3>
|
|
33
|
+
<pre><code class="language-typescript">//...
|
|
34
|
+
@customElement("demo-on-assign")
|
|
35
|
+
export class DemoOnAssign extends LitElement {
|
|
36
|
+
static styles = [tailwind];
|
|
37
|
+
|
|
38
|
+
@state() userWithSettings: any = null;
|
|
39
|
+
@state() isReady: boolean = false;
|
|
40
|
+
@state() lastUpdate: string = "";
|
|
41
|
+
|
|
42
|
+
@onAssign("demoUser", "demoUserSettings")
|
|
43
|
+
handleDataReady(user: any, settings: any) {
|
|
44
|
+
this.isReady = Object.keys(user).length > 0 && Object.keys(settings).length > 0;
|
|
45
|
+
this.userWithSettings = { ...user, ...settings };
|
|
46
|
+
this.lastUpdate = new Date().toLocaleTimeString();
|
|
47
|
+
this.requestUpdate();
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
render() {
|
|
51
|
+
const { name, email, theme, language } = this.userWithSettings;
|
|
52
|
+
return //...
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
updateData() {
|
|
56
|
+
const user = PublisherManager.get("demoUser");
|
|
57
|
+
const userSettings = PublisherManager.get("demoUserSettings");
|
|
58
|
+
const userNumber = Math.floor(Math.random() * 100);
|
|
59
|
+
user.set({
|
|
60
|
+
name: `User n°${userNumber}`,
|
|
61
|
+
email: `user-${userNumber}@example.com`,
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
userSettings.set({
|
|
65
|
+
theme: ["light", "dark", "auto"][Math.floor(Math.random() * 3)],
|
|
66
|
+
language: ["en", "fr", "es"][Math.floor(Math.random() * 3)],
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</code></pre>
|
|
71
|
+
<pre><code><docs-demo-sources for="demo-on-assign"></docs-demo-sources>
|
|
72
|
+
<demo-on-assign></demo-on-assign>
|
|
73
|
+
</code></pre>
|
|
74
|
+
<h3 id="example-with-nested-paths">Example with nested paths</h3>
|
|
75
|
+
<pre><code class="language-typescript">@customElement("product-view")
|
|
76
|
+
export class ProductView extends LitElement {
|
|
77
|
+
product: any = null;
|
|
78
|
+
inventory: any = null;
|
|
79
|
+
|
|
80
|
+
@onAssign("store.product", "store.inventory")
|
|
81
|
+
handleProductData(product: any, inventory: any) {
|
|
82
|
+
this.product = product;
|
|
83
|
+
this.inventory = inventory;
|
|
84
|
+
this.requestUpdate();
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
render() {
|
|
88
|
+
if (!this.product) return html`<div>Loading...</div>`;
|
|
89
|
+
|
|
90
|
+
const stock = this.inventory[this.product.id] || 0;
|
|
91
|
+
return html`
|
|
92
|
+
<div>
|
|
93
|
+
<h2>${this.product.name}</h2>
|
|
94
|
+
<p>Price: ${this.product.price}€</p>
|
|
95
|
+
<p>Stock: ${stock}</p>
|
|
96
|
+
</div>
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</code></pre>
|
|
101
|
+
<h2 id="path-syntax">Path syntax</h2>
|
|
102
|
+
<p>The path uses dot notation to navigate through the publisher structure:</p>
|
|
103
|
+
<ul>
|
|
104
|
+
<li><strong>First segment</strong>: dataProvider identifier (e.g., <code>"userData"</code>)</li>
|
|
105
|
+
<li><strong>Following segments</strong>: nested properties (e.g., <code>"store.product"</code>)</li>
|
|
106
|
+
<li><strong>Array access</strong>: use numeric index (e.g., <code>"data.items.0"</code>)</li>
|
|
107
|
+
</ul>
|
|
108
|
+
<h3 id="dynamic-path-driven-by-class-properties">Dynamic path driven by class properties</h3>
|
|
109
|
+
<p>You can now build the paths dynamically by referencing the host class properties inside the strings passed to <code>@onAssign</code>. Two placeholder syntaxes are supported:</p>
|
|
110
|
+
<ul>
|
|
111
|
+
<li><code>${myProperty}</code> or <code>${this.myProperty}</code></li>
|
|
112
|
+
<li><code>{$myProperty}</code></li>
|
|
113
|
+
</ul>
|
|
114
|
+
<p>Each placeholder is replaced at runtime with the current value of the corresponding property. <code>@onAssign</code> automatically watches those properties and:</p>
|
|
115
|
+
<ul>
|
|
116
|
+
<li>re-evaluates the final paths when one of them changes,</li>
|
|
117
|
+
<li>removes the previous subscriptions before attaching the new ones,</li>
|
|
118
|
+
<li>observe the changes inside <code>willUpdate(changedProperties)</code> so nothing touches the getters/setters.</li>
|
|
119
|
+
</ul>
|
|
120
|
+
<p>While a placeholder is <code>null</code>/<code>undefined</code>, subscriptions are detached. Optional <code>skipEmptyPlaceholder</code> on <a href="./handle.html#handle">@handle</a> (typed replacement). Details: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
121
|
+
<pre><code class="language-typescript">@customElement("demo-on-assign-dynamic")
|
|
122
|
+
export class DemoOnAssignDynamic extends LitElement {
|
|
123
|
+
static styles = [tailwind];
|
|
124
|
+
|
|
125
|
+
@property({ type: String })
|
|
126
|
+
dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
|
|
127
|
+
|
|
128
|
+
@property({ type: Number })
|
|
129
|
+
userIndex: number = 0;
|
|
130
|
+
|
|
131
|
+
@state() user: any = null;
|
|
132
|
+
@state() userSettings: any = null;
|
|
133
|
+
|
|
134
|
+
@onAssign("${dataProvider}.${userIndex}", "${dataProvider}Settings.${userIndex}")
|
|
135
|
+
handleUserDataReady(user: any, settings: any) {
|
|
136
|
+
this.user = user;
|
|
137
|
+
this.userSettings = settings;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
updateUserIndex(e: Event) {
|
|
141
|
+
this.userIndex = parseInt((e.target as HTMLInputElement).value);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
updateDataProvider(e: Event) {
|
|
145
|
+
this.dataProvider = (e.target as HTMLSelectElement).value as
|
|
146
|
+
| "demoUsers"
|
|
147
|
+
| "demoUsersAlt";
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
updateCurrentUserData() {
|
|
151
|
+
const usersPublisher = PublisherManager.get(this.dataProvider);
|
|
152
|
+
const settingsPublisher = PublisherManager.get(
|
|
153
|
+
`${this.dataProvider}Settings`
|
|
154
|
+
);
|
|
155
|
+
const userPublisher = Objects.traverse(
|
|
156
|
+
usersPublisher,
|
|
157
|
+
[String(this.userIndex)]
|
|
158
|
+
) as PublisherProxy;
|
|
159
|
+
const settingPublisher = Objects.traverse(
|
|
160
|
+
settingsPublisher,
|
|
161
|
+
[String(this.userIndex)]
|
|
162
|
+
) as PublisherProxy;
|
|
163
|
+
|
|
164
|
+
if (userPublisher && settingPublisher) {
|
|
165
|
+
// Générer de nouvelles données aléatoires
|
|
166
|
+
const randomNames = [
|
|
167
|
+
{ firstName: "Alice", lastName: "Wonder" },
|
|
168
|
+
{ firstName: "Bob", lastName: "Builder" },
|
|
169
|
+
{ firstName: "Charlie", lastName: "Chaplin" },
|
|
170
|
+
];
|
|
171
|
+
const randomThemes = ["light", "dark", "auto"];
|
|
172
|
+
const randomLanguages = ["en", "fr", "es"];
|
|
173
|
+
|
|
174
|
+
const randomName =
|
|
175
|
+
randomNames[Math.floor(Math.random() * randomNames.length)];
|
|
176
|
+
const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
|
|
177
|
+
const randomTheme =
|
|
178
|
+
randomThemes[Math.floor(Math.random() * randomThemes.length)];
|
|
179
|
+
const randomLanguage =
|
|
180
|
+
randomLanguages[Math.floor(Math.random() * randomLanguages.length)];
|
|
181
|
+
|
|
182
|
+
// Mettre à jour l'utilisateur directement
|
|
183
|
+
const currentUser = userPublisher.get() || {};
|
|
184
|
+
userPublisher.set({
|
|
185
|
+
...currentUser,
|
|
186
|
+
firstName: randomName.firstName,
|
|
187
|
+
lastName: randomName.lastName,
|
|
188
|
+
email: randomEmail,
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
// Mettre à jour les settings directement
|
|
192
|
+
settingPublisher.set({
|
|
193
|
+
theme: randomTheme,
|
|
194
|
+
language: randomLanguage,
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
render() {
|
|
200
|
+
return html`
|
|
201
|
+
&lt;div class="flex flex-col gap-2"&gt;
|
|
202
|
+
&lt;sonic-select label="Users set" @change=${this.updateDataProvider}&gt;
|
|
203
|
+
&lt;option value="demoUsers"&gt;First set of users&lt;/option&gt;
|
|
204
|
+
&lt;option value="demoUsersAlt"&gt;Second set of users&lt;/option&gt;
|
|
205
|
+
&lt;/sonic-select&gt;
|
|
206
|
+
&lt;sonic-input
|
|
207
|
+
type="number"
|
|
208
|
+
.value=${this.userIndex}
|
|
209
|
+
@input=${this.updateUserIndex}
|
|
210
|
+
min="0"
|
|
211
|
+
max="9"
|
|
212
|
+
label="Index"
|
|
213
|
+
class="block"
|
|
214
|
+
&gt;&lt;/sonic-input&gt;
|
|
215
|
+
&lt;sonic-button @click=${this.updateCurrentUserData}&gt;
|
|
216
|
+
Update current user data
|
|
217
|
+
&lt;/sonic-button&gt;
|
|
218
|
+
&lt;div class="flex flex-col gap-2 border p-2"&gt;
|
|
219
|
+
&lt;div&gt;
|
|
220
|
+
&lt;sonic-icon name="user" library="heroicons"&gt;&lt;/sonic-icon&gt;
|
|
221
|
+
${this.user?.firstName} ${this.user?.lastName}
|
|
222
|
+
&lt;/div&gt;
|
|
223
|
+
&lt;div&gt;
|
|
224
|
+
&lt;sonic-icon name="envelope" library="heroicons"&gt;&lt;/sonic-icon&gt;
|
|
225
|
+
${this.user?.email}
|
|
226
|
+
&lt;/div&gt;
|
|
227
|
+
&lt;div&gt;
|
|
228
|
+
Theme: ${this.userSettings?.theme} | Language:
|
|
229
|
+
${this.userSettings?.language}
|
|
230
|
+
&lt;/div&gt;
|
|
231
|
+
&lt;/div&gt;
|
|
232
|
+
&lt;/div&gt;
|
|
233
|
+
`;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
</code></pre>
|
|
237
|
+
<pre><code><docs-demo-sources for="demo-on-assign-dynamic"></docs-demo-sources>
|
|
238
|
+
<demo-on-assign-dynamic></demo-on-assign-dynamic>
|
|
239
|
+
</code></pre>
|
|
240
|
+
<blockquote>
|
|
241
|
+
<p>⚠️ Use classic string literals: <code>@onAssign("${dataProvider}.${profileId}", "settings.${profileId}")</code>. Do <strong>not</strong> use template literals (backticks), otherwise JavaScript would try to interpolate the value immediately.</p>
|
|
242
|
+
</blockquote>
|
|
243
|
+
<p>Additional constraints:</p>
|
|
244
|
+
<ul>
|
|
245
|
+
<li>The hosting class must expose a <code>willUpdate(changedProperties?: Map<PropertyKey, unknown>)</code> method (LitElement already provides it) so that <code>@onAssign</code> can listen to dependency changes.</li>
|
|
246
|
+
<li>Dependencies need to be reactive (e.g. <code>@property()</code> on LitElement) or you must call <code>this.requestUpdate("myProp")</code> manually after changing them, otherwise <code>willUpdate</code> will never be notified.</li>
|
|
247
|
+
<li>If you use nested expressions like <code>${user.id}</code>, the first segment (<code>user</code>) is the one being observed: you need to reassign <code>this.user</code> (e.g. with a new object) so that the binding can detect the change.</li>
|
|
248
|
+
</ul>
|
|
249
|
+
<h2 id="behavior">Behavior</h2>
|
|
250
|
+
<ul>
|
|
251
|
+
<li>The method is called only when <strong>all</strong> specified publishers have been assigned values</li>
|
|
252
|
+
<li>The method receives the values of all publishers as arguments, in the same order as specified</li>
|
|
253
|
+
<li>Subscription happens at the time of <code>connectedCallback</code></li>
|
|
254
|
+
<li>Unsubscription happens automatically at the time of <code>disconnectedCallback</code></li>
|
|
255
|
+
<li>If a publisher doesn't exist yet, it will be created with the value <code>null</code></li>
|
|
256
|
+
<li>The method is called with <code>this</code> bound to the component instance</li>
|
|
257
|
+
</ul>
|
|
258
|
+
<h2 id="use-cases">Use cases</h2>
|
|
259
|
+
<p>This decorator is particularly useful for:</p>
|
|
260
|
+
<ul>
|
|
261
|
+
<li><strong>Waiting for multiple data sources</strong> before rendering or executing logic</li>
|
|
262
|
+
<li><strong>Synchronizing data</strong> from different publishers</li>
|
|
263
|
+
<li><strong>Initializing components</strong> that depend on multiple data providers</li>
|
|
264
|
+
<li><strong>Handling complex data dependencies</strong> where you need all data to be ready</li>
|
|
265
|
+
</ul>
|
|
266
|
+
<h2 id="complete-example">Complete example</h2>
|
|
267
|
+
<pre><code class="language-typescript">import { html, LitElement } from "lit";
|
|
268
|
+
import { customElement } from "lit/decorators.js";
|
|
269
|
+
import { onAssign } from "@supersoniks/concorde/decorators";
|
|
270
|
+
import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
|
|
271
|
+
|
|
272
|
+
@customElement("order-summary")
|
|
273
|
+
export class OrderSummary extends LitElement {
|
|
274
|
+
order: any = null;
|
|
275
|
+
customer: any = null;
|
|
276
|
+
shipping: any = null;
|
|
277
|
+
|
|
278
|
+
@onAssign("orderData", "customerData", "shippingData")
|
|
279
|
+
handleOrderReady(order: any, customer: any, shipping: any) {
|
|
280
|
+
this.order = order;
|
|
281
|
+
this.customer = customer;
|
|
282
|
+
this.shipping = shipping;
|
|
283
|
+
this.requestUpdate();
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
render() {
|
|
287
|
+
if (!this.order || !this.customer || !this.shipping) {
|
|
288
|
+
return html`<div>Loading order details...</div>`;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
return html`
|
|
292
|
+
<div class="order-summary">
|
|
293
|
+
<h2>Order #${this.order.id}</h2>
|
|
294
|
+
<p>Customer: ${this.customer.name}</p>
|
|
295
|
+
<p>Shipping to: ${this.shipping.address}</p>
|
|
296
|
+
<p>Total: ${this.order.total}€</p>
|
|
297
|
+
</div>
|
|
298
|
+
`;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
// Somewhere in your code, update the publishers:
|
|
302
|
+
const orderPub = PublisherManager.get("orderData");
|
|
303
|
+
const customerPub = PublisherManager.get("customerData");
|
|
304
|
+
const shippingPub = PublisherManager.get("shippingData");
|
|
305
|
+
// The method will be called only when all three are set:
|
|
306
|
+
orderPub.set({ id: "123", total: 99.99 });
|
|
307
|
+
customerPub.set({ name: "John Doe", email: "john@example.com" });
|
|
308
|
+
shippingPub.set({ address: "123 Main St" });
|
|
309
|
+
// handleOrderReady will be called with all three values
|
|
310
|
+
</code></pre>
|
|
311
|
+
<h2 id="migrating-to-handle">Migrating to @handle</h2>
|
|
312
|
+
<p><code>@handle</code> is the typed successor of <code>@onAssign</code>. The key behavioral difference: <code>@onAssign</code> waits for <strong>all</strong> values to be defined before calling the method, whereas <code>@handle</code> calls it on <strong>every</strong> assignment by default. Use the <code>waitForAllDefined</code> option to keep the old semantics.</p>
|
|
313
|
+
<h3 id="why-migrate">Why migrate</h3>
|
|
314
|
+
<ul>
|
|
315
|
+
<li><strong>Typed paths</strong>: keys are <code>DataProviderKey<T></code>, so the method arguments are strongly typed (no more <code>any</code>).</li>
|
|
316
|
+
<li><strong>Explicit intent</strong>: <code>waitForAllDefined</code> and <code>skip</code> replace implicit behavior.</li>
|
|
317
|
+
<li><strong>Single API</strong>: <code>@handle</code> covers the mono- and multi-path cases (up to 3 keys).</li>
|
|
318
|
+
</ul>
|
|
319
|
+
<h3 id="equivalent-semantics-waitforalldefined">Equivalent semantics (<code>waitForAllDefined</code>)</h3>
|
|
320
|
+
<pre><code class="language-typescript">// Before
|
|
321
|
+
@onAssign("demoUser", "demoUserSettings")
|
|
322
|
+
handleDataReady(user: any, settings: any) { /* ... */ }
|
|
323
|
+
|
|
324
|
+
// After — same "wait for everything" behavior, but typed
|
|
325
|
+
const user = new DataProviderKey&lt;User&gt;("demoUser");
|
|
326
|
+
const settings = new DataProviderKey&lt;Settings&gt;("demoUserSettings");
|
|
327
|
+
|
|
328
|
+
@handle(user, settings, { waitForAllDefined: true })
|
|
329
|
+
handleDataReady(user: User, settings: Settings) { /* ... */ }
|
|
330
|
+
</code></pre>
|
|
331
|
+
<h3 id="single-path">Single path</h3>
|
|
332
|
+
<pre><code class="language-typescript">// Before
|
|
333
|
+
@onAssign("settings.modules.logs_route.enabled")
|
|
334
|
+
onLogRoute(value: boolean) { /* ... */ }
|
|
335
|
+
|
|
336
|
+
// After
|
|
337
|
+
const settings = new DataProviderKey&lt;AppSettings&gt;("settings");
|
|
338
|
+
|
|
339
|
+
@handle(settings.modules.logs_route.enabled)
|
|
340
|
+
onLogRoute(value: boolean) { /* ... */ }
|
|
341
|
+
</code></pre>
|
|
342
|
+
<h3 id="4-paths">4+ paths</h3>
|
|
343
|
+
<p><code>@handle</code> is capped at 3 keys. For the rare case of 4 or more publishers, keep <code>@onAssign</code> for now, or split the logic into several <code>@handle</code> methods that each store their value and call a shared method (guarding against partial values).</p>
|
|
344
|
+
<h2 id="notes">Notes</h2>
|
|
345
|
+
<ul>
|
|
346
|
+
<li>This decorator works with any component that has <code>connectedCallback</code> and <code>disconnectedCallback</code> methods (such as <code>LitElement</code> or components extending <code>Subscriber</code>)</li>
|
|
347
|
+
<li>The method is called synchronously when all publishers are ready</li>
|
|
348
|
+
<li>If you need to update the UI, remember to call <code>this.requestUpdate()</code> inside the method</li>
|
|
349
|
+
<li>For more information about publishers, see the documentation on <a href="../_getting-started/pubsub.html#pubsub">Sharing data</a></li>
|
|
350
|
+
</ul>
|
|
351
|
+
|
|
352
|
+
</article>
|
|
353
|
+
</main>
|
|
354
|
+
</body>
|
|
355
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html" data-doc-id="docs/_decorators/patch">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@patch — Concorde</title>
|
|
7
|
+
<meta name="description" content="Sends data through API.patchDetailed. Same model as @post: decorated property is ApiResult<T> | null (request, response, result).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/patch, patch, @patch, decorator, API.patchDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/patch">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/patch.md/patch" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @patch</strong>. Sends data through API.patchDetailed. Same model as @post: decorated property is ApiResult<T> | null (request, response, result). <span>Doc ID: <code>docs/_decorators/patch</code>. Keywords: Concorde, supersoniks, docs/_decorators/patch, patch, @patch, decorator, API.patchDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html">https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html</a>.</span></p>
|
|
19
|
+
<h1 id="patch">@patch</h1>
|
|
20
|
+
<p>Sends data through <a href="../../core/utils/api.ts"><code>API.patchDetailed</code></a>. Same model as <a href="./post.html#post">@post</a>: decorated property is <strong><code>ApiResult<T> | null</code></strong> (<code>request</code>, <code>response</code>, <code>result</code>).</p>
|
|
21
|
+
<p>Pass an <a href="../_misc/endpoint.html#endpoint"><code>Endpoint<T></code></a> and a <code>DataProviderKey</code> for the <strong>request body</strong>. Import <code>patch</code> and <code>ApiResult</code> from <code>@supersoniks/concorde/decorators</code>.</p>
|
|
22
|
+
<h2 id="configuration">Configuration</h2>
|
|
23
|
+
<p>Same as <a href="./post.html#post">@post</a> / <a href="./get.html#get">@get</a>: scoped <code>HTML.getApiConfiguration(host)</code> or <code>DataProviderKey<APIConfiguration></code> as third argument.</p>
|
|
24
|
+
<h2 id="options-patchoptions">Options (<code>PatchOptions</code>)</h2>
|
|
25
|
+
<p>Same shape as <code>PostOptions</code> on <a href="./post.html#post">@post</a> (<code>ApiSendOptions</code>): <code>refetchEveryMs</code>, <code>skipIfBodyMissing</code>, <code>autoPostOnBodyMutation</code>, <code>triggerKey</code>, <code>skipEmptyPlaceholder</code>. See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a> for <code>${sessionId}</code> and empty-string behaviour.</p>
|
|
26
|
+
<h2 id="import">Import</h2>
|
|
27
|
+
<pre><code class="language-typescript">import { patch, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
28
|
+
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
29
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="example">Example</h2>
|
|
32
|
+
<pre><code class="language-typescript">const patchBodyKey = new DataProviderKey&lt;Partial&lt;Resource&gt;&gt;("resourcePatch");
|
|
33
|
+
|
|
34
|
+
@patch(
|
|
35
|
+
new Endpoint&lt;Resource, { resourceId: string }&gt;("resources/${resourceId}"),
|
|
36
|
+
patchBodyKey,
|
|
37
|
+
{ skipEmptyPlaceholder: true },
|
|
38
|
+
)
|
|
39
|
+
@state()
|
|
40
|
+
payload?: ApiResult&lt;Resource&gt; | null;
|
|
41
|
+
</code></pre>
|
|
42
|
+
<h2 id="see-also">See also</h2>
|
|
43
|
+
<ul>
|
|
44
|
+
<li><a href="./post.html#post">@post</a> — POST (live demos)</li>
|
|
45
|
+
<li><a href="./put.html#put">@put</a> — full replacement (PUT)</li>
|
|
46
|
+
<li><a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a></li>
|
|
47
|
+
</ul>
|
|
48
|
+
|
|
49
|
+
</article>
|
|
50
|
+
</main>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html" data-doc-id="docs/_decorators/post">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@post — Concorde</title>
|
|
7
|
+
<meta name="description" content="Sends data through API.postDetailed. The decorated property is ApiResult<T> | null: request, response, and typed result.">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/post, post, @post, decorator, API.postDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/post">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/post.md/post" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @post</strong>. Sends data through API.postDetailed. The decorated property is ApiResult<T> | null: request, response, and typed result. <span>Doc ID: <code>docs/_decorators/post</code>. Keywords: Concorde, supersoniks, docs/_decorators/post, post, @post, decorator, API.postDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/post.html">https://concorde.supersoniks.org/crawl/docs/_decorators/post.html</a>.</span></p>
|
|
19
|
+
<h1 id="post">@post</h1>
|
|
20
|
+
<p>Sends data through <a href="../../core/utils/api.ts"><code>API.postDetailed</code></a>. The decorated property is <strong><code>ApiResult<T> | null</code></strong>: <code>request</code>, <code>response</code>, and typed <code>result</code>.</p>
|
|
21
|
+
<p>Pass an <a href="../_misc/endpoint.html#endpoint"><code>Endpoint<T></code></a> as the first argument and a <code>DataProviderKey</code> for the <strong>request body</strong> as the second. Import <code>post</code> and <code>ApiResult</code> from <code>@supersoniks/concorde/decorators</code>, and <code>Endpoint</code> from <code>@supersoniks/concorde/utils/endpoint</code>.</p>
|
|
22
|
+
<h2 id="configuration">Configuration</h2>
|
|
23
|
+
<p>Same as <a href="./get.html#get">@get</a>: scoped <code>HTML.getApiConfiguration(host)</code> by default, or <code>DataProviderKey<APIConfiguration></code> as third argument. See <a href="../_misc/api-configuration.html#api-configuration">API configuration</a> for mock demos.</p>
|
|
24
|
+
<h2 id="optional-postoptions-third-or-fourth-argument">Optional <code>PostOptions</code> (third or fourth argument)</h2>
|
|
25
|
+
<table>
|
|
26
|
+
<thead>
|
|
27
|
+
<tr>
|
|
28
|
+
<th>Option</th>
|
|
29
|
+
<th>Description</th>
|
|
30
|
+
</tr>
|
|
31
|
+
</thead>
|
|
32
|
+
<tbody><tr>
|
|
33
|
+
<td><code>refetchEveryMs</code></td>
|
|
34
|
+
<td>Re-post on an interval (ms).</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<tr>
|
|
37
|
+
<td><code>skipIfBodyMissing</code></td>
|
|
38
|
+
<td>Skip when body publisher is <code>null</code>/<code>undefined</code> (default: <code>true</code>).</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td><code>autoPostOnBodyMutation</code></td>
|
|
42
|
+
<td>Re-post when the body publisher mutates (default: <code>true</code>). <code>false</code> = manual via <code>triggerKey.invalidate()</code>.</td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<td><code>skipEmptyPlaceholder</code></td>
|
|
46
|
+
<td>If <code>true</code>, a placeholder resolved to <code>''</code> blocks the request (empty string only — not <code>0</code> or <code>false</code>). See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic paths</a>.</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td><code>triggerKey</code></td>
|
|
50
|
+
<td><code>DataProviderKey</code> — <code>invalidate()</code> re-runs the POST with the current body.</td>
|
|
51
|
+
</tr>
|
|
52
|
+
</tbody></table>
|
|
53
|
+
<h2 id="when-the-post-runs-again">When the POST runs again</h2>
|
|
54
|
+
<ul>
|
|
55
|
+
<li>Body publisher <code>onInternalMutation</code> when <code>autoPostOnBodyMutation</code> is <code>true</code> (default). Plusieurs mutations synchrones dans la même frame sont regroupées en <strong>un seul POST</strong> via <code>requestAnimationFrame</code>.</li>
|
|
56
|
+
<li>Endpoint path dependency changes (<code>${sessionId}</code> on the host).</li>
|
|
57
|
+
<li>Configuration publisher mutation.</li>
|
|
58
|
+
<li><code>triggerKey</code> publisher <code>invalidate()</code>.</li>
|
|
59
|
+
<li><code>refetchEveryMs</code> timer (if set).</li>
|
|
60
|
+
</ul>
|
|
61
|
+
<h2 id="import">Import</h2>
|
|
62
|
+
<pre><code class="language-typescript">import { post, publish, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
63
|
+
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
64
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
65
|
+
</code></pre>
|
|
66
|
+
<h2 id="minimal-example">Minimal example</h2>
|
|
67
|
+
<p>Mock service: <code>POST /docs-mock-api/api/register</code> (same route as <a href="../../core/components/functional/submit/submit.html#submit"><code>sonic-submit</code></a> demos). Publisher setup lives in <code>decorators-demo-post.ts</code>.</p>
|
|
68
|
+
<pre><code class="language-typescript">const syncRequest = new DataProviderKey&lt;SyncRequest&gt;("syncRequest");
|
|
69
|
+
const syncTrigger = new DataProviderKey&lt;number&gt;("syncTrigger");
|
|
70
|
+
|
|
71
|
+
@post(
|
|
72
|
+
new Endpoint&lt;SyncResponse, { sessionId: string }&gt;("sessions/${sessionId}/sync"),
|
|
73
|
+
syncRequest,
|
|
74
|
+
{ triggerKey: syncTrigger },
|
|
75
|
+
)
|
|
76
|
+
@state()
|
|
77
|
+
payload?: ApiResult&lt;SyncResponse&gt; | null;
|
|
78
|
+
</code></pre>
|
|
79
|
+
<h2 id="live-demos">Live demos</h2>
|
|
80
|
+
<pre><code><docs-demo-sources for="demo-api-post"></docs-demo-sources>
|
|
81
|
+
<demo-api-post></demo-api-post>
|
|
82
|
+
</code></pre>
|
|
83
|
+
<p>Dynamic endpoint path — changing <code>sessionId</code> on the host re-runs the POST (<code>POST /docs-mock-api/api/sessions/{id}/sync</code>):</p>
|
|
84
|
+
<pre><code><docs-demo-sources for="demo-api-post-dynamic"></docs-demo-sources>
|
|
85
|
+
<demo-api-post-dynamic></demo-api-post-dynamic>
|
|
86
|
+
</code></pre>
|
|
87
|
+
<p><code>@post</code> + <code>@publish</code> on the same property (see <a href="./publish.html#publish">@publish</a>):</p>
|
|
88
|
+
<pre><code><docs-demo-sources for="demo-api-post-publish"></docs-demo-sources>
|
|
89
|
+
<demo-api-post-publish></demo-api-post-publish>
|
|
90
|
+
</code></pre>
|
|
91
|
+
<p>Stale responses are ignored if the path or generation changed before the request finished.</p>
|
|
92
|
+
<p><strong>Note:</strong> plusieurs composants <code>@post</code> sur la même page qui partagent le même <code>bodyKey</code> enverront chacun une requête à chaque mutation du body — utiliser une clé par composant (voir les deux démos live ci-dessus).</p>
|
|
93
|
+
<p>Path placeholders (<code>${sessionId}</code>, …): <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
94
|
+
<h2 id="see-also">See also</h2>
|
|
95
|
+
<ul>
|
|
96
|
+
<li><a href="./put.html#put">@put</a> · <a href="./patch.html#patch">@patch</a> — same decorator model, <code>PUT</code> / <code>PATCH</code> via <code>putDetailed</code> / <code>patchDetailed</code></li>
|
|
97
|
+
</ul>
|
|
98
|
+
|
|
99
|
+
</article>
|
|
100
|
+
</main>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html" data-doc-id="docs/_decorators/publish">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@publish — Concorde</title>
|
|
7
|
+
<meta name="description" content="Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/publish, publish, @publish, decorator, DataProviderKey, @bind, @subscribe, skipEmptyPlaceholder">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/publish">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/publish.md/publish" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @publish</strong>. Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe). <span>Doc ID: <code>docs/_decorators/publish</code>. Keywords: Concorde, supersoniks, docs/_decorators/publish, publish, @publish, decorator, DataProviderKey, @bind, @subscribe, skipEmptyPlaceholder. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html">https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html</a>.</span></p>
|
|
19
|
+
<h1 id="publish">@publish</h1>
|
|
20
|
+
<p>Write-only binding: assigning to the property publishes to the <code>DataProviderKey</code> path. No read subscription (inverse of <a href="./subscribe.html#subscribe">@subscribe</a>).</p>
|
|
21
|
+
<p>Similar to the “reflect” half of <a href="./bind.html#bind">@bind</a> without listening to the publisher.</p>
|
|
22
|
+
<h2 id="import">Import</h2>
|
|
23
|
+
<pre><code class="language-typescript">import { publish } from "@supersoniks/concorde/decorators";
|
|
24
|
+
import { sub } from "@supersoniks/concorde/directives";
|
|
25
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
26
|
+
</code></pre>
|
|
27
|
+
<h2 id="example">Example</h2>
|
|
28
|
+
<pre><code class="language-typescript">type PublishDemoData = { email: string; message: string };
|
|
29
|
+
const publishDemoKey = new DataProviderKey<PublishDemoData>("publishDemo");
|
|
30
|
+
//
|
|
31
|
+
@customElement("demo-publish")
|
|
32
|
+
export class DemoPublish extends LitElement {
|
|
33
|
+
@publish(publishDemoKey.email)
|
|
34
|
+
@state()
|
|
35
|
+
email = "";
|
|
36
|
+
//
|
|
37
|
+
@publish(publishDemoKey.message)
|
|
38
|
+
@state()
|
|
39
|
+
message = "";
|
|
40
|
+
//
|
|
41
|
+
render() {
|
|
42
|
+
return html`
|
|
43
|
+
<sonic-input
|
|
44
|
+
.value=${this.email}
|
|
45
|
+
@input=${(e) => (this.email = (e.target as HTMLInputElement).value)}
|
|
46
|
+
label="Email"
|
|
47
|
+
></sonic-input>
|
|
48
|
+
<p>${sub(publishDemoKey.email)}</p>
|
|
49
|
+
`;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</code></pre>
|
|
53
|
+
<pre><code><docs-demo-sources for="demo-publish"></docs-demo-sources>
|
|
54
|
+
<demo-publish></demo-publish>
|
|
55
|
+
</code></pre>
|
|
56
|
+
<p>Dynamic paths use the same placeholder rules as <code>@bind</code> / <code>@subscribe</code>. Resolution and <code>skipEmptyPlaceholder</code>: <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
57
|
+
|
|
58
|
+
</article>
|
|
59
|
+
</main>
|
|
60
|
+
</body>
|
|
61
|
+
</html>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html" data-doc-id="docs/_decorators/put">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@put — Concorde</title>
|
|
7
|
+
<meta name="description" content="Sends data through API.putDetailed. Same model as @post: decorated property is ApiResult<T> | null (request, response, result).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/put, put, @put, decorator, API.putDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/put">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_decorators/put.md/put" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @put</strong>. Sends data through API.putDetailed. Same model as @post: decorated property is ApiResult<T> | null (request, response, result). <span>Doc ID: <code>docs/_decorators/put</code>. Keywords: Concorde, supersoniks, docs/_decorators/put, put, @put, decorator, API.putDetailed, ApiResult | null, request, response, result, Endpoint, DataProviderKey, ApiResult, @supersoniks/concorde/decorators. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/put.html">https://concorde.supersoniks.org/crawl/docs/_decorators/put.html</a>.</span></p>
|
|
19
|
+
<h1 id="put">@put</h1>
|
|
20
|
+
<p>Sends data through <a href="../../core/utils/api.ts"><code>API.putDetailed</code></a>. Same model as <a href="./post.html#post">@post</a>: decorated property is <strong><code>ApiResult<T> | null</code></strong> (<code>request</code>, <code>response</code>, <code>result</code>).</p>
|
|
21
|
+
<p>Pass an <a href="../_misc/endpoint.html#endpoint"><code>Endpoint<T></code></a> and a <code>DataProviderKey</code> for the <strong>request body</strong>. Import <code>put</code> and <code>ApiResult</code> from <code>@supersoniks/concorde/decorators</code>.</p>
|
|
22
|
+
<h2 id="configuration">Configuration</h2>
|
|
23
|
+
<p>Same as <a href="./post.html#post">@post</a> / <a href="./get.html#get">@get</a>: scoped <code>HTML.getApiConfiguration(host)</code> or <code>DataProviderKey<APIConfiguration></code> as third argument.</p>
|
|
24
|
+
<h2 id="options-putoptions">Options (<code>PutOptions</code>)</h2>
|
|
25
|
+
<p>Same shape as <code>PostOptions</code> on <a href="./post.html#post">@post</a> (<code>ApiSendOptions</code>): <code>refetchEveryMs</code>, <code>skipIfBodyMissing</code>, <code>autoPostOnBodyMutation</code>, <code>triggerKey</code>, <code>skipEmptyPlaceholder</code>. See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a> for <code>${sessionId}</code> and empty-string behaviour.</p>
|
|
26
|
+
<h2 id="import">Import</h2>
|
|
27
|
+
<pre><code class="language-typescript">import { put, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
28
|
+
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
29
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
30
|
+
</code></pre>
|
|
31
|
+
<h2 id="example">Example</h2>
|
|
32
|
+
<pre><code class="language-typescript">const bodyKey = new DataProviderKey&lt;UpdatePayload&gt;("resourceBody");
|
|
33
|
+
|
|
34
|
+
@put(new Endpoint&lt;Resource, { resourceId: string }&gt;("resources/${resourceId}"), bodyKey)
|
|
35
|
+
@state()
|
|
36
|
+
payload?: ApiResult&lt;Resource&gt; | null;
|
|
37
|
+
</code></pre>
|
|
38
|
+
<p>Changing <code>resourceId</code> on the host re-runs the PUT when the path becomes ready — see <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
39
|
+
<h2 id="see-also">See also</h2>
|
|
40
|
+
<ul>
|
|
41
|
+
<li><a href="./post.html#post">@post</a> — POST (live demos, polling, <code>@publish</code>)</li>
|
|
42
|
+
<li><a href="./patch.html#patch">@patch</a> — partial update (PATCH)</li>
|
|
43
|
+
<li><a href="../_misc/endpoint.html#endpoint">Endpoint</a> · <a href="../_misc/api-configuration.html#api-configuration">API configuration</a></li>
|
|
44
|
+
</ul>
|
|
45
|
+
|
|
46
|
+
</article>
|
|
47
|
+
</main>
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|