가상 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 } })]);