❤
npm
Sign UpSign In

reflow-js

0.0.2 • Public • Published

Reflow (beta)

Render interfaces using pure functions

Reflow is basically Deku with a few extra lifecycle hooks (like initialState).

Motivation

I wanted learn more about the underlying mechanics of frameworks like React. I ended up stumbling upon Deku shortly after starting I started this project. Deku's architecture solved many of the problems I was running into like passing a component's context to child components, which eliminates the need for "providers" and it makes communicating between component easier. Deku's design also makes DOM diffing and patching simpler (no more DOM element uuids!). So I decided to remodel Reflow after Deku.

I'm making this for fun, don't use this library in production.

Example

var { layout, element } = require('reflow-js');
 
var Component = {
    render: () => <div>hello world</div>
}
 
var render = layout(document.body)
 
render(<Component />)

Example using Redux

import { layout, element } from 'reflow-js';
import { createStore } from 'redux';
 
var Component = {
    initialState(component) {
        const { context } = component;
        return context.store.getState()
    }
 
    onCreate(component) {
        const { context, setState } = component;
 
        context.store.subscribe(() => {
            setState( context.store.getState() )
        })
    }
 
    render(component) {
        const { state } = component;
        return <div>hello {state.name}</div>
    }
}
 
var Context = () => {
    return {
        store: createStore(reducer, initialState)
    }
}
 
var render = layout(document.body, Context)
 
render(<Component />)

License

GNU GPL Version 3

Readme

Keywords

Package Sidebar

Install

npm i reflow-js

Weekly Downloads

1

Version

0.0.2

License

GPL-3.0

Last publish

Collaborators

  • paulserraino
Try on RunKit
Report malware