Componentes de funciones con Markup - Fábricas de plantillas JavaScript

Componente de función

Markup no se entrega con una API de componente dedicada. Los componentes son simplemente funciones que devuelven una instancia HTMLTemplate.

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

Depende totalmente de usted cómo pueden funcionar o verse estas funciones. En el ejemplo anterior, simplemente puede renderizar su componente usando el método render.

javascript
MyButton().render(document.body)

Entradas (props)

Debido a sus funciones, puede tomar argumentos e inyectarlos directamente en la plantilla con un manejo adecuado de los valores predeterminados.

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

Las plantillas pueden tomar valores sin procesar o funciones que devuelven algún valor que puede ser state o simplemente dynamic value; en ese caso, puede hacer que su definición de tipo de entrada use el tipo StateGetter.

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

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

El StateGetter le permite comunicar que su componente toma valores de función como entrada, lo que facilita el trabajo con estados.

Ciclos de vida

Puede aprovechar tanto effect como html lifecycles para reaccionar ante cosas como componentes montados, desmontados y actualizaciones para hacer todo lo que necesita.

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)
}

La plantilla Markup tiene ciclos de vida poderosos y debido a que una función se llama una vez y con poder de reactividad, puede encapsular todo dentro de la función dejando que Markup lo administre todo.

editar este documento