@collaboratory/jiffy

Fully composable JSX toolkit supporting both synchronous and asynchronous components.

Configure JSX pragma to use composable.

.babelrc

{
    "presets": ["@babel/env"],
    "plugins": ["@babel/transform-runtime", ["transform-react-jsx", { "pragma": "composable" }]]
}

Pragma

/* @jsx composable */

Example

Documentation coming soon. For now, gather what you can from this example:

import http from "axios";
import { composable, renderDOM, renderString, useState, useEffect } from "@collaboratory/jiffy";

function Button({ children, ...props }) {
    const { color, ...attributes } = props;
    return <button {...attributes} >{children}</button>;
}

async function AsyncComponent() {
    const data = await http.get("http://api.coindesk.com/v1/bpi/historical/close.json").then(({data}) => data);
    const total = Object.values(data.bpi).reduce((a, b) => a + b);
    const avg = total / Object.keys(data.bpi).length;

    return <div>Total: {total}, Average: {avg}</div>;
}

function SyncComponent() {
    const [bpi, setBPI] = useState(null);

    useEffect(() => {
        setTimeout(() => {
            console.log('Setting BPI');
            setBPI(42);
        }, 3000);
    }, () => {
        console.log('Sync component unounted', bpi)
    });

    return bpi === 42 ? <div>42!</div> : <div>Synchronous render component</div>;
}

function onButtonClick(e) {
    console.log('Button clicked', e);
}

const App = ({ title = "App A" }) => (
    <null>
        <h1>{title}</h1>
        <Button onClick={onButtonClick} color="green">Click Me</Button>
        <AsyncComponent />
        <SyncComponent />
    </null>
);

window.onload = () => {
    // Async render to string with optional support for re-render callback
    const rootC = document.getElementById("rootC");
    renderString(<App title="App C"/>, { onReRender: asString => {
        rootC.innerHTML = asString;
    } }).then(asString => {
        rootC.innerHTML = asString;
    });

    // All of these renders are async in nature but only one can execute at a time (for now).
    renderDOM(<App title="App A" />, document.getElementById("root"));
    renderDOM(<App title="App B" />, document.getElementById("rootB"));
};