add comments option to allow user kept comments in template (vuejs#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-->')
+  })
+})

test/unit/modules/compiler/codegen.spec.js

@@ -1,7 +1,7 @@
 import { parse } from 'compiler/parser/index'
 import { optimize } from 'compiler/optimizer'
 import { generate } from 'compiler/codegen'
-import { isObject } from 'shared/util'
+import { isObject, extend } from 'shared/util'
 import { isReservedTag } from 'web/util/index'
 import { baseOptions } from 'web/compiler/options'
 
@@ -460,6 +460,19 @@ describe('codegen', () => {
     )
   })
 
+  it('generate component with comment', () => {
+    const options = extend({
+      comments: true
+    }, baseOptions)
+    const template = '<div><!--comment--></div>'
+    const generatedCode = `with(this){return _c('div',[_e('comment')])}`
+
+    const ast = parse(template, options)
+    optimize(ast, options)
+    const res = generate(ast, options)
+    expect(res.render).toBe(generatedCode)
+  })
+
   it('not specified ast type', () => {
     const res = generate(null, baseOptions)
     expect(res.render).toBe(`with(this){return _c("div")}`)

test/unit/modules/compiler/optimizer.spec.js

@@ -1,4 +1,5 @@
 import { parse } from 'compiler/parser/index'
+import { extend } from 'shared/util'
 import { optimize } from 'compiler/optimizer'
 import { baseOptions } from 'web/compiler/options'
 
@@ -11,6 +12,19 @@ describe('optimizer', () => {
     expect(ast.children[0].static).toBe(true) // span
   })
 
+  it('simple with comment', () => {
+    const options = extend({
+      comments: true
+    }, baseOptions)
+    const ast = parse('<h1 id="section1"><span>hello world</span><!--comment--></h1>', options)
+    optimize(ast, options)
+    expect(ast.static).toBe(true) // h1
+    expect(ast.staticRoot).toBe(true)
+    expect(ast.children.length).toBe(2)
+    expect(ast.children[0].static).toBe(true) // span
+    expect(ast.children[1].static).toBe(true) // comment
+  })
+
   it('skip simple nodes', () => {
     const ast = parse('<h1 id="section1">hello</h1>', baseOptions)
     optimize(ast, baseOptions)

test/unit/modules/compiler/parser.spec.js

@@ -548,4 +548,26 @@ describe('parser', () => {
     const ast = parse(`<script type="x/template">&gt;<foo>&lt;</script>`, options)
     expect(ast.children[0].text).toBe(`&gt;<foo>&lt;`)
   })
+
+  it('should ignore comments', () => {
+    const options = extend({}, baseOptions)
+    const ast = parse(`<div>123<!--comment here--></div>`, options)
+    expect(ast.tag).toBe('div')
+    expect(ast.children.length).toBe(1)
+    expect(ast.children[0].type).toBe(3)
+    expect(ast.children[0].text).toBe('123')
+  })
+
+  it('should kept comments', () => {
+    const options = extend({
+      comments: true
+    }, baseOptions)
+    const ast = parse(`<div>123<!--comment here--></div>`, options)
+    expect(ast.tag).toBe('div')
+    expect(ast.children.length).toBe(2)
+    expect(ast.children[0].type).toBe(3)
+    expect(ast.children[0].text).toBe('123')
+    expect(ast.children[1].type).toBe(4)
+    expect(ast.children[1].text).toBe('comment here')
+  })
 })

types/options.d.ts

@@ -54,6 +54,7 @@ export interface ComponentOptions<V extends Vue> {
   name?: string;
   extends?: ComponentOptions<Vue> | typeof Vue;
   delimiters?: [string, string];
+  comments?: boolean;
 }
 
 export interface FunctionalComponentOptions {