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')
As for how to implement comment out, at first glance, it seems that we can simply ignore it when parsing.
However, in Vue, comment outs written in the template are output as HTML as they are.
In other words, comment outs also need to be rendered, so it is necessary to have a representation on the VNode and the compiler also needs to output that code. In addition, an operation to generate a comment node is also necessary.
Implementing Comment Out
Target Developer Interface
There is no need for further explanation.
Implementation of AST and Parser
As for how to implement comment out, at first glance, it seems that we can simply ignore it when parsing.
However, in Vue, comment outs written in the template are output as HTML as they are.
In other words, comment outs also need to be rendered, so it is necessary to have a representation on the VNode and the compiler also needs to output that code. In addition, an operation to generate a comment node is also necessary.
First, let's implement the AST and parser.
AST
Parser
For now, let's throw an error.
Generating Code
Add a VNode that represents Comment to the runtime-core.
Implement a function called createCommentVNode and expose it as a helper.
In codegen, generate the code that calls createCommentVNode.
Rendering
Let's implement the renderer.
As usual, branch the case of Comment in patch and generate a comment when mounting.
Regarding the patch, since it's static this time, I won't be doing anything special. (In the code, it's just set to assign as is.)
Well, you should have implemented comment out by now. Let's check the actual operation!
Source code up to this point: GitHub