Concorde directive — sub(). sub(path) is a Lit directive that renders the current value of a store path and updates in place on every assignment. Use it inside html templates for read-only display; in a decorator, the same path Doc ID: docs/directives/sub. Keywords: Concorde, supersoniks, docs/directives/sub, sub, sub(), directive, sub(path), html, ${prop}, null, undefined, skipEmptyPlaceholder, get(path), @supersoniks/concorde/utils. URL: https://concorde.supersoniks.org/docs/directives/sub.

sub()

sub(path) is a Lit directive that renders the current value of a store path and updates in place on every assignment. Use it inside html templates for read-only display; in a decorator, the same path goes to @subscribe. See Data flow for the overall model.

Import

import { sub } from "@supersoniks/concorde/directives";

render() {
  return html`<p>Altitude: ${sub("cockpit.altitude")} ft</p>`;
}

DataProviderKey

Pass a DataProviderKey instead of a string to get a typo-safe path. Until the publisher holds a value, nothing is rendered.

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

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

render() {
  return html`<p>${sub(flightKey.code)} · gate ${sub(flightKey.gate)}</p>`;
}

Dynamic path

${prop} placeholders resolve from properties of the component that renders the template; the directive re-subscribes when they change. While a placeholder is null or undefined, nothing is rendered. Rules: Dynamic paths. skipEmptyPlaceholder is not available on sub().

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

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

render() {
  return html`<strong>${sub(personKey.name)}</strong> · ${sub(personKey.role)}`;
}

<docs-demo-sources for="demo-sub-template"></docs-demo-sources>
    <demo-sub-template></demo-sub-template>

sub() or get()

get(path) from @supersoniks/concorde/utils returns a one-time snapshot: in a template it never updates. Use sub() in templates and get / set / dp in imperative code.

html`${sub(flightKey.gate)}`; // updates on gate change
html`${get(flightKey.gate)}`; // frozen at first render

API reference

The directive subscribes when its part connects and unsubscribes when it disconnects.