https://github.com/xialvjun/preact-flyd

Inspired by theadam/react-flyd
https://github.com/xialvjun/preact-flyd

Last synced: 2 months ago
JSON representation

Inspired by theadam/react-flyd

• Host: GitHub
• URL: https://github.com/xialvjun/preact-flyd
• Owner: xialvjun
• License: mit
• Created: 2016-07-14T17:07:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-14T05:01:21.000Z (almost 8 years ago)
• Last Synced: 2024-09-15T21:56:42.306Z (4 months ago)
• Language: JavaScript
• Size: 16.6 KB
• Stars: 11
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-preact - Preact Flyd - Use [flyd](https://github.com/paldepind/flyd) FRP streams in Preact + JSX. (Uncategorized / Uncategorized)

README

        
preact-flyd

=========================

Inspired by [theadam/react-flyd](https://github.com/theadam/react-flyd)

Allows for flyd streams to be embedded directly into JSX, and to update content when the streams fire events.

### List Example

```jsx

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 (

    


      


         items$(items$().concat(Math.random()))}>+

      

      


        {items$.map(items => items.map(item => 
{item}
))}

      

    

  );

}


render(, document.getElementById('app'));

```

### Several Concept:

**Self Control Element**

a `self control element` means a valid vnode stream like: `{item$.map(item => 
{item}
)}`. In fact, it runs like this:


```jsx



  {item$.map(item => 
{item}
)}



// will be like

class ReactiveClass extends Component {

  ...

  some lifecycle methods to manage the stream as state

  ...

  render() {

    return 
{this.state.item}

  }

}



```


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 => 
{item}
))}`. In fact, it runs like:

```jsx



  {list$.map(list => list.map(item => 
{item}
))}



// will be like

class ReactiveClass extends Component {

  ...

  some lifecycle methods to manage the stream as state

  ...

  render() {

    return 
{this.state.children}
 // we have change the children from a stream to it's value

  }

}


```

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:

```jsx

a$(
)

{a$}
   

// now, a$ will be treated as a self control element, then you can

a$('abc')

a$()

// but you cann't

a$(1)

a$([1,2,3])

a$([
, 
])

```


    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.

    

2. 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`.