Utilitário de elemento

typescript
interface ElementOptions<A> {
    attributes?: A
    textContent?: string
    htmlContent?: string
    childNodes?: Node[]
    ns?: 'http://www.w3.org/1999/xhtml' | 'http://www.w3.org/2000/svg'
}

type element = <A>(tagName: string, options?: ElementOptions<A>) => Element

O atributo element é simplesmente uma função que permite criar elementos DOM em uma chamada.

Normalmente, ao trabalhar com elementos DOM, nós os criamos e depois os juntamos.

javascript
const button = document.createElement('button')
button.type = 'button'
button.textContent = 'click me'

button.addEventListener('click', () => {
    console.log('clicked')
})

São várias etapas para criar um botão simples. Aqui está a mesma coisa usando element:

javascript
const button = element('button', {
    textContent: 'click me',
    attributes: {
        type: 'button',
        onclick: () => {
            console.log('clicked')
        },
    },
})

O element usa addEventListener nos bastidores e lida com valores não primitivos para você, detectando facilmente elementos de componentes da web.

childNodes e htmlContent

As opções childNodes e htmlContent permitem compor facilmente elementos mais complexos dependendo de como você deseja abordar.

Aqui está um exemplo usando a opção childNodes:

javascript
element('ul', {
    attributes: { id: 'items-list' },
    childNodes: [
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 1',
        }),
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 2',
        }),
        element('li', {
            attributes: { class: 'list-item' },
            textContent: 'item 3',
        }),
    ],
})

Agora um exemplo da mesma coisa usando a opção htmlContent:

javascript
element('ul', {
    attributes: { id: 'items-list' },
    htmlContent:
        '<li class="list-item">item 1</li>' +
        '<li class="list-item">item 2</li>' +
        '<li class="list-item">item 3</li>',
})

A principal diferença aqui é o fato de que usando childNodes você pode especificar valores de função e propriedade para atributos, enquanto o htmlContent usa apenas um HTML estático que você deseja usar.

Componentes da web

A melhor parte de trabalhar com element é com componentes web. Ele irá lidar com todos os props não primitivos para garantir que os componentes da web obtenham os dados como deveriam.

javascript
const item = element('todo-item', {
    attributes: {
        data: {
            id: crypto.randomUUID(),
            name: 'buy groceries',
            status: 'pending',
            dateCreated: new Date(),
        },
    },
})

Elementos SVG

Para criar elementos SVG você pode especificar a opção ns com o valor http://www.w3.org/2000/svg e isso fornecerá qualquer elemento SVG.

javascript
const rect = element('rect', {
    ns: 'http://www.w3.org/2000/svg',
    attributes: {
        x: 10,
        y: 10,
        width: 100,
        height: 100,
    },
})

editar este documento