Compiler: 実装アプローチ

アプローチ

templateオプションで渡された文字列を操作して特定の関数を生成する

コンパイラの3つの要素

解析

code: ts

const { tag, props, textContent} = parse(<p class="hello">Hello World</p>)

console.log(tag) // "p"

console.log(props) // { class: "hello" }

console.log(textContent) // "Hello World"

コード生成

code: ts

const code = codegen({ tag, props, textContent })

console.log(code) // "h('p', { class: 'hello' }, 'Hello World');"

関数オブジェクト生成

code: ts

import * as runtimeDom from './runtime-dom'

const render = new Function('Chibivue', code)(runtimeDom)

生成した関数はその中で定義された変数しか扱うことができないので、h関数の読み込みをこれに含む