vdom を実装した。
VSCode の Go Live プラグインを使用すると便利ですが、普通に html を開くだけでも動きます。
以下は TODO App の例です。
git clone https://github.com/takurinton/treact
cd treact/playground/todo
npm i
npm run build
open index.htmlnpm run build
open /your/path/index.htmlimport { h, Treact, Component, ActionTree } from 'treact';
// お好みの state を追加する
type State = {}
const state: State = {}
// お好みの関数を追加する
interface Actions extends ActionTree<State> {}
const actions: Actions = {}
const component: Component<State, Actions> = (state, actions) => {
return h(
'div', {}, h(
'h1', {}, 'hello world'
)
);
}
new Treact<State, Actions>({
el: document.getElementById('main'),
state,
component,
actions
})<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<body>
<div id="main"></div>
<script async defer src="./main.js"></script>
</body>
</html>関数は hooks が未実装なので実験的な段階です。
レンダリングして表示することはできますが状態管理などはできません。(2021年6月4日時点)
// main.ts
import { h, render } from 'treact';
const state = {};
const vnode = h(
'div', {}, h(
'h1', {}, 'hello world'
)
);
const element = document.getElementById('main');
render(vnode, element, state);<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<body>
<div id="main"></div>
<script async defer src="./main.js"></script>
</body>
</html>