Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/connect-platform/connective

agent-based reactive programming library for typescript
https://github.com/connect-platform/connective

agent-based architecture data-flow framework javascript reactive rxjs typescript

Last synced: 2 months ago
JSON representation

agent-based reactive programming library for typescript

Awesome Lists containing this project

README

        



```
npm i @connectv/core
```

[![Minzipped size](https://badgen.net/bundlephobia/minzip/@connectv/core@latest)](https://bundlephobia.com/result?p=@connectv/core@latest)
[![Build Status](https://travis-ci.org/CONNECT-platform/connective.svg?branch=master)](https://travis-ci.org/CONNECT-platform/connective)
[![CodeFactor](https://www.codefactor.io/repository/github/connect-platform/connective/badge)](https://www.codefactor.io/repository/github/connect-platform/connective)
[![Chat on Gitter](https://img.shields.io/gitter/room/connectv/community)](https://gitter.im/connectv/community)

**CONNECTIVE** facilitates large-scale [reactive programming](https://en.wikipedia.org/wiki/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](https://stackblitz.com/edit/connective-hellow-world)):

```typescript
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

element
```

**CONNECTIVE** is a thin layer on top of [**RxJS**](https://github.com/ReactiveX/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](https://stackblitz.com/edit/connective-delayed-broadcast)):

```typescript
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

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

again
.subscribe(); // --> bind everything.
```


# How To Install

Using NPM:

```
npm i @connectv/core
```

Using a CDN:

```

```


# How To Use

Check out the [documentation](https://connective.dev).

## 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](https://connective.dev/docs/connective-v-rxjs).


# How To Contribute

Check out the [contribution guide](CONTRIBUTING.md). Also check out the [code of conduct](CODE_OF_CONDUCT.md).