https://github.com/nichoth/preact-pull-stream

Create a duplex stream from a preact component
https://github.com/nichoth/preact-pull-stream

Last synced: 5 months ago
JSON representation

Create a duplex stream from a preact component

• Host: GitHub
• URL: https://github.com/nichoth/preact-pull-stream
• Owner: nichoth
• Created: 2017-10-05T03:56:36.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2025-06-24T04:56:33.000Z (about 1 year ago)
• Last Synced: 2025-07-11T09:43:27.999Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 235 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# preact pull stream

Create a duplex stream from a preact component

This will take a preact component, and return a new component with some additional properties -- `.createSource()`, and `.sink`, so that you can easily connect a view to a pull-stream. The source produces events from the dom, and the sink consumes state objects that get passed down as props, re-rendering for each new state.

## install 

    npm install preact-pull-stream

## example

```js

var { h, render } = require('preact')

var createViewStream = require('preact-pull-stream')

var assert = require('assert')

var xtend = require('xtend')

var S = require('pull-stream')

var scan = require('pull-scan')

var initState = { hello: 'world', n: 0 }

// create a duplex stream from a preact component

var View = createViewStream(MyView, initState)

function MyView (props) {

    var { emit } = props

    if (props.n === 0) {

        process.nextTick(function () {

            emit('foo', {

                target: {

                    value: 'world'

                }

            })

        })

    }

    return 


        hello: {props.hello} {props.n}

        


        {/*

            `emit('foo')` returns a function that takes a dom event,

            and emits events to the stream in the form [type, data], eg:

            `['foo', ]`

            The curried emit functions are memoized based on type,

            so we do not create a new function on each render

        */}

        

    

}


// transform view events into new states

var states$ = S(

    View.createSource(),

    scan((state, [type, ev]) => {

        assert.equal(type, 'foo')

        return { hello: ev.target.value, n: state.n + 1 }

    }, initState)

)

// View.sink will re-render on each event in the stream

S( states$, View.sink )

render(, document.body)

```