@supersoniks/concorde 5.0.1 → 5.0.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/build-infos.json +1 -1
- package/concorde-core.bundle.js +519 -586
- package/concorde-core.es.js +3783 -3689
- package/dist/concorde-core.bundle.js +519 -586
- package/dist/concorde-core.es.js +3783 -3689
- package/docs/altcha-widget.js +2662 -0
- package/docs/assets/index--GpD7R7a.css +1 -0
- package/docs/assets/index-BnK6OS7w.js +12115 -0
- 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/jsonata/jsonata.html +79 -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 +140 -0
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +23 -0
- package/docs/crawl/core/components/ui/badge/badge.html +148 -0
- package/docs/crawl/core/components/ui/button/button.html +150 -0
- package/docs/crawl/core/components/ui/captcha/captcha.html +30 -0
- package/docs/crawl/core/components/ui/card/card.html +143 -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 +38 -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 +186 -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 +178 -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 +177 -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 +149 -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 +78 -0
- package/docs/crawl/docs/_decorators/post.html +139 -0
- package/docs/crawl/docs/_decorators/publish.html +61 -0
- package/docs/crawl/docs/_decorators/put.html +78 -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 +173 -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 +158 -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/formelement-subscriber-removal.html +138 -0
- package/docs/crawl/docs/_misc/html-integration.html +48 -0
- package/docs/crawl/hubs/decorators.html +547 -0
- package/docs/crawl/hubs/form-components.html +359 -0
- package/docs/crawl/hubs/remote-data.html +452 -0
- package/docs/crawl/index.html +101 -0
- package/docs/css/docs.css +0 -0
- package/docs/docs-mock-api-sw.js +724 -0
- package/docs/docs-mock-api-sw.js.map +7 -0
- package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Light.eot +0 -0
- package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
- package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
- package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
- package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
- package/docs/img/concorde-icon.svg +5 -0
- package/docs/img/concorde-logo.svg +1 -0
- package/docs/img/concorde.png +0 -0
- package/docs/img/concorde_def.png +0 -0
- package/docs/img/concorde_seuil.png.webp +0 -0
- package/docs/img/concorde_seuil_invert.png +0 -0
- package/docs/img/paul_metrand.jpg +0 -0
- package/docs/img/paul_metrand_xs.jpg +0 -0
- package/docs/index.html +93 -0
- package/docs/llms-full.txt +5945 -0
- package/docs/llms.txt +104 -0
- package/docs/robots.txt +16 -0
- package/docs/sitemap.xml +237 -0
- package/docs/src/core/components/functional/date/date.md +290 -0
- package/docs/src/core/components/functional/fetch/fetch.md +125 -0
- package/docs/src/core/components/functional/if/if.md +9 -0
- package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
- package/docs/src/core/components/functional/list/list.md +65 -0
- package/docs/src/core/components/functional/mix/mix.md +41 -0
- package/docs/src/core/components/functional/queue/queue.md +72 -0
- package/docs/src/core/components/functional/router/router.md +94 -0
- package/docs/src/core/components/functional/sdui/default-library.json +108 -0
- package/docs/src/core/components/functional/sdui/example.json +99 -0
- package/docs/src/core/components/functional/sdui/sdui.md +356 -0
- package/docs/src/core/components/functional/states/states.md +87 -0
- package/docs/src/core/components/functional/submit/submit.md +114 -0
- package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
- package/docs/src/core/components/functional/value/value.md +35 -0
- package/docs/src/core/components/ui/alert/alert.md +177 -0
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/docs/src/core/components/ui/badge/badge.md +175 -0
- package/docs/src/core/components/ui/button/button.md +183 -0
- package/docs/src/core/components/ui/captcha/captcha.md +12 -0
- package/docs/src/core/components/ui/card/card.md +152 -0
- package/docs/src/core/components/ui/divider/divider.md +35 -0
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +129 -0
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +77 -0
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +44 -0
- package/docs/src/core/components/ui/form/input/input.md +142 -0
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
- package/docs/src/core/components/ui/form/radio/radio.md +57 -0
- package/docs/src/core/components/ui/form/select/select.md +71 -0
- package/docs/src/core/components/ui/form/switch/switch.md +57 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
- package/docs/src/core/components/ui/group/group.md +75 -0
- package/docs/src/core/components/ui/icon/icon.md +125 -0
- package/docs/src/core/components/ui/icon/icons.json +1 -0
- package/docs/src/core/components/ui/image/image.md +201 -0
- package/docs/src/core/components/ui/link/link.md +43 -0
- package/docs/src/core/components/ui/loader/loader.md +55 -0
- package/docs/src/core/components/ui/menu/menu.md +329 -0
- package/docs/src/core/components/ui/modal/modal.md +119 -0
- package/docs/src/core/components/ui/pop/pop.md +200 -0
- package/docs/src/core/components/ui/progress/progress.md +63 -0
- package/docs/src/core/components/ui/table/table.md +455 -0
- package/docs/src/core/components/ui/toast/toast.md +166 -0
- package/docs/src/core/components/ui/tooltip/tooltip.md +82 -0
- package/docs/src/docs/_core-concept/dataFlow.md +88 -0
- package/docs/src/docs/_core-concept/overview.md +57 -0
- package/docs/src/docs/_core-concept/subscriber.md +75 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +127 -0
- package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
- package/docs/src/docs/_decorators/bind.md +167 -0
- package/docs/src/docs/_decorators/get.md +162 -0
- package/docs/src/docs/_decorators/handle.md +175 -0
- package/docs/src/docs/_decorators/on-assign.md +390 -0
- package/docs/src/docs/_decorators/patch.md +70 -0
- package/docs/src/docs/_decorators/post.md +146 -0
- package/docs/src/docs/_decorators/publish.md +55 -0
- package/docs/src/docs/_decorators/put.md +70 -0
- package/docs/src/docs/_decorators/subscribe.md +100 -0
- package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
- package/docs/src/docs/_directives/sub.md +91 -0
- package/docs/src/docs/_getting-started/ai-agents.md +76 -0
- package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
- package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
- package/docs/src/docs/_getting-started/create-a-component.md +139 -0
- package/docs/src/docs/_getting-started/my-first-component.md +236 -0
- package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
- package/docs/src/docs/_getting-started/pubsub.md +37 -0
- package/docs/src/docs/_getting-started/start.md +47 -0
- package/docs/src/docs/_getting-started/theming.md +91 -0
- package/docs/src/docs/_misc/api-configuration.md +81 -0
- package/docs/src/docs/_misc/dataProviderKey.md +168 -0
- package/docs/src/docs/_misc/docs-mock-api.md +63 -0
- package/docs/src/docs/_misc/dynamic-path.md +71 -0
- package/docs/src/docs/_misc/endpoint.md +45 -0
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
- package/docs/src/docs/_misc/html-integration.md +15 -0
- package/docs/src/docs/search/docs-search.json +10137 -0
- package/docs/src/tag-list.json +1 -0
- package/docs/src/tsconfig-model.json +23 -0
- package/docs/src/tsconfig.json +1224 -0
- package/docs/svg/regular/plane.svg +1 -0
- package/docs/svg/solid/plane.svg +1 -0
- package/index.html +2 -2
- package/package.json +14 -1
- package/src/core/components/ui/_css/rounded.ts +36 -0
- package/src/core/components/ui/_css/type.ts +49 -0
- package/src/core/components/ui/_i18n/ui-aria-labels.ts +104 -0
- package/src/core/components/ui/alert/alert.md +128 -72
- package/src/core/components/ui/alert/alert.spec.ts +145 -0
- package/src/core/components/ui/alert/alert.ts +86 -91
- package/src/core/components/ui/alert-messages/alert-messages.ts +1 -1
- package/src/core/components/ui/badge/badge.md +126 -78
- package/src/core/components/ui/badge/badge.ts +29 -81
- package/src/core/components/ui/button/button.md +1 -0
- package/src/core/components/ui/button/button.ts +11 -8
- package/src/core/components/ui/card/card-header.ts +7 -2
- package/src/core/components/ui/card/card.md +120 -65
- package/src/core/components/ui/divider/divider.ts +4 -9
- package/src/core/components/ui/form/fieldset/legend-description.ts +1 -1
- package/src/core/components/ui/form/fieldset/legend.ts +1 -1
- package/src/core/components/ui/form/input/input.md +1 -1
- package/src/core/components/ui/form/input/input.ts +19 -15
- package/src/core/components/ui/form/textarea/textarea.md +1 -1
- package/src/core/components/ui/image/image.md +147 -53
- package/src/core/components/ui/image/image.ts +10 -44
- package/src/core/components/ui/link/link.md +2 -2
- package/src/core/components/ui/link/link.ts +42 -37
- package/src/core/components/ui/modal/modal-close.ts +8 -12
- package/src/core/components/ui/modal/modal.ts +18 -18
- package/src/core/components/ui/pop/pop.md +7 -5
- package/src/core/components/ui/pop/pop.ts +78 -38
- package/src/core/components/ui/table/table.ts +2 -8
- package/src/core/components/ui/toast/dismissed.ts +14 -0
- package/src/core/components/ui/toast/toast-item.ts +139 -91
- package/src/core/components/ui/toast/toast.ts +4 -7
- package/src/core/components/ui/tooltip/tooltip.ts +6 -8
- package/src/core/utils/LocationHandler.ts +12 -5
- package/src/core/utils/dismissed.ts +22 -0
- package/src/core/utils/positioning.spec.ts +28 -0
- package/src/core/utils/positioning.ts +19 -0
- package/src/docs/_getting-started/concorde-outside.md +3 -3
- package/src/docs/code.ts +3 -1
- package/src/docs/search/docs-search.json +541 -1
- package/src/docs/tailwind/css/tailwind.css +6 -0
- package/src/tsconfig.json +422 -383
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +50 -3
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html" data-doc-id="docs/_decorators/handle">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>@handle — Concorde</title>
|
|
7
|
+
<meta name="description" content="Typed callback on one or more DataProviderKey<T> paths: invokes the decorated method when a publisher assigns a value (calculations, side effects, updating other @state properties, etc.).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/handle, handle, @handle, decorator, DataProviderKey, @state, HandleOptions, null, undefined, @bind, @subscribe, ${user.firstName} ${user.lastName}">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_decorators/handle">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.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/handle.md/handle" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @handle</strong>. Typed callback on one or more DataProviderKey<T> paths: invokes the decorated method when a publisher assigns a value (calculations, side effects, updating other @state properties, etc.). <span>Doc ID: <code>docs/_decorators/handle</code>. Keywords: Concorde, supersoniks, docs/_decorators/handle, handle, @handle, decorator, DataProviderKey, @state, HandleOptions, null, undefined, @bind, @subscribe, ${user.firstName} ${user.lastName}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html">https://concorde.supersoniks.org/crawl/docs/_decorators/handle.html</a>.</span></p>
|
|
19
|
+
<h1 id="handle">@handle</h1>
|
|
20
|
+
<p>Typed callback on one or more <code>DataProviderKey<T></code> paths: invokes the decorated <strong>method</strong> when a publisher assigns a value (calculations, side effects, updating other <code>@state</code> properties, etc.).</p>
|
|
21
|
+
<p>Unlike <a href="./subscribe.html#subscribe">@subscribe</a>, nothing is bound to the decorated member — only your method runs. <code>@handle</code> is typed and accepts up to <strong>3 keys</strong> plus an optional trailing <code>HandleOptions</code> object. It supersedes the string-based <a href="./on-assign.html#on-assign">@onAssign</a>.</p>
|
|
22
|
+
<p>By default the method is called on <strong>every</strong> assignment, even when the value is <code>null</code> / <code>undefined</code>. Use the options below to restrict that.</p>
|
|
23
|
+
<h2 id="import">Import</h2>
|
|
24
|
+
<pre><code class="language-typescript">import { handle, Skip } from "@supersoniks/concorde/decorators";
|
|
25
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
26
|
+
import { get, set } from "@supersoniks/concorde/utils";
|
|
27
|
+
</code></pre>
|
|
28
|
+
<h2 id="basic-example">Basic example</h2>
|
|
29
|
+
<pre><code class="language-typescript">type DemoCounterData = { count: number };
|
|
30
|
+
const demoDataKey = new DataProviderKey&lt;DemoCounterData&gt;("demoData");
|
|
31
|
+
|
|
32
|
+
@customElement("demo-handle")
|
|
33
|
+
export class DemoHandle extends LitElement {
|
|
34
|
+
@state() doubled = 0;
|
|
35
|
+
@state() lastUpdate = "";
|
|
36
|
+
|
|
37
|
+
@handle(demoDataKey.count)
|
|
38
|
+
onCountChange(count: number) {
|
|
39
|
+
this.doubled = count * 2;
|
|
40
|
+
this.lastUpdate = new Date().toLocaleTimeString();
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
incrementCount() {
|
|
44
|
+
const data = get(demoDataKey);
|
|
45
|
+
set(demoDataKey, { ...data, count: data.count + 1 });
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
render() {
|
|
49
|
+
return html`
|
|
50
|
+
&lt;p&gt;Doubled count: ${this.doubled}&lt;/p&gt;
|
|
51
|
+
&lt;p&gt;&lt;small&gt;Last update: ${this.lastUpdate}&lt;/small&gt;&lt;/p&gt;
|
|
52
|
+
&lt;sonic-button @click=${this.incrementCount}&gt;Increment&lt;/sonic-button&gt;
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
</code></pre>
|
|
57
|
+
<pre><code><docs-demo-sources for="demo-handle"></docs-demo-sources>
|
|
58
|
+
<demo-handle></demo-handle>
|
|
59
|
+
</code></pre>
|
|
60
|
+
<h2 id="dynamic-path">Dynamic path</h2>
|
|
61
|
+
<p>Placeholders in <code>DataProviderKey</code> resolve from the host component’s properties (same rules as <code>@bind</code> / <code>@subscribe</code>).</p>
|
|
62
|
+
<pre><code class="language-typescript">type User = { firstName: string; lastName: string; email: string };
|
|
63
|
+
|
|
64
|
+
@customElement("demo-handle-dynamic")
|
|
65
|
+
export class DemoHandleDynamic extends LitElement {
|
|
66
|
+
@property({ type: Number })
|
|
67
|
+
userIndex = 0;
|
|
68
|
+
|
|
69
|
+
@state() displayName = "";
|
|
70
|
+
@state() lastUpdate = "";
|
|
71
|
+
|
|
72
|
+
@handle(new DataProviderKey&lt;User, { userIndex: number }&gt;("demoUsers.${userIndex}"))
|
|
73
|
+
onUserAssigned(user: User) {
|
|
74
|
+
this.displayName = `${user.firstName} ${user.lastName}`;
|
|
75
|
+
this.lastUpdate = new Date().toLocaleTimeString();
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
render() {
|
|
79
|
+
return html`...`;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
</code></pre>
|
|
83
|
+
<pre><code><docs-demo-sources for="demo-handle-dynamic"></docs-demo-sources>
|
|
84
|
+
<demo-handle-dynamic></demo-handle-dynamic>
|
|
85
|
+
</code></pre>
|
|
86
|
+
<h2 id="multiple-paths">Multiple paths</h2>
|
|
87
|
+
<p><code>@handle</code> accepts up to <strong>3 keys</strong>; the method receives one strongly-typed argument per key, in order. Each assignment triggers the method, so make your method safe against partial values (or use <code>waitForAllDefined</code>, see below).</p>
|
|
88
|
+
<pre><code class="language-typescript">type QueueConfig = { onInactivity: { stillHere: { show: boolean } } };
|
|
89
|
+
const config = new DataProviderKey&lt;QueueConfig&gt;("sessionQueueConfig");
|
|
90
|
+
const idle = new DataProviderKey&lt;{ isIdle: boolean }&gt;("idleStatus");
|
|
91
|
+
|
|
92
|
+
@customElement("demo-handle-multi")
|
|
93
|
+
export class DemoHandleMulti extends LitElement {
|
|
94
|
+
|
|
95
|
+
// show: boolean, isIdle: boolean — fully typed from the keys
|
|
96
|
+
@handle(config.onInactivity.stillHere.show, idle.isIdle)
|
|
97
|
+
onInactivity(show: boolean, isIdle: boolean) {
|
|
98
|
+
if (show === true && isIdle === true) this.openModal();
|
|
99
|
+
else this.closeModal();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</code></pre>
|
|
103
|
+
<h2 id="options-handleoptions">Options (<code>HandleOptions</code>)</h2>
|
|
104
|
+
<p>Pass an options object as the <strong>last</strong> argument. The names map to real situations seen in the apps.</p>
|
|
105
|
+
<h3 id="waitforalldefined"><code>waitForAllDefined</code></h3>
|
|
106
|
+
<p>Only call the method once <strong>all</strong> watched keys are defined (non <code>null</code> / <code>undefined</code>). This reproduces the historical <code>@onAssign</code> semantics — use it when the logic only makes sense with every source ready (e.g. building a date from <code>date</code> + <code>timeZone</code> + <code>direction</code>).</p>
|
|
107
|
+
<pre><code class="language-typescript">@handle(trip.departureDate, trip.event.timeZone, form.direction, {
|
|
108
|
+
waitForAllDefined: true,
|
|
109
|
+
})
|
|
110
|
+
updateDepartureDate(date: number, timeZone: string, direction: string) {
|
|
111
|
+
// called only when the three values are all available
|
|
112
|
+
this.formDate = formatDate(date, timeZone, direction);
|
|
113
|
+
}
|
|
114
|
+
</code></pre>
|
|
115
|
+
<h3 id="skip"><code>skip</code></h3>
|
|
116
|
+
<p>Do <strong>not</strong> call the method when a received value belongs to one of the listed <strong>categories</strong> (the <code>Skip</code> enum). Each entry is a named category — not a value — so there is no value/pattern ambiguity (e.g. <code>{}</code> is <code>Skip.EmptyObject</code>, an explicit "empty object" category, never a value comparison).</p>
|
|
117
|
+
<table>
|
|
118
|
+
<thead>
|
|
119
|
+
<tr>
|
|
120
|
+
<th>Category</th>
|
|
121
|
+
<th>Matches</th>
|
|
122
|
+
</tr>
|
|
123
|
+
</thead>
|
|
124
|
+
<tbody><tr>
|
|
125
|
+
<td><code>Skip.Nullish</code></td>
|
|
126
|
+
<td><code>null</code> or <code>undefined</code> (a publisher always emits <code>null</code>, never <code>undefined</code>)</td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td><code>Skip.EmptyString</code></td>
|
|
130
|
+
<td><code>""</code></td>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td><code>Skip.EmptyObject</code></td>
|
|
134
|
+
<td>object with no keys (<code>{}</code>), arrays excluded</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td><code>Skip.EmptyArray</code></td>
|
|
138
|
+
<td>empty array (<code>[]</code>)</td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody></table>
|
|
141
|
+
<p>Useful when a not-yet-initialized publisher emits <code>{}</code> as a "loading" state. For a <strong>specific value</strong> (e.g. a particular string), guard inside the method instead.</p>
|
|
142
|
+
<pre><code class="language-typescript">@handle(user.profile, { skip: [Skip.Nullish, Skip.EmptyObject] })
|
|
143
|
+
onProfile(profile: Profile) {
|
|
144
|
+
// not called while the publisher still holds {} (not loaded yet)
|
|
145
|
+
this.displayName = profile.firstName;
|
|
146
|
+
}
|
|
147
|
+
</code></pre>
|
|
148
|
+
<blockquote>
|
|
149
|
+
<p>Options can be combined, e.g. <code>@handle(a, b, { waitForAllDefined: true, skip: [Skip.Nullish] })</code>. For any <strong>arbitrary</strong> validation on a specific value, just guard inside the method (<code>if (!isValid(v)) return;</code>) — that is exactly what an <code>accept</code>-style predicate would do, since <code>@handle</code> only runs your method.</p>
|
|
150
|
+
</blockquote>
|
|
151
|
+
<h3 id="skipemptyplaceholder"><code>skipEmptyPlaceholder</code></h3>
|
|
152
|
+
<p>On a <strong>dynamic key path</strong> (<code>"items.${itemId}"</code>), if <code>true</code>, a placeholder resolved to <code>''</code> is treated as not ready (no subscription) — <strong>empty string only</strong>, not <code>0</code> or <code>false</code>. See <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
153
|
+
<h2 id="highlights">Highlights</h2>
|
|
154
|
+
<ul>
|
|
155
|
+
<li>Strict typing: the method receives one argument per key, in order.</li>
|
|
156
|
+
<li>Up to 3 keys; for 4+ keys (rare), keep <a href="./on-assign.html#on-assign">@onAssign</a> for now.</li>
|
|
157
|
+
<li>By default the method runs on <strong>every</strong> assignment, even with <code>null</code> / <code>undefined</code> (unlike <code>@onAssign</code>, which waits for all values). Opt back into that behavior with <code>waitForAllDefined</code>.</li>
|
|
158
|
+
<li><code>skip</code> filters out values by <strong>named category</strong> (e.g. <code>[Skip.Nullish, Skip.EmptyObject]</code>); for arbitrary checks on a specific value, guard inside the method.</li>
|
|
159
|
+
</ul>
|
|
160
|
+
<p>See also <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> and <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
161
|
+
|
|
162
|
+
</article>
|
|
163
|
+
</main>
|
|
164
|
+
</body>
|
|
165
|
+
</html>
|
|
@@ -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,78 @@
|
|
|
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="@patch applies a partial update with the body from a publisher. It uses the">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_decorators/patch, patch, @patch, decorator, Endpoint, DataProviderKey, ApiResult, send(component),
|
|
9
|
+
|
|
10
|
+
, when: "before", autoPostOnBodyMutation: false, autoPostOnBodyMutation, skipIfBodyMissing">
|
|
11
|
+
<meta name="concorde-doc-id" content="docs/_decorators/patch">
|
|
12
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html">
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<header>
|
|
16
|
+
<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>
|
|
17
|
+
</header>
|
|
18
|
+
<main>
|
|
19
|
+
<article>
|
|
20
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde decorator — @patch</strong>. @patch applies a partial update with the body from a publisher. It uses the <span>Doc ID: <code>docs/_decorators/patch</code>. Keywords: Concorde, supersoniks, docs/_decorators/patch, patch, @patch, decorator, Endpoint, DataProviderKey, ApiResult, send(component),
|
|
21
|
+
|
|
22
|
+
, when: "before", autoPostOnBodyMutation: false, autoPostOnBodyMutation, skipIfBodyMissing. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html">https://concorde.supersoniks.org/crawl/docs/_decorators/patch.html</a>.</span></p>
|
|
23
|
+
<h1 id="patch">@patch</h1>
|
|
24
|
+
<p><code>@patch</code> applies a partial update with the body from a publisher. It uses the
|
|
25
|
+
same model as <a href="./post.html#post">@post</a>:
|
|
26
|
+
<code>Endpoint<T></code>, <code>DataProviderKey<B></code>, <code>ApiResult<T></code>, options, and the
|
|
27
|
+
<code>send(component)</code> handle.</p>
|
|
28
|
+
<h2 id="minimal-usage">Minimal usage</h2>
|
|
29
|
+
<pre><code class="language-typescript">const bodyKey = new DataProviderKey<Partial<User>>("users.patch");
|
|
30
|
+
const patchUser = patch(new Endpoint<User>("users/42"), bodyKey);
|
|
31
|
+
|
|
32
|
+
@patchUser
|
|
33
|
+
@state()
|
|
34
|
+
payload?: ApiResult<User>;
|
|
35
|
+
</code></pre>
|
|
36
|
+
<p>The same decorator adapts to a method:</p>
|
|
37
|
+
<pre><code class="language-typescript">@patch(new Endpoint<User>("users/42"), bodyKey)
|
|
38
|
+
handlePatch(payload?: ApiResult<User>) {
|
|
39
|
+
if (payload?.response?.ok) console.log(payload.result);
|
|
40
|
+
}
|
|
41
|
+
</code></pre>
|
|
42
|
+
<p>To run the operation again from the component:</p>
|
|
43
|
+
<pre><code class="language-typescript">async savePatch() {
|
|
44
|
+
await patchUser.send(this);
|
|
45
|
+
}
|
|
46
|
+
</code></pre>
|
|
47
|
+
<p><code>send(component)</code> returns a Promise resolved after the PATCH completes. See
|
|
48
|
+
<a href="./post.html#post">@post</a> for the method-decorator form and the
|
|
49
|
+
<code>when: "before"</code> option.</p>
|
|
50
|
+
<p>The PATCH is also sent automatically when the body mutates, unless
|
|
51
|
+
<code>autoPostOnBodyMutation: false</code> is set. The available options are described in
|
|
52
|
+
<a href="./post.html#post">@post</a>:</p>
|
|
53
|
+
<ul>
|
|
54
|
+
<li><code>autoPostOnBodyMutation</code></li>
|
|
55
|
+
<li><code>skipIfBodyMissing</code></li>
|
|
56
|
+
<li><code>refetchEveryMs</code></li>
|
|
57
|
+
<li><code>skipEmptyPlaceholder</code></li>
|
|
58
|
+
<li><code>triggerKey</code></li>
|
|
59
|
+
</ul>
|
|
60
|
+
<p>Pass explicit API configuration as the third argument:</p>
|
|
61
|
+
<pre><code class="language-typescript">@patch(endpoint, bodyKey, apiConfigurationKey)
|
|
62
|
+
</code></pre>
|
|
63
|
+
<h2 id="import">Import</h2>
|
|
64
|
+
<pre><code class="language-typescript">import { patch, type ApiResult } from "@supersoniks/concorde/decorators";
|
|
65
|
+
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
|
|
66
|
+
import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
|
|
67
|
+
</code></pre>
|
|
68
|
+
<h2 id="see-also">See also</h2>
|
|
69
|
+
<ul>
|
|
70
|
+
<li><a href="./post.html#post">@post</a> — options and triggers</li>
|
|
71
|
+
<li><a href="./put.html#put">@put</a> — full replacement</li>
|
|
72
|
+
<li><a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a></li>
|
|
73
|
+
</ul>
|
|
74
|
+
|
|
75
|
+
</article>
|
|
76
|
+
</main>
|
|
77
|
+
</body>
|
|
78
|
+
</html>
|