Permalink
Browse files

feat: move v-bind.prop shorthand behind flag

  • Loading branch information...
yyx990803 committed Feb 2, 2019
1 parent 44a17ba commit 64f863bbb9c8147819ef4547dfdadba0239c6d59
@@ -1,3 +1,4 @@
module.exports = {
NEW_SLOT_SYNTAX: true
NEW_SLOT_SYNTAX: true,
VBIND_PROP_SHORTHAND: false
}
@@ -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) {
@@ -133,17 +133,19 @@ describe('Directive v-bind', () => {
expect(vm.$el.getAttribute('id')).toBe(null)
})

it('.prop modifier shorthand', () => {
const vm = new Vue({
template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',
data: {
foo: 'hello',
bar: '<span>qux</span>'
}
}).$mount()
expect(vm.$el.children[0].textContent).toBe('hello')
expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
})
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>',
data: {
foo: 'hello',
bar: '<span>qux</span>'
}
}).$mount()
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 => {
const vm = new Vue({
template: `<div .[key]="value"></div>`,
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: `<div .[key]="value"></div>`,
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({
@@ -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('<div .id="foo"></div>', 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('<div .id="foo"></div>', baseOptions)
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
})

it('v-bind.prop shorthand syntax w/ modifiers', () => {
const ast = parse('<div .id.mod="foo"></div>', baseOptions)
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
})
it('v-bind.prop shorthand syntax w/ modifiers', () => {
const ast = parse('<div .id.mod="foo"></div>', baseOptions)
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: false }])
})

it('v-bind dynamic argument', () => {
const ast = parse('<div .[id]="foo"></div>', baseOptions)
expect(ast.props).toEqual([{ name: 'id', value: 'foo', dynamic: true }])
})
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.

0 comments on commit 64f863b

Please sign in to comment.