Skip to content

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

Notifications You must be signed in to change notification settings

darrylyeo/indomitable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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