Concorde decorator — @publish. Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe). Doc ID: docs/_decorators/publish. Keywords: Concorde, supersoniks, docs/_decorators/publish, publish, @publish, decorator, DataProviderKey, @bind, @subscribe, skipEmptyPlaceholder. URL: https://concorde.supersoniks.org/crawl/docs/_decorators/publish.html.

@publish

Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe).

Similar to the “reflect” half of @bind without listening to the publisher.

Import

import { publish } from "@supersoniks/concorde/decorators";
import { sub } from "@supersoniks/concorde/directives";
import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";

Example

type PublishDemoData = { email: string; message: string };
const publishDemoKey = new DataProviderKey<PublishDemoData>("publishDemo");
//
@customElement("demo-publish")
export class DemoPublish extends LitElement {
  @publish(publishDemoKey.email)
  @state()
  email = "";
  //
  @publish(publishDemoKey.message)
  @state()
  message = "";
  //
  render() {
    return html`
      <sonic-input
        .value=${this.email}
        @input=${(e) => (this.email = (e.target as HTMLInputElement).value)}
        label="Email"
      ></sonic-input>
      <p>${sub(publishDemoKey.email)}</p>
    `;
  }
}

<docs-demo-sources for="demo-publish"></docs-demo-sources>
    <demo-publish></demo-publish>

Dynamic paths use the same placeholder rules as @bind / @subscribe. Resolution and skipEmptyPlaceholder: Dynamic path placeholders.