feat: move v-bind.prop shorthand behind flag

scripts/feature-flags.js

@@ -1,3 +1,4 @@
 module.exports = {
-  NEW_SLOT_SYNTAX: true
+  NEW_SLOT_SYNTAX: true,
+  VBIND_PROP_SHORTHAND: false
 }

src/compiler/parser/index.js

@@ -22,7 +22,9 @@ import {
 } from '../helpers'
 
 export const onRE = /^@|^v-on:/
-export const dirRE = /^v-|^@|^:|^\./
+export const dirRE = process.env.VBIND_PROP_SHORTHAND
+  ? /^v-|^@|^:|^\./
+  : /^v-|^@|^:/
 export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
@@ -753,7 +755,7 @@ function processAttrs (el) {
       // modifiers
       modifiers = parseModifiers(name.replace(dirRE, ''))
       // support .foo shorthand syntax for the .prop modifier
-      if (propBindRE.test(name)) {
+      if (process.env.VBIND_PROP_SHORTHAND && propBindRE.test(name)) {
         (modifiers || (modifiers = {})).prop = true
         name = `.` + name.slice(1).replace(modifierRE, '')
       } else if (modifiers) {

test/unit/features/directives/bind.spec.js

@@ -133,17 +133,19 @@ describe('Directive v-bind', () => {
     expect(vm.$el.getAttribute('id')).toBe(null)
   })
 
-  it('.prop modifier shorthand', () => {
+  if (process.env.VBIND_PROP_SHORTHAND) {
-    const vm = new Vue({
+    it('.prop modifier shorthand', () => {
-      template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',
+      const vm = new Vue({
-      data: {
+        template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',
-        foo: 'hello',
+        data: {
-        bar: '<span>qux</span>'
+          foo: 'hello',
-      }
+          bar: '<span>qux</span>'
-    }).$mount()
+        }
-    expect(vm.$el.children[0].textContent).toBe('hello')
+      }).$mount()
-    expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
+      expect(vm.$el.children[0].textContent).toBe('hello')
-  })
+      expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
+    })
+  }
 
   it('.camel modifier', () => {
     const vm = new Vue({
@@ -529,20 +531,22 @@ describe('Directive v-bind', () => {
       }).then(done)
     })
 
-    it('.prop shorthand', done => {
+    if (process.env.VBIND_PROP_SHORTHAND) {
-      const vm = new Vue({
+      it('.prop shorthand', done => {
-        template: `<div .[key]="value"></div>`,
+        const vm = new Vue({
-        data: {
+          template: `<div .[key]="value"></div>`,
-          key: 'id',
+          data: {
-          value: 'hello'
+            key: 'id',
-        }
+            value: 'hello'
-      }).$mount()
+          }
-      expect(vm.$el.id).toBe('hello')
+        }).$mount()
-      vm.key = 'textContent'
+        expect(vm.$el.id).toBe('hello')
-      waitForUpdate(() => {
+        vm.key = 'textContent'
-        expect(vm.$el.textContent).toBe('hello')
+        waitForUpdate(() => {
-      }).then(done)
+          expect(vm.$el.textContent).toBe('hello')
-    })
+        }).then(done)
+      })
+    }
 
     it('handle class and style', () => {
       const vm = new Vue({

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

@@ -535,20 +535,22 @@ describe('parser', () => {
     expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()
   })
 
-  it('v-bind.prop shorthand syntax', () => {
+  if (process.env.VBIND_PROP_SHORTHAND) {
-    const ast = parse('<div .id="foo"></div>', baseOptions)
+    it('v-bind.prop shorthand syntax', () => {
-    expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
+      const ast = parse('<div .id="foo"></div>', baseOptions)
-  })
+      expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
+    })
 
-  it('v-bind.prop shorthand syntax w/ modifiers', () => {
+    it('v-bind.prop shorthand syntax w/ modifiers', () => {
-    const ast = parse('<div .id.mod="foo"></div>', baseOptions)
+      const ast = parse('<div .id.mod="foo"></div>', baseOptions)
-    expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
+      expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
-  })
+    })
 
-  it('v-bind dynamic argument', () => {
+    it('v-bind.prop shorthand dynamic argument', () => {
-    const ast = parse('<div .[id]="foo"></div>', baseOptions)
+      const ast = parse('<div .[id]="foo"></div>', baseOptions)
-    expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }])
+      expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }])
-  })
+    })
+  }
 
   // This only works for string templates.
   // In-DOM templates will be malformed before Vue can parse it.