diff --git a/scripts/feature-flags.js b/scripts/feature-flags.js index 3ad11b32..7df14317 100644 --- a/scripts/feature-flags.js +++ b/scripts/feature-flags.js @@ -1,3 +1,4 @@ module.exports = { - NEW_SLOT_SYNTAX: true + NEW_SLOT_SYNTAX: true, + VBIND_PROP_SHORTHAND: false } diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index 05247cae..ec0e302c 100644 --- a/src/compiler/parser/index.js +++ b/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) { diff --git a/test/unit/features/directives/bind.spec.js b/test/unit/features/directives/bind.spec.js index f2c70ac5..3d29c984 100644 --- a/test/unit/features/directives/bind.spec.js +++ b/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', () => { - const vm = new Vue({ - template: '
', - data: { - foo: 'hello', - bar: 'qux' - } - }).$mount() - expect(vm.$el.children[0].textContent).toBe('hello') - expect(vm.$el.children[1].innerHTML).toBe('qux') - }) + if (process.env.VBIND_PROP_SHORTHAND) { + it('.prop modifier shorthand', () => { + const vm = new Vue({ + template: '
', + data: { + foo: 'hello', + bar: 'qux' + } + }).$mount() + expect(vm.$el.children[0].textContent).toBe('hello') + expect(vm.$el.children[1].innerHTML).toBe('qux') + }) + } it('.camel modifier', () => { const vm = new Vue({ @@ -529,20 +531,22 @@ describe('Directive v-bind', () => { }).then(done) }) - it('.prop shorthand', done => { - const vm = new Vue({ - template: `
`, - data: { - key: 'id', - value: 'hello' - } - }).$mount() - expect(vm.$el.id).toBe('hello') - vm.key = 'textContent' - waitForUpdate(() => { - expect(vm.$el.textContent).toBe('hello') - }).then(done) - }) + if (process.env.VBIND_PROP_SHORTHAND) { + it('.prop shorthand', done => { + const vm = new Vue({ + template: `
`, + data: { + key: 'id', + value: 'hello' + } + }).$mount() + expect(vm.$el.id).toBe('hello') + vm.key = 'textContent' + waitForUpdate(() => { + expect(vm.$el.textContent).toBe('hello') + }).then(done) + }) + } it('handle class and style', () => { const vm = new Vue({ diff --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js index 08f1745f..e81f30ca 100644 --- a/test/unit/modules/compiler/parser.spec.js +++ b/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', () => { - const ast = parse('
', baseOptions) - expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }]) - }) + if (process.env.VBIND_PROP_SHORTHAND) { + it('v-bind.prop shorthand syntax', () => { + const ast = parse('
', baseOptions) + expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }]) + }) - it('v-bind.prop shorthand syntax w/ modifiers', () => { - const ast = parse('
', baseOptions) - expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }]) - }) + it('v-bind.prop shorthand syntax w/ modifiers', () => { + const ast = parse('
', baseOptions) + expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }]) + }) - it('v-bind dynamic argument', () => { - const ast = parse('
', baseOptions) - expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }]) - }) + it('v-bind.prop shorthand dynamic argument', () => { + const ast = parse('
', 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.