inDOMitable.js

The native JavaScript APIs for interfacing with the HTML Document Object Model (DOM) can be very verbose. Here is the code for generating <div>Hello world!</div>:

const div = document.createElement('div')
const content = document.createTextNode('Hello world!')
div.appendChild(content)
document.body.appendChild(div)

inDOMitable.js aims to make a lot of that simpler, without sacrificing performance. The framework defines a function, h, which you can pass annotated HTML. The result is an HTML tree that is ready to use, along with a .state object to access and update the annotated text nodes, elements and attributes.

const $view = h`
    <article @article>
        <h2>Project: @title!</h2>
        <img src:@image>
        <span>Comments: @comments</span>
        <a href:@url target:@>View Project</a>
        @input
        <pre>The mouse coordinates are (@x, @y).</pre>
    </article>
`
document.body.appendChild($view)

$view.state.title = 'My Project'
$view.state.target = '_blank'
$view.state({
    comments: 100,
    url: 'https://darryl-yeo.com',
    image: 'https://picsum.photos/600/400',
    x: 1,
    y: 2
})

console.log($view.state.article)
// <article>

console.log($view.state.url)
// https://darryl-yeo.com

console.log($view.outerHTML)
/*
<article>
    <h2>Project: My Project!</h2>
    <img src="https://picsum.photos/600/400">
    <span>Comments: 100</span>
    <a href="https://darryl-yeo.com" target="">View Project</a>
    <pre>The mouse coordinates are (1, 2).</pre>
</article>
*/

Built With

• html
• javascript