Concorde decorator — @subscribe. @subscribe(key) keeps a component property in sync with one path of the store: when a publisher assigns that path, the property updates and the component re-renders. It is read-only; use @publish to w Doc ID: docs/decorators/subscribe. Keywords: Concorde, supersoniks, docs/decorators/subscribe, subscribe, @subscribe, decorator, @subscribe(key), at that path. Add , ${prop}, seatIndex, person, null, undefined, dataProvider, key, DataProviderKey. URL: https://concorde.supersoniks.org/docs/decorators/subscribe.

@subscribe

@subscribe(key) keeps a component property in sync with one path of the store: when a publisher assigns that path, the property updates and the component re-renders. It is read-only; use @publish to write and sub() to read inside a template. See Data flow for the overall model.

Import

import { subscribe } from "@supersoniks/concorde/decorators";
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";

type Cockpit = { altitude: number };
const cockpitKey = new DataProviderKey<Cockpit>("cockpit");

@subscribe(cockpitKey.altitude)
@state()
altitude = 0;

Static path

The key is a DataProviderKey: the property type must match T at that path. Add @state() so Lit re-renders. Until the publisher holds a value, the property keeps its initializer.

type Flight = { code: string; gate: string; status: string };
const flightKey = new DataProviderKey<Flight>("flight");

@subscribe(flightKey)
@state()
flight: Flight | null = null;

Dynamic path

${prop} placeholders resolve from properties of the same component. Declare them in the key's second generic so TypeScript requires them on the host. When seatIndex changes, the path is resolved again and person refreshes; while the placeholder is null or undefined, the subscription is inactive. Resolution rules: Dynamic paths.

type OnBoard = { name: string; role: string; seat: string };
const personKey = new DataProviderKey<OnBoard, { seatIndex: number }>(
  "demoOnBoard.${seatIndex}",
);

@property({ type: Number }) seatIndex = 0;

@subscribe(personKey)
@state()
person: OnBoard | null = null;

<docs-demo-sources for="demo-subscribe-dynamic"></docs-demo-sources>
    <demo-subscribe-dynamic></demo-subscribe-dynamic>

Ancestor scope

Inside a list row or a dataProvider wrapper, read the path from the closest ancestor with @ancestorAttribute, then use it as the placeholder.

const rowKey = new DataProviderKey<OnBoard, { dataProvider: string | null }>(
  "${dataProvider}",
);

@ancestorAttribute("dataProvider")
dataProvider: string | null = null;

@subscribe(rowKey)
@state()
person: OnBoard | null = null;

API reference

The decorated property is typed T (optionally | null or | undefined). The subscription starts when the component connects and stops when it disconnects.