The Interactive Extensions for JavaScript (IxJS)

IxJS is a set of libraries to compose synchronous and asynchronous collections and Array#extras style composition in JavaScript

The Interactive Extensions for JavaScript (IxJS) brings the Array#extras combinators to iterables, generators, async iterables and async generators. With the introduction of the Symbol.iterator and generators in ES2015, and subsequent introduction of Symbol.asyncIterator and async generators, it became obvious we need an abstraction over these data structures for composition, querying and more.

IxJS unifies both synchronous and asynchronous pull-based collections, just as RxJS unified the world of push-based collections. RxJS is great for event-based workflows where the data can be pushed at the rate of the producer, however, IxJS is great at I/O operations where you as the consumer can pull the data when you are ready.

Install IxJS from npm

npm install ix
Copy

(also read about how we package IxJS below)

Iterable

The Iterable class a way to create and compose synchronous collections much like Arrays, Maps and Sets in JavaScript using the Array#extras style using the familiar methods you are used to like map, filter, reduce and more. We can use the for ... of statements to iterate our collections.

// ES
import { from } from 'ix/iterable';
import { filter, map } from 'ix/iterable/operators';

// CommonJS
const from = require('ix/iterable').from;
const { filter, map } = require('ix/iterable/operators');

const source = function* () {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
};

const results = from(source()).pipe(
  filter(x => x % 2 === 0),
  map(x => x * x)
);

for (let item of results) {
  console.log(`Next: ${item}`);
}

// Next 4
// Next 16
Copy

In addition, we also supply a forEach so it's your choice for which to use.

// ES
import { from } from 'ix/asynciterable';
import { filter, map } from 'ix/asynciterable/operators';

// CommonJS
const from = require('ix/asynciterable').from;
const { filter, map } = require('ix/asynciterable/operators');

const source = function* () {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
};

const results = from(source()).pipe(
  filter(x => x % 2 === 0),
  map(x => x * x)
);

results
  .forEach(item => {
    console.log(`Next: ${item}`);
  });
// Next 4
// Next 16
Copy

Instead of bringing in the entire library for Iterable, we can pick and choose which operators we want, for bundling concerns and add them directly to the Iterable prototype.

// ES
import { IterableX as Iterable } from 'ix/iterable';
import 'ix/add/iterable/of';
import 'ix/add/iterable-operators/map';

// CommonJS
const { IterableX: Iterable } = require('ix/iterable');
require('ix/add/iterable/of');
require('ix/add/iterable-operators/map');

const results = Iterable.of(1,2,3)
  .map(x => x + '!!');
Copy

The Iterable object implements the iterator pattern in JavaScript by exposing the [Symbol.iterator] method which in turn exposes the Iterator class. The iterator yields values by calling the next() method which returns the IteratorResult class.

interface Iterable<T> {
  [Symbol.iterator](): Iterator<T>;
}

interface Iterator<T> {
  next(value?: any): IteratorResult<T>;
  return?(value?: any): IteratorResult<T>;
  throw?(e?: any): IteratorResult<T>;
}

interface IteratorResult<T> {
  value: T;
  done: Boolean;
}
Copy

AsyncIterable

The AsyncIterable object is based off the ECMAScript Proposal for Asynchronous Iterators. This would allow us to create asynchronous collections of Promises and be able to use such methods as the map, filter, reduce and other operators we can import. Much like with the Iterable object where we can iterate through our collections, we can use for await ... of instead which allows us to iterate over the asynchronous collection.

// ES
import { from } from 'ix/asynciterable';
import { filter, map } from 'ix/asynciterable/operators';

// CommonJS
const from = require('ix/asynciterable').from;
const { filter, map } = require('ix/asynciterable/operators');

const source = async function* () {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
};

const results = from(source()).pipe(
  filter(async x => x % 2 === 0),
  map(async x => x * x)
);

for await (let item of results) {
  console.log(`Next: ${item}`);
}

// Next 4
// Next 16
Copy

Alternatively, we can use the built-in forEach and catch should there be any errors:

// ES
import { from } from 'ix/asynciterable';
import { filter, map } from 'ix/asynciterable/operators';

// CommonJS
const from = require('ix/asynciterable').from;
const { filter, map } = require('ix/asynciterable/operators');

const source = async function* () {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
};

const results = from(source()).pipe(
  filter(async x => x % 2 === 0),
  map(async x => x * x)
);

results
  .forEach(item => {
    console.log(`Next: ${item}`);
  })
  .catch(err => {
    console.log(`Error ${err}`);
  });

for await (let item of results) {
  console.log(`Next: ${item}`);
}

// Next 4
// Next 16
Copy

Instead of bringing in the entire library for AsyncIterable, we can pick and choose which operators we want, for bundling concerns directly to the AsyncIterable prototype.

// ES
import { AsyncIterableX as AsyncIterable } from 'ix/asynciterable';
import 'ix/add/async-iterable/of';
import 'ix/add/asynciterable-operators/map';

// CommonJS
const { AsyncIterableX: AsyncIterable } = require('ix/asynciterable');
require('ix/add/asynciterable-operators/map');

const results = AsyncIterable.of(1,2,3)
  .map(x => x + '!!');
Copy

The AsyncIterable class implements the async iterator pattern in JavaScript by exposing the [Symbol.asyncIterator] method which in turn exposes the AsyncIterator class. The iterator yields values by calling the next() method which returns a Promise which resolves a IteratorResult class.

interface AsyncIterable<T> {
  [Symbol.asyncIterator](): AsyncIterator<T>;
}

interface AsyncIterator<T> {
  [Symbol.asyncIterator](): AsyncIterator<T>;
  next(value?: any): Promise<IteratorResult<T>>;
  return?(value?: any): Promise<IteratorResult<T>>;
  throw?(e?: any): Promise<IteratorResult<T>>;
}

interface IteratorResult<T> {
  value: T;
  done: Boolean;
}
Copy

Converting from Iterable to AsyncIterable

Using IxJS, you can easily go from an Iterable to an AsyncIterable using a number of methods. First, we can use the from function, either as a standalone or on the Ix.AsyncIterable object. The from method accepts a standard Iterable, Generator, and Iterator of Promises, or even another AsyncIterable.

import { from } from 'ix/asynciterable';
import { map } from 'ix/asynciterable/operators';

const xs = [1, 2, 3, 4];
const mapped = from(xs).pipe(
  map(async (item, index) => item * index)
);

for await (let item of mapped) {
  console.log(`Next: ${item}`);
}

// Next 0
// Next 2
// Next 6
// Next 12
Copy

Contributing

We are grateful for contributions to the IxJS project. The IxJS project evolves because of community involvement from people such as yourselves. Please read below on how to get involved.

Code Of Conduct

The IxJS project has a strict Code of Conduct that must be adhered at all times. This code of conduct comes from the Contributor Convenant. Please read the full text as to what is and is not permitted.

Contributing Guide

Read the Contributing Guide on how to get involved with the IxJS project. This includes our development process and how to test your code before committing.

Packaging

IxJS is written in TypeScript, but the project is compiled to multiple JS versions and common module formats. The base IxJS package includes all the compilation targets for convenience, but if you're conscientious about your node_modules footprint, don't worry -- we got you. The targets are also published under the