Package Exports

redom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RE:DOM

Tiny DOM library

Installation

npm install redom

Usage (ES2015 import)

import { el, mount, text } from 'redom';

const h1 = el('h1');

const hello = h1(text('Hello world!'));

mount(document.body, hello);

Using with commonjs

var redom = require('redom');
var el = redom.el;
var mount = redom.mount;
var text = redom.text;

Oldskool

<script src="https://redom.js.org/redom.min.js"></script>

var el = redom.el;
var mount = redom.mount;
var text = redom.text;

import { el, text, mount } from 'redom';
import { children, props, events } from 'redom';

const form = el('form');
const input = el('input');
const button = el('button');

const login = form(
  children(el => [
    el.email = input(props({ type: 'email' })),
    el.pass = input(props({ type: 'pass' })),
    el.submit = button(text('Sign in'))
  ]),
  events({
    onsubmit (el, e) {
      e.preventDefault();

      console.log(el.email.value, el.pass.value);
    }
  })
);

// Mount to DOM

mount(document.body, login);

Iteration / component example

import { el, list, mount } from 'redom';

// Define element tags

const table = el('table');
const tbody = el('tbody');
const tr = el('tr');
const td = el('td');

// Define components

const cell = (data) => td(
  update((el, data) => {
    el.textContent = data;
  })
)

const row = (data) => tr(
  children(el => [
    el.cols = list(el, cell)
  ]),
  update((el, data) => {
    el.cols.update(data)
  })
);

// Init the app

const app = table(
  children(el => [
    el.rows = list(tbody(), row)
  ]),
  update((el, data) => {
    el.rows.update(data.tbody)
  })
)

// Mount to DOM

mount(document.body, app);

// update app

app.update({
  tbody: [
    [ 1, 2, 3 ]
  ]
});

What else can you do with RE:DOM?

Documentation is a bit lacking yet, please check out the source for now: https://github.com/pakastin/redom/tree/master/src

Special thanks

Special thanks to maciejhirsz for the bind trick!

License

MIT

redom