仮想 DOM（vnode）

import { init, h, classModule, propsModule, styleModule, eventListenersModule } from 'ranuts/vnode';

import { init, h } from 'ranuts/vnode';

// init() は `patch` 関数を返します。
// 同梱のモジュール（class、props、attrs、style、events）は自動で登録されます。
const patch = init();

const container = document.getElementById('app');

// vnode の木を組み立てる
let vnode = h('div#app.container', { style: { color: 'red' } }, [
  h('h1', 'Hello vnode'),
  h('button', { on: { click: () => console.log('clicked') } }, 'Click me'),
]);

// 最初の描画。古い vnode の位置に本物の DOM 要素を渡すと、その中にマウントされます
patch(container, vnode);

// そのあと。更新後の木を組み立て、直前の vnode をそれへ patch します。
// DOM に適用されるのはちがいの部分（テキスト、スタイル、リスナー）だけです。
const newVnode = h('div#app.container', { style: { color: 'green' } }, [
  h('h1', 'Hello again'),
  h('button', { on: { click: () => console.log('clicked') } }, 'Updated'),
]);

patch(vnode, newVnode);
vnode = newVnode; // 次の patch のために最新の木を持っておく

// タグだけ
h('div');

// タグ + data
h('div', { class: { active: true } });

// タグ + 子のテキストひとつ
h('span', 'hello');

// タグ + 子の配列
h('ul', [h('li', 'one'), h('li', 'two')]);

// タグ + data + 子
h('a', { attrs: { href: '/home' } }, 'Home');

// CSS 風のセレクターで id とクラスが決まります
h('div#main.card.large', 'content'); // <div id="main" class="card large">content</div>

// セレクターが "svg" で始まると、SVG の名前空間が自動で適用されます
h('svg', { attrs: { width: 100, height: 100 } }, [h('circle', { attrs: { cx: 50, cy: 50, r: 40 } })]);