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,6 +133,7 @@ describe('Directive v-bind', () => {
     expect(vm.$el.getAttribute('id')).toBe(null)
   })
 
+  if (process.env.VBIND_PROP_SHORTHAND) {
     it('.prop modifier shorthand', () => {
       const vm = new Vue({
         template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',
@@ -144,6 +145,7 @@ describe('Directive v-bind', () => {
       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,6 +531,7 @@ describe('Directive v-bind', () => {
       }).then(done)
     })
 
+    if (process.env.VBIND_PROP_SHORTHAND) {
       it('.prop shorthand', done => {
         const vm = new Vue({
           template: `<div .[key]="value"></div>`,
@@ -543,6 +546,7 @@ describe('Directive v-bind', () => {
           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,6 +535,7 @@ describe('parser', () => {
     expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()
   })
 
+  if (process.env.VBIND_PROP_SHORTHAND) {
     it('v-bind.prop shorthand syntax', () => {
       const ast = parse('<div .id="foo"></div>', baseOptions)
       expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
@@ -545,10 +546,11 @@ describe('parser', () => {
       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)
       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.