Create, reference, and update HTML/DOM objects with ease. Verbose native JavaScript APIs shall never subdue you!
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>
<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.refs.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="_blank">View Project</a>
<pre>The mouse coordinates are (1, 2).</pre>
</article>
*/
window.onmousemove = ({x, y}) =>
view.state({x, y})