Skip to content
agent-based reactive programming library for typescript
TypeScript HTML JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Aug 26, 2019
conf make it cjs-friendly again Sep 13, 2019
docs add code preview support to docs Sep 18, 2019
samples/html update samples to use new scope, update version Jul 18, 2019
src fix state sharing issue Sep 19, 2019
.gitignore fix some issues with docs Aug 19, 2019
.travis.yml Create .travis.yml Sep 12, 2019
404.html add sampler doc Aug 28, 2019
CNAME Create CNAME Jun 18, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Aug 21, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Aug 26, 2019
LICENSE Create LICENSE Jun 18, 2019
README.md Update README.md Sep 13, 2019
index.html add code preview support to docs Sep 18, 2019
logo.svg update version and logo Jul 17, 2019
package-lock.json
package.json fix state sharing issue Sep 19, 2019
test.ts initial commit Jun 11, 2019
tsconfig.json add handleError Jul 12, 2019

README.md

npm i @connectv/core

Minzipped size Build Status CodeFactor Chat on Gitter

CONNECTIVE facilitates large-scale reactive programming in Type(Java)Script. It enables declarative creation of large and complex data/event flows and supports re-use of flows.

Example (Stackblitz):

import { wrap, map, filter } from '@connectv/core';
import { fromEvent } from 'rxjs';

let a = document.getElementById('a') as HTMLInputElement;
let p = document.getElementById('p');

//
// Will say hello to everyone but 'Donald'.
// For obvious reasons.
//

wrap(fromEvent(a, 'input'))           // --> wrap the `Observable` in a `Pin`
.to(map(() => a.value))               // --> map the event to value of the input
.to(filter(name => name != 'Donald')) // --> filter 'Donald' out
.to(map(name => 'hellow ' + name))    // --> add 'hellow' to the name
.subscribe(msg => p.innerHTML = msg); // --> write it to the <p> element

CONNECTIVE is a thin layer on top of RxJS, so it provides all the toolset of rxjs by proxy. However, while RxJS's API is better suited for short-lived and small flows, CONNECTIVE adds tools better suiting long-living and large/complex flows.

Example (Stackblitz):

import './style.css';

import { wrap, gate, control, map, pin, pipe, group, spread, sink } from '@connectv/core';
import { fromEvent } from 'rxjs';
import { delay, debounceTime } from 'rxjs/operators';

let a = document.getElementById('a') as HTMLInputElement;
let p = document.getElementById('p');

let g = gate();                       // --> gate helps us control the flow of the words

group(control(), g.output)            // --> open the gate every time it outputs something (also once initially)
  .to(pin())                          // --> this relays either gate output or initial `control()` emit
  .to(pipe(delay(500)))               // --> but wait 500ms before opening the gate
  .to(g.control);                     // --> controls when the gate opens up.

wrap(fromEvent(a, 'input'))           // --> wrap the `Observable` in a `Pin`
  .to(pipe(debounceTime(2000)))       // --> debounce for 2 seconds so people are done typing
  .to(map(() => a.value.split(' ')))  // --> map the event to value of input, splitted
  .to(spread())                       // --> spread the array to multiple emissions
  .to(g)                              // --> pass those emissions to the gate
  .to(sink(() => p.classList.add('faded')))    // --> fade the <p> when something comes out of the gate.
  .to(pipe(delay(100)))                        // --> wait 100 ms
  .to(sink(v => p.innerHTML = v))              // --> write the new word
  .to(sink(() => p.classList.remove('faded'))) // --> show the <p> again
  .subscribe();                                // --> bind everything.

How To Install

Using NPM:

npm i @connectv/core

Using a CDN:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.14/lodash.min.js"></script>

<script src="https://unpkg.com/@connectv/core/dist/bundles/connective.es5.min.js"></script>

How To Use

Check out the documentation.

Why Use This?

CONNECTIVE provides a different API on top of RxJS that is more suitable for larger and more complex projects. You can read more on this here.


How To Contribute

Check out the contribution guide. Also check out the code of conduct.

You can’t perform that action at this time.