2. API

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

Source

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', { style: 'color: red;' }, 'Hello world!');
el('h1', { style: { color: 'red' } }, 'Hello world!');
el('h1', { onclick }, 'Hello world, click me!');
el('h1.hello', 'Hello world!');
el('.hello',
  el('h1', 'Hello world!')
);

el.extend(query)

You can predefine elements by extending them:

const h1 = el.extend('h1');

h1('Hello world!');

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

Source

Just like el, but with SVG elements.

svg.extend(query)

Just like el.extend, but with SVG elements.

text(text)

Source

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.update(data)

Source

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

const 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;
  }
}

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

router(parent, Views, initData)

-> _router.update(section, data)

Source

Switch between views easily.

class A {
  constructor () {
    this.el = el('.a');
  }

  update (data) {
    this.el.textContent = data.val;
  }
}
class B {
  constructor () {
    this.el = el('.b');
  }

  update (data) {
    this.el.textContent = data.val;
  }
}

const contentViews = {
  a: A,
  b: B
}

class App {
  constructor () {
    this.el = el('.app',
      this.content = router('.content', contentViews)
    );
  }

  update (section, data) {
    this.content.update(section, data);
  }
}

const app = new App();

app.update('a', { val: 1 });

setTimeout(() => {
  app.update('b', { val: 2 });
}, 1000);

setChildren(parent, children/child)

Source

Little helper to update element's/view's children:

const ul = el('ul');
const li = el('li', 'Item 1');
const li2 = el('li', 'Item 2');
const li3 = el('li', 'Item 3');

setChildren(ul, [ li, li2, li3 ]);

mount(document.body, ul);

That's it!

There's also a shortcut for replacing a single child:

setChildren(ul, li);
setChildren(ul, li2);

setAttr(view/el, key, value), setAttr(view/el, attrs)

setAttr(hello, 'class', 'test'); // works for attributes
setAttr(hello, 'className', 'test'); // works also for properties
setAttr(hello, 'style', { display: 'none' }); // CSS object
setAttr(hello, 'style', 'display: none;'); // CSS string
setAttr(hello, {
  class: 'test',
  style: {
    display: 'none'
  }
}); // attrs object

setStyle(view/el, key, value), setStyle(view/el, styles)

setStyle(hello, { display: 'none' }); // CSS object
setStyle(hello, 'display: none;'); // CSS string