Utilitaire d'élément

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

L'attribut element est simplement une fonction qui permet de créer des éléments DOM en un seul appel.

Normalement, lorsque nous travaillons avec des éléments DOM, nous les créons et les rassemblons ensuite.

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

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

Cela représente beaucoup d'étapes pour créer un bouton simple. Voici la même chose en utilisant element :

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

Le element utilise addEventListener en arrière-plan et gère les valeurs non primitives pour vous en détectant facilement les éléments des composants Web.

childNodes et htmlContent

Les options childNodes et htmlContent vous permettent de composer facilement des éléments plus complexes en fonction de la manière dont vous souhaitez aborder.

Voici un exemple utilisant l'option 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',
        }),
    ],
})

Maintenant, un exemple de la même chose en utilisant l'option 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>',
})

La principale différence ici est le fait qu'en utilisant childNodes, vous pouvez spécifier des valeurs de fonction et de propriété aux attributs tandis que le htmlContent ne prend qu'un HTML statique que vous souhaitez utiliser.

Composants Web

La meilleure partie du travail avec element réside dans les composants Web. Il gérera tous les props non primitifs pour garantir que les composants Web obtiennent les données comme ils le devraient.

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

Éléments SVG

Pour créer des éléments SVG, vous pouvez spécifier l'option ns avec la valeur http://www.w3.org/2000/svg et cela vous donnera n'importe quel élément SVG.

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

modifier ce document