Skip to content
Inspired by theadam/react-flyd
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples change version number Jan 14, 2017
src tell why memory leaking and fix one status Jan 14, 2017
.babelrc 0.0.1 Jul 15, 2016
.gitignore 0.0.1 Jul 15, 2016
.npmignore npmignore Jul 15, 2016
LICENSE Initial commit Jul 14, 2016
README.md class pool and fix readme about memory leaking Jan 13, 2017
package.json change version number Jan 14, 2017

README.md

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$ = stream([1,2,3,4,5,])

function List() {
  return (
    <div>
      <div>
        <button id="plus" onClick={e => items$(items$().concat(Math.random()))}>+</button>
      </div>
      <ul>
        {items$.map(items => items.map(item => <li key={item}>{item}</li>))}
      </ul>
    </div>
  );
}

render(<List />, document.getElementById('app'));

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$.map(item => <div>{item}</div>)}
</div>

// will be like

class ReactiveClass extends Component {
  ...
  some lifecycle methods to manage the stream as state
  ...
  render() {
    return <div {...this.props}>{this.state.item}</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$.map(list => list.map(item => <li key={item}>{item}</li>))}
</ul>

// will be like

class ReactiveClass extends Component {
  ...
  some lifecycle methods to manage the stream as state
  ...
  render() {
    return <ul>{this.state.children}</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:

  1. Don't transform the stream's component type:
a$(<div />)
<div>{a$}</div>   
// now, a$ will be treated as a self control element, then you can
a$('abc')
a$(<span />)
// but you cann't
a$(1)
a$([1,2,3])
a$([<div></div>, <div></div>])
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.
  1. Be careful of memory leaking:

    A self control element stream can be created in render method with just one stream.map(no more than one level). But a parent control element must be created outside of render.

You can’t perform that action at this time.