preact-flyd
Inspired by theadam/react-flyd
Allows for flyd streams to be embedded directly into JSX, and to update content when the streams fire events.
List Example
import render from 'preact';import h from 'preact-flyd';import stream scan merge from 'flyd'; let items$ = { return <div> <div> <button ="plus" =>+</button> </div> <ul> items$ </ul> </div> ;} ;
Several Concept:
Self Control Element
a self control element
means a valid vnode stream like: {item$.map(item => <div>{item}</div>)}
. In fact, it runs like this:
<div> item$</div> // will be like ... some lifecycle methods to manage the stream as state ... { return <div >thisstateitem</div> }<div><ReactiveClass /></div>
Since render
returning a string is accepted in preact
, a string stream is also be treated as a self control element.
Parent Control Element
a parent control element
means a not valid vnode stream like: {list$.map(list => list.map(item => <li key={item}>{item}</li>))}
. In fact, it runs like:
<ul> list$</ul> // will be like ... some lifecycle methods to manage the stream as state ... { return <ul>thisstatechildren</ul> // we have change the children from a stream to it's value }<ReactiveClass />
And of course, self control element
consume less than parent control element
, but just a little. You needn't worry about it too much.
IMPORTANT
use streams created in render method rather than outter streams... Just see the example use_streams_created_in_render_rather_than_out_of_it
Terribly sorry about above description, it's wrong. I must be drunk when I wrote it even though I do not drink alcohol. Well, in fact, what I want to notice you is BE CAREFUL OF MEMORY LEAKING.
There is an example. Some tips is:
- Don't transform the stream's component type:
<div>a$</div> // now, a$ will be treated as a self control element, then you can// but you cann't
the rule is: the init value will define the stream's component type. If it's null, string, preact vnode, it's a self control element. Otherwise, it's parent control element. A self control element can only has valid value(null, string, vnode), but a parent control element can has any type value.
-
Be careful of memory leaking:
A self control element stream can be created in
render
method with just onestream.map
(no more than one level). But a parent control element must be created outside ofrender
.