# 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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`.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|-----------|--------|-------------|
| `dataProvider` | string | Id of the mixed data provider. Its content is reset when the composition changes |
| `composition` | object (JSON) | Keys of the mixed provider mapped to `"providerId"` or `"providerId.path.to.value"` |

| Slot | Description |
|------|-------------|
| *(default)* | Content that reads the mixed provider |