A utility function to make scoped dataflow components in Cycle.js.
See the Cycle.js documentation on components for further details.
npm install @cycle/isolate
We use only one repository for issues. Open the issue at Cycle Core repo.
import isolate from '@cycle/isolate';
function bmiCalculator({DOM}) {
let weightProps$ = Rx.Observable.just({
label: 'Weight', unit: 'kg', min: 40, initial: 70, max: 140
});
let heightProps$ = Rx.Observable.just({
label: 'Height', unit: 'cm', min: 140, initial: 170, max: 210
});
// LabeledSlider is a dataflow component
// isolate(LabeledSlider) is an impure function: it generates
// a NEW dataflow component every time it is called.
let WeightSlider = isolate(LabeledSlider);
let HeightSlider = isolate(LabeledSlider);
let weightSlider = WeightSlider({DOM, props$: weightProps$});
let heightSlider = HeightSlider({DOM, props$: heightProps$});
let bmi$ = Rx.Observable.combineLatest(
weightSlider.value$,
heightSlider.value$,
(weight, height) => {
let heightMeters = height * 0.01;
let bmi = Math.round(weight / (heightMeters * heightMeters));
return bmi;
}
);
return {
DOM: bmi$.combineLatest(weightSlider.DOM, heightSlider.DOM,
(bmi, weightVTree, heightVTree) =>
h('div', [
weightVTree,
heightVTree,
h('h2', 'BMI is ' + bmi)
])
)
};
}
Takes a dataflowComponent
function and an optional scope
string, and
returns a scoped version of the dataflowComponent
function.
When the scoped dataflow component is invoked, each source provided to the
scoped dataflowComponent is isolated to the scope using
source.isolateSource(source, scope)
, if possible. Likewise, the sinks
returned from the scoped dataflow component are isolate to the scope using
source.isolateSink(sink, scope)
.
If the scope
is not provided, a new scope will be automatically created.
This means that while isolate(dataflowComponent, scope)
is pure
(referentially transparent), isolate(dataflowComponent)
is impure
(not referentially transparent). Two calls to isolate(Foo, bar)
will
generate two indistinct dataflow components. But, two calls to isolate(Foo)
will generate two distinct dataflow components.
Note that both isolateSource()
and isolateSink()
are static members of
source
. The reason for this is that drivers produce source
while the
application produces sink
, and it's the driver's responsibility to
implement isolateSource()
and isolateSink()
.
dataflowComponent :: Function
a function that takessources
as input and outputs a collection ofsinks
.scope :: String
an optional string that is used to isolate eachsources
andsinks
when the returned scoped dataflow component is invoked.
(Function) the scoped dataflow component function that, as the original dataflowComponent
function, takes sources
and returns sinks
.