create-element.ts

/** A helper function to create DOM elements in a declarative way.

Example:

```html
<span class="wrapper">
    <span class="icon" tabindex="0">
        <img src="..." />
    </span>
    <span class="info">
        Hello, world!
    </span>
</span>
```

```ts
el({
    tag: 'span',
    attrs: { class: 'wrapper' },
    children: [
        el({
            tag: 'span',
            attrs: { class: 'icon', tabindex: '0' },
            children: [
                el({
                    tag: 'img',
                    props: { src: imgUrl },
                })
            ]
        }),
        el({
            tag: 'span',
            attrs: { class: 'info' },
            children: ['Hello, world!']
        })
    ]
})
```

*/
function el(config: {
    tag: string,
    children?: (HTMLElement | string | null)[],
    attrs?: Record<string, string>,
    props?: Record<string, unknown>
}): HTMLElement {
    const {
        tag,
        children,
        attrs,
        props
    } = config;

    const el = document.createElement(tag)

    if (attrs) for (const [ attr, value ] of Object.entries(attrs)) {
        el.setAttribute(attr, value)
    }

    if (props) for (const [ prop, value ] of Object.entries(props)) {
        el[prop] = value
    }

    if (children) for (const child of children) if (child) {
        el.appendChild(
            typeof child === 'object'
                ? child
                : document.createTextNode(child)
        )
    }

    return el
}