Skip to content

Latest commit


209 lines (151 loc) 路 5.56 KB

File metadata and controls

209 lines (151 loc) 路 5.56 KB
title order

A "source" in Wonka is a provider of data. It provides data to a "sink" when the "sink" requests it. This is called a pull signal and for synchronous sources no time will pass between the sink pulling a new value and a source sending it. For asynchronous sources, the source may either ignore pull signals and just push values or send one some time after the pull signal.


fromArray transforms an array into a source, emitting each item synchronously.

import { fromArray } from 'wonka';
fromArray([1, 2, 3]);


fromValue takes a single value and creates a source that emits the value and completes immediately afterwards.

import { fromValue } from 'wonka';


make can be used to create an arbitrary source. It allows you to make a source from any other data. It accepts a function that receives an "observer" and should return a teardown function. It's very similar to creating an Observable in zen-observable.

The function you pass to make is called lazily when a sink subscribes to the source you're creating. The first argument observer is a tuple with two methods:

  • next(value) emits a value on the sink
  • complete() ends the source and completes the sink

The subscriber function also needs to return a teardown function. This function is called when either complete() is called and the source ends, or if the source is being cancelled, since the sink unsubscribed.

In this example we create a source that waits for a promise to resolve and emits values from the array of that promise.

import { make } from 'wonka';

const waitForArray = () => Promise.resolve([1, 2, 3]);

const source = make((observer) => {
  const { next, complete } = observer;
  let cancelled = false;

  waitForArray().then((arr) => {
    if (!cancelled) {

  return () => {
    cancelled = true;


makeSubject can be used to create a subject. This is similar to make without having to define a source function. Instead a subject is a tuple of a source and the observer's next and complete functions combined.

A subject can be very useful as a full event emitter. It allows you to pass a source around but also have access to the observer functions to emit events away from the source itself.

import { makeSubject } from 'wonka';
const subject = makeSubject();
const { source, next, complete } = subject;

/* This will push the values synchronously to any subscribers of source */


fromDomEvent will turn a DOM event into a Wonka source, emitting the DOM events on the source whenever the DOM emits them on the passed element.

import { pipe, fromDomEvent, subscribe } from 'wonka';

const element = document.getElementById('root');

  fromDomEvent(element, 'click'),
  subscribe((e) => console.log(e))


fromPromise transforms a promise into a source, emitting the promisified value on the source once it resolves.

import { pipe, fromPromise, subscribe } from 'wonka';

const promise = Promise.resolve(1); // Just an example promise

  subscribe((e) => console.log(e))
); // Prints 1 to the console.


fromObservable transforms a spec-compliant JS Observable into a source. The resulting source will behave exactly the same as the Observable that it was passed, so it will start, end, and push values identically.

import { pipe, fromObservable, subscribe } from 'wonka';

// This example uses zen-observable for illustrative purposes
import Observable from 'zen-observable';

const observable = Observable.from([1, 2, 3]);

  subscribe((e) => console.log(e))
); // Prints 1 2 3 to the console


fromCallbag transforms a spec-compliant JS Callbag into a source.

Since Wonka's sources are very similar to callbags and only diverge from the specification minimally, Callbags map to Wonka's sources very closely and the fromCallbag wrapper is very thin and mostly concerned with converting between the type signatures.

import { pipe, fromCallbag, subscribe } from 'wonka';

// This example uses the callbag-from-iter package for illustrative purposes
import callbagFromArray from 'callbag-from-iter';

const callbag = callbagFromArray([1, 2, 3]);

  subscribe((e) => console.log(e))
); // Prints 1 2 3 to the console.


interval creates a source that emits values after the given amount of milliseconds. Internally it uses setInterval to accomplish this.

import { pipe, interval, subscribe } from 'wonka';

  subscribe((e) => console.log(e))
); // Prints 0 1 2... to the console.
// The incrementing number is logged every 50ms


This is a source that doesn't emit any values when subscribed to and immediately completes.

import { pipe, empty, forEach } from 'wonka';

  forEach((value) => {
    /* This will never be called */


This is source is similar to empty. It doesn't emit any values but also never completes.

import { pipe, never, forEach } from 'wonka';

  forEach((value) => {
    /* This will never be called */