Combine

function combine<T>(...sources: Source<T>[]): Source<T[]>

            a:  ---1 ------2 -------3 --|
            b:  -x ---y -------z ----------w ---|
combine(a, b):  ---1x-1y---2y--2z---3z-----3w---|

Combines values coming from each source, and emits them as an array. Will wait for every source to emit once, and then will emit every time a source emits, replacing the corresponding value in the emitted array. For example, in the following code, no value will be displayed until the button is clicked at least once:

HTML Code

<button>Click ME!</button>
<div></div>

import { pipe, event, interval, combine, scan, observe, tap } from 'streamlets'

const $btn = document.querySelector('button')
const $div = document.querySelector('div')

const clickCount = pipe(
  event($btn, 'click'),
  scan((c) => c + 1, 0)
)

pipe(
  combine(interval(1000), clickCount),
  tap((x) => ($div.textContent = `[${x}]`)),
  observe
)

💡 If one of the sources ends due to an error, the whole stream will be closed. If a source ends without an error, the combined stream will continue until all sources end their corresponding substreams.

---

📖 READ NEXT: Sources

---