Concorde concept — Legacy: Subscriber mixin. > New app components: My first component and Data flow — extend LitElement with decorators (@subscribe, @ancestorAttribute, …). This mixin remains in core components (sonic-list, sonic-fetch, …) and l Doc ID: docs/_core-concept/subscriber. Keywords: Concorde, supersoniks, docs/_core-concept/subscriber, subscriber, Legacy: Subscriber mixin, concept, DataProvider, LitElement, @subscribe, @ancestorAttribute, sonic-list, sonic-fetch, dataProvider, subDataProvider = 'address.of.my.data', props. URL: https://concorde.supersoniks.org/crawl/docs/_core-concept/subscriber.html.

Legacy: Subscriber mixin

New app components: My first component and Data flow — extend LitElement with decorators (@subscribe, @ancestorAttribute, …). This mixin remains in core components (sonic-list, sonic-fetch, …) and legacy tutorials.

The Subscriber mixin was commonly extended by Concorde core components and older destination components. Pure UI components usually don't extend it, especially those outside of form components.

DataProvider Attribute: Automatic Filling of Subscriber Properties

Upon being added to the DOM (connectedCallback), subscribers search for the first occurrence of the dataProvider attribute in their parent's HTML structure.

The value of this attribute is the DataProvider path (see Data flow and DataProviderKey; legacy API: Sharing Data).

The subscriber then subscribes to the publisher as a data template to be filled.

The reactive properties of the component reflect in real-time the properties with the same name in the publisher.

This functionality is commonly used in the generic components fetch, queue, and list.

If the subscriber is inside another subscriber, it can subscribe to a data of its parent using the attribute subDataProvider = 'address.of.my.data' instead of the parent's data. This allows for dynamic behavior.

Automated Translation

In a similar manner, searching for ancestor attributes can be used to configure automatic translation for any property starting with "wording" and ending with a label identifier recognized by the wordingProvider API.

Normally, this API is globally configured and not within the component. Therefore, remember to prefix translatable label identifiers present in the ticketing system, for example, with "wording".

Reactive Property `props`

The value of this property can be provided as a JSON object or any other value. This value is then assigned to the associated publisher via the dataProvider attribute. As a result, the reactive properties of all subscribers associated with the same dataProvider are filled as mentioned above.

Disabling Automatic Filling of Reactive Properties

It is possible to disable the automatic filling of reactive properties in a particular component. To do so, set the variable noAutoFill = true in the component's class. However, the reactive property props will still be updated.

For example, sonic-subscriber and sonic-fetch have this attribute because they do not have reactive properties.

☢ CAUTION: When creating an object of type Subscriber or Fetcher, make sure to use the mixins and not directly extend the concrete fetch component (sonic-fetch) and subscriber component (sonic-subscriber). This is because the noAutofill = true attribute is set in those components.

TIPS: If you disable automatic filling, you will likely make the rendering dynamic by writing expressions like this.props.my.subproperty. If props is updated, the rendering will be triggered. However, if this.props.my.subproperty is directly modified, the rendering will not be triggered. To achieve more reactivity, you can enable rendering when any subproperty is modified. Simply set the variable renderOnPropsInternalChange = true in the class that implements the corresponding mixin.

Data Binding

Suppose that:

You have a subscriber subscribed to a publisher via its dataProvider attribute.
The published data has the following structure:

{"img": { "avatar": "my-avatar.jpg", "caption": "look at my smile" }, "email": "an.email@example.com" }

We want to keep the display of an image and its title attribute up to date, as well as a "contact" button to email the person in the photo. The content of the subscriber could be as follows:

In a Lit app, use the same data with data configuration (@subscribe + DataProviderKey) on a small row component — see docs-user in src/docs/example/users.ts.

For HTML-only embedding (no Lit), attribute binding is described in HTML integration and in the Legacy Subscriber mixin pages.

This pattern also illustrates:

Binding to subproperties using dot syntax, as done for the src attribute of the img tag.
Using a simple expression to include the property within a string, as in creating a mailto link.
Using formatting functions, as in the title attribute of the img tag. You can find (and add) formatting functions in the core/utils/Format.ts file.
Writing for properties that are in camel case. Convert everything to lowercase and add hyphens. Note that innerHTML (or outerHTML) is a special case where no hyphens are added between each letter.

Note: Data binding implies that updating the img.src data via the publisher will change the photo without any additional calls.

Special Variables:

_self_ targets the root of the data. This is useful, for example, when the data is a pure string.
_parent_ targets the parent publisher of the current publisher, if any. For example, the subscribers of lists have the complete data of the list as their parent.
_metadata_ is only used in the case of sonic-list at the moment. In a simple list, _metadata_ see the (list)[] component for further details