More component API?

[infinnie]

import { h, watch, mounted, willUnmount, provide, consume } from '[[lib-name]]';
import request from '[[ajax-lib-name]]';

export default function (props, { update, emit }) {
    let initProps = props();

    let local = 1;
    let lock = null;
    let nextTask = null;
    let marker = null;

    let list = [];

    const constantProvider = provide('contextConstant', 666);
    const provideContext = provide('contextValue', local);
    const consumeContext = consume('outerContextValue');

    const handleClick = function (e) {
        emit('click', e);
    }
    const increase = function () {
        local++;
        provideContext(local);
        update();
    }

    function processRequest(value) {
        marker = value;
        // process some web request
        console.log('dependency was changed');

        async function next() {
            const resp = await request('/some-api', {
                contextValue: consumeContext(),
                propValue: props().propName,
                localValue: local
            });
            if (marker === value) {
                list = resp.list;
                update();
            }
        }

        if (lock) {
            nextTask = next;
            return;
        }

        lock = setTimeout(() => {
            lock = null;
            if (nextTask) {
                nextTask();
                nextTask = null;
            }
        }, 500);

        next();
    }

    mounted(() => {
        processRequest(consumeContext() + initProps.propName);
    });

    watch(() => {
        const curProps = props();
        return consumeContext() + curProps.propName;
    }, processRequest);

    willUnmount(() => {
        if (lock) {
            clearTimeout(lock);
        }
    });

    return () => {
        const curProps = props();
        return <p $click={handleClick} class="clickable">{curProps.render({ increase, list })}</p>
    };
}