Make DOM great again!
Update: RE:DOM is now 1.0!
http://codepen.io/pakastin/pen/RGwoRg
http://codepen.io/pakastin/pen/gwWBEx
Initialize RE:DOM projects easily with RE:DOM project generator
$ npm install -g redom-cli
$ redom
Next learn how to use RE:DOM by reading the API.
npm install redom
import { el, mount } from 'redom'
const hello = el('h1', 'Hello world!')
mount(document.body, hello)
const { el, mount } = require('redom')
<!DOCTYPE html>
<html>
<body>
<script src="https://redom.js.org/redom.min.js"></script>
<script>
var el = redom.el
var mount = redom.mount
// create HTML element
var hello = el('h1', 'Hello world!')
// mount to DOM
mount(document.body, hello)
</script>
</body>
</html>
Check out some examples on https://redom.js.org
You can create HTML elements just by providing query + as many properties/attributes objects, children and text as you want in any order. Examples:
el('h1', 'Hello world!')
el('h1', { class: 'hello' }, 'Hello world!')
el('h1', 'Hello ', { class: 'hello' }, 'world!')
el('h1', { onclick: onclick }, 'Hello world, click me!')
el('h1.hello', 'Hello world!')
You can predefine elements by extending them:
var h1 = el.extend('h1.heading1')
h1('Hello world!')
Just like el, but with SVG elements.
Just like el.extend, but with SVG elements.
Create text node. Useful for updating parts of the text:
// define view
class HelloView {
constructor () {
this.el = el('h1',
'Hello ',
this.target = text('world'),
'!'
)
}
update (data) {
this.target.textContent = data
}
}
// create view
const hello = new HelloView()
// mount to DOM
mount(document.body, hello)
// update the view
hello.update('you')
List element is a powerful helper, which keeps it's child views updated with the data.
class Li {
constructor () {
this.el = el('li')
}
update (data) {
this.el.textContent = data
}
}
var ul = list('ul', Li)
mount(document.body, ul)
ul.update([ 1, 2, 3 ].map(i => 'Item ' + i)
When you provide a key, list will synchronize elements by their keys.
class Li {
constructor () {
this.el = el('li')
}
update (data) {
this.el.textContent = data.title
}
}
var ul = list('ul', Li, 'id')
mount(document.body, ul)
ul.update([ 1, 2, 3 ].map(i => {
return {
id: i,
title: 'Item ' + i)
}
})
You can also extend lists, which can be useful i.e. with tables:
// define component
class Td {
constructor () {
this.el = el('td')
}
update (data) {
this.el.textContent = data
}
}
// define list components
const Tr = list.extend('tr', Td)
const Table = list.extend('table', Tr)
// create main view
const table = new Table
// mount to DOM
mount(document.body, table)
// update the app
table.update([
[ 1, 2, 3 ],
[ 4, 5, 6 ],
[ 7, 8, 9 ]
])
Little helper to update element's/view's children:
var ul = el('ul')
var li = el('li', 'Item 1')
var li2 = el('li', 'Item 2')
var li3 = el('li', 'Item 3')
setChildren(ul, [ li, li2, li3 ])
mount(document.body, ul)