caper-preact/dist/main.js

A library for building declarative, stateful user interfaces.

import { spawn, getRunner, send, createMount, } from '@matthewp/caper';
import { render, Component } from 'preact';
export { spawn, send, tools } from '@matthewp/caper';
import { shallowEqual } from './shallow-equal.js';
export const createComponent = (fn) => {
    class PreactComponent extends Component {
        url;
        constructor(props) {
            super(props);
            this.state = { ui: null };
            // Create the runner
            this.url = spawn(fn, props);
            let runner = getRunner(this.url);
            runner.tools.drawHandler = { draw: this.setUI };
        }
        setUI = (ui) => {
            this.setState({ ui });
        };
        componentWillMount() {
            send(this.url, ['props', this.props]);
        }
        componentDidUpdate(prevProps, prevState) {
            // Props have changed and we have a UI already
            if (!shallowEqual(prevProps, this.props) && !!prevState.ui) {
                send(this.url, ['props', this.props]);
            }
        }
        render() {
            return this.state.ui;
        }
    }
    return PreactComponent;
};
const createRoot = (root) => {
    return {
        draw(ui) {
            render(ui, root);
        }
    };
};
export const mount = createMount(createRoot);
//# sourceMappingURL=main.js.map