@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,58 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html" data-doc-id="docs/_getting-started/concorde-outside">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Installation — Concorde</title>
|
|
7
|
+
<meta name="description" content="The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_getting-started/concorde-outside">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/concorde-outside.md/concorde-outside" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Installation</strong>. The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started. <span>Doc ID: <code>docs/_getting-started/concorde-outside</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html</a>.</span></p>
|
|
19
|
+
<h1 id="installation">Installation</h1>
|
|
20
|
+
<sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
|
|
21
|
+
<p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
|
|
22
|
+
<p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
|
|
23
|
+
</sonic-alert>
|
|
24
|
+
|
|
25
|
+
<h2 id="starter">Starter</h2>
|
|
26
|
+
<p>The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.</p>
|
|
27
|
+
<pre><code class="language-shell">npx @supersoniks/create-concorde-ts-starter "project_name"
|
|
28
|
+
</code></pre>
|
|
29
|
+
<p>Then, from the project folder:</p>
|
|
30
|
+
<pre><code class="language-shell">yarn install
|
|
31
|
+
yarn dev --host
|
|
32
|
+
</code></pre>
|
|
33
|
+
<h2 id="next-steps">Next steps</h2>
|
|
34
|
+
<table>
|
|
35
|
+
<thead>
|
|
36
|
+
<tr>
|
|
37
|
+
<th>Step</th>
|
|
38
|
+
<th>Page</th>
|
|
39
|
+
</tr>
|
|
40
|
+
</thead>
|
|
41
|
+
<tbody><tr>
|
|
42
|
+
<td>Learn patterns</td>
|
|
43
|
+
<td><a href="./my-first-component.html#my-first-component">My first component</a></td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td>Agent skills</td>
|
|
47
|
+
<td><a href="./ai-agents.html#ai-agents">AI agents (skills)</a> — <code>yarn ai:sync</code> on the starter</td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td>Brownfield / manual Vite</td>
|
|
51
|
+
<td><a href="./concorde-manual-install.html#concorde-manual-install">Legacy: Manual installation</a></td>
|
|
52
|
+
</tr>
|
|
53
|
+
</tbody></table>
|
|
54
|
+
|
|
55
|
+
</article>
|
|
56
|
+
</main>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html" data-doc-id="docs/_getting-started/create-a-component">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Creating components — Concorde</title>
|
|
7
|
+
<meta name="description" content="> New app components: start with My first component and Data flow. The Subscriber mixin below is legacy.">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_getting-started/create-a-component">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/create-a-component.md/create-a-component" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Creating components</strong>. > New app components: start with My first component and Data flow. The Subscriber mixin below is legacy. <span>Doc ID: <code>docs/_getting-started/create-a-component</code>. Keywords: Concorde, supersoniks, docs/_getting-started/create-a-component, create-a-component, Creating components, guide, Subscriber, core, /components/destination/, /components/atoms, example.ts, ${this.text}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/create-a-component.html</a>.</span></p>
|
|
19
|
+
<h1 id="creating-components">Creating components</h1>
|
|
20
|
+
<blockquote>
|
|
21
|
+
<p><strong>New app components:</strong> start with <a href="./my-first-component.html#my-first-component">My first component</a> and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. The <code>Subscriber</code> mixin below is <a href="../_core-concept/subscriber.html#subscriber">legacy</a>.</p>
|
|
22
|
+
</blockquote>
|
|
23
|
+
<h2 id="where-to-put-it">Where to put it?</h2>
|
|
24
|
+
<p>In this document, we consider the src directory of the project as the root.<br>
|
|
25
|
+
We describe how we organize our components as an example, however it depends on your project.</p>
|
|
26
|
+
<p>In concorde each component is currently organized in the following directory structure (at least we try):</p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li><strong>/core/components/functional/component-name/component-name.ts</strong><br>Generic/functional/generally unstyled component.
|
|
29
|
+
The component usually doesn't use any other concrete components.</li>
|
|
30
|
+
<li><strong>/core/components/ui/component-name/component-name.ts</strong><br>Generic but UI-oriented component.
|
|
31
|
+
The component usually only uses generic components and other UI components.</li>
|
|
32
|
+
<li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>The component is intended to have a concrete usage within our ticketing system <strong>"la-billetterie"</strong>.
|
|
33
|
+
It usually only uses generic components from <code>core</code> and possibly other atoms.</li>
|
|
34
|
+
<li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>The component has a specific destination: (event / cart / gift card): <code>/components/destination/</code>
|
|
35
|
+
The component uses various components, usually from the <code>/components/atoms</code> directory.
|
|
36
|
+
It does not use components at the same level in the file hierarchy.</li>
|
|
37
|
+
</ul>
|
|
38
|
+
<h2 id="starting-from-a-simple-model">Starting from a Simple Model</h2>
|
|
39
|
+
<p>You can copy <code>example.ts</code> from the source to the desired destination to start with.
|
|
40
|
+
This file contains a web component in the form of a class that extends the <code>Subscriber</code> mixin, with a reactive property and a render function.</p>
|
|
41
|
+
<pre><code class="language-javascript">import { html, LitElement } from "lit";
|
|
42
|
+
import { customElement, property } from "lit/decorators.js";
|
|
43
|
+
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
44
|
+
|
|
45
|
+
@customElement("sonic-example")
|
|
46
|
+
export class SonicComponent extends Subscriber(LitElement) {
|
|
47
|
+
@property() text = "Example";
|
|
48
|
+
render() {
|
|
49
|
+
return html`${this.text}`;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</code></pre>
|
|
53
|
+
<p><strong>You can remove the dependency on <code>Subscriber</code></strong> if automatic population of the component with external data is not required.
|
|
54
|
+
For example, for a UI component:</p>
|
|
55
|
+
<pre><code class="language-javascript">import { html, LitElement } from "lit";
|
|
56
|
+
import { customElement, property } from "lit/decorators.js";
|
|
57
|
+
|
|
58
|
+
@customElement("sonic-example")
|
|
59
|
+
export class SonicComponent extends LitElement {
|
|
60
|
+
@property() text = "Example";
|
|
61
|
+
render() {
|
|
62
|
+
return html`${this.text}`;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
</code></pre>
|
|
66
|
+
<p>Regarding <code>Subscriber</code>, see:</p>
|
|
67
|
+
<ul>
|
|
68
|
+
<li><a href="../_core-concept/subscriber.html#subscriber">🔔 Subscriber</a></li>
|
|
69
|
+
<li><a href="./pubsub.html#pubsub">🥨 Sharing Data</a></li>
|
|
70
|
+
</ul>
|
|
71
|
+
<h3 id="naming-the-component">Naming the Component</h3>
|
|
72
|
+
<p>The class name is not necessarily important. However, it is important to <strong>give it a component name prefixed with "sonic"</strong> (or a prefix of your own) using the dedicated metadata already present in the copied document. For example, a button component would be named as follows:</p>
|
|
73
|
+
<pre><code class="language-typescript">@customElement("sonic-button")
|
|
74
|
+
</code></pre>
|
|
75
|
+
<p>For less generic components with a specific destination, we advise to include the destination in the name.
|
|
76
|
+
For example, for a "title" component in the "event" destination, the name would be simply:</p>
|
|
77
|
+
<pre><code class="language-typescript">@customElement("sonic-event-title")
|
|
78
|
+
</code></pre>
|
|
79
|
+
<h2 id="modifying-it">Modifying It</h2>
|
|
80
|
+
<h4 id="creating-reactive-properties-and-modifying-the-render-function">Creating Reactive Properties and Modifying the Render Function</h4>
|
|
81
|
+
<p>To do this, study the functioning of <a href="https://lit.dev">https://lit.dev</a> and also refer to <a href="../_core-concept/subscriber.html#subscriber">Subscriber</a>.</p>
|
|
82
|
+
<h4 id="html-structure-of-a-component">HTML Structure of a Component</h4>
|
|
83
|
+
<p>The HTML structure of a component should remain as simple as possible.</p>
|
|
84
|
+
<p>Ideally, there should be only one additional level of elements in addition to slots.</p>
|
|
85
|
+
<ul>
|
|
86
|
+
<li><strong>The main component is already a wrapper</strong>.
|
|
87
|
+
It receives classes to manage its layout, but it should not style internal elements.</li>
|
|
88
|
+
<li><strong>Slots handle the visual organization</strong> of elements.</li>
|
|
89
|
+
<li><strong>The specificity of the component is expressed in this additional level</strong> by adding a list, a functional native element (e.g., button), or another component.</li>
|
|
90
|
+
</ul>
|
|
91
|
+
<p>This leads to the creation of more components and thus raises questions about the hierarchical organization of files. However, this tends to atomize their roles.</p>
|
|
92
|
+
<h2 id="referencing-it">Referencing It</h2>
|
|
93
|
+
<p>To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.</p>
|
|
94
|
+
<p>In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of <strong>specific bundles</strong> in the future.</p>
|
|
95
|
+
<p>Here's where we add imports based on the component's location inside concorde as an example</p>
|
|
96
|
+
<ul>
|
|
97
|
+
<li><strong>/core/components/functional/component-name/component-name.ts</strong><br>In <code>/core/components/functional/functional.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
|
|
98
|
+
<li><strong>/core/components/ui/component-name/component-name.ts</strong><br>In <code>/core/components/ui/ui.ts</code>, which is referenced in core.ts and imported in <code>index.ts</code>.</li>
|
|
99
|
+
<li><strong>la-billetterie/components/atoms/component-name/component-name.ts</strong><br>Nowhere else but where it will be used, except for possible <strong>temporary</strong> tests, for example, in <code>index.ts</code>.</li>
|
|
100
|
+
<li><strong>la-billetterie/components/concrete-destination/component-name/component-name.ts</strong><br>In <code>la-billetterie/components/concrete-destination/destination-concrete.ts</code>.
|
|
101
|
+
If it's a new destination, you'll need to create the corresponding import .ts file and import it in <code>la-billetterie.ts</code>.</li>
|
|
102
|
+
</ul>
|
|
103
|
+
<h2 id="using-it">Using It</h2>
|
|
104
|
+
<p>As a reminder, the component is simply integrated into the context by adding a tag with the component's name, for example:</p>
|
|
105
|
+
<pre><code class="language-html"><sonic-event-title></sonic-event-title>
|
|
106
|
+
</code></pre>
|
|
107
|
+
|
|
108
|
+
</article>
|
|
109
|
+
</main>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html" data-doc-id="docs/_getting-started/my-first-component">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>My first component — Concorde</title>
|
|
7
|
+
<meta name="description" content="Build a Lit user card with Tailwind and Concorde UI, then connect it to the DataProvider store: declare the data configuration (type, key, scope), and let @subscribe keep the card in sync.">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/my-first-component, my-first-component, My first component, guide, @subscribe, src/docs/tailwind.ts, ${unsafeCSS(tailwindImport)}, DocsUserData, user, docsUserRowKey, "${dataProvider}", { dataProvider: string | null }">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_getting-started/my-first-component">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/my-first-component.md/my-first-component" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — My first component</strong>. Build a Lit user card with Tailwind and Concorde UI, then connect it to the DataProvider store: declare the data configuration (type, key, scope), and let @subscribe keep the card in sync. <span>Doc ID: <code>docs/_getting-started/my-first-component</code>. Keywords: Concorde, supersoniks, docs/_getting-started/my-first-component, my-first-component, My first component, guide, @subscribe, src/docs/tailwind.ts, ${unsafeCSS(tailwindImport)}, DocsUserData, user, docsUserRowKey, "${dataProvider}", { dataProvider: string | null }. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-component.html</a>.</span></p>
|
|
19
|
+
<h1 id="my-first-component">My first component</h1>
|
|
20
|
+
<p>Build a <strong>Lit</strong> user card with Tailwind and Concorde UI, then connect it to the <strong>DataProvider</strong> store: declare the <strong>data configuration</strong> (type, key, scope), and let <strong><code>@subscribe</code></strong> keep the card in sync.</p>
|
|
21
|
+
<blockquote>
|
|
22
|
+
<p>Legacy approach with the <strong>Subscriber mixin</strong>: <a href="./my-first-subscriber.html#my-first-subscriber">Legacy: My first subscriber</a>.</p>
|
|
23
|
+
</blockquote>
|
|
24
|
+
<h2 id="1-lit-component--tailwind">1. Lit component + Tailwind</h2>
|
|
25
|
+
<p>Export Tailwind once (e.g. <code>src/docs/tailwind.ts</code> in this repo):</p>
|
|
26
|
+
<pre><code class="language-typescript">import { css, unsafeCSS } from "lit";
|
|
27
|
+
import tailwindImport from "./css/tailwind.css?inline";
|
|
28
|
+
|
|
29
|
+
export const tailwind = css`${unsafeCSS(tailwindImport)}`;
|
|
30
|
+
</code></pre>
|
|
31
|
+
<p>User card — plain Lit properties and UI components (no store yet):</p>
|
|
32
|
+
<pre><code class="language-typescript">import { html, LitElement } from "lit";
|
|
33
|
+
import { customElement, property } from "lit/decorators.js";
|
|
34
|
+
import { tailwind } from "../tailwind";
|
|
35
|
+
|
|
36
|
+
@customElement("docs-user")
|
|
37
|
+
export class DocsUser extends LitElement {
|
|
38
|
+
static styles = [tailwind];
|
|
39
|
+
|
|
40
|
+
@property({ type: String }) first_name = "";
|
|
41
|
+
@property({ type: String }) last_name = "";
|
|
42
|
+
@property({ type: String }) email = "";
|
|
43
|
+
@property({ type: String }) avatar = "";
|
|
44
|
+
|
|
45
|
+
render() {
|
|
46
|
+
return html`&lt;div class="flex items-center gap-3 rounded-md p-2"&gt;
|
|
47
|
+
&lt;sonic-image src=${this.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
|
|
48
|
+
&lt;div&gt;
|
|
49
|
+
&lt;div&gt;${this.first_name} &lt;span class="font-bold"&gt;${this.last_name}&lt;/span&gt;&lt;/div&gt;
|
|
50
|
+
&lt;div class="text-sm text-neutral-400"&gt;${this.email}&lt;/div&gt;
|
|
51
|
+
&lt;/div&gt;
|
|
52
|
+
&lt;/div&gt;`;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
</code></pre>
|
|
56
|
+
<h2 id="2-data-configuration">2. Data configuration</h2>
|
|
57
|
+
<p>The card does not hard-code user fields anymore. You declare <strong>what</strong> is stored, <strong>where</strong> it lives, and <strong>which ancestor scope</strong> applies — then <code>@subscribe</code> mirrors that object on the component.</p>
|
|
58
|
+
<h3 id="type--shape-of-the-data">Type — shape of the data</h3>
|
|
59
|
+
<p><code>DocsUserData</code> documents the fields you expect at this scope (first name, email, avatar, …). TypeScript checks that <code>user</code> matches that shape.</p>
|
|
60
|
+
<pre><code class="language-typescript">export type DocsUserData = {
|
|
61
|
+
first_name: string;
|
|
62
|
+
last_name: string;
|
|
63
|
+
email: string;
|
|
64
|
+
avatar: string;
|
|
65
|
+
};
|
|
66
|
+
</code></pre>
|
|
67
|
+
<h3 id="key--path-in-the-dataprovider">Key — path in the DataProvider</h3>
|
|
68
|
+
<p><code>docsUserRowKey</code> points at the store segment to read. The path <code>"${dataProvider}"</code> is resolved at runtime from a property on the component (see scope below).</p>
|
|
69
|
+
<pre><code class="language-typescript">import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
|
|
70
|
+
|
|
71
|
+
export const docsUserRowKey = new DataProviderKey&lt;
|
|
72
|
+
DocsUserData,
|
|
73
|
+
{ dataProvider: string | null }
|
|
74
|
+
&gt;("${dataProvider}");
|
|
75
|
+
</code></pre>
|
|
76
|
+
<p>The second generic (<code>{ dataProvider: string | null }</code>) lists what the host must expose so <code>"${dataProvider}"</code> can be resolved. See <a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> and <a href="../_misc/dynamic-path.html#dynamic-path">Dynamic path placeholders</a>.</p>
|
|
77
|
+
<h3 id="scope--which-store-segment-applies">Scope — which store segment applies</h3>
|
|
78
|
+
<p>A parent sets <code>dataProvider=${docsUserScopeAKey.path}</code> (or a list row sets <code>…/list-item/0</code>). <a href="../_decorators/ancestor-attribute.html#ancestor-attribute"><code>@ancestorAttribute</code></a> copies that attribute onto <code>this.dataProvider</code>, so the key resolves to the correct branch.</p>
|
|
79
|
+
<pre><code class="language-typescript">@ancestorAttribute("dataProvider")
|
|
80
|
+
dataProvider: string | null = null;
|
|
81
|
+
</code></pre>
|
|
82
|
+
<h3 id="subscribe--keep-the-card-in-sync">Subscribe — keep the card in sync</h3>
|
|
83
|
+
<p><a href="../_decorators/subscribe.html#subscribe"><code>@subscribe</code></a> watches <code>docsUserRowKey</code> and updates <code>user</code> when the store changes. Use <code>@state()</code> so Lit re-renders. The template reads <code>this.user</code> like any other property.</p>
|
|
84
|
+
<pre><code class="language-typescript">import { html, LitElement, nothing } from "lit";
|
|
85
|
+
import { customElement, state } from "lit/decorators.js";
|
|
86
|
+
import {
|
|
87
|
+
ancestorAttribute,
|
|
88
|
+
subscribe,
|
|
89
|
+
} from "@supersoniks/concorde/core/decorators/Subscriber";
|
|
90
|
+
import { docsUserRowKey, type DocsUserData } from "./users";
|
|
91
|
+
import { tailwind } from "../tailwind";
|
|
92
|
+
|
|
93
|
+
@customElement("docs-user")
|
|
94
|
+
export class DocsUser extends LitElement {
|
|
95
|
+
static styles = [tailwind];
|
|
96
|
+
|
|
97
|
+
@ancestorAttribute("dataProvider")
|
|
98
|
+
dataProvider: string | null = null;
|
|
99
|
+
|
|
100
|
+
@subscribe(docsUserRowKey)
|
|
101
|
+
@state()
|
|
102
|
+
user: DocsUserData | null = null;
|
|
103
|
+
|
|
104
|
+
render() {
|
|
105
|
+
const u = this.user;
|
|
106
|
+
if (!u) return nothing;
|
|
107
|
+
return html`&lt;div class="flex items-center gap-3 rounded-md p-2"&gt;
|
|
108
|
+
&lt;sonic-image src=${u.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
|
|
109
|
+
&lt;div&gt;
|
|
110
|
+
&lt;div&gt;${u.first_name} &lt;span class="font-bold"&gt;${u.last_name}&lt;/span&gt;&lt;/div&gt;
|
|
111
|
+
&lt;div class="text-sm text-neutral-400"&gt;${u.email}&lt;/div&gt;
|
|
112
|
+
&lt;/div&gt;
|
|
113
|
+
&lt;/div&gt;`;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
</code></pre>
|
|
117
|
+
<p>Live code: <code>src/docs/example/users.ts</code>. In this repo, imports use <strong><code>core/…</code> paths</strong> (short <code>@supersoniks/concorde/…</code> exports apply in <strong>consumer apps</strong> only).</p>
|
|
118
|
+
<h3 id="two-scopes-one-component">Two scopes, one component</h3>
|
|
119
|
+
<p>The same <code>docs-user</code> is mounted twice. Each copy inherits a <strong>different</strong> nearest <code>dataProvider</code> — that is the row/list <strong>scope</strong>:</p>
|
|
120
|
+
<pre><code><docs-demo-sources for="docs-user-two-scopes"></docs-demo-sources>
|
|
121
|
+
<docs-user-two-scopes></docs-user-two-scopes>
|
|
122
|
+
</code></pre>
|
|
123
|
+
<p>Markup (two isolated stores; keys from <code>docs-provider-keys.ts</code>):</p>
|
|
124
|
+
<pre><code class="language-markup">&lt;div class="grid md:grid-cols-2 gap-6"&gt;
|
|
125
|
+
&lt;div dataProvider="${docsUserScopeAKey.path}"&gt;
|
|
126
|
+
&lt;docs-user&gt;&lt;/docs-user&gt;
|
|
127
|
+
&lt;/div&gt;
|
|
128
|
+
&lt;div dataProvider="${docsUserScopeBKey.path}"&gt;
|
|
129
|
+
&lt;docs-user&gt;&lt;/docs-user&gt;
|
|
130
|
+
&lt;/div&gt;
|
|
131
|
+
&lt;/div&gt;
|
|
132
|
+
</code></pre>
|
|
133
|
+
<p>Seeded in <code>docs-provider-keys.ts</code> (<code>set(docsUserScopeAKey, …)</code>): <strong>Paul</strong> / <strong>Marie</strong>. Without <code>@ancestorAttribute</code>, both cards would not know which store to read.</p>
|
|
134
|
+
<h2 id="3-fetch-users--sonic-list-with-items">3. Fetch users — <code>sonic-list</code> with <code>.items</code></h2>
|
|
135
|
+
<p>Use a Lit parent and the <strong><code>items</code></strong> renderer (not HTML <code><template></code> children). The callback receives each row object from fetch — render fields directly (<code>${item.first_name}</code>, …), like porting a template that used <code>data-bind</code> / <code><sonic-value></code>.</p>
|
|
136
|
+
<pre><code><docs-lit-demo for="docs-users-list"></docs-lit-demo>
|
|
137
|
+
</code></pre>
|
|
138
|
+
<p>Wrapper (<code>docs-users-list.ts</code>):</p>
|
|
139
|
+
<pre><code class="language-typescript">import { html, LitElement } from "lit";
|
|
140
|
+
import { customElement } from "lit/decorators.js";
|
|
141
|
+
import "../../core/components/functional/list/list";
|
|
142
|
+
import "./users";
|
|
143
|
+
|
|
144
|
+
@customElement("docs-users-list")
|
|
145
|
+
export class DocsUsersList extends LitElement {
|
|
146
|
+
private items = ({ first_name, last_name, email, avatar }) => html`
|
|
147
|
+
&lt;div class="flex gap-3"&gt;
|
|
148
|
+
&lt;sonic-image src=${avatar} ...&gt;&lt;/sonic-image&gt;
|
|
149
|
+
&lt;div&gt;${first_name} &lt;b&gt;${last_name}&lt;/b&gt;&lt;/div&gt;
|
|
150
|
+
&lt;div class="text-sm text-neutral-400"&gt;${email}&lt;/div&gt;
|
|
151
|
+
&lt;/div&gt;
|
|
152
|
+
`;
|
|
153
|
+
|
|
154
|
+
render() {
|
|
155
|
+
return html`
|
|
156
|
+
&lt;sonic-list fetch dataProvider=${usersListEndpoint.path} key="data" .items=${this.items}&gt;&lt;/sonic-list&gt;
|
|
157
|
+
`;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
</code></pre>
|
|
161
|
+
<p>See <a href="../_misc/docs-mock-api.html#docs-mock-api">Local API demos</a> for <code>serviceURL="/docs-mock-api"</code>.</p>
|
|
162
|
+
<h2 id="4-form-preview-with-formdataprovider">4. Form preview with <code>formDataProvider</code></h2>
|
|
163
|
+
<p>Edit fields in a form; the card follows the same <code>docsUserRowKey</code> when the preview host sets <code>dataProvider="userPreview"</code>.</p>
|
|
164
|
+
<pre><code><div class="grid grid-cols-1 gap-4 max-w-xl">
|
|
165
|
+
<form formDataProvider="${docsUserPreviewKey.path}" class="grid grid-cols-2 gap-3">
|
|
166
|
+
<sonic-input label="First name" name="first_name" value="Paul" size="sm"></sonic-input>
|
|
167
|
+
<sonic-input label="Last name" name="last_name" value="Metrand" size="sm"></sonic-input>
|
|
168
|
+
<sonic-input class="col-span-2" label="Email" name="email" value="paul@example.com" size="sm"></sonic-input>
|
|
169
|
+
<sonic-input class="col-span-2" label="Avatar URL" name="avatar" value="https://i.pravatar.cc/150?u=paul" size="sm"></sonic-input>
|
|
170
|
+
</form>
|
|
171
|
+
<sonic-divider align="left">Preview</sonic-divider>
|
|
172
|
+
<div dataProvider="${docsUserPreviewKey.path}">
|
|
173
|
+
<docs-user></docs-user>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</code></pre>
|
|
177
|
+
<p>Use <code>formDataProvider</code> + <code>name</code> on inputs — no manual <code>@input</code> handlers (<a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>).</p>
|
|
178
|
+
<h2 id="next-steps">Next steps</h2>
|
|
179
|
+
<ul>
|
|
180
|
+
<li><a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> — full map</li>
|
|
181
|
+
<li><a href="../_misc/dataProviderKey.html#dataProviderKey">DataProviderKey</a> — typed paths and host constraints</li>
|
|
182
|
+
<li><a href="../_decorators/subscribe.html#subscribe">@subscribe</a> / <a href="../_directives/sub.html#sub">sub()</a> — read-only in templates</li>
|
|
183
|
+
<li><a href="../../core/components/functional/list/list.html#list">List</a> — <code>.items</code>, <code>.noItems</code>, <code>.skeleton</code></li>
|
|
184
|
+
</ul>
|
|
185
|
+
|
|
186
|
+
</article>
|
|
187
|
+
</main>
|
|
188
|
+
</body>
|
|
189
|
+
</html>
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html" data-doc-id="docs/_getting-started/my-first-subscriber">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Legacy: My first subscriber component — Concorde</title>
|
|
7
|
+
<meta name="description" content="> New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_getting-started/my-first-subscriber">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/my-first-subscriber.md/my-first-subscriber" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: My first subscriber component</strong>. > New projects: use My first component (@ancestorAttribute, @subscribe + DataProviderKey, .items on lists) and Data flow. This page documents the Subscriber mixin used by older apps and core component <span>Doc ID: <code>docs/_getting-started/my-first-subscriber</code>. Keywords: Concorde, supersoniks, docs/_getting-started/my-first-subscriber, my-first-subscriber, Legacy: My first subscriber component, guide, @ancestorAttribute, @subscribe, DataProviderKey, .items, ${unsafeCSS(tailwindImport)}. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/my-first-subscriber.html</a>.</span></p>
|
|
19
|
+
<h1 id="legacy-my-first-subscriber-component">Legacy: My first subscriber component</h1>
|
|
20
|
+
<blockquote>
|
|
21
|
+
<p><strong>New projects:</strong> use <a href="./my-first-component.html#my-first-component">My first component</a> (<code>@ancestorAttribute</code>, <code>@subscribe</code> + <code>DataProviderKey</code>, <code>.items</code> on lists) and <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>. This page documents the <strong>Subscriber mixin</strong> used by older apps and core components.</p>
|
|
22
|
+
</blockquote>
|
|
23
|
+
<p>Learn how to build a component with the <strong>Subscriber</strong> mixin, styled with Tailwind, filled from a DataProvider via automatic property mapping.</p>
|
|
24
|
+
<h2 id="create-a-classic-lit-component">Create a classic lit component</h2>
|
|
25
|
+
<pre><code class="language-javascript">import { html, LitElement, nothing } from "lit";
|
|
26
|
+
import { customElement, property } from "lit/decorators.js";
|
|
27
|
+
@customElement("docs-user")
|
|
28
|
+
export class user extends LitElement {
|
|
29
|
+
@property({ type: String }) first_name = "";
|
|
30
|
+
@property({ type: String }) last_name = "";
|
|
31
|
+
@property({ type: String }) avatar = "";
|
|
32
|
+
@property({ type: String }) email = "";
|
|
33
|
+
render() {
|
|
34
|
+
return html`
|
|
35
|
+
&lt;img src="${this.avatar}" /&gt; &lt;br&gt;
|
|
36
|
+
${this.first_name} ${this.last_name} &lt;br&gt;
|
|
37
|
+
${this.email}`;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</code></pre>
|
|
41
|
+
<h3 id="style-with-tailwind-and-ui-components">Style with tailwind and ui components</h3>
|
|
42
|
+
<pre><code class="language-javascript">import { css, unsafeCSS } from "lit";
|
|
43
|
+
import tailwindImport from "./css/tailwind.css?inline";
|
|
44
|
+
export const tailwind = css`${unsafeCSS(tailwindImport)}`;
|
|
45
|
+
</code></pre>
|
|
46
|
+
<pre><code class="language-javascript">import { html, LitElement } from "lit";
|
|
47
|
+
import { customElement, property } from "lit/decorators.js";
|
|
48
|
+
import { tailwind } from "../tailwind";
|
|
49
|
+
import '@supersoniks/concode/ui/image'
|
|
50
|
+
import '@supersoniks/concode/ui/button'
|
|
51
|
+
import '@supersoniks/concode/ui/icon'
|
|
52
|
+
@customElement("docs-user")
|
|
53
|
+
export class user extends LitElement {
|
|
54
|
+
static styles = [tailwind];
|
|
55
|
+
@property({ type: String }) first_name = "";
|
|
56
|
+
@property({ type: String }) last_name = "";
|
|
57
|
+
@property({ type: String }) avatar = "";
|
|
58
|
+
@property({ type: String }) email = "";
|
|
59
|
+
render() {
|
|
60
|
+
return html`&lt;div class="flex items-center gap-3 p-2"&gt;
|
|
61
|
+
&lt;sonic-image src=${this.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
|
|
62
|
+
&lt;div&gt;${this.first_name} &lt;span class="font-bold"&gt;${this.last_name}&lt;/span&gt;&lt;/div&gt;
|
|
63
|
+
&lt;div class="text-sm text-neutral-400"&gt;${this.email}&lt;/div&gt;
|
|
64
|
+
&lt;/div&gt;`;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</code></pre>
|
|
68
|
+
<h2 id="add-subscriber-mixin">Add Subscriber mixin</h2>
|
|
69
|
+
<pre><code class="language-javascript">import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
70
|
+
@customElement("docs-user")
|
|
71
|
+
export class user extends Subscriber(LitElement) {
|
|
72
|
+
// properties auto-filled from DataProvider when names match
|
|
73
|
+
}
|
|
74
|
+
</code></pre>
|
|
75
|
+
<p>See <a href="../_core-concept/subscriber.html#subscriber">Legacy: Subscriber mixin</a>.</p>
|
|
76
|
+
<h2 id="autofill-from-a-dataprovider">Autofill from a dataProvider</h2>
|
|
77
|
+
<pre><code><docs-demo-sources for="list-users-fetch"></docs-demo-sources>
|
|
78
|
+
<div serviceURL="/docs-mock-api">
|
|
79
|
+
<sonic-fetch
|
|
80
|
+
serviceURL="/docs-mock-api"
|
|
81
|
+
dataProvider="api/users/3"
|
|
82
|
+
key="data">
|
|
83
|
+
<docs-user></docs-user>
|
|
84
|
+
</sonic-fetch>
|
|
85
|
+
</div>
|
|
86
|
+
</code></pre>
|
|
87
|
+
<pre><code><sonic-fetch
|
|
88
|
+
serviceURL="/docs-mock-api"
|
|
89
|
+
dataProvider="api/users/2"
|
|
90
|
+
key="data"></sonic-fetch>
|
|
91
|
+
<docs-user dataProvider="api/users/2" ></docs-user>
|
|
92
|
+
</code></pre>
|
|
93
|
+
<pre><code><div class="grid grid-cols-1 gap-4">
|
|
94
|
+
<form formDataProvider="userPreview" class="grid grid-cols-4 gap-3" >
|
|
95
|
+
<sonic-input label="First name" type="text" name="first_name" value="Paul" size="sm"></sonic-input>
|
|
96
|
+
<sonic-input label="Last name" type="text" name="last_name" value="Metrand" size="sm"></sonic-input>
|
|
97
|
+
<sonic-input class="col-span-2" label="email" type="text" name="email" value="paul@example.com" size="sm"></sonic-input>
|
|
98
|
+
<sonic-input label="Image url" type="text" name="avatar" value="https://i.pravatar.cc/150?u=paul" size="sm"></sonic-input>
|
|
99
|
+
</form>
|
|
100
|
+
<sonic-divider align="left">Preview before submit</sonic-divider>
|
|
101
|
+
<div dataProvider="userPreview">
|
|
102
|
+
<docs-user></docs-user>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</code></pre>
|
|
106
|
+
|
|
107
|
+
</article>
|
|
108
|
+
</main>
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html" data-doc-id="docs/_getting-started/pubsub">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Legacy: Sharing data — Concorde</title>
|
|
7
|
+
<meta name="description" content="> New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …).">
|
|
8
|
+
<meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:["world"]}, bar:"baz"}, myPublisher.foo.hello, null">
|
|
9
|
+
<meta name="concorde-doc-id" content="docs/_getting-started/pubsub">
|
|
10
|
+
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<header>
|
|
14
|
+
<p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/pubsub.md/pubsub" rel="nofollow">interactive version</a></p>
|
|
15
|
+
</header>
|
|
16
|
+
<main>
|
|
17
|
+
<article>
|
|
18
|
+
<p class="doc-lead" id="doc-summary"><strong>Concorde guide — Legacy: Sharing data</strong>. > New apps: Data flow (get / set / DataProviderKey, decorators). This page documents the historical Publisher proxy API (PublisherManager, publisher.set, onAssign, …). <span>Doc ID: <code>docs/_getting-started/pubsub</code>. Keywords: Concorde, supersoniks, docs/_getting-started/pubsub, pubsub, Legacy: Sharing data, guide, get, set, DataProviderKey, PublisherManager, publisher.set, onAssign, {foo:{hello:["world"]}, bar:"baz"}, myPublisher.foo.hello, null. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/pubsub.html</a>.</span></p>
|
|
19
|
+
<h1 id="legacy-sharing-data">Legacy: Sharing data</h1>
|
|
20
|
+
<blockquote>
|
|
21
|
+
<p><strong>New apps:</strong> <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a> (<code>get</code> / <code>set</code> / <code>DataProviderKey</code>, decorators). This page documents the historical <strong>Publisher</strong> proxy API (<code>PublisherManager</code>, <code>publisher.set</code>, <code>onAssign</code>, …).</p>
|
|
22
|
+
</blockquote>
|
|
23
|
+
<p>This section describes how data is shared between graphical and non-graphical components.</p>
|
|
24
|
+
<p>Graphical components should not reference each other directly — they stay decoupled via a <strong>publish/subscribe</strong> store.</p>
|
|
25
|
+
<h2 id="the-publisher">The Publisher</h2>
|
|
26
|
+
<h3 id="principle">Principle</h3>
|
|
27
|
+
<ul>
|
|
28
|
+
<li><p>The <strong>publisher</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">JavaScript proxy</a> that holds data.<br>
|
|
29
|
+
Example: <code>{foo:{hello:["world"]}, bar:"baz"}</code></p>
|
|
30
|
+
</li>
|
|
31
|
+
<li><p>Accessing a property (<code>myPublisher.foo.hello</code>) returns another <strong>publisher</strong> for that segment.</p>
|
|
32
|
+
</li>
|
|
33
|
+
<li><p>Missing properties create a publisher with internal data <code>null</code>, filled later.</p>
|
|
34
|
+
</li>
|
|
35
|
+
<li><p><strong>Subscribers</strong> listen via <code>onAssign</code>, <code>onInternalMutation</code>, template filling on the <strong>Subscriber mixin</strong>, etc.</p>
|
|
36
|
+
</li>
|
|
37
|
+
<li><p>Updates use <code>publisher.set(...)</code> or nested assignment; changes propagate to subscribers.</p>
|
|
38
|
+
</li>
|
|
39
|
+
</ul>
|
|
40
|
+
<p>❇️ Order of creation vs subscription theoretically does not matter.</p>
|
|
41
|
+
<h3 id="methods">Methods</h3>
|
|
42
|
+
<ul>
|
|
43
|
+
<li><strong>set</strong> — replace internal value</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<pre><code class="language-javascript">publisher.set({foo:{hello:["world"]}, bar:"baz"});
|
|
46
|
+
</code></pre>
|
|
47
|
+
<ul>
|
|
48
|
+
<li><strong>get</strong> — read internal value</li>
|
|
49
|
+
</ul>
|
|
50
|
+
<pre><code class="language-javascript">publisher.get()
|
|
51
|
+
</code></pre>
|
|
52
|
+
<ul>
|
|
53
|
+
<li><strong>onAssign / offAssign</strong> — react to <code>set</code></li>
|
|
54
|
+
</ul>
|
|
55
|
+
<pre><code class="language-javascript">publisher.a.b.onAssign(console.log);
|
|
56
|
+
</code></pre>
|
|
57
|
+
<p>Modern equivalent: <code>get</code> / <code>set</code> / <code>@handle</code> — see <a href="../_core-concept/dataFlow.html#dataFlow">Data flow</a>.</p>
|
|
58
|
+
|
|
59
|
+
</article>
|
|
60
|
+
</main>
|
|
61
|
+
</body>
|
|
62
|
+
</html>
|