element-vir/dist/readme-examples/my-with-async-prop.element.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { asyncProp, defineElement, html, listen, renderAsync } from '../index.js';
async function loadSomething(endpoint) {
    // load something from the network
    const data = await (await fetch([
        '',
        'api',
        endpoint,
    ].join('/'))).json();
    return data;
}
export const MyWithAsyncProp = defineElement()({
    tagName: 'my-with-async-prop',
    state() {
        return {
            data: asyncProp({
                async updateCallback({ endpoint }) {
                    return loadSomething(endpoint);
                },
            }),
            hi: '',
        };
    },
    render({ inputs, state }) {
        /**
         * This causes the a promise which automatically updates the state.data prop once the
         * promise resolves. It only creates a new promise if the first input, the trigger, value
         * changes from previous calls.
         */
        state.data.update(inputs);
        return html `
            Here's the data:
            <br />
            ${renderAsync(state.data, 'Loading...', (loadedData) => {
            return html `
                    Got the data: ${loadedData}
                `;
        })}
            <br />
            <button
                ${listen('click', () => {
            /** You can force asyncProp to update by calling forceUpdate. */
            state.data.forceUpdate(inputs);
        })}
            >
                Refresh
            </button>
        `;
    },
});