@supersoniks/concorde 4.6.0 → 4.7.0

package/docs/src/docs/_getting-started/my-first-component.md

@@ -0,0 +1,236 @@
+# My first component
+
+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.
+
+> Legacy approach with the **Subscriber mixin**: [Legacy: My first subscriber](#docs/_getting-started/my-first-subscriber.md/my-first-subscriber).
+
+## 1. Lit component + Tailwind
+
+Export Tailwind once (e.g. `src/docs/tailwind.ts` in this repo):
+
+<sonic-code language="typescript">
+  <template>
+import { css, unsafeCSS } from "lit";
+import tailwindImport from "./css/tailwind.css?inline";
+
+export const tailwind = css`${unsafeCSS(tailwindImport)}`;
+  </template>
+</sonic-code>
+
+User card — plain Lit properties and UI components (no store yet):
+
+<sonic-code language="typescript">
+  <template>
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+
+@customElement("docs-user")
+export class DocsUser extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: String }) first_name = "";
+  @property({ type: String }) last_name = "";
+  @property({ type: String }) email = "";
+  @property({ type: String }) avatar = "";
+
+  render() {
+    return html`&lt;div class="flex items-center gap-3 rounded-md p-2"&gt;
+      &lt;sonic-image src=${this.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
+      &lt;div&gt;
+        &lt;div&gt;${this.first_name} &lt;span class="font-bold"&gt;${this.last_name}&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="text-sm text-neutral-400"&gt;${this.email}&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;`;
+  }
+}
+  </template>
+</sonic-code>
+
+## 2. Data configuration
+
+The card does not hard-code user fields anymore. You declare **what** is stored, **where** it lives, and **which ancestor scope** applies — then `@subscribe` mirrors that object on the component.
+
+### Type — shape of the data
+
+`DocsUserData` documents the fields you expect at this scope (first name, email, avatar, …). TypeScript checks that `user` matches that shape.
+
+<sonic-code language="typescript">
+  <template>
+export type DocsUserData = {
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+};
+  </template>
+</sonic-code>
+
+### Key — path in the DataProvider
+
+`docsUserRowKey` points at the store segment to read. The path `"${dataProvider}"` is resolved at runtime from a property on the component (see scope below).
+
+<sonic-code language="typescript">
+  <template>
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+
+export const docsUserRowKey = new DataProviderKey&lt;
+  DocsUserData,
+  { dataProvider: string | null }
+&gt;("${dataProvider}");
+  </template>
+</sonic-code>
+
+The second generic (`{ dataProvider: string | null }`) lists what the host must expose so `"${dataProvider}"` can be resolved. See [DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey).
+
+### Scope — which store segment applies
+
+A parent sets `dataProvider=${docsUserScopeAKey.path}` (or a list row sets `…/list-item/0`). [`@ancestorAttribute`](#docs/_decorators/ancestor-attribute.md/ancestor-attribute) copies that attribute onto `this.dataProvider`, so the key resolves to the correct branch.
+
+<sonic-code language="typescript">
+  <template>
+@ancestorAttribute("dataProvider")
+dataProvider: string | null = null;
+  </template>
+</sonic-code>
+
+### Subscribe — keep the card in sync
+
+[`@subscribe`](#docs/_decorators/subscribe.md/subscribe) watches `docsUserRowKey` and updates `user` when the store changes. Use `@state()` so Lit re-renders. The template reads `this.user` like any other property.
+
+<sonic-code language="typescript">
+  <template>
+import { html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import {
+  ancestorAttribute,
+  subscribe,
+} from "@supersoniks/concorde/core/decorators/Subscriber";
+import { docsUserRowKey, type DocsUserData } from "./users";
+import { tailwind } from "../tailwind";
+
+@customElement("docs-user")
+export class DocsUser extends LitElement {
+  static styles = [tailwind];
+
+  @ancestorAttribute("dataProvider")
+  dataProvider: string | null = null;
+
+  @subscribe(docsUserRowKey)
+  @state()
+  user: DocsUserData | null = null;
+
+  render() {
+    const u = this.user;
+    if (!u) return nothing;
+    return html`&lt;div class="flex items-center gap-3 rounded-md p-2"&gt;
+      &lt;sonic-image src=${u.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
+      &lt;div&gt;
+        &lt;div&gt;${u.first_name} &lt;span class="font-bold"&gt;${u.last_name}&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="text-sm text-neutral-400"&gt;${u.email}&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;`;
+  }
+}
+  </template>
+</sonic-code>
+
+Live code: `src/docs/example/users.ts`. In this repo, imports use **`core/…` paths** (short `@supersoniks/concorde/…` exports apply in **consumer apps** only).
+
+### Two scopes, one component
+
+The same `docs-user` is mounted twice. Each copy inherits a **different** nearest `dataProvider` — that is the row/list **scope**:
+
+<sonic-code>
+  <template>
+    <docs-demo-sources for="docs-user-two-scopes"></docs-demo-sources>
+    <docs-user-two-scopes></docs-user-two-scopes>
+  </template>
+</sonic-code>
+
+Markup (two isolated stores; keys from `docs-provider-keys.ts`):
+
+<sonic-code language="markup">
+  <template>
+    &lt;div class="grid md:grid-cols-2 gap-6"&gt;
+      &lt;div dataProvider="${docsUserScopeAKey.path}"&gt;
+        &lt;docs-user&gt;&lt;/docs-user&gt;
+      &lt;/div&gt;
+      &lt;div dataProvider="${docsUserScopeBKey.path}"&gt;
+        &lt;docs-user&gt;&lt;/docs-user&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  </template>
+</sonic-code>
+
+Seeded in `docs-provider-keys.ts` (`set(docsUserScopeAKey, …)`): **Paul** / **Marie**. Without `@ancestorAttribute`, both cards would not know which store to read.
+
+## 3. Fetch users — `sonic-list` with `.items`
+
+Use a Lit parent and the **`items`** renderer (not HTML `<template>` children). The callback receives each row object from fetch — render fields directly (`${item.first_name}`, …), like porting a template that used `data-bind` / `<sonic-value>`.
+
+<sonic-code>
+  <template>
+      <docs-lit-demo for="docs-users-list"></docs-lit-demo>
+  </template>
+</sonic-code>
+
+Wrapper (`docs-users-list.ts`):
+
+<sonic-code language="typescript">
+  <template>
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import "../../core/components/functional/list/list";
+import "./users";
+
+@customElement("docs-users-list")
+export class DocsUsersList extends LitElement {
+  private items = ({ first_name, last_name, email, avatar }) => html`
+    &lt;div class="flex gap-3"&gt;
+      &lt;sonic-image src=${avatar} ...&gt;&lt;/sonic-image&gt;
+      &lt;div&gt;${first_name} &lt;b&gt;${last_name}&lt;/b&gt;&lt;/div&gt;
+      &lt;div class="text-sm text-neutral-400"&gt;${email}&lt;/div&gt;
+    &lt;/div&gt;
+  `;
+
+  render() {
+    return html`
+      &lt;sonic-list fetch dataProvider=${usersListEndpoint.path} key="data" .items=${this.items}&gt;&lt;/sonic-list&gt;
+    `;
+  }
+}
+  </template>
+</sonic-code>
+
+See [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) for `serviceURL="/docs-mock-api"`.
+
+## 4. Form preview with `formDataProvider`
+
+Edit fields in a form; the card follows the same `docsUserRowKey` when the preview host sets `dataProvider="userPreview"`.
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-1 gap-4 max-w-xl">
+      <form formDataProvider="${docsUserPreviewKey.path}" class="grid grid-cols-2 gap-3">
+        <sonic-input label="First name" name="first_name" value="Paul" size="sm"></sonic-input>
+        <sonic-input label="Last name" name="last_name" value="Metrand" size="sm"></sonic-input>
+        <sonic-input class="col-span-2" label="Email" name="email" value="paul@example.com" size="sm"></sonic-input>
+        <sonic-input class="col-span-2" label="Avatar URL" name="avatar" value="https://i.pravatar.cc/150?u=paul" size="sm"></sonic-input>
+      </form>
+      <sonic-divider align="left">Preview</sonic-divider>
+      <div dataProvider="${docsUserPreviewKey.path}">
+        <docs-user></docs-user>
+      </div>
+    </div>
+  </template>
+</sonic-code>
+
+Use `formDataProvider` + `name` on inputs — no manual `@input` handlers ([Data flow](#docs/_core-concept/dataFlow.md/dataFlow)).
+
+## Next steps
+
+- [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) — full map
+- [DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey) — typed paths and host constraints
+- [@subscribe](#docs/_decorators/subscribe.md/subscribe) / [sub()](#docs/_directives/sub.md/sub) — read-only in templates
+- [List](#core/components/functional/list/list.md/list) — `.items`, `.noItems`, `.skeleton`

package/docs/src/docs/_getting-started/my-first-subscriber.md

@@ -1,7 +1,8 @@
-# My first subscriber component
+# Legacy: My first subscriber component
 
-Learn how to build a subscriber component, styled with tailwind, 
-which could be used as a regular component or could be filled from a dataprovider.
+> **New projects:** use [My first component](#docs/_getting-started/my-first-component.md/my-first-component) (`@ancestorAttribute`, `@subscribe` + `DataProviderKey`, `.items` on lists) and [Data flow](#docs/_core-concept/dataFlow.md/dataFlow). This page documents the **Subscriber mixin** used by older apps and core components.
+
+Learn how to build a component with the **Subscriber** mixin, styled with Tailwind, filled from a DataProvider via automatic property mapping.
 
 ## Create a classic lit component
 
@@ -9,30 +10,24 @@ which could be used as a regular component or could be filled from a dataprovide
   <template>
   import { html, LitElement, nothing } from "lit";
   import { customElement, property } from "lit/decorators.js";
-  // name component
   @customElement("docs-user")
   export class user extends LitElement {
-    // set a few props
     @property({ type: String }) first_name = "";
     @property({ type: String }) last_name = "";
     @property({ type: String }) avatar = "";
     @property({ type: String }) email = "";
-    // output
     render() {
       return html`
-        <img src="${this.avatar}"  /> <br>
-        ${this.first_name} ${this.last_name} <br>
+        &lt;img src="${this.avatar}" /&gt; &lt;br&gt;
+        ${this.first_name} ${this.last_name} &lt;br&gt;
         ${this.email}`;
     }
   }
   </template>
 </sonic-code>
 
-
 ### Style with tailwind and ui components
 
-First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.
-
 <sonic-code language="javascript">
   <template>
   import { css, unsafeCSS } from "lit";
@@ -43,132 +38,83 @@ First export tailwind, in a tailwind.ts file, stylesheet to add it in our compon
 
 <sonic-code language="javascript">
   <template>
-    import { html, LitElement, nothing } from "lit";
+    import { html, LitElement } from "lit";
     import { customElement, property } from "lit/decorators.js";
-    // add tailwind and needed components
     import { tailwind } from "../tailwind";
     import '@supersoniks/concode/ui/image'
     import '@supersoniks/concode/ui/button'
     import '@supersoniks/concode/ui/icon'
-    //
     @customElement("docs-user")
     export class user extends LitElement {
-      // add tailwind stylesheed
       static styles = [tailwind];
       @property({ type: String }) first_name = "";
       @property({ type: String }) last_name = "";
       @property({ type: String }) avatar = "";
       @property({ type: String }) email = "";
-      // use utility class in your markup
       render() {
-        return html`<div
-          class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
-        >
-          <sonic-image
-            src=${this.avatar}
-            rounded="md"
-            ratio="1/1"
-            class="w-16 block"
-          ></sonic-image>
-          <div>
-            <div>
-              ${this.first_name} <span class="font-bold">${this.last_name}</span>
-            </div>
-            <div class="text-sm text-neutral-400">${this.email}</div>
-          </div>
-          <div class="ml-auto relative">
-            <sonic-button
-              href="mailto:${this.email}"
-              size="sm"
-              variant="outline"
-              shape="circle"
-              class="relative"
-              icon
-            >
-              <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
-            </sonic-button>
-          </div>
-        </div>`;
+        return html`&lt;div class="flex items-center gap-3 p-2"&gt;
+          &lt;sonic-image src=${this.avatar} rounded="md" ratio="1/1" class="w-16"&gt;&lt;/sonic-image&gt;
+          &lt;div&gt;${this.first_name} &lt;span class="font-bold"&gt;${this.last_name}&lt;/span&gt;&lt;/div&gt;
+          &lt;div class="text-sm text-neutral-400"&gt;${this.email}&lt;/div&gt;
+        &lt;/div&gt;`;
       }
     }
   </template>
 </sonic-code>
 
-### Basic usage
-
-Reactive properties can be filled by its attributes as a simple lit component.
-
-<sonic-code>
-<template>
-<docs-user
-  first_name="Paul"
-  last_name="Metrand"
-  avatar="/img/paul_metrand_xs.jpg"
-  email="paulmetrand@concorde.fr"
-  ></docs-user>
-</template>
-</sonic-code>
-
 ## Add Subscriber mixin
 
-Import Subscriber mixin, and add it around LitElement.
 <sonic-code language="javascript">
   <template>
-    import { html, LitElement, nothing } from "lit";
-    import { customElement, property } from "lit/decorators.js";
-    import { tailwind } from "../tailwind";
     import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
     @customElement("docs-user")
     export class user extends Subscriber(LitElement) {
-      //...
+      // properties auto-filled from DataProvider when names match
     }
   </template>
 </sonic-code>
 
-## Autofill properties from a dataProvider
+See [Legacy: Subscriber mixin](#docs/_core-concept/subscriber.md/subscriber).
+
+## Autofill from a dataProvider
 
-Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.
-A fetcher is a simple component which set its fetch result to props of its dataprovider.
 <sonic-code >
 <template>
+<docs-demo-sources for="list-users-fetch"></docs-demo-sources>
+<div serviceURL="/docs-mock-api">
 <sonic-fetch 
-    serviceURL="https://reqres.in"
+    serviceURL="/docs-mock-api"
     dataProvider="api/users/3" 
     key="data">
      <docs-user></docs-user>
 </sonic-fetch>
+</div>
 </template>
 </sonic-code>
 
-A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.  
 <sonic-code >
 <template>
 <sonic-fetch 
-    serviceURL="https://reqres.in"
+    serviceURL="/docs-mock-api"
     dataProvider="api/users/2" 
     key="data"></sonic-fetch>
 <docs-user dataProvider="api/users/2" ></docs-user>
-<docs-user dataProvider="api/users/2" ></docs-user>
-<docs-user dataProvider="api/users/2" ></docs-user>
 </template>
 </sonic-code>
 
-
 <sonic-code >
 <template>
-
 <div class="grid grid-cols-1 gap-4">
 <form formDataProvider="userPreview" class="grid grid-cols-4 gap-3" >
-  <sonic-input label="First name" type="text" name="first_name" placeholder="John" value="Paul"></sonic-input>
-  <sonic-input label="Last name" type="text" name="last_name" placeholder="Doe" value="Metrand"></sonic-input>
-  <sonic-input class="col-span-2"  label="email" type="text" name="email" placeholder="johndoe@concorde.fr" value="paulmetrand@concorde.fr"></sonic-input>
-  <sonic-input type="file" name="avatar" value="/img/paul_metrand_xs.jpg"></sonic-input>
+  <sonic-input label="First name" type="text" name="first_name" value="Paul" size="sm"></sonic-input>
+  <sonic-input label="Last name" type="text" name="last_name" value="Metrand" size="sm"></sonic-input>
+  <sonic-input class="col-span-2" label="email" type="text" name="email" value="paul@example.com" size="sm"></sonic-input>
+  <sonic-input label="Image url" type="text" name="avatar" value="https://i.pravatar.cc/150?u=paul" size="sm"></sonic-input>
 </form>
 <sonic-divider align="left">Preview before submit</sonic-divider>
-<docs-user dataProvider="userPreview" ></docs-user>
-<sonic-button onClick="alert(JSON.stringify(SonicPublisherManager.get('userPreview').get()))">
-  Update data
-</sonic-button>
+<div dataProvider="userPreview">
+  <docs-user></docs-user>
+</div>
 </div>
 </template>
-</sonic-code>
+</sonic-code>

package/docs/src/docs/_getting-started/pubsub.md

@@ -1,150 +1,37 @@
-# Sharing data
+# Legacy: Sharing data
 
-This section describes how we share data between graphical and non graphical components and classes.
+> **New apps:** [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) (`get` / `set` / `DataProviderKey`, decorators). This page documents the historical **Publisher** proxy API (`PublisherManager`, `publisher.set`, `onAssign`, …).
 
-Especialy, graphical components should not reference each other in order to **remain decoupled**.
-
-Thats why we use **publish/subscribe** paradigm to addresse this issue.
+This section describes how data is shared between graphical and non-graphical components.
 
+Graphical components should not reference each other directly — they stay decoupled via a **publish/subscribe** store.
 
 ## The Publisher
 
 ### Principle
 
-* The **publisher** is a [JavaScript proxy](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that contains some data.<br>**
-Example of data : `{foo:{hello:["world"]}, bar:"baz"}`
-
-* if a property of the **publisher** (dot syntax / array access), it returns another **publisher**.
-Using the previous example `myPublisher.foo.hello` is also a publisher containing `["world"]`
+* The **publisher** is a [JavaScript proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that holds data.<br>
+  Example: `{foo:{hello:["world"]}, bar:"baz"}`
 
-* If the property doesn't exist at the time of the request, a publisher is created. its internal data is set to `null`.<br>
-The value that can then be provided later.
+* Accessing a property (`myPublisher.foo.hello`) returns another **publisher** for that segment.
 
-* **Subscribers** can subscribe to the publisher's modifications and be updated in different ways (see : onAssign, onInternalMutation, startTemplateFilling).
+* Missing properties create a publisher with internal data `null`, filled later.
 
-* Data inside the publisher is updated by modifying the publisher itself, for example `myPublisher.foo.hello = ["Joey", "Smith"]`
-  
-* The publisher publishes modifications to any of its **Subscribers**.
+* **Subscribers** listen via `onAssign`, `onInternalMutation`, template filling on the **Subscriber mixin**, etc.
 
+* Updates use `publisher.set(...)` or nested assignment; changes propagate to subscribers.
 
-❇️ The order of data creation and subscription theoretically has no importance.
+❇️ Order of creation vs subscription theoretically does not matter.
 
 ### Methods
 
-* **set (complete replacement):** Assign/modifies the internal value of the publisher.
-  <sonic-code language="javascript">
-  <template>
-  publisher.set({foo:{hello:["world"]}, bar:"baz"});  
-  </template>
-</sonic-code>
-* **get:** Get the internal value of the publisher.
- <sonic-code language="javascript">
-  <template>
-  publisher.get() //{foo:{hello:["world"]}, bar:"baz"};
-  </template>
-</sonic-code>
-* **onAssign/offAssign:** Subscribe/unsubscribe to value assignments (via `set`) of the publisher.
-<sonic-code language="javascript">
-  <template>
-  publisher.a.b.onAssign(console.log);
-  //indirect
-  publisher.a = {b:"dramatic change"}; //log: "dramatic change"
-  //via set
-  publisher.a.b.set(["Hello"]) //log: ["Hello"]
-  </template>
-</sonic-code>
-* **onInternalMutation/offInternalMutation:** Listen to any internal mutation regardless of its depth level.
-<sonic-code language="javascript">
-  <template>
-  function save(){
-  	console.log("Something has changed, let's save");
-  }
-  publisher.onInternalMutation(save);
-  publisher.a.b[0] = "e";
-  </template>
-</sonic-code>
-* **startTemplateFilling/stopTemplateFilling:** Fill an object model, a principle used with the Subscriber mixin on which most Concorde components rely.
-<sonic-code language="javascript">
-  <template>
-  const fillableTemplate =  { title: "A title to be replaced"};
-  publisher.startTemplateFilling(fillableTemplate);
-  state.title = "Good morning";
-  publisher.stopTemplateFilling(fillableTemplate);
-  state.title = "Oops";
-  console.log(fillableTemplate);
-  </template>
-</sonic-code>
-* **invalidate:** Flag the data as invalid. Used by sonic-fetch and sonic-list to trigger data reloading.
-<sonic-code language="javascript">
-  <template>
-publisher.invalidate();
-  </template>
-</sonic-code>
-* **onInvalidate/offInvalidate:** Subscribe/unsubscribe to data invalidation of the publisher. Used by sonic-fetch and sonic-list to trigger data reloading.
-<sonic-code language="javascript">
-  <template>
-function reloadData(){
-  console.log("Reload data to inject it again into the publisher");
-}
-publisher.onInvalidate(reloadData);
-  </template>
-</sonic-code>
-
-## DataProvider
-
-Denotes the identifier of a publisher as referenced in the PublisherManager (see below).
-Uses the dataProvider attribut in html tags to scop the content with some data.
-see [Subscribers](#docs/_core-concept/subscriber.md/subscriber).
-
-
-## PublisherManager
-
-The **PublisherManager** is a utility class to get publishers
-
-It plays a central role in the components, especially through the "subscriber" mixin.<br>
-Automatic data communication between components in concorde uses this principle in conjunction with Lit's reactive properties. <br>
-Refer to the documentation for [Subscriber](#docs/_core-concept/subscriber.md/subscriber).
-
-<sonic-code language="javascript">
-  <template>
-import { PublisherManager } from "publisherproxy";
-let dataProvider = "cart";
-let publisher = PublisherManager.get(dataProvider);
-
-  </template>
-</sonic-code>
-
-It is declared on the `window` object to allow usage in a web page, so the equivalent one-liner would be:
-
-<sonic-code language="javascript">
-  <template>
-let dataProvider = "cart";
-let publisher = SonicPublisherManager.get(dataProvider);
-
-  </template>
-</sonic-code>
-
-
-## Basic Example
-
-This example can be tested in a console when Concorde is loaded on the page (for example, in a ticketing system).
-In a component, you will need to perform an `import` as explained earlier.
-
-<sonic-code language="javascript">
-  <template>
-// Anywhere, anytime
-SonicPublisherManager.get("mySubject").title.onAssign(console.log) 
-
-  </template>
-</sonic-code>
-
-<sonic-code language="javascript">
-  <template>
-// Anywhere, anytime
-let publisher = SonicPublisherManager.get("mySubject");
-// ...
-publisher.set({title: "A title"});
-publisher.title.set("A second title");
-
-  </template>
-</sonic-code>
+* **set** — replace internal value  
+  <sonic-code language="javascript"><template>publisher.set({foo:{hello:["world"]}, bar:"baz"});</template></sonic-code>
+
+* **get** — read internal value  
+  <sonic-code language="javascript"><template>publisher.get()</template></sonic-code>
+
+* **onAssign / offAssign** — react to `set`  
+  <sonic-code language="javascript"><template>publisher.a.b.onAssign(console.log);</template></sonic-code>
+
+Modern equivalent: `get` / `set` / `@handle` — see [Data flow](#docs/_core-concept/dataFlow.md/dataFlow).