Composants fonctionnels avec Markup - Usines de modèles JavaScript

Composant fonctionnel

Markup n'est pas livré avec une API de composant dédiée. Les composants sont simplement des fonctions qui renvoient une instance HTMLTemplate.

javascript
const MyButton = () => {
    return html` <button type="button">click me</button> `
}

C'est à vous de décider ce que ces fonctions peuvent faire ou à quoi elles ressemblent. À partir de l'exemple ci-dessus, vous pouvez simplement restituer votre composant en utilisant la méthode render.

javascript
MyButton().render(document.body)

Entrées (props)

Depuis ses fonctions, vous pouvez prendre des arguments et les injecter directement dans le modèle avec une gestion appropriée des valeurs par défaut.

javascript
const Button = ({ content = '', disabled = false, type = 'button' }) => {
    return html` <button type="${type}" disabled="${disabled}">
        ${content}
    </button>`
}

Les modèles peuvent prendre des valeurs brutes ou des fonctions qui renvoient une valeur qui peut être un state ou simplement un dynamic value. Dans ce cas, vous pouvez faire en sorte que votre définition de type d'entrée utilise le type StateGetter.

typescript
enum MyButtonType {
    Button = 'button',
    Reset = 'reset',
    Submit = 'submit',
}

interface MyButtonProps {
    content: unknown
    disabled: boolean | StateGetter<boolean>
    type: MyButtonType | StateGetter<MyButtonType>
}

Le StateGetter vous permet de communiquer que votre composant prend des valeurs de fonction en entrée, ce qui facilite le travail avec les états.

Cycles de vie

Vous pouvez profiter à la fois de effect et de html lifecycles pour réagir à des éléments tels que le montage, le démontage et les mises à jour des composants pour faire tout ce dont vous avez besoin.

javascript
const ChatMessages = () => {
    const [messages, updateMessages] = state([])

    onUpdate(() => {
        // todo: scroll to the bottom to show latest msg
    })

    const onMount = () => {
        const controller = new AbortController();
        const signal = controller.signal;

        fetch('...', { signal })
            .then((res) => {
                if(!res.ok) throw new Error(res.statusText)

                return res.json()
            })
            .then((res) => updateMessages(res.messages))
            .catch(console.error);

        // return a function to be called on unmount
        // where you can perform any clean ups
        return () => {
            controller.abort();
        }
    }

    return html`
        <ul>
            ${repeat(messages, msg => html`<li>${msg}</li>
        </ul>
    `)}
        .onMount(onMount)
        .onUpdate(onUpdate)
}

Le modèle Markup a des cycles de vie puissants et comme une fonction est appelée une seule fois et avec un pouvoir de réactivité, vous pouvez tout encapsuler à l'intérieur de la fonction en laissant tout gérer à Markup.

modifier ce document