checkCompatEnabled,
CompilerCompatOptions,
CompilerDeprecationTypes,
+ isCompatEnabled,
warnDeprecation
} from './compat/compatConfig'
}
} else if (/[a-z]/i.test(s[1])) {
node = parseElement(context, ancestors)
+
+ // 2.x <template> with no directive compat
+ if (
+ __COMPAT__ &&
+ isCompatEnabled(
+ CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+ context
+ ) &&
+ node &&
+ node.tag === 'template' &&
+ !node.props.some(
+ p =>
+ p.type === NodeTypes.DIRECTIVE &&
+ (p.name === 'if' || p.name === 'for' || p.name === 'slot')
+ )
+ ) {
+ __DEV__ &&
+ warnDeprecation(
+ CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+ context,
+ node.loc
+ )
+ node = node.children
+ }
} else if (s[1] === '?') {
emitError(
context,
inlineTemplateProp.loc
)
) {
- inlineTemplateProp.value!.content = getSelection(
- context,
- element.loc.end
- ).source
- console.log(inlineTemplateProp)
+ const loc = getSelection(context, element.loc.end)
+ inlineTemplateProp.value = {
+ type: NodeTypes.TEXT,
+ content: loc.source,
+ loc
+ }
}
}
}
// 2.x deprecation checks
- if (__COMPAT__ && __DEV__ && !__TEST__) {
+ if (
+ __COMPAT__ &&
+ __DEV__ &&
+ isCompatEnabled(
+ CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+ context
+ )
+ ) {
let hasIf = false
let hasFor = false
for (let i = 0; i < props.length; i++) {
TELEPORT,
KEEP_ALIVE,
SUSPENSE,
- UNREF,
- FRAGMENT
+ UNREF
} from '../runtimeHelpers'
import {
getInnerRange,
? resolveComponentType(node as ComponentNode, context)
: `"${tag}"`
- // 2.x <template> with no directives compat
- if (
- __COMPAT__ &&
- tag === 'template' &&
- checkCompatEnabled(
- CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
- context,
- node.loc
- )
- ) {
- vnodeTag = context.helper(FRAGMENT)
- }
-
const isDynamicComponent =
isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT
ExpressionNode,
SimpleExpressionNode,
isStaticExp,
- warnDeprecation,
- CompilerDeprecationTypes
+ CompilerDeprecationTypes,
+ TransformContext,
+ SourceLocation,
+ checkCompatEnabled
} from '@vue/compiler-core'
import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../runtimeHelpers'
import { makeMap, capitalize } from '@vue/shared'
true
)
-const resolveModifiers = (key: ExpressionNode, modifiers: string[]) => {
+const resolveModifiers = (
+ key: ExpressionNode,
+ modifiers: string[],
+ context: TransformContext,
+ loc: SourceLocation
+) => {
const keyModifiers = []
const nonKeyModifiers = []
const eventOptionModifiers = []
for (let i = 0; i < modifiers.length; i++) {
const modifier = modifiers[i]
- if (isEventOptionModifier(modifier)) {
+ if (
+ __COMPAT__ &&
+ modifier === 'native' &&
+ checkCompatEnabled(
+ CompilerDeprecationTypes.COMPILER_V_ON_NATIVE,
+ context,
+ loc
+ )
+ ) {
+ eventOptionModifiers.push(modifier)
+ } else if (isEventOptionModifier(modifier)) {
// eventOptionModifiers: modifiers for addEventListener() options,
// e.g. .passive & .capture
eventOptionModifiers.push(modifier)
const { modifiers } = dir
if (!modifiers.length) return baseResult
- if (__COMPAT__ && __DEV__ && modifiers.includes('native')) {
- warnDeprecation(
- CompilerDeprecationTypes.COMPILER_V_ON_NATIVE,
- context,
- dir.loc
- )
- }
-
let { key, value: handlerExp } = baseResult.props[0]
const {
keyModifiers,
nonKeyModifiers,
eventOptionModifiers
- } = resolveModifiers(key, modifiers)
+ } = resolveModifiers(key, modifiers, context, dir.loc)
// normalize click.right and click.middle since they don't actually fire
if (nonKeyModifiers.includes('right')) {
export function shouldSkipAttr(
key: string,
- value: any,
instance: ComponentInternalInstance
): boolean {
+ if (key === 'is') {
+ return true
+ }
if (
(key === 'class' || key === 'style') &&
isCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, instance)
$listeners: getCompatListeners
} as PublicPropertiesMap)
+ /* istanbul ignore if */
if (isCompatEnabled(DeprecationTypes.PRIVATE_APIS, null)) {
extend(map, {
$vnode: i => i.vnode,
isReservedProp,
EMPTY_ARR,
def,
- extend
+ extend,
+ isOn
} from '@vue/shared'
import { warn } from './warning'
import {
// the props.
const propsToUpdate = instance.vnode.dynamicProps!
for (let i = 0; i < propsToUpdate.length; i++) {
- const key = propsToUpdate[i]
+ let key = propsToUpdate[i]
// PROPS flag guarantees rawProps to be non-null
const value = rawProps![key]
if (options) {
)
}
} else {
- if (__COMPAT__ && shouldSkipAttr(key, attrs[key], instance)) {
- continue
+ if (__COMPAT__) {
+ if (isOn(key) && key.endsWith('Native')) {
+ key = key.slice(0, -6) // remove Native postfix
+ } else if (shouldSkipAttr(key, instance)) {
+ continue
+ }
}
if (value !== attrs[key]) {
attrs[key] = value
const [options, needCastKeys] = instance.propsOptions
let hasAttrsChanged = false
if (rawProps) {
- for (const key in rawProps) {
+ for (let key in rawProps) {
// key, ref are reserved and never passed down
if (isReservedProp(key)) {
continue
// Any non-declared (either as a prop or an emitted event) props are put
// into a separate `attrs` object for spreading. Make sure to preserve
// original key casing
- if (__COMPAT__ && shouldSkipAttr(key, attrs[key], instance)) {
- continue
+ if (__COMPAT__) {
+ if (isOn(key) && key.endsWith('Native')) {
+ key = key.slice(0, -6) // remove Native postfix
+ } else if (shouldSkipAttr(key, instance)) {
+ continue
+ }
}
if (value !== attrs[key]) {
attrs[key] = value
--- /dev/null
+import Vue from '@vue/compat'
+import { nextTick } from '@vue/runtime-core'
+import { CompilerDeprecationTypes } from '../../compiler-core/src'
+import { toggleDeprecationWarning } from '../../runtime-core/src/compat/compatConfig'
+import { triggerEvent } from './utils'
+
+beforeEach(() => {
+ toggleDeprecationWarning(false)
+ Vue.configureCompat({
+ MODE: 2
+ })
+})
+
+afterEach(() => {
+ toggleDeprecationWarning(false)
+ Vue.configureCompat({ MODE: 3 })
+})
+
+// COMPILER_V_FOR_REF is tested in ./refInfor.spec.ts
+// COMPILER_FILTERS is tested in ./filters.spec.ts
+
+test('COMPILER_IS_ON_ELEMENT', () => {
+ const MyButton = {
+ template: `<div><slot/></div>`
+ }
+
+ const vm = new Vue({
+ template: `<button is="my-button">text</button>`,
+ components: {
+ MyButton
+ }
+ }).$mount()
+
+ expect(vm.$el.outerHTML).toBe(`<div>text</div>`)
+ expect(CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT).toHaveBeenWarned()
+})
+
+test('COMPILER_V_BIND_SYNC', async () => {
+ const MyButton = {
+ props: ['foo'],
+ template: `<button @click="$emit('update:foo', 1)">{{ foo }}</button>`
+ }
+
+ const vm = new Vue({
+ data() {
+ return {
+ foo: 0
+ }
+ },
+ template: `<my-button :foo.sync="foo" />`,
+ components: {
+ MyButton
+ }
+ }).$mount()
+
+ expect(vm.$el.textContent).toBe(`0`)
+
+ triggerEvent(vm.$el, 'click')
+ await nextTick()
+ expect(vm.$el.textContent).toBe(`1`)
+
+ expect(CompilerDeprecationTypes.COMPILER_V_BIND_SYNC).toHaveBeenWarned()
+})
+
+test('COMPILER_V_BIND_PROP', () => {
+ const vm = new Vue({
+ template: `<div :id.prop="'foo'"/>`
+ }).$mount()
+ expect(vm.$el.id).toBe('foo')
+ expect(CompilerDeprecationTypes.COMPILER_V_BIND_PROP).toHaveBeenWarned()
+})
+
+test('COMPILER_V_BIND_OBJECT_ORDER', () => {
+ const vm = new Vue({
+ template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`
+ }).$mount()
+ expect(vm.$el.id).toBe('foo')
+ expect(vm.$el.className).toBe('baz')
+ expect(
+ CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER
+ ).toHaveBeenWarned()
+})
+
+test('COMPILER_V_ON_NATIVE', () => {
+ const spy = jest.fn()
+ const vm = new Vue({
+ template: `<child @click="spy" @click.native="spy" />`,
+ components: {
+ child: {
+ template: `<button />`
+ }
+ },
+ methods: {
+ spy
+ }
+ }).$mount()
+
+ triggerEvent(vm.$el, 'click')
+ expect(spy).toHaveBeenCalledTimes(1)
+ expect(CompilerDeprecationTypes.COMPILER_V_ON_NATIVE).toHaveBeenWarned()
+})
+
+test('COMPILER_V_IF_V_FOR_PRECEDENCE', () => {
+ new Vue({ template: `<div v-if="true" v-for="i in 1"/>` }).$mount()
+ expect(
+ CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE
+ ).toHaveBeenWarned()
+})
+
+test('COMPILER_NATIVE_TEMPLATE', () => {
+ const vm = new Vue({
+ template: `<div><template><div/></template></div>`
+ }).$mount()
+ expect(vm.$el.innerHTML).toBe(`<div></div>`)
+ expect(CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE).toHaveBeenWarned()
+})
+
+test('COMPILER_INLINE_TEMPLATE', () => {
+ const vm = new Vue({
+ template: `<foo inline-template><div>{{ n }}</div></foo>`,
+ components: {
+ foo: {
+ data() {
+ return { n: 123 }
+ }
+ }
+ }
+ }).$mount()
+
+ expect(vm.$el.outerHTML).toBe(`<div>123</div>`)
+ expect(CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE).toHaveBeenWarned()
+})
).toHaveBeenWarned()
})
-test('V_FOR_REF', async () => {
- const vm = new Vue({
- data() {
- return {
- ok: true,
- list: [1, 2, 3]
- }
- },
- template: `
- <template v-if="ok">
- <li v-for="i in list" ref="list">{{ i }}</li>
- </template>
- `
- }).$mount() as any
-
- const mapRefs = () => vm.$refs.list.map((el: HTMLElement) => el.textContent)
- expect(mapRefs()).toMatchObject(['1', '2', '3'])
-
- expect(deprecationData[DeprecationTypes.V_FOR_REF].message).toHaveBeenWarned()
-
- vm.list.push(4)
- await nextTick()
- expect(mapRefs()).toMatchObject(['1', '2', '3', '4'])
-
- vm.list.shift()
- await nextTick()
- expect(mapRefs()).toMatchObject(['2', '3', '4'])
-
- vm.ok = !vm.ok
- await nextTick()
- expect(mapRefs()).toMatchObject([])
-
- vm.ok = !vm.ok
- await nextTick()
- expect(mapRefs()).toMatchObject(['2', '3', '4'])
-})
-
test('V_ON_KEYCODE_MODIFIER', () => {
const spy = jest.fn()
const vm = new Vue({
--- /dev/null
+import Vue from '@vue/compat'
+import { nextTick } from '../../runtime-core/src/scheduler'
+import {
+ DeprecationTypes,
+ deprecationData,
+ toggleDeprecationWarning
+} from '../../runtime-core/src/compat/compatConfig'
+
+beforeEach(() => {
+ toggleDeprecationWarning(true)
+ Vue.configureCompat({
+ MODE: 2,
+ GLOBAL_MOUNT: 'suppress-warning'
+ })
+})
+
+afterEach(() => {
+ toggleDeprecationWarning(false)
+ Vue.configureCompat({ MODE: 3 })
+})
+
+test('V_FOR_REF', async () => {
+ const vm = new Vue({
+ data() {
+ return {
+ ok: true,
+ list: [1, 2, 3]
+ }
+ },
+ template: `
+ <template v-if="ok">
+ <li v-for="i in list" ref="list">{{ i }}</li>
+ </template>
+ `
+ }).$mount() as any
+
+ const mapRefs = () => vm.$refs.list.map((el: HTMLElement) => el.textContent)
+ expect(mapRefs()).toMatchObject(['1', '2', '3'])
+
+ expect(deprecationData[DeprecationTypes.V_FOR_REF].message).toHaveBeenWarned()
+
+ vm.list.push(4)
+ await nextTick()
+ expect(mapRefs()).toMatchObject(['1', '2', '3', '4'])
+
+ vm.list.shift()
+ await nextTick()
+ expect(mapRefs()).toMatchObject(['2', '3', '4'])
+
+ vm.ok = !vm.ok
+ await nextTick()
+ expect(mapRefs()).toMatchObject([])
+
+ vm.ok = !vm.ok
+ await nextTick()
+ expect(mapRefs()).toMatchObject(['2', '3', '4'])
+})
projects / thirdparty / vuejs / core.git / commitdiff
