add comments option to allow user kept comments in template (#5392)

Author: kingwl

flow/compiler.js

@@ -21,6 +21,9 @@ declare type CompilerOptions = {
 
   // runtime user-configurable
   delimiters?: [string, string]; // template delimiters
+
+  // allow user kept comments
+  comments?: boolean
 };
 
 declare type CompiledResult = {
@@ -61,7 +64,7 @@ declare type ASTDirective = {
   modifiers: ?ASTModifiers;
 };
 
-declare type ASTNode = ASTElement | ASTText | ASTExpression;
+declare type ASTNode = ASTElement | ASTText | ASTExpression | ASTComment;
 
 declare type ASTElement = {
   type: 1;
@@ -155,6 +158,15 @@ declare type ASTText = {
   ssrOptimizability?: number;
 };
 
+declare type ASTComment = {
+  type: 4;
+  text: string;
+  static?: boolean;
+
+  // 2.4 ssr optimization
+  ssrOptimizability?: number;
+};
+
 // SFC-parser related declarations
 
 // an object format describing a single-file component.

flow/options.js

@@ -68,6 +68,7 @@ declare type ComponentOptions = {
   name?: string;
   extends?: Class<Component> | Object;
   delimiters?: [string, string];
+  comments?: boolean;
 
   // private
   _isComponent?: true;

src/compiler/codegen/index.js

@@ -423,6 +423,8 @@ function needsNormalization (el: ASTElement): boolean {
 function genNode (node: ASTNode, state: CodegenState): string {
   if (node.type === 1) {
     return genElement(node, state)
+  } if (node.type === 4) {
+    return genComment(node)
   } else {
     return genText(node)
   }
@@ -435,6 +437,10 @@ export function genText (text: ASTText | ASTExpression): string {
   })`
 }
 
+export function genComment (comment: ASTComment): string {
+  return `_e('${comment.text}')`
+}
+
 function genSlot (el: ASTElement, state: CodegenState): string {
   const slotName = el.slotName || '"default"'
   const children = genChildren(el, state)

src/compiler/optimizer.js

@@ -77,7 +77,7 @@ function markStaticRoots (node: ASTNode, isInFor: boolean) {
     // outweigh the benefits and it's better off to just always render it fresh.
     if (node.static && node.children.length && !(
       node.children.length === 1 &&
-      node.children[0].type === 3
+      (node.children[0].type === 3 || node.children[0].type === 4)
     )) {
       node.staticRoot = true
       return
@@ -104,6 +104,9 @@ function isStatic (node: ASTNode): boolean {
   if (node.type === 3) { // text
     return true
   }
+  if (node.type === 4) { // comment
+    return true
+  }
   return !!(node.pre || (
     !node.hasBindings && // no dynamic bindings
     !node.if && !node.for && // not v-if or v-for or v-else

src/compiler/parser/html-parser.js

@@ -82,6 +82,9 @@ export function parseHTML (html, options) {
           const commentEnd = html.indexOf('-->')
 
           if (commentEnd >= 0) {
+            if (options.shouldKeptComment) {
+              options.comment(html.substring(4, commentEnd))
+            }
             advance(commentEnd + 3)
             continue
           }

src/compiler/parser/index.js

@@ -90,6 +90,7 @@ export function parse (
     isUnaryTag: options.isUnaryTag,
     canBeLeftOpenTag: options.canBeLeftOpenTag,
     shouldDecodeNewlines: options.shouldDecodeNewlines,
+    shouldKeptComment: options.comments,
     start (tag, attrs, unary) {
       // check namespace.
       // inherit parent ns if there is one
@@ -274,6 +275,12 @@ export function parse (
           })
         }
       }
+    },
+    comment (text: string) {
+      currentParent.children.push({
+        type: 4,
+        text
+      })
     }
   })
   return root

src/core/vdom/vnode.js

@@ -64,9 +64,9 @@ export default class VNode {
   }
 }
 
-export const createEmptyVNode = () => {
+export const createEmptyVNode = (text: string = '') => {
   const node = new VNode()
-  node.text = ''
+  node.text = text
   node.isComment = true
   return node
 }

src/platforms/web/entry-runtime-with-compiler.js

@@ -64,7 +64,8 @@ Vue.prototype.$mount = function (
 
       const { render, staticRenderFns } = compileToFunctions(template, {
         shouldDecodeNewlines,
-        delimiters: options.delimiters
+        delimiters: options.delimiters,
+        comments: options.comments
       }, this)
       options.render = render
       options.staticRenderFns = staticRenderFns

src/server/optimizing-compiler/optimizer.js

@@ -107,7 +107,8 @@ function optimizeSiblings (el) {
 }
 
 function isUnOptimizableTree (node: ASTNode): boolean {
-  if (node.type === 2 || node.type === 3) { // text or expression
+  // text or expression or comment
+  if (node.type === 2 || node.type === 3 || node.type === 4) {
     return false
   }
   return (

test/unit/features/options/comments.spec.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+describe('Comments', () => {
+  it('comments should be kept', () => {
+    const vm = new Vue({
+      comments: true,
+      data () {
+        return {
+          foo: 1
+        }
+      },
+      template: '<div><span>node1</span><!--comment1-->{{foo}}<!--comment2--></div>'
+    }).$mount()
+    expect(vm.$el.innerHTML).toEqual('<span>node1</span><!--comment1-->1<!--comment2-->')
+  })
+})