https://github.com/darrylyeo/indomitable
Create, reference, and update HTML/DOM objects with ease. Verbose native JavaScript APIs shall never subdue you!
https://github.com/darrylyeo/indomitable
dom dom-api dom-manipulation es6-javascript html javascript javascript-framework
Last synced: about 1 year ago
JSON representation
Create, reference, and update HTML/DOM objects with ease. Verbose native JavaScript APIs shall never subdue you!
- Host: GitHub
- URL: https://github.com/darrylyeo/indomitable
- Owner: darrylyeo
- Created: 2019-04-08T03:34:28.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-18T17:39:56.000Z (almost 7 years ago)
- Last Synced: 2025-03-15T12:12:58.250Z (about 1 year ago)
- Topics: dom, dom-api, dom-manipulation, es6-javascript, html, javascript, javascript-framework
- Language: JavaScript
- Size: 106 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `
Hello world!`:
```
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`
Project: @title!
![]()
Comments: @comments
View Project
The mouse coordinates are (@x, @y).
`
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)
//
console.log(view.state.url)
// https://darryl-yeo.com
console.log(view.outerHTML)
/*
Project: My Project!
Comments: 100
View Project
The mouse coordinates are (1, 2).
*/
window.onmousemove = ({x, y}) =>
view.state({x, y})
```