``` ________________________________ ___ |/ /_ __ \_ ___/__ __/ __ /|_/ /_ / / /____ \__ / _ / / / / /_/ /____/ /_ / /_/ /_/ \____/______/ /_/ ``` # Monadic streams for reactive programming [![Greenkeeper badge](https://badges.greenkeeper.io/cujojs/most.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/cujojs/most.svg?branch=master)](https://travis-ci.org/cujojs/most) [![Join the chat at https://gitter.im/cujojs/most](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/cujojs/most?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ## Starting a new project? Strongly consider starting with [`@most/core`](https://github.com/mostjs/core). It is the foundation of the upcoming most 2.0, has [improved documentation](http://mostcore.rtfd.io/), new features, better tree-shaking build characteristics, and simpler APIs. Updating from `@most/core` to most 2.0 will be non-breaking and straightforward. ## Using most 1.x already on an existing project? You can keep using most 1.x, and update to either [`@most/core`](https://github.com/mostjs/core) or most 2.0 when you're ready. See the [upgrade guide](https://mostcore.readthedocs.io/en/latest/upgrading-guide.html) for more information. ## What is it? Most.js is a toolkit for reactive programming. It helps you compose asynchronous operations on streams of values and events, e.g. WebSocket messages, DOM events, etc, and on time-varying values, e.g. the "current value" of an <input>, without many of the hazards of side effects and mutable shared state. It features an ultra-high performance, low overhead architecture, APIs for easily creating event streams from existing sources, like DOM events, and a small but powerful set of operations for merging, filtering, transforming, and reducing event streams and time-varying values. ## Learn more * [API docs](docs/api.md) * [Recipes](https://github.com/cujojs/most/wiki/Recipes) * [Examples](https://github.com/mostjs/examples) * [Get it](#get-it) * [Core & Community Packages](PACKAGES.md) ## Simple example Here's a simple program that displays the result of adding two inputs. The result is reactive and updates whenever *either* input changes. First, the HTML fragment for the inputs and a place to display the live result: ```html
``` Using most.js to make it reactive: ```es6 import { fromEvent, combine } from 'most' const xInput = document.querySelector('input.x') const yInput = document.querySelector('input.y') const resultNode = document.querySelector('.result') const add = (x, y) => x + y const toNumber = e => Number(e.target.value) const renderResult = result => { resultNode.textContent = result } export const main = () => { // x represents the current value of xInput const x = fromEvent('input', xInput).map(toNumber) // y represents the current value of yInput const y = fromEvent('input', yInput).map(toNumber) // result is the live current value of adding x and y const result = combine(add, x, y) // Observe the result value by rendering it to the resultNode result.observe(renderResult) } ``` ## More examples You can find the example above and others in the [Examples repo](https://github.com/mostjs/examples). ## Get it ### Requirements Most requires ES6 `Promise`. You can use your favorite polyfill, such as [creed](https://github.com/briancavalier/creed), [when](https://github.com/cujojs/when/blob/master/docs/es6-promise-shim.md), [bluebird](http://bluebirdjs.com/docs/getting-started.html), [es6-promise](https://github.com/jakearchibald/es6-promise), etc. Using a polyfill can be especially beneficial on platforms that don't yet have good unhandled rejection reporting capabilities. ### Install As a module: ``` npm install --save most ``` ```es6 // ES6 import { /* functions */ } from 'most' // or import * as most from 'most' ``` ```js // ES5 var most = require('most') ``` As `window.most`: ``` bower install --save most ``` ```html ``` As a library via cdn : ```html ``` ```html ``` ### Typescript support Most.js works with typescript out of the box as it provides [local typings](https://github.com/cujojs/most/blob/master/type-definitions/most.d.ts) that will be read when you import Most.js in your code. You do not need to manually link an external `d.ts` file in your tsconfig. Most.js has a dependency on native Promises so a type definition for Promise must be available in your setup: - If your tsconfig is targeting ES6, you do not need to do anything as typescript will include a definition for Promise by default. - If your tsconfig is targeting ES5, you need to provide your own Promise definition. For instance [es6-shim.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types/es6-shim/es6-shim.d.ts) ## Interoperability