Concorde functional component — Mix. sonic-mix builds a new data provider from parts of other ones. Each key of composition maps to a source data provider id, with an optional dot path to a sub-value. The mixed provider is named by the d Doc ID: core/components/functional/mix/mix. Keywords: Concorde, supersoniks, core/components/functional/mix/mix, mix, Mix, functional component, sonic-mix, web component, composition, dataProvider, flight, gate, docs-mix-gate, docs-mix-board.gate, "providerId". URL: https://concorde.supersoniks.org/core/components/functional/mix.

Mix

sonic-mix builds a new data provider from parts of other ones. Each key of composition maps to a source data provider id, with an optional dot path to a sub-value. The mixed provider is named by the dataProvider attribute and stays in sync with its sources in both directions.

Basic example

Two sources hold the flight and its gate. The mix exposes the whole flight under flight and only the gate number under gate; children read them like any other data provider.

<sonic-subscriber dataProvider="docs-mix-flight" props='{"code":"CN 001","route":"CDG → JFK"}'></sonic-subscriber>
    <sonic-subscriber dataProvider="docs-mix-gate" props='{"gate":"B12","terminal":"2E"}'></sonic-subscriber>
    <sonic-mix dataProvider="docs-mix-board" composition='{"flight":"docs-mix-flight","gate":"docs-mix-gate.gate"}'>
      <p>
        <sonic-value key="flight.code"></sonic-value> ·
        <sonic-value key="flight.route"></sonic-value> ·
        gate <sonic-value key="gate"></sonic-value>
      </p>
    </sonic-mix>

Two-way sync

Writing to a source updates the mix, and writing to the mix updates the source. The button changes docs-mix-gate; the field writes to docs-mix-board.gate.

<div class="flex flex-wrap items-end gap-4">
      <sonic-button size="sm" onclick="SonicPublisherManager.get('docs-mix-gate').gate = 'C34'">Gate change to C34</sonic-button>
      <sonic-input label="Gate (mixed provider)" formDataProvider="docs-mix-board" name="gate"></sonic-input>
    </div>
    <p class="mt-2">Source gate: <sonic-value dataProvider="docs-mix-gate" key="gate"></sonic-value></p>

API reference