callbag-component

callbag-component is wrapper of Custom element 1.0 API.

Provides reactive custom element via callbag

API

Component

component(intent$, model$, view$)

| Arguments | Description | |-----------|-------------| | intent$ | takes DOM element(connected component). returns source of intent | | model$ | takes source of intent. returns source of model | | view$ | takes source of model. returns source of DOM Node, which will replace custom element's children |

Example:

import { component, fromIntent } from 'callbag-component';
import fromEvent from 'callbag-from-event';
import map from 'callbag-map';

const Counter = component(
  element => fromEvent(element, 'click'),
  fromIntent(prev => prev + 1, 0),
  map(count => document.createTextNode(`count: ${count}`)),
);

fromIntent(reducer, preloadedModel)

| Arguments | Description | |-----------|-------------| | reducer | takes lastly calculated model and lastly produced intent, returns new model | | preloadedModel | initial model |

import { component, fromIntent } from 'callbag-component';
import fromEvent from 'callbag-from-event';
import map from 'callbag-map';

const Counter = component(
  element => fromEvent(element, 'click'),
  fromIntent(prev => prev + 1, 0),
  map(count => document.createTextNode(`count: ${count}`)),
);