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