Hyperapp Dynamic Connect

Connect your components & dynamically inject actions.

Usage

Component.jsx

import { h } from "hyperapp";
import { connect } from "hyperapp-dynamic-connect";
import { selector, mutations, operations } from "./functions";

var Connector = connect("pageData")(selector, mutations, operations);

export default function ({ name, by }) {
    return (<Connector render={function ({ [name]: value }, { up }, { delayedDown: down }) {
        return (<p>
            <button class="btn counterBtn" type="button" onclick={function () {
                down(name, by);
                return false;
            }}>
                &minus;
            </button>
            <span class="counterValue">{value}</span>
            <button class="btn counterBtn" type="button" onclick={function () {
                up(name, by);
                return false;
            }}>
                +
            </button>
        </p>);
    }} />);
}

index.jsx

import { h, app } from "hyperapp";
import { withInject } from "hyperapp-dynamic-connect";
import Component from "./Component.jsx";

withInject(app)({
    pageData: {
        count: 0
    }
}, {}, function () {
    return (<div>
        <p>Counter</p>
        <Component name="count" by={1} />
    </div>);
}, document.getElementById("app"));

Misc

Does the render() function support returning an array?

No, unfortunately not currently. For your returned arrays in render() functions to behave correctly, consider using https://github.com/infinnie/hyperapp (any of the branches that is not patch-1) instead.

Which version of ECMAScript is the library written in?

Although Hyperapp Dynamic Connect’s generated build code is ECMAScript 5 compatible in syntax, it requires Object.assign() which is an ECMAScript 6 method, which is unfortunate for old IE. Consider adding a polyfill that shims at lease Object.assign() if support is desired.

Does it support IE8 or below?

Not in this repository (unless shimmed). But maybe https://github.com/infinnie/countertest would one day get updated to support IE 6-8 for more complicated use cases.