}"
`;
-exports[`compiler: transform v-model simple exprssion (with prefixIdentifiers) 1`] = `
+exports[`compiler: transform v-model simple expression (with prefixIdentifiers) 1`] = `
"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
}"
`;
-exports[`compiler: transform v-model simple exprssion 1`] = `
+exports[`compiler: transform v-model simple expression 1`] = `
"const _Vue = Vue
return function render(_ctx, _cache) {
}
describe('compiler: transform v-model', () => {
- test('simple exprssion', () => {
+ test('simple expression', () => {
const root = parseWithVModel('<input v-model="model" />')
const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
expect(generate(root).code).toMatchSnapshot()
})
- test('simple exprssion (with prefixIdentifiers)', () => {
+ test('simple expression (with prefixIdentifiers)', () => {
const root = parseWithVModel('<input v-model="model" />', {
prefixIdentifiers: true
})
expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
})
- test('should generate modelModifers for component v-model', () => {
+ test('should generate modelModifiers for component v-model', () => {
const root = parseWithVModel('<Comp v-model.trim.bar-baz="foo" />', {
prefixIdentifiers: true
})
expect(vnodeCall.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
})
- test('should generate modelModifers for component v-model with arguments', () => {
+ test('should generate modelModifiers for component v-model with arguments', () => {
const root = parseWithVModel(
'<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
{
Pick<ParserOptions, OptionalOptions>
// The default decoder only provides escapes for characters reserved as part of
-// the tempalte syntax, and is only used if the custom renderer did not provide
+// the template syntax, and is only used if the custom renderer did not provide
// a platform-specific decoder.
const decodeRE = /&(gt|lt|amp|apos|quot);/g
const decodeMap: Record<string, string> = {
root.children,
context,
new Map(),
- // Root node is unfortuantely non-hoistable due to potential parent
+ // Root node is unfortunately non-hoistable due to potential parent
// fallthrough attributes.
isSingleElementRoot(root, root.children[0])
)
})
})
- test('serliazing constant bindings', () => {
+ test('serializing constant bindings', () => {
const { ast } = compileWithStringify(
`<div><div :style="{ color: 'red' }">${repeat(
`<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
processFor
)
-// This is called during the 2nd transform pass to construct the SSR-sepcific
+// This is called during the 2nd transform pass to construct the SSR-specific
// codegen nodes.
export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
const needFragmentWrapper =
processIf
)
-// This is called during the 2nd transform pass to construct the SSR-sepcific
+// This is called during the 2nd transform pass to construct the SSR-specific
// codegen nodes.
export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
const [rootBranch] = node.branches
expect(fnSpy).toHaveBeenCalledTimes(1)
})
- it('should trigger all effects when array lenght is set 0', () => {
+ it('should trigger all effects when array length is set 0', () => {
const observed: any = reactive([1])
let dummy, record
effect(() => {
expect(isRef(raw[1])).toBe(true)
})
- test('read + indentity', () => {
+ test('read + identity', () => {
const ref = original[1]
expect(ref).toBe(toRaw(original)[1])
expect(original.indexOf(ref)).toBe(1)
expect(props.onAfterEnter).toHaveBeenCalledTimes(1)
assertCalledWithEl(props.onAfterEnter, falseSerialized)
- // toggele again
+ // toggle again
toggle.value = true
await nextTick()
expect(serializeInner(root)).toBe(`${falseSerialized}<!---->`)
await nextTick()
// expected behavior: the previous true branch is preserved,
// and a placeholder is injected for the replacement.
- // the leaving node is repalced with the replace node (of the same branch)
+ // the leaving node is replaced with the replace node (of the same branch)
// when it finishes leaving
expect(serializeInner(root)).toBe(`${trueSerialized}<!---->`)
// enter hooks should never be called (for neither branch)
test('reload', async () => {
const root = nodeOps.createElement('div')
const childId = 'test3-child'
- const unmoutSpy = jest.fn()
+ const unmountSpy = jest.fn()
const mountSpy = jest.fn()
const Child: ComponentOptions = {
data() {
return { count: 0 }
},
- unmounted: unmoutSpy,
+ unmounted: unmountSpy,
render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
}
createRecord(childId, Child)
})
await nextTick()
expect(serializeInner(root)).toBe(`<div>1</div>`)
- expect(unmoutSpy).toHaveBeenCalledTimes(1)
+ expect(unmountSpy).toHaveBeenCalledTimes(1)
expect(mountSpy).toHaveBeenCalledTimes(1)
})
})
// fragment ends early and attempts to hydrate the extra <div>bar</div>
// as 2nd fragment child.
expect(`Hydration text content mismatch`).toHaveBeenWarned()
- // exccesive children removal
+ // excessive children removal
expect(`Hydration children mismatch`).toHaveBeenWarned()
})
})
const calls: string[] = []
const job1 = () => {
calls.push('job1')
- // job2 will be excuted after job1 at the same tick
+ // job2 will be executed after job1 at the same tick
queueJob(job2)
}
const job2 = () => {
const calls: string[] = []
const cb1 = () => {
calls.push('cb1')
- // cb2 will be excuted after cb1 at the same tick
+ // cb2 will be executed after cb1 at the same tick
queuePostFlushCb(cb2)
}
const cb2 = () => {
expect(cloneVNode(node2)).toEqual(node2)
expect(cloneVNode(node2)).toEqual(cloned2)
- // #1041 should use reoslved key/ref
+ // #1041 should use resolved key/ref
expect(cloneVNode(createVNode('div', { key: 1 })).key).toBe(1)
expect(cloneVNode(createVNode('div', { key: 1 }), { key: 2 }).key).toBe(2)
expect(cloneVNode(createVNode('div'), { key: 2 }).key).toBe(2)
})
test('handlers', () => {
- let clickHander1 = function() {}
- let clickHander2 = function() {}
- let focusHander2 = function() {}
+ let clickHandler1 = function() {}
+ let clickHandler2 = function() {}
+ let focusHandler2 = function() {}
- let props1: Data = { onClick: clickHander1 }
- let props2: Data = { onClick: clickHander2, onFocus: focusHander2 }
+ let props1: Data = { onClick: clickHandler1 }
+ let props2: Data = { onClick: clickHandler2, onFocus: focusHandler2 }
expect(mergeProps(props1, props2)).toMatchObject({
- onClick: [clickHander1, clickHander2],
- onFocus: focusHander2
+ onClick: [clickHandler1, clickHandler2],
+ onFocus: focusHandler2
})
})
// #1039
// <component :is="foo">{{ bar }}</component>
// - content is compiled as slot
- // - dynamic component reoslves to plain element, but as a block
+ // - dynamic component resolves to plain element, but as a block
// - block creation disables its own tracking, accidentally causing the
// slot content (called during the block node creation) to be missed
test('element block should track normalized slot children', () => {
// defineComponent is a utility that is primarily used for type inference
// when declaring components. Type inference is provided in the component
-// options (provided as the argument). The returned value has artifical types
+// options (provided as the argument). The returned value has artificial types
// for TSX / manual render function / IDE support.
// overload 1: direct setup function
EE
>
): {
- // array props technically doesn't place any contraints on props in TSX
+ // array props technically doesn't place any constraints on props in TSX
new (): ComponentPublicInstance<VNodeProps, RawBindings, D, C, M, E>
} & ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, E, EE>
| PropMethod<T>
type PropMethod<T> = T extends (...args: any) => any // if is function with args
- ? { new (): T; (): T; readonly proptotype: Function } // Create Function like contructor
+ ? { new (): T; (): T; readonly proptotype: Function } // Create Function like constructor
: never
type RequiredKeys<T, MakeDefaultRequired> = {
export interface TransitionElement {
// in persisted mode (e.g. v-show), the same element is toggled, so the
- // pending enter/leave callbacks may need to cancalled if the state is toggled
+ // pending enter/leave callbacks may need to be cancelled if the state is toggled
// before it finishes.
_enterCb?: PendingCallback
_leaveCb?: PendingCallback
handleSetupResult(instance, asyncSetupResult, false)
if (hydratedEl) {
// vnode may have been replaced if an update happened before the
- // async dep is reoslved.
+ // async dep is resolved.
vnode.el = hydratedEl
}
setupRenderEffect(
import { render, h } from '@vue/runtime-dom'
-describe('customimized built-in elements support', () => {
+describe('customized built-in elements support', () => {
let createElement: jest.SpyInstance
afterEach(() => {
createElement.mockRestore()
await nextTick()
expect(spy1).toHaveBeenCalledWith('foo')
- // udpate listener
+ // update listener
toggle.value = false
await nextTick()
}
} else {
// note we are only checking boolean attributes that don't have a
- // correspoding dom prop of the same name here.
+ // corresponding dom prop of the same name here.
const isBoolean = isSpecialBooleanAttr(key)
if (value == null || (isBoolean && value === false)) {
el.removeAttribute(key)
test('async components', async () => {
const Child = {
- // should wait for resovled render context from setup()
+ // should wait for resolved render context from setup()
async setup() {
return {
msg: 'hello'
).toBe(` foo="false"`) // non boolean should render `false` as is
})
- test('ingore non-renderable values', () => {
+ test('ignore non-renderable values', () => {
expect(
ssrRenderAttrs({
foo: {},
// Special flags are negative integers. They are never matched against using
// bitwise operators (bitwise matching should only happen in branches where
- // patchFlag > 0), and are mutually exclusive. When checking for a speical
+ // patchFlag > 0), and are mutually exclusive. When checking for a special
// flag, simply check patchFlag === FLAG.
// Indicates a hoisted static vnode. This is a hint for hydration to skip
// the renderer and compiler implementations.
// Related files:
// - runtime-core/src/renderer.ts
-// - compiler-core/src/transoforms/transformElement.ts
+// - compiler-core/src/transforms/transformElement.ts
import { render, h, ref, nextTick } from '../src'