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