Skip to content

darrylyeo/indomitable

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 

inDOMitable.js

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})

About

Create, reference, and update HTML/DOM objects with ease. Verbose native JavaScript APIs shall never subdue you!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published