Componentes de função com fábricas de modelos Markup

Componente de Função

Markup não é fornecido com uma API de componente dedicada. Componentes são simplesmente funções que retornam uma instância HTMLTemplate.

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

Depende totalmente de você o que essas funções podem fazer ou parecer. No exemplo acima, você pode simplesmente renderizar seu componente usando o método render.

javascript
MyButton().render(document.body)

Entradas (props)

Desde suas funções, você pode pegar argumentos e injetá-los diretamente no modelo com tratamento adequado de padrões.

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

Os modelos podem assumir valores brutos ou funções que retornam algum valor que pode ser state ou simplesmente dynamic value; nesse caso, você pode fazer com que sua definição de tipo de entrada use o tipo StateGetter.

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

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

O StateGetter permite comunicar que seu componente recebe valores de função como entrada, o que facilita o trabalho com estados.

Ciclos de vida

Você pode aproveitar efeito e lifecycles html para reagir a coisas como componentes montados, desmontados e atualizações para fazer tudo o que você precisa.

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

O modelo Markup tem ciclos de vida poderosos e como uma função é chamada uma vez e com poder de reatividade, você pode encapsular tudo dentro da função deixando tudo para o Markup gerenciar.

editar este documento