import { createApp, defineComponent } from 'chibivue'const App = defineComponent({ template: ` <!-- this is header. --> <header>header</header> <!-- this is main. main content is here! --> <main>main</main> <!-- this is footer --> <footer>footer</footer>`,})const app = createApp(App)app.mount('#app')
コメントアウトを実装する
目指す開発者インタフェース
特に説明は必要ないでしょう.
AST とパーサの実装
コメントアウトをどう実装するかですが,一見 パースするときに無視してしまえばいい感じもします.
しかし,Vue のコメントアウトは,template に記述したものがそのまま HTML として出力されるようになっています.
つまりはコメントアウトもレンダリングする必要があるので,VNode 上での表現が必要かつコンパイラもそのコードを出力する必要があり,
その上コメントノードを生成する操作も必要になります.
まずは AST とパーサを実装していきましょう.
AST
Parser
エラーはとりあえず throw するようにします.
コードを生成する
runtime-core 側に Comment を表現する VNode を追加します.
createCommentVNode という関数を実装し,helper として公開します.
codegen ではこの createCommentVNode を呼び出すコードを生成します.
レンダリングする
renderer の実装をやっていきます.
いつものように patch で Comment の場合を分岐し,mount 時にコメントを生成します.
patch に関しては,今回は静的なものなので,特に何も行いません.(コード上はそのまま代入するようにしています.)
さて,ここまででコメントアウトが実装できたはずです.実際に動作を確認してみましょう!
ここまでのソースコード: GitHub