RE:DOM

Tiny UI library

Hello RE:DOM

ES2015-version with some extra magic

Quick start

Initialize RE:DOM projects easily with RE:DOM project generator

Installing

npm install redom

Usage (ES2015 import)

import { el, mount } from 'redom'

const hello = el('h1', 'Hello world!')

mount(document.body, hello)

Using with commonjs

const { el, mount } = require('redom')

Oldskool

<!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>

Examples

Check out some examples on https://redom.js.org

API

el(query, ...properties/attributes/children/text)

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!')

el.extend(query)

You can predefine elements by extending them:

var h1 = el.extend('h1.heading1')
h1('Hello world!')

svg(query, ...properties/attributes/children/text)

Just like el, but with SVG elements.

svg.extend(query)

Just like el.extend, but with SVG elements.

text(text)

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(parentQuery, childView, key, initData)

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

list.extend(parentQuery, childView, key, initData)

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

setChildren(parent, children)

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)

License

MIT

jaggedsoft / redom Goto Github PK

redom's Introduction