# crkt

> Framework for creating Components with dataflow semantics

Latest version **0.1.15** (published 2020-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install crkt
pnpm add crkt
yarn add crkt
bun add crkt
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.15 |
| Published | 2020-07-17 |
| First published | 2019-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 75.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | David Boyer |
| Maintainers | mangr3n |
| Keywords | fbp, graflow |

## Links

- npm: https://www.npmjs.com/package/crkt
- Repository: https://github.com/mangr3n/crkt
- Homepage: https://github.com/mangr3n/crkt#readme
- Issues: https://github.com/mangr3n/crkt/issues
- npm.io page: https://npm.io/package/crkt

## Dependencies (5)

- [js-csp](https://npm.io/package/js-csp.md) ^1.0.1
- [setasap](https://npm.io/package/setasap.md) ^2.0.1
- [snabbdom](https://npm.io/package/snabbdom.md) ^0.7.2
- [nanoutils](https://npm.io/package/nanoutils.md) ^0.1.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.2.5

## Recent versions

- 0.1.15 (latest) — 2020-07-17
- 0.1.14 — 2019-08-30
- 0.1.13 — 2019-08-25
- 0.1.12 — 2019-08-22
- 0.1.11 — 2019-08-21
- 0.1.10 — 2019-08-21
- 0.1.9 — 2019-08-21
- 0.1.8 — 2019-08-06
- 0.1.7 — 2019-08-06
- 0.1.6 — 2019-08-06
- 0.1.5 — 2019-08-01
- 0.1.4 — 2019-08-01
- 0.1.3 — 2019-08-01
- 0.1.2 — 2019-08-01
- 0.1.1 — 2019-08-01
- … 1 more at https://npm.io/package/crkt/versions

## README

# crkt

**Crkt** (circuit) is the spiritual child of [graflow](http://github.com/pmros/graflow)

Crkt is a JavaScript Framework for creating graphs of Components, or "circuits", that implements data flow. 
The relevant introduction is to J.Paul Morrison's [Flow-based Programming](https://jpaulm.github.io/fbp/index.html).
I do not claim to be pure in anyway.  For me, Components and asynchronous communication is about getting practical about
Time in our Systems.  We are slowly recapitulating the structure of Natural solutions to complex problems. 

### What is a Component?(High Level Description)
A Component has input ports and output ports.  Values are sent into a Component through 
input ports.  Values come out of output ports.  Components are described either as simple pure functions, or as a graph 
of components(nodes) and connections(edges).

### No seriously what is a Component? (Practical Description)
A Component is a JavaScript Object (no inheritance) that implements two methods `send` and `on`.
```typescript
type HandlerFn = (value:any) => void;
interface Component {
  send: (value:any) -> void;
  send: (inputPort:String, value:any) => void;
  on: (handler:HandlerFn);
  on: (outputPort:String, handler:HandlerFn);
}
```
Every  Component has a default input port and a default output port.  The send and on functions with arity one refer to 
the default ports.

Binding two components with a "connection" is accomplished through:
```ecmascript 6
Component.on((v) => otherComponent.send(v));
```
### API idioms
The proper way to create a `Component`, is to call a function that returns an `Component` object. Implement `send` and 
`on`, and you have implemented a `Component`.

As we move forward with the development of Crkt we reserve the right to, where deemed appropriate, create additional 
interfaces in order to expose additional framework capabilities, but the core is the Component interface.

### Function Components
Function Components are created by calling `Component` with a function that receives two arguments `value` and `next`.  
The simplest component is the Identity Component. 
```typescript
type HandlerFn = (value:any) => void;
type NextFn = (value:any,next:HandlerFn) => void;
type FunctionComponentFactory: (NextFn) => Component;
```
The simplest Function Component is Identity:
```typescript
const Identity:FunctionComponentFactory = () => Component((v,next) => next(v));
```
Identity Emits each value it receives.

`next` is a function that receives a single argument.  Instead of returning a value from your function, you invoke next
when and if you wish to send an output, you pass next the resulting value you want emitted from your Component's output 
port.

#### Function Component Examples
Two interesting `Components` are `Filter` and `Mapper`
##### Implemenetation
```ecmascript 6
// Filter takes a function that accepts a value and returns true or false;
// (v:any) => boolean
// Filter emits the value on it's output if the filterFn returns true when applied to the incoming value.
const Filter = (filterFn) => Component((v,next) => { if (filterFn(v)) next(v) }) ;

// The Mapper takes
const Mapper = (mapFn) => Component((v,next) => next(mapFn(v)));
````
##### Usage
```ecmascript 6
// Define your components
const evenFilter = Filter(v => v % 2 == 0); // Emit even numbers, don't emit odd numbers
const addOneMapper = Mapper(v => v+1); // Add one

// Connect them to each other
evenFilter.on((v) => addOneMapper.send(v));  // Connected;
// Log the output
addOneMapper.on(v => console.log("Out: ",v));

// Send in values and watch the output
// Values frlow through
evenFilter.send(1);
evenFilter.send(2); // Out: 3
evenFilter.send(3);
evenFilter.send(4); // Out: 5
```



```javascript
{ 
  inputs: [names]
  outputs: [names],
  components: {
   name: Component,
  }
  connections: [
    [in.portName, component.input],
    [component.output,component.input],
    [component.output,component.output]
  ],
  debug: [portNames]
}
```

---
_Source: https://npm.io/package/crkt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._