AST: intro
https://ubugeeei.github.io/chibivue/10-minimum-example/070-more-complex-parser.html#もっと複雑な-html-を書きたい-1
今の状態だとせいぜいタグの名前、属性、テキストの内容ぐらいしか表せない。
もっと複雑なHTMLをtemplateに書けるようにしたい
code: ts
const app = createApp({
template: `
<div class="container" style="text-align: center">
<h2>Hello, chibivue!</h2>
<img
width="150px"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
alt="Vue.js Logo"
/>
<p><b>chibivue</b> is the minimal Vue.js</p>
<style>
.container {
height: 100vh;
padding: 16px;
background-color: #becdbe;
color: #2c3e50;
}
</style>
</div>
`,
})
app.mount('#app')
これを正規表現でパースするのは難しいので、本格的なパーサーを実装する!
ASTを使う
Abstract Syntax Tree (抽象構文木)
構文を表現する木構造のデータ表現