'!packages/template-explorer/**',
'!packages/size-check/**'
],
- watchPathIgnorePatterns: ['/node_modules/'],
+ watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
moduleNameMapper: {
'^@vue/(.*?)$': '<rootDir>/packages/$1/src',
}"
`;
-exports[`compiler: codegen SequenceExpression 1`] = `
-"
-return function render(_ctx, _cache) {
- with (this) {
- return (foo, bar(baz))
- }
-}"
-`;
-
exports[`compiler: codegen assets + temps 1`] = `
"
return function render(_ctx, _cache) {
"
return function render(_ctx, _cache) {
with (this) {
- return (foo, bar)
+ return (_openBlock(true), _createBlock(_Fragment, null, _renderList(), 1))
}
}"
`;
"
return function render(_ctx, _cache) {
with (this) {
- return (foo, bar)
+ return foo
+ ? bar
+ : baz
}
}"
`;
class: bar.baz
}, [
_createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
- (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 }, \\"yes\\")
- : _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+ ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+ : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
class: _ctx.bar.baz
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
- (_openBlock(), (_ctx.ok)
- ? _createBlock(\\"div\\", { key: 0 }, \\"yes\\")
- : _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+ (_ctx.ok)
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+ : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
class: _ctx.bar.baz
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
- (_openBlock(), (_ctx.ok)
- ? _createBlock(\\"div\\", { key: 0 }, \\"yes\\")
- : _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+ (_ctx.ok)
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+ : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
-"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createBlock as _createBlock, openBlock as _openBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
+"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\")
_pushScopeId(\\"test\\")
`;
exports[`scopeId compiler support should wrap default slot 1`] = `
-"import { createVNode as _createVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, openBlock as _openBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) {
`;
exports[`scopeId compiler support should wrap dynamic slots 1`] = `
-"import { createVNode as _createVNode, resolveComponent as _resolveComponent, renderList as _renderList, createSlots as _createSlots, createBlock as _createBlock, openBlock as _openBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createVNode as _createVNode, resolveComponent as _resolveComponent, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) {
`;
exports[`scopeId compiler support should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, openBlock as _openBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) {
`;
exports[`scopeId compiler support should wrap render function 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock, withScopeId as _withScopeId } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = _withScopeId(\\"test\\")
export const render = _withId(function render(_ctx, _cache) {
createArrayExpression,
createCompoundExpression,
createInterpolation,
- createSequenceExpression,
createCallExpression,
createConditionalExpression,
- IfCodegenNode,
ForCodegenNode,
createCacheExpression,
createTemplateLiteral,
createBlockStatement,
createIfStatement,
- createAssignmentExpression
+ createAssignmentExpression,
+ IfConditionalExpression,
+ createVNodeCall,
+ VNodeCall,
+ DirectiveArguments
} from '../src'
import {
CREATE_VNODE,
RESOLVE_DIRECTIVE,
helperNameMap,
RESOLVE_COMPONENT,
- CREATE_COMMENT
+ CREATE_COMMENT,
+ FRAGMENT,
+ RENDER_LIST
} from '../src/runtimeHelpers'
import { createElementWithCodegen } from './testUtils'
import { PatchFlags } from '@vue/shared'
type: NodeTypes.IF,
loc: locStub,
branches: [],
- codegenNode: createSequenceExpression([
+ codegenNode: createConditionalExpression(
createSimpleExpression('foo', false),
- createSimpleExpression('bar', false)
- ]) as IfCodegenNode
+ createSimpleExpression('bar', false),
+ createSimpleExpression('baz', false)
+ ) as IfConditionalExpression
}
})
)
- expect(code).toMatch(`return (foo, bar)`)
+ expect(code).toMatch(/return foo\s+\? bar\s+: baz/)
expect(code).toMatchSnapshot()
})
objectIndexAlias: undefined,
children: [],
parseResult: {} as any,
- codegenNode: createSequenceExpression([
- createSimpleExpression('foo', false),
- createSimpleExpression('bar', false)
- ]) as ForCodegenNode
+ codegenNode: {
+ type: NodeTypes.VNODE_CALL,
+ tag: FRAGMENT,
+ isBlock: true,
+ isForBlock: true,
+ props: undefined,
+ children: createCallExpression(RENDER_LIST),
+ patchFlag: '1',
+ dynamicProps: undefined,
+ directives: undefined,
+ loc: locStub
+ } as ForCodegenNode
}
})
)
- expect(code).toMatch(`return (foo, bar)`)
+ expect(code).toMatch(`openBlock(true)`)
expect(code).toMatchSnapshot()
})
test('Element (callExpression + objectExpression + TemplateChildNode[])', () => {
const { code } = generate(
createRoot({
- codegenNode: createElementWithCodegen([
+ codegenNode: createElementWithCodegen(
// string
`"div"`,
// ObjectExpression
),
// ChildNode[]
[
- createElementWithCodegen([
+ createElementWithCodegen(
`"p"`,
createObjectExpression(
[
],
locStub
)
- ])
+ )
],
// flag
PatchFlags.FULL_PROPS + ''
- ])
+ )
})
)
expect(code).toMatch(`
expect(code).toMatchSnapshot()
})
- test('SequenceExpression', () => {
- const { code } = generate(
- createRoot({
- codegenNode: createSequenceExpression([
- createSimpleExpression(`foo`, false),
- createCallExpression(`bar`, [`baz`])
- ])
- })
- )
- expect(code).toMatch(`return (foo, bar(baz))`)
- expect(code).toMatchSnapshot()
- })
-
test('ConditionalExpression', () => {
const { code } = generate(
createRoot({
}"
`)
})
+
+ describe('VNodeCall', () => {
+ function genCode(node: VNodeCall) {
+ return generate(
+ createRoot({
+ codegenNode: node
+ })
+ ).code.match(/with \(this\) \{\s+([^]+)\s+\}\s+\}$/)![1]
+ }
+
+ const mockProps = createObjectExpression([
+ createObjectProperty(`foo`, createSimpleExpression(`bar`, true))
+ ])
+ const mockChildren = createCompoundExpression(['children'])
+ const mockDirs = createArrayExpression([
+ createArrayExpression([`foo`, createSimpleExpression(`bar`, false)])
+ ]) as DirectiveArguments
+
+ test('tag only', () => {
+ expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
+ "return _createVNode(\\"div\\")
+ "
+ `)
+ expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
+ "return _createVNode(_Fragment)
+ "
+ `)
+ })
+
+ test('with props', () => {
+ expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
+ .toMatchInlineSnapshot(`
+ "return _createVNode(\\"div\\", { foo: \\"bar\\" })
+ "
+ `)
+ })
+
+ test('with children, no props', () => {
+ expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
+ .toMatchInlineSnapshot(`
+ "return _createVNode(\\"div\\", null, children)
+ "
+ `)
+ })
+
+ test('with children + props', () => {
+ expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
+ .toMatchInlineSnapshot(`
+ "return _createVNode(\\"div\\", { foo: \\"bar\\" }, children)
+ "
+ `)
+ })
+
+ test('with patchFlag and no children/props', () => {
+ expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
+ .toMatchInlineSnapshot(`
+ "return _createVNode(\\"div\\", null, null, 1)
+ "
+ `)
+ })
+
+ test('as block', () => {
+ expect(
+ genCode(
+ createVNodeCall(
+ null,
+ `"div"`,
+ mockProps,
+ mockChildren,
+ undefined,
+ undefined,
+ undefined,
+ true
+ )
+ )
+ ).toMatchInlineSnapshot(`
+ "return (_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
+ "
+ `)
+ })
+
+ test('as for block', () => {
+ expect(
+ genCode(
+ createVNodeCall(
+ null,
+ `"div"`,
+ mockProps,
+ mockChildren,
+ undefined,
+ undefined,
+ undefined,
+ true,
+ true
+ )
+ )
+ ).toMatchInlineSnapshot(`
+ "return (_openBlock(true), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
+ "
+ `)
+ })
+
+ test('with directives', () => {
+ expect(
+ genCode(
+ createVNodeCall(
+ null,
+ `"div"`,
+ mockProps,
+ mockChildren,
+ undefined,
+ undefined,
+ mockDirs
+ )
+ )
+ ).toMatchInlineSnapshot(`
+ "return _withDirectives(_createVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+ [foo, bar]
+ ])
+ "
+ `)
+ })
+
+ test('block + directives', () => {
+ expect(
+ genCode(
+ createVNodeCall(
+ null,
+ `"div"`,
+ mockProps,
+ mockChildren,
+ undefined,
+ undefined,
+ mockDirs,
+ true
+ )
+ )
+ ).toMatchInlineSnapshot(`
+ "return _withDirectives((_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
+ [foo, bar]
+ ])
+ "
+ `)
+ })
+ })
})
locStub,
Namespaces,
ElementTypes,
- PlainElementCodegenNode
+ VNodeCall
} from '../src'
-import { CREATE_VNODE } from '../src/runtimeHelpers'
import { isString, PatchFlags, PatchFlagNames, isArray } from '@vue/shared'
const leadingBracketRE = /^\[/
}
export function createElementWithCodegen(
- args: PlainElementCodegenNode['arguments']
+ tag: VNodeCall['tag'],
+ props?: VNodeCall['props'],
+ children?: VNodeCall['children'],
+ patchFlag?: VNodeCall['patchFlag'],
+ dynamicProps?: VNodeCall['dynamicProps']
): ElementNode {
return {
type: NodeTypes.ELEMENT,
props: [],
children: [],
codegenNode: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- loc: locStub,
- callee: CREATE_VNODE,
- arguments: args
+ type: NodeTypes.VNODE_CALL,
+ tag,
+ props,
+ children,
+ patchFlag,
+ dynamicProps,
+ directives: undefined,
+ isBlock: false,
+ isForBlock: false,
+ loc: locStub
}
}
}
ElementNode,
NodeTypes,
DirectiveNode,
- ExpressionNode
+ ExpressionNode,
+ VNodeCall
} from '../src/ast'
import { ErrorCodes, createCompilerError } from '../src/errors'
import {
TO_DISPLAY_STRING,
- OPEN_BLOCK,
- CREATE_BLOCK,
FRAGMENT,
RENDER_SLOT,
- WITH_DIRECTIVES,
CREATE_COMMENT
} from '../src/runtimeHelpers'
import { transformIf } from '../src/transforms/vIf'
return ast
}
- function createBlockMatcher(args: any[]) {
+ function createBlockMatcher(
+ tag: VNodeCall['tag'],
+ props?: VNodeCall['props'],
+ children?: VNodeCall['children'],
+ patchFlag?: VNodeCall['patchFlag']
+ ) {
return {
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK,
- arguments: args
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true,
+ tag,
+ props,
+ children,
+ patchFlag
}
}
test('single element', () => {
const ast = transformWithCodegen(`<div/>`)
- expect(ast.codegenNode).toMatchObject(createBlockMatcher([`"div"`]))
+ expect(ast.codegenNode).toMatchObject(createBlockMatcher(`"div"`))
})
test('root v-if', () => {
test('root element with custom directive', () => {
const ast = transformWithCodegen(`<div v-foo/>`)
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- // should wrap withDirectives() around createBlock()
- callee: WITH_DIRECTIVES,
- arguments: [
- { callee: CREATE_BLOCK },
- { type: NodeTypes.JS_ARRAY_EXPRESSION }
- ]
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
})
})
test('multiple children', () => {
const ast = transformWithCodegen(`<div/><div/>`)
expect(ast.codegenNode).toMatchObject(
- createBlockMatcher([
+ createBlockMatcher(
FRAGMENT,
- `null`,
+ undefined,
[
{ type: NodeTypes.ELEMENT, tag: `div` },
{ type: NodeTypes.ELEMENT, tag: `div` }
- ],
+ ] as any,
genFlagText(PatchFlags.STABLE_FRAGMENT)
- ])
+ )
)
})
})
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
return function render(_ctx, _cache) {
with (this) {
- const { createCommentVNode: _createCommentVNode, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createCommentVNode: _createCommentVNode, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1,
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, withDirectives: _withDirectives, resolveDirective: _resolveDirective, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
return function render(_ctx, _cache) {
with (this) {
- const { toDisplayString: _toDisplayString, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
return function render(_ctx, _cache) {
with (this) {
- const { resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { toDisplayString: _toDisplayString, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
return function render(_ctx, _cache) {
with (this) {
- const { toDisplayString: _toDisplayString, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
return function render(_ctx, _cache) {
with (this) {
- const { toDisplayString: _toDisplayString, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
`;
exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"div\\", null, [
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return function render(_ctx, _cache) {
with (this) {
- const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return function render(_ctx, _cache) {
with (this) {
- const { resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"div\\", { key: foo })
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"])
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"div\\", { ref: foo }, null, 32 /* NEED_PATCH */)
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\"))
}
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
- (_openBlock(), ok
- ? _createBlock(\\"div\\", _hoisted_1, [
+ ok
+ ? (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [
_hoisted_2
- ])
- : _createCommentVNode(\\"v-if\\", true))
+ ]))
+ : _createCommentVNode(\\"v-if\\", true)
]))
}
}"
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createTextVNode: _createTextVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createTextVNode: _createTextVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock(_Fragment, null, [
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createBlock: _createBlock, Fragment: _Fragment, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\"),
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, createBlock: _createBlock, Fragment: _Fragment, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\"),
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createTextVNode: _createTextVNode, createBlock: _createBlock, Fragment: _Fragment, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\"),
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\"))
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, { key: item }, [
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item }))
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, null, [
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, withDirectives: _withDirectives, resolveDirective: _resolveDirective } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
- return (_openBlock(), _withDirectives(_createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */), [
+ return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */)), [
[_directive_foo]
- ]))
+ ])
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
+ return ok
+ ? (_openBlock(true), _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"div\\"))
- }), 256 /* UNKEYED_FRAGMENT */)
- : _createCommentVNode(\\"v-if\\", true))
+ }), 256 /* UNKEYED_FRAGMENT */))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
+ const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
with (this) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 })
- : _createCommentVNode(\\"v-if\\", true))
+ return ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, openBlock: _openBlock, Fragment: _Fragment, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
+ const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(_Fragment, { key: 0 }, [
+ return ok
+ ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [
_createVNode(\\"div\\"),
\\"hello\\",
_createVNode(\\"p\\")
- ])
- : _createCommentVNode(\\"v-if\\", true))
+ ]))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { renderSlot: _renderSlot, openBlock: _openBlock, createCommentVNode: _createCommentVNode } = _Vue
+ const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
+ return ok
? _renderSlot($slots, \\"default\\", { key: 0 })
- : _createCommentVNode(\\"v-if\\", true))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
with (this) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 })
- : _createBlock(\\"p\\", { key: 1 }))
+ return ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+ : (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
}
}"
`;
with (this) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
- return (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 })
+ return ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
: orNot
- ? _createBlock(\\"p\\", { key: 1 })
- : _createBlock(_Fragment, { key: 2 }, [\\"fine\\"]))
+ ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+ : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"]))
}
}"
`;
with (this) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 })
+ return ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
: orNot
- ? _createBlock(\\"p\\", { key: 1 })
- : _createCommentVNode(\\"v-if\\", true))
+ ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { renderSlot: _renderSlot, openBlock: _openBlock, createCommentVNode: _createCommentVNode } = _Vue
+ const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
+ return ok
? _renderSlot($slots, \\"default\\", { key: 0 })
- : _createCommentVNode(\\"v-if\\", true))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
with (this) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: \\"some-key\\" })
- : _createCommentVNode(\\"v-if\\", true))
+ return ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: \\"some-key\\" }))
+ : _createCommentVNode(\\"v-if\\", true)
}
}"
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform v-model compound expression (with prefixIdentifiers) 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", {
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", {
modelValue: model[index],
`;
exports[`compiler: transform v-model simple exprssion (with prefixIdentifiers) 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", {
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", {
value: model,
`;
exports[`compiler: transform v-model with dynamic argument (with prefixIdentifiers) 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", {
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", {
[value]: model,
return function render(_ctx, _cache) {
with (this) {
- const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_cache[1] || (
return function render(_ctx, _cache) {
with (this) {
- const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_cache[1] || (
return function render(_ctx, _cache) {
with (this) {
- const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_cache[1] || (
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform component slots dynamically named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
`;
exports[`compiler: transform component slots implicit default slot 1`] = `
-"const { createVNode: _createVNode, resolveComponent: _resolveComponent, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { createVNode: _createVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
`;
exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, renderList: _renderList, createSlots: _createSlots, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, renderList: _renderList, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
`;
exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
`;
exports[`compiler: transform component slots named slots 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, resolveComponent: _resolveComponent, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
`;
exports[`compiler: transform component slots nested slots scoping 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Inner = _resolveComponent(\\"Inner\\")
`;
exports[`compiler: transform component slots on-component default slot 1`] = `
-"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = Vue
+"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
transform,
NodeTypes,
generate,
- CompilerOptions
+ CompilerOptions,
+ VNodeCall,
+ IfNode,
+ ElementNode,
+ ForNode
} from '../../src'
-import {
- OPEN_BLOCK,
- CREATE_BLOCK,
- CREATE_VNODE,
- WITH_DIRECTIVES,
- FRAGMENT,
- RENDER_LIST,
- CREATE_TEXT
-} from '../../src/runtimeHelpers'
+import { FRAGMENT, RENDER_LIST, CREATE_TEXT } from '../../src/runtimeHelpers'
import { transformElement } from '../../src/transforms/transformElement'
import { transformExpression } from '../../src/transforms/transformExpression'
import { transformIf } from '../../src/transforms/vIf'
import { transformBind } from '../../src/transforms/vBind'
import { transformOn } from '../../src/transforms/vOn'
import { createObjectMatcher, genFlagText } from '../testUtils'
-import { PatchFlags } from '@vue/shared'
import { transformText } from '../../src/transforms/transformText'
+import { PatchFlags } from '@vue/shared'
function transformWithHoist(template: string, options: CompilerOptions = {}) {
const ast = parse(template)
...options
})
expect(ast.codegenNode).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
})
- return {
- root: ast,
- args: (ast.codegenNode as any).expressions[1].arguments
- }
+ return ast
}
describe('compiler: hoistStatic transform', () => {
test('should NOT hoist root node', () => {
// if the whole tree is static, the root still needs to be a block
// so that it's patched in optimized mode to skip children
- const
{ root, args } = transformWithHoist(`<div/>`)
+ const
root = transformWithHoist(`<div/>`)
expect(root.hoists.length).toBe(0)
- expect(args).toEqual([`"div"`])
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('hoist simple element', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><span class="inline">hello</span></div>`
)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"span"`,
- createObjectMatcher({ class: 'inline' }),
- {
- type: NodeTypes.TEXT,
- content: `hello`
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`,
+ props: createObjectMatcher({ class: 'inline' }),
+ children: {
+ type: NodeTypes.TEXT,
+ content: `hello`
+ }
}
])
- expect(args).toMatchObject([
- `"div"`,
- `null`,
- [
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
codegenNode: {
}
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('hoist nested static tree', () => {
- const { root, args } = transformWithHoist(
- `<div><p><span/><span/></p></div>`
- )
+ const root = transformWithHoist(`<div><p><span/><span/></p></div>`)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"p"`,
- `null`,
- [
- { type: NodeTypes.ELEMENT, tag: `span` },
- { type: NodeTypes.ELEMENT, tag: `span` }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"p"`,
+ props: undefined,
+ children: [
+ { type: NodeTypes.ELEMENT, tag: `span` },
+ { type: NodeTypes.ELEMENT, tag: `span` }
]
}
])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
})
test('hoist nested static tree with comments', () => {
- const { root, args } = transformWithHoist(
- `<div><div><!--comment--></div></div>`
- )
+ const root = transformWithHoist(`<div><div><!--comment--></div></div>`)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- `null`,
- [{ type: NodeTypes.COMMENT, content: `comment` }]
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: undefined,
+ children: [{ type: NodeTypes.COMMENT, content: `comment` }]
}
])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
})
test('hoist siblings with common non-hoistable parent', () => {
- const
{ root, args } = transformWithHoist(`<div><span/><div/></div>`)
+ const
root = transformWithHoist(`<div><span/><div/></div>`)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
},
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [`"div"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`
}
])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
})
test('should NOT hoist components', () => {
- const
{ root, args } = transformWithHoist(`<div><Comp/></div>`)
+ const
root = transformWithHoist(`<div><Comp/></div>`)
expect(root.hoists.length).toBe(0)
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [`_component_Comp`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `_component_Comp`
}
}
])
})
test('should NOT hoist element with dynamic props', () => {
- const
{ root, args } = transformWithHoist(`<div><div :id="foo"/></div>`)
+ const
root = transformWithHoist(`<div><div :id="foo"/></div>`)
expect(root.hoists.length).toBe(0)
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- createObjectMatcher({
- id: `[foo]`
- }),
- `null`,
- genFlagText(PatchFlags.PROPS),
- `["id"]`
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: createObjectMatcher({
+ id: `[foo]`
+ }),
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.PROPS),
+ dynamicProps: `["id"]`
}
}
])
})
test('hoist element with static key', () => {
- const
{ root, args } = transformWithHoist(`<div><div key="foo"/></div>`)
+ const
root = transformWithHoist(`<div><div key="foo"/></div>`)
expect(root.hoists.length).toBe(1)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [`"div"`, createObjectMatcher({ key: 'foo' })]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: createObjectMatcher({ key: 'foo' })
}
])
- expect(args).toMatchObject([
- `"div"`,
- `null`,
- [
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
codegenNode: {
}
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('should NOT hoist element with dynamic key', () => {
- const
{ root, args } = transformWithHoist(`<div><div :key="foo"/></div>`)
+ const
root = transformWithHoist(`<div><div :key="foo"/></div>`)
expect(root.hoists.length).toBe(0)
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- createObjectMatcher({
- key: `[foo]`
- })
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: createObjectMatcher({
+ key: `[foo]`
+ })
}
}
])
})
test('should NOT hoist element with dynamic ref', () => {
- const
{ root, args } = transformWithHoist(`<div><div :ref="foo"/></div>`)
+ const
root = transformWithHoist(`<div><div :ref="foo"/></div>`)
expect(root.hoists.length).toBe(0)
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- createObjectMatcher({
- ref: `[foo]`
- }),
- `null`,
- genFlagText(PatchFlags.NEED_PATCH)
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: createObjectMatcher({
+ ref: `[foo]`
+ }),
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.NEED_PATCH)
}
}
])
})
test('hoist static props for elements with directives', () => {
- const { root, args } = transformWithHoist(
- `<div><div id="foo" v-foo/></div>`
- )
+ const root = transformWithHoist(`<div><div id="foo" v-foo/></div>`)
expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: WITH_DIRECTIVES,
- arguments: [
- {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_1`
- },
- `null`,
- genFlagText(PatchFlags.NEED_PATCH)
- ]
- },
- {
- type: NodeTypes.JS_ARRAY_EXPRESSION
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `_hoisted_1`
+ },
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.NEED_PATCH),
+ directives: {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
}
}
])
})
test('hoist static props for elements with dynamic text children', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><div id="foo">{{ hello }}</div></div>`
)
expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- { content: `_hoisted_1` },
- { type: NodeTypes.INTERPOLATION },
- genFlagText(PatchFlags.TEXT)
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: { content: `_hoisted_1` },
+ children: { type: NodeTypes.INTERPOLATION },
+ patchFlag: genFlagText(PatchFlags.TEXT)
}
}
])
})
test('hoist static props for elements with unhoistable children', () => {
- const { root, args } = transformWithHoist(
- `<div><div id="foo"><Comp/></div></div>`
- )
+ const root = transformWithHoist(`<div><div id="foo"><Comp/></div></div>`)
expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
- expect(args[2]).toMatchObject([
+ expect((root.codegenNode as VNodeCall).children).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- { content: `_hoisted_1` },
- [{ type: NodeTypes.ELEMENT, tag: `Comp` }]
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: { content: `_hoisted_1` },
+ children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }]
}
}
])
})
test('should hoist v-if props/children if static', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><div v-if="ok" id="foo"><span/></div></div>`
)
expect(root.hoists).toMatchObject([
id: 'foo'
}),
{
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
}
])
- expect(args[2][0].codegenNode).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- { callee: OPEN_BLOCK },
- {
- type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
- consequent: {
- // blocks should NOT be hoisted
- callee: CREATE_BLOCK,
- arguments: [
- `"div"`,
- { content: `_hoisted_1` },
- [
- {
- codegenNode: { content: `_hoisted_2` }
- }
- ]
- ]
+ expect(
+ ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode
+ ).toMatchObject({
+ type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+ consequent: {
+ // blocks should NOT be hoisted
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: { content: `_hoisted_1` },
+ children: [
+ {
+ codegenNode: { content: `_hoisted_2` }
}
- }
- ]
+ ]
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
test('should hoist v-for children if static', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><div v-for="i in list" id="foo"><span/></div></div>`
)
expect(root.hoists).toMatchObject([
id: 'foo'
}),
{
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
}
])
- const forBlockCodegen = args[2][0].codegenNode
+ const forBlockCodegen = ((root.children[0] as ElementNode)
+ .children[0] as ForNode).codegenNode
expect(forBlockCodegen).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- { callee: OPEN_BLOCK },
- {
- callee: CREATE_BLOCK,
- arguments: [
- FRAGMENT,
- `null`,
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_LIST
- },
- genFlagText(PatchFlags.UNKEYED_FRAGMENT)
- ]
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: FRAGMENT,
+ props: undefined,
+ children: {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: RENDER_LIST
+ },
+ patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT)
})
- const innerBlockCodegen =
- forBlockCodegen.expressions[1].arguments[2].arguments[1].returns
- expect(innerBlockCodegen).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- { callee: OPEN_BLOCK },
+ const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
+ expect(innerBlockCodegen.returns).toMatchObject({
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ props: { content: `_hoisted_1` },
+ children: [
{
- callee: CREATE_BLOCK,
- arguments: [
- `"div"`,
- { content: `_hoisted_1` },
- [
- {
- codegenNode: { content: `_hoisted_2` }
- }
- ]
- ]
+ codegenNode: { content: `_hoisted_2` }
}
]
})
})
test('hoist static text node between elements', () => {
- const
{ root } = transformWithHoist(`<div>static<div>static</div></div>`)
+ const
root = transformWithHoist(`<div>static<div>static</div></div>`)
expect(root.hoists).toMatchObject([
{
callee: CREATE_TEXT,
]
},
{
- callee: CREATE_VNODE
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`
}
])
})
describe('prefixIdentifiers', () => {
test('hoist nested static tree with static interpolation', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><span>foo {{ 1 }} {{ true }}</span></div>`,
{
prefixIdentifiers: true
)
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"span"`,
- `null`,
- {
- type: NodeTypes.COMPOUND_EXPRESSION
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`,
+ props: undefined,
+ children: {
+ type: NodeTypes.COMPOUND_EXPRESSION
+ }
}
])
- expect(args).toMatchObject([
- `"div"`,
- `null`,
- [
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
codegenNode: {
}
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('hoist nested static tree with static prop value', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><span :foo="0">{{ 1 }}</span></div>`,
{
prefixIdentifiers: true
expect(root.hoists).toMatchObject([
{
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"span"`,
- createObjectMatcher({ foo: `[0]` }),
- {
- type: NodeTypes.INTERPOLATION,
- content: {
- content: `1`,
- isStatic: false,
- isConstant: true
- }
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`,
+ props: createObjectMatcher({ foo: `[0]` }),
+ children: {
+ type: NodeTypes.INTERPOLATION,
+ content: {
+ content: `1`,
+ isStatic: false,
+ isConstant: true
}
- ]
+ }
}
])
- expect(args).toMatchObject([
- `"div"`,
- `null`,
- [
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
codegenNode: {
}
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('hoist class with static object value', () => {
- const { root, args } = transformWithHoist(
+ const root = transformWithHoist(
`<div><span :class="{ foo: true }">{{ bar }}</span></div>`,
{
prefixIdentifiers: true
]
}
])
- expect(args).toMatchObject([
- `"div"`,
- `null`,
- [
+ expect(root.codegenNode).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [
- `"span"`,
- {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_hoisted_1`
- },
- {
- type: NodeTypes.INTERPOLATION,
- content: {
- content: `_ctx.bar`,
- isConstant: false,
- isStatic: false
- }
- },
- `1 /* TEXT */`
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`,
+ props: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `_hoisted_1`
+ },
+ children: {
+ type: NodeTypes.INTERPOLATION,
+ content: {
+ content: `_ctx.bar`,
+ isConstant: false,
+ isStatic: false
+ }
+ },
+ patchFlag: `1 /* TEXT */`
}
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
test('should NOT hoist expressions that refer scope variables', () => {
- const { root } = transformWithHoist(
+ const root = transformWithHoist(
`<div><p v-for="o in list"><span>{{ o }}</span></p></div>`,
{
prefixIdentifiers: true
})
test('should NOT hoist expressions that refer scope variables (2)', () => {
- const { root } = transformWithHoist(
+ const root = transformWithHoist(
`<div><p v-for="o in list"><span>{{ o + 'foo' }}</span></p></div>`,
{
prefixIdentifiers: true
})
test('should NOT hoist expressions that refer scope variables (v-slot)', () => {
- const { root } = transformWithHoist(
+ const root = transformWithHoist(
`<Comp v-slot="{ foo }">{{ foo }}</Comp>`,
{
prefixIdentifiers: true
})
test('should NOT hoist elements with cached handlers', () => {
- const { root } = transformWithHoist(
+ const root = transformWithHoist(
`<div><div><div @click="foo"/></div></div>`,
{
prefixIdentifiers: true,
baseParse as parse,
transform,
ElementNode,
- CallExpression,
- noopDirectiveTransform
+ noopDirectiveTransform,
+ VNodeCall
} from '../../src'
import { transformElement } from '../../src/transforms/transformElement'
}
})
const node = ast.children[0] as ElementNode
- const codegenArgs = (node.codegenNode as CallExpression).arguments
-
// As v-noop adds no properties the codegen should be identical to
// rendering a div with no props or reactive data (so just the tag as the arg)
- expect(codegenArgs.length).toBe(1)
+ expect((node.codegenNode as VNodeCall).props).toBeUndefined()
})
})
CREATE_VNODE,
MERGE_PROPS,
RESOLVE_DIRECTIVE,
- WITH_DIRECTIVES,
TO_HANDLERS,
helperNameMap,
PORTAL,
RESOLVE_DYNAMIC_COMPONENT,
SUSPENSE,
KEEP_ALIVE,
- BASE_TRANSITION,
- OPEN_BLOCK,
- CREATE_BLOCK
+ BASE_TRANSITION
} from '../../src/runtimeHelpers'
import {
- CallExpression,
NodeTypes,
createObjectProperty,
DirectiveNode,
- RootNode
+ RootNode,
+ VNodeCall
} from '../../src/ast'
import { transformElement } from '../../src/transforms/transformElement'
import { transformStyle } from '../../../compiler-dom/src/transforms/transformStyle'
options: CompilerOptions = {}
): {
root: RootNode
- node: CallExpression
+ node: VNodeCall
} {
// wrap raw template in an extra div so that it doesn't get turned into a
// block as root node
...options
})
const codegenNode = (ast as any).children[0].children[0]
- .codegenNode as CallExpression
- expect(codegenNode.type).toBe(NodeTypes.JS_CALL_EXPRESSION)
+ .codegenNode as VNodeCall
+ expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
return {
root: ast,
node: codegenNode
test('static props', () => {
const { node } = parseWithElementTransform(`<div id="foo" class="bar" />`)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({
+ expect(node).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({
id: 'foo',
class: 'bar'
- })
- ])
+ }),
+ children: undefined
+ })
})
test('props + children', () => {
const { node } = parseWithElementTransform(`<div id="foo"><span/></div>`)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({
+
+ expect(node).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({
id: 'foo'
}),
- [
+ children: [
{
type: NodeTypes.ELEMENT,
tag: 'span',
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
}
}
]
- ])
+ })
})
test('0 placeholder for children with no props', () => {
const { node } = parseWithElementTransform(`<div><span/></div>`)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- `"div"`,
- `null`,
- [
+
+ expect(node).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: [
{
type: NodeTypes.ELEMENT,
tag: 'span',
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
}
}
]
- ])
+ })
})
test('v-bind="obj"', () => {
const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`)
// single v-bind doesn't need mergeProps
expect(root.helpers).not.toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
+
// should directly use `obj` in props position
- expect(node.arguments[1]).toMatchObject({
+ expect(node.props).toMatchObject({
type: NodeTypes.SIMPLE_EXPRESSION,
content: `obj`
})
`<div id="foo" v-bind="obj" />`
)
expect(root.helpers).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
`<div v-bind="obj" id="foo" />`
)
expect(root.helpers).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
`<div id="foo" v-bind="obj" class="bar" />`
)
expect(root.helpers).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
`<div id="foo" v-on="obj" class="bar" />`
)
expect(root.helpers).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
`<div id="foo" v-on="handlers" v-bind="obj" />`
)
expect(root.helpers).toContain(MERGE_PROPS)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
test('should handle plain <template> as normal element', () => {
const { node } = parseWithElementTransform(`<template id="foo" />`)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- `"template"`,
- createObjectMatcher({
+
+ expect(node).toMatchObject({
+ tag: `"template"`,
+ props: createObjectMatcher({
id: 'foo'
})
- ])
+ })
})
test('should handle <Portal> with normal children', () => {
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(PORTAL)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- PORTAL,
- createObjectMatcher({
+
+ expect(node).toMatchObject({
+ tag: PORTAL,
+ props: createObjectMatcher({
target: '#foo'
}),
- [
+ children: [
{
type: NodeTypes.ELEMENT,
tag: 'span',
codegenNode: {
- callee: CREATE_VNODE,
- arguments: [`"span"`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"span"`
}
}
]
- ])
+ })
}
assert(`portal`)
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(SUSPENSE)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- SUSPENSE,
- `null`,
- hasFallback
+
+ expect(node).toMatchObject({
+ tag: SUSPENSE,
+ props: undefined,
+ children: hasFallback
? createObjectMatcher({
default: {
type: NodeTypes.JS_FUNCTION_EXPRESSION
},
_compiled: `[true]`
})
- ])
+ })
}
assert(`suspense`, `foo`)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(KEEP_ALIVE)
const node = (root.children[0] as any).children[0].codegenNode
- expect(node.type).toBe(NodeTypes.JS_SEQUENCE_EXPRESSION)
- expect(node.expressions[1]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK, // should be forced into a block
- arguments: [
- KEEP_ALIVE,
- `null`,
- // keep-alive should not compile content to slots
- [{ type: NodeTypes.ELEMENT, tag: 'span' }],
- // should get a dynamic slots flag to force updates
- genFlagText(PatchFlags.DYNAMIC_SLOTS)
- ]
+ expect(node).toMatchObject({
+ type: NodeTypes.VNODE_CALL,
+ tag: KEEP_ALIVE,
+ isBlock: true, // should be forced into a block
+ props: undefined,
+ // keep-alive should not compile content to slots
+ children: [{ type: NodeTypes.ELEMENT, tag: 'span' }],
+ // should get a dynamic slots flag to force updates
+ patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
})
}
)
expect(root.components.length).toBe(0)
expect(root.helpers).toContain(BASE_TRANSITION)
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments).toMatchObject([
- BASE_TRANSITION,
- `null`,
- createObjectMatcher({
+
+ expect(node).toMatchObject({
+ tag: BASE_TRANSITION,
+ props: undefined,
+ children: createObjectMatcher({
default: {
type: NodeTypes.JS_FUNCTION_EXPRESSION
},
_compiled: `[true]`
})
- ])
+ })
}
assert(`base-transition`)
}
}
})
- expect(node.callee).toBe(CREATE_VNODE)
- expect(node.arguments[1]).toMatchObject({
+
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
})
// should factor in props returned by custom directive transforms
// in patchFlag analysis
- expect(node.arguments[3]).toMatch(PatchFlags.PROPS + '')
- expect(node.arguments[4]).toMatch(`"bar"`)
+ expect(node.patchFlag).toMatch(PatchFlags.PROPS + '')
+ expect(node.dynamicProps).toMatch(`"bar"`)
})
test('directiveTransform with needRuntime: true', () => {
)
expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
expect(root.directives).toContain(`foo`)
-
- expect(node.callee).toBe(WITH_DIRECTIVES)
- expect(node.arguments).toMatchObject([
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE,
- arguments: [
- `"div"`,
- `null`,
- `null`,
- genFlagText(PatchFlags.NEED_PATCH) // should generate appropriate flag
- ]
- },
- {
+ expect(node).toMatchObject({
+ tag: `"div"`,
+ props: undefined,
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.NEED_PATCH), // should generate appropriate flag
+ directives: {
type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [
{
}
]
}
- ])
+ })
})
test('directiveTransform with needRuntime: Symbol', () => {
expect(root.helpers).toContain(CREATE_VNODE)
expect(root.helpers).not.toContain(RESOLVE_DIRECTIVE)
expect(root.directives.length).toBe(0)
- expect((node as any).arguments[1].elements[0].elements[0]).toBe(
+ expect(node.directives!.elements[0].elements[0]).toBe(
`_${helperNameMap[CREATE_VNODE]}`
)
})
expect(root.directives).toContain(`bar`)
expect(root.directives).toContain(`baz`)
- expect(node.callee).toBe(WITH_DIRECTIVES)
- expect(node.arguments).toMatchObject([
- {
- type: NodeTypes.JS_CALL_EXPRESSION
- },
- {
+ expect(node).toMatchObject({
+ directives: {
type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [
{
}
]
}
- ])
+ })
})
test(`props merging: event handlers`, () => {
}
}
)
- expect(node.arguments[1]).toMatchObject({
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
}
}
)
- expect(node.arguments[1]).toMatchObject({
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
}
}
)
- expect(node.arguments[1]).toMatchObject({
+ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
describe('patchFlag analysis', () => {
test('TEXT', () => {
const { node } = parseWithBind(`<div>foo</div>`)
- expect(node.arguments.length).toBe(3)
+ expect(node.patchFlag).toBeUndefined()
const { node: node2 } = parseWithBind(`<div>{{ foo }}</div>`)
- expect(node2.arguments.length).toBe(4)
- expect(node2.arguments[3]).toBe(genFlagText(PatchFlags.TEXT))
+ expect(node2.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
// multiple nodes, merged with optimize text
const { node: node3 } = parseWithBind(`<div>foo {{ bar }} baz</div>`)
- expect(node3.arguments.length).toBe(4)
- expect(node3.arguments[3]).toBe(genFlagText(PatchFlags.TEXT))
+ expect(node3.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
})
test('CLASS', () => {
const { node } = parseWithBind(`<div :class="foo" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.CLASS))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.CLASS))
})
test('STYLE', () => {
const { node } = parseWithBind(`<div :style="foo" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.STYLE))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.STYLE))
})
test('PROPS', () => {
const { node } = parseWithBind(`<div id="foo" :foo="bar" :baz="qux" />`)
- expect(node.arguments.length).toBe(5)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.PROPS))
- expect(node.arguments[4]).toBe(`["foo", "baz"]`)
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+ expect(node.dynamicProps).toBe(`["foo", "baz"]`)
})
test('CLASS + STYLE + PROPS', () => {
const { node } = parseWithBind(
`<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`
)
- expect(node.arguments.length).toBe(5)
- expect(node.arguments[3]).toBe(
+ expect(node.patchFlag).toBe(
genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS])
)
- expect(node.arguments[4]).toBe(`["foo", "baz"]`)
+ expect(node.dynamicProps).toBe(`["foo", "baz"]`)
})
test('FULL_PROPS (v-bind)', () => {
const { node } = parseWithBind(`<div v-bind="foo" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
})
test('FULL_PROPS (dynamic key)', () => {
const { node } = parseWithBind(`<div :[foo]="bar" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
})
test('FULL_PROPS (w/ others)', () => {
const { node } = parseWithBind(
`<div id="foo" v-bind="bar" :class="cls" />`
)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
})
test('NEED_PATCH (static ref)', () => {
const { node } = parseWithBind(`<div ref="foo" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
})
test('NEED_PATCH (dynamic ref)', () => {
const { node } = parseWithBind(`<div :ref="foo" />`)
- expect(node.arguments.length).toBe(4)
- expect(node.arguments[3]).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
})
test('NEED_PATCH (custom directives)', () => {
const { node } = parseWithBind(`<div v-foo />`)
- const vnodeCall = node.arguments[0] as CallExpression
- expect(vnodeCall.arguments.length).toBe(4)
- expect(vnodeCall.arguments[3]).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
})
})
const { node, root } = parseWithBind(`<component is="foo" />`)
expect(root.helpers).not.toContain(RESOLVE_DYNAMIC_COMPONENT)
expect(node).toMatchObject({
- callee: CREATE_VNODE,
- arguments: ['_component_foo']
+ tag: '_component_foo'
})
})
test('dynamic binding', () => {
const { node, root } = parseWithBind(`<component :is="foo" />`)
expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
- expect(node.arguments).toMatchObject([
- {
+ expect(node).toMatchObject({
+ tag: {
callee: RESOLVE_DYNAMIC_COMPONENT,
arguments: [
{
'$'
]
}
- ])
+ })
})
})
nodeTransforms: [transformElement]
})
expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK,
- arguments: [`"svg"`]
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ tag: `"svg"`,
+ isBlock: true
})
})
})
ObjectExpression,
CompilerOptions,
ErrorCodes,
- CallExpression
+ VNodeCall
} from '../../src'
import { transformBind } from '../../src/transforms/vBind'
import { transformElement } from '../../src/transforms/transformElement'
describe('compiler: transform v-bind', () => {
test('basic', () => {
const node = parseWithVBind(`<div v-bind:id="id"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
+ const props = (node.codegenNode as VNodeCall).props as ObjectExpression
expect(props.properties[0]).toMatchObject({
key: {
content: `id`,
test('dynamic arg', () => {
const node = parseWithVBind(`<div v-bind:[id]="id"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
+ const props = (node.codegenNode as VNodeCall).props as ObjectExpression
expect(props.properties[0]).toMatchObject({
key: {
content: `id`,
test('.camel modifier', () => {
const node = parseWithVBind(`<div v-bind:foo-bar.camel="id"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
+ const props = (node.codegenNode as VNodeCall).props as ObjectExpression
expect(props.properties[0]).toMatchObject({
key: {
content: `fooBar`,
test('.camel modifier w/ dynamic arg', () => {
const node = parseWithVBind(`<div v-bind:[foo].camel="id"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
+ const props = (node.codegenNode as VNodeCall).props as ObjectExpression
expect(props.properties[0]).toMatchObject({
key: {
content: `_${helperNameMap[CAMELIZE]}(foo)`,
const node = parseWithVBind(`<div v-bind:[foo(bar)].camel="id"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
+ const props = (node.codegenNode as VNodeCall).props as ObjectExpression
expect(props.properties[0]).toMatchObject({
key: {
children: [
SimpleExpressionNode,
ElementNode,
InterpolationNode,
- CallExpression,
- SequenceExpression,
ForCodegenNode
} from '../../src/ast'
import { ErrorCodes } from '../../src/errors'
import { CompilerOptions, generate } from '../../src'
-import {
- OPEN_BLOCK,
- CREATE_BLOCK,
- FRAGMENT,
- RENDER_LIST,
- RENDER_SLOT,
- WITH_DIRECTIVES
-} from '../../src/runtimeHelpers'
+import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
import { PatchFlags } from '@vue/shared'
import { createObjectMatcher, genFlagText } from '../testUtils'
describe('codegen', () => {
function assertSharedCodegen(
- node: SequenceExpression,
+ node: ForCodegenNode,
keyed: boolean = false,
customReturn: boolean = false
) {
expect(node).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK,
- arguments: [
- FRAGMENT,
- `null`,
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_LIST,
- arguments: [
- {}, // to be asserted by each test
- {
- type: NodeTypes.JS_FUNCTION_EXPRESSION,
- returns: customReturn
- ? {}
- : {
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK
- }
- ]
- }
+ type: NodeTypes.VNODE_CALL,
+ tag: FRAGMENT,
+ isForBlock: true,
+ patchFlag: keyed
+ ? genFlagText(PatchFlags.KEYED_FRAGMENT)
+ : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ children: {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: RENDER_LIST,
+ arguments: [
+ {}, // to be asserted by each test
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ returns: customReturn
+ ? {}
+ : {
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
}
- ]
- },
- keyed
- ? genFlagText(PatchFlags.KEYED_FRAGMENT)
- : genFlagText(PatchFlags.UNKEYED_FRAGMENT)
- ]
- }
- ]
+ }
+ ]
+ }
})
- const renderListArgs = ((node.expressions[1] as CallExpression)
- .arguments[2] as CallExpression).arguments
+ const renderListArgs = node.children.arguments
return {
source: renderListArgs[0] as SimpleExpressionNode,
params: (renderListArgs[1] as any).params,
returns: (renderListArgs[1] as any).returns,
- blockArgs: customReturn
- ? null
- : (renderListArgs[1] as any).returns.expressions[1].arguments
+ innerVNodeCall: customReturn ? null : (renderListArgs[1] as any).returns
}
}
expect(assertSharedCodegen(codegenNode)).toMatchObject({
source: { content: `items` },
params: [{ content: `item` }],
- blockArgs: [`"span"`]
+ innerVNodeCall: {
+ tag: `"span"`
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
expect(assertSharedCodegen(codegenNode)).toMatchObject({
source: { content: `items` },
params: [{ content: `item` }],
- blockArgs: [
- FRAGMENT,
- `null`,
- [
+ innerVNodeCall: {
+ tag: FRAGMENT,
+ props: undefined,
+ isBlock: true,
+ children: [
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` }
],
- genFlagText(PatchFlags.STABLE_FRAGMENT)
- ]
+ patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
source: { content: `items` },
params: [{ content: `item` }],
- blockArgs: [
- `"span"`,
- createObjectMatcher({
+ innerVNodeCall: {
+ tag: `"span"`,
+ props: createObjectMatcher({
key: `[item]`
})
- ]
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
source: { content: `items` },
params: [{ content: `item` }],
- blockArgs: [
- FRAGMENT,
- createObjectMatcher({
+ innerVNodeCall: {
+ tag: FRAGMENT,
+ props: createObjectMatcher({
key: `[item]`
}),
- [
+ children: [
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` }
],
- genFlagText(PatchFlags.STABLE_FRAGMENT)
- ]
+ patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
node: { codegenNode }
} = parseWithForTransform(`<div v-if="ok" v-for="i in list"/>`)
expect(codegenNode).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
+ type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+ test: { content: `ok` },
+ consequent: {
+ type: NodeTypes.VNODE_CALL,
+ props: createObjectMatcher({
+ key: `[0]`
+ }),
+ isBlock: true,
+ isForBlock: true,
+ patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ children: {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK,
- arguments: []
- },
- {
- type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
- test: { content: `ok` },
- consequent: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK,
- // should optimize v-if + v-for into a single Fragment block
- arguments: [
- FRAGMENT,
- createObjectMatcher({ key: `[0]` }),
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: RENDER_LIST,
- arguments: [
- { content: `list` },
- {
- type: NodeTypes.JS_FUNCTION_EXPRESSION,
- params: [{ content: `i` }],
- returns: {
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK
- },
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK,
- arguments: [`"div"`]
- }
- ]
- }
- }
- ]
- },
- genFlagText(PatchFlags.UNKEYED_FRAGMENT)
- ]
- }
+ callee: RENDER_LIST,
+ arguments: [
+ { content: `list` },
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ params: [{ content: `i` }],
+ returns: {
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`,
+ isBlock: true
+ }
+ }
+ ]
}
- ]
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
} = parseWithForTransform('<div v-for="i in list" v-foo/>')
const { returns } = assertSharedCodegen(codegenNode, false, true)
expect(returns).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- { callee: OPEN_BLOCK },
- // should wrap withDirectives() around createBlock()
- {
- callee: WITH_DIRECTIVES,
- arguments: [
- { callee: CREATE_BLOCK },
- { type: NodeTypes.JS_ARRAY_EXPRESSION }
- ]
- }
- ]
+ type: NodeTypes.VNODE_CALL,
+ directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
})
expect(generate(root).code).toMatchSnapshot()
})
TextNode,
CommentNode,
SimpleExpressionNode,
- SequenceExpression,
ConditionalExpression,
- CallExpression,
- IfCodegenNode
+ IfConditionalExpression,
+ VNodeCall
} from '../../src/ast'
import { ErrorCodes } from '../../src/errors'
import { CompilerOptions, generate } from '../../src'
import {
- OPEN_BLOCK,
- CREATE_BLOCK,
FRAGMENT,
MERGE_PROPS,
- WITH_DIRECTIVES,
RENDER_SLOT,
CREATE_COMMENT
} from '../../src/runtimeHelpers'
}
return {
root: ast,
- node: ast.children[returnIndex] as IfNode & { codegenNode: IfCodegenNode }
+ node: ast.children[returnIndex] as IfNode & {
+ codegenNode: IfConditionalExpression
+ }
}
}
describe('codegen', () => {
function assertSharedCodegen(
- node: SequenceExpression,
+ node: IfConditionalExpression,
depth: number = 0,
hasElse: boolean = false
) {
expect(node).toMatchObject({
- type: NodeTypes.JS_SEQUENCE_EXPRESSION,
- expressions: [
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: OPEN_BLOCK,
- arguments: []
- },
- {
- type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
- test: {
- content: `ok`
- },
- consequent: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK
- },
- alternate:
- depth < 1
- ? {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: hasElse ? CREATE_BLOCK : CREATE_COMMENT
- }
- : {
- type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
- test: {
- content: `orNot`
- },
- consequent: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_BLOCK
- },
- alternate: {
+ type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+ test: {
+ content: `ok`
+ },
+ consequent: {
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
+ },
+ alternate:
+ depth < 1
+ ? hasElse
+ ? {
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
+ }
+ : {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_COMMENT
+ }
+ : {
+ type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+ test: {
+ content: `orNot`
+ },
+ consequent: {
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
+ },
+ alternate: hasElse
+ ? {
+ type: NodeTypes.VNODE_CALL,
+ isBlock: true
+ }
+ : {
type: NodeTypes.JS_CALL_EXPRESSION,
- callee: hasElse ? CREATE_BLOCK : CREATE_COMMENT
+ callee: CREATE_COMMENT
}
- }
- }
- ]
+ }
})
}
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok"/>`)
assertSharedCodegen(codegenNode)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({ key: `[0]` })
- ])
- const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
- .alternate as CallExpression
- expect(branch2).toMatchObject({
+ expect(codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ expect(codegenNode.alternate).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: CREATE_COMMENT
})
node: { codegenNode }
} = parseWithIfTransform(`<template v-if="ok"><div/>hello<p/></template>`)
assertSharedCodegen(codegenNode)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- FRAGMENT,
- createObjectMatcher({ key: `[0]` }),
- [
+ expect(codegenNode.consequent).toMatchObject({
+ tag: FRAGMENT,
+ props: createObjectMatcher({ key: `[0]` }),
+ children: [
{ type: NodeTypes.ELEMENT, tag: 'div' },
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: 'p' }
]
- ])
- const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
- .alternate as CallExpression
- expect(branch2).toMatchObject({
+ })
+ expect(codegenNode.alternate).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: CREATE_COMMENT
})
root,
node: { codegenNode }
} = parseWithIfTransform(`<template v-if="ok"><slot/></template>`)
- // assertSharedCodegen(codegenNode)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1).toMatchObject({
+ expect(codegenNode.consequent).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_SLOT,
arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
root,
node: { codegenNode }
} = parseWithIfTransform(`<slot v-if="ok"></slot>`)
- // assertSharedCodegen(codegenNode)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1).toMatchObject({
+ expect(codegenNode.consequent).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_SLOT,
arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)
assertSharedCodegen(codegenNode, 0, true)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({ key: `[0]` })
- ])
- const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
- .alternate as CallExpression
- expect(branch2.arguments).toMatchObject([
- `"p"`,
- createObjectMatcher({ key: `[1]` })
- ])
+ expect(codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ expect(codegenNode.alternate).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[1]` })
+ })
expect(generate(root).code).toMatchSnapshot()
})
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok"/><p v-else-if="orNot" />`)
assertSharedCodegen(codegenNode, 1)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({ key: `[0]` })
- ])
- const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
- .alternate as ConditionalExpression
- expect((branch2.consequent as CallExpression).arguments).toMatchObject([
- `"p"`,
- createObjectMatcher({ key: `[1]` })
- ])
+ expect(codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ const branch2 = codegenNode.alternate as ConditionalExpression
+ expect(branch2.consequent).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[1]` })
+ })
expect(generate(root).code).toMatchSnapshot()
})
`<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
)
assertSharedCodegen(codegenNode, 1, true)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({ key: `[0]` })
- ])
- const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
- .alternate as ConditionalExpression
- expect((branch2.consequent as CallExpression).arguments).toMatchObject([
- `"p"`,
- createObjectMatcher({ key: `[1]` })
- ])
- expect((branch2.alternate as CallExpression).arguments).toMatchObject([
- FRAGMENT,
- createObjectMatcher({ key: `[2]` }),
- [
+ expect(codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ const branch2 = codegenNode.alternate as ConditionalExpression
+ expect(branch2.consequent).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[1]` })
+ })
+ expect(branch2.alternate).toMatchObject({
+ tag: FRAGMENT,
+ props: createObjectMatcher({ key: `[2]` }),
+ children: [
{
type: NodeTypes.TEXT,
content: `fine`
}
]
- ])
+ })
expect(generate(root).code).toMatchSnapshot()
})
const {
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok" v-bind="obj"/>`)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments[1]).toMatchObject({
+ const branch1 = codegenNode.consequent as VNodeCall
+ expect(branch1.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
const {
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok" id="foo" v-bind="obj"/>`)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments[1]).toMatchObject({
+ const branch1 = codegenNode.consequent as VNodeCall
+ expect(branch1.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
const {
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok" v-bind="obj" id="foo"/>`)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments[1]).toMatchObject({
+ const branch1 = codegenNode.consequent as VNodeCall
+ expect(branch1.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [
const {
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok" v-foo />`)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.callee).toBe(WITH_DIRECTIVES)
- const realBranch = branch1.arguments[0] as CallExpression
- expect(realBranch.arguments[1]).toMatchObject(
- createObjectMatcher({ key: `[0]` })
- )
+ const branch1 = codegenNode.consequent as VNodeCall
+ expect(branch1.directives).not.toBeUndefined()
+ expect(branch1.props).toMatchObject(createObjectMatcher({ key: `[0]` }))
})
test('v-if with key', () => {
root,
node: { codegenNode }
} = parseWithIfTransform(`<div v-if="ok" key="some-key"/>`)
- const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
- .consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `"div"`,
- createObjectMatcher({ key: 'some-key' })
- ])
+ expect(codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: 'some-key' })
+ })
expect(generate(root).code).toMatchSnapshot()
})
ElementNode,
ObjectExpression,
CompilerOptions,
- CallExpression,
ForNode,
PlainElementNode,
- PlainElementCodegenNode,
ComponentNode,
- NodeTypes
+ NodeTypes,
+ VNodeCall
} from '../../src'
import { ErrorCodes } from '../../src/errors'
import { transformModel } from '../../src/transforms/vModel'
test('simple exprssion', () => {
const root = parseWithVModel('<input v-model="model" />')
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
prefixIdentifiers: true
})
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
test('compound expression', () => {
const root = parseWithVModel('<input v-model="model[index]" />')
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
prefixIdentifiers: true
})
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
test('with argument', () => {
const root = parseWithVModel('<input v-model:value="model" />')
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
-
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
content: 'value',
test('with dynamic argument', () => {
const root = parseWithVModel('<input v-model:[value]="model" />')
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
prefixIdentifiers: true
})
const node = root.children[0] as ElementNode
- const props = ((node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+ .properties
expect(props[0]).toMatchObject({
key: {
})
expect(root.cached).toBe(1)
const codegen = (root.children[0] as PlainElementNode)
- .codegenNode as PlainElementCodegenNode
+ .codegenNode as VNodeCall
// should not list cached prop in dynamicProps
- expect(codegen.arguments[4]).toBe(`["modelValue"]`)
- expect(
- (codegen.arguments[1] as ObjectExpression).properties[1].value.type
- ).toBe(NodeTypes.JS_CACHE_EXPRESSION)
+ expect(codegen.dynamicProps).toBe(`["modelValue"]`)
+ expect((codegen.props as ObjectExpression).properties[1].value.type).toBe(
+ NodeTypes.JS_CACHE_EXPRESSION
+ )
})
test('should not cache update handler if it refers v-for scope variables', () => {
)
expect(root.cached).toBe(0)
const codegen = ((root.children[0] as ForNode)
- .children[0] as PlainElementNode).codegenNode as PlainElementCodegenNode
- expect(codegen.arguments[4]).toBe(`["modelValue", "onUpdate:modelValue"]`)
+ .children[0] as PlainElementNode).codegenNode as VNodeCall
+ expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
expect(
- (codegen.arguments[1] as ObjectExpression).properties[1].value.type
+ (codegen.props as ObjectExpression).properties[1].value.type
).not.toBe(NodeTypes.JS_CACHE_EXPRESSION)
})
}
)
const codegen = ((root.children[0] as ComponentNode)
- .children[0] as PlainElementNode).codegenNode as PlainElementCodegenNode
- expect(codegen.arguments[4]).toBe(`["modelValue", "onUpdate:modelValue"]`)
+ .children[0] as PlainElementNode).codegenNode as VNodeCall
+ expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
})
test('should generate modelModifers for component v-model', () => {
const root = parseWithVModel('<Comp v-model.trim.bar-baz="foo" />', {
prefixIdentifiers: true
})
- const args = ((root.children[0] as ComponentNode)
- .codegenNode as CallExpression).arguments
+ const vnodeCall = (root.children[0] as ComponentNode)
+ .codegenNode as VNodeCall
// props
- expect(args[1]).toMatchObject({
+ expect(vnodeCall.props).toMatchObject({
properties: [
{ key: { content: `modelValue` } },
{ key: { content: `onUpdate:modelValue` } },
})
// should NOT include modelModifiers in dynamicPropNames because it's never
// gonna change
- expect(args[4]).toBe(`["modelValue", "onUpdate:modelValue"]`)
+ expect(vnodeCall.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
})
test('should generate modelModifers for component v-model with arguments', () => {
prefixIdentifiers: true
}
)
- const args = ((root.children[0] as ComponentNode)
- .codegenNode as CallExpression).arguments
+ const vnodeCall = (root.children[0] as ComponentNode)
+ .codegenNode as VNodeCall
// props
- expect(args[1]).toMatchObject({
+ expect(vnodeCall.props).toMatchObject({
properties: [
{ key: { content: `foo` } },
{ key: { content: `onUpdate:foo` } },
})
// should NOT include modelModifiers in dynamicPropNames because it's never
// gonna change
- expect(args[4]).toBe(`["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`)
+ expect(vnodeCall.dynamicProps).toBe(
+ `["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`
+ )
})
describe('errors', () => {
CompilerOptions,
ErrorCodes,
NodeTypes,
- CallExpression,
- PlainElementCodegenNode
+ VNodeCall
} from '../../src'
import { transformOn } from '../../src/transforms/vOn'
import { transformElement } from '../../src/transforms/transformElement'
describe('compiler: transform v-on', () => {
test('basic', () => {
const { node } = parseWithVOn(`<div v-on:click="onClick"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: {
- content: `onClick`,
- isStatic: true,
- loc: {
- start: {
- line: 1,
- column: 11
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: {
+ content: `onClick`,
+ isStatic: true,
+ loc: {
+ start: {
+ line: 1,
+ column: 11
+ },
+ end: {
+ line: 1,
+ column: 16
+ }
+ }
},
- end: {
- line: 1,
- column: 16
+ value: {
+ content: `onClick`,
+ isStatic: false,
+ loc: {
+ start: {
+ line: 1,
+ column: 18
+ },
+ end: {
+ line: 1,
+ column: 25
+ }
+ }
}
}
- },
- value: {
- content: `onClick`,
- isStatic: false,
- loc: {
- start: {
- line: 1,
- column: 18
- },
- end: {
- line: 1,
- column: 25
- }
- }
- }
+ ]
})
})
test('dynamic arg', () => {
const { node } = parseWithVOn(`<div v-on:[event]="handler"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`"on" + (`, { content: `event` }, `)`]
- },
- value: {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `handler`,
- isStatic: false
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [`"on" + (`, { content: `event` }, `)`]
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `handler`,
+ isStatic: false
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div v-on:[event]="handler"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`"on" + (`, { content: `_ctx.event` }, `)`]
- },
- value: {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_ctx.handler`,
- isStatic: false
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [`"on" + (`, { content: `_ctx.event` }, `)`]
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `_ctx.handler`,
+ isStatic: false
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div v-on:[event(foo)]="handler"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [
- `"on" + (`,
- { content: `_ctx.event` },
- `(`,
- { content: `_ctx.foo` },
- `)`,
- `)`
- ]
- },
- value: {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `_ctx.handler`,
- isStatic: false
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [
+ `"on" + (`,
+ { content: `_ctx.event` },
+ `(`,
+ { content: `_ctx.foo` },
+ `)`,
+ `)`
+ ]
+ },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `_ctx.handler`,
+ isStatic: false
+ }
+ }
+ ]
})
})
test('should wrap as function if expression is inline statement', () => {
const { node } = parseWithVOn(`<div @click="i++"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`$event => (`, { content: `i++` }, `)`]
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [`$event => (`, { content: `i++` }, `)`]
+ }
+ }
+ ]
})
})
test('should handle multiple inline statement', () => {
const { node } = parseWithVOn(`<div @click="foo();bar()"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- // should wrap with `{` for multiple statements
- // in this case the return value is discarded and the behavior is
- // consistent with 2.x
- children: [`$event => {`, { content: `foo();bar()` }, `}`]
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ // should wrap with `{` for multiple statements
+ // in this case the return value is discarded and the behavior is
+ // consistent with 2.x
+ children: [`$event => {`, { content: `foo();bar()` }, `}`]
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div @click="foo($event)"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [
- `$event => (`,
- {
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [
- { content: `_ctx.foo` },
- `(`,
- // should NOT prefix $event
- { content: `$event` },
+ `$event => (`,
+ {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [
+ { content: `_ctx.foo` },
+ `(`,
+ // should NOT prefix $event
+ { content: `$event` },
+ `)`
+ ]
+ },
`)`
]
- },
- `)`
- ]
- }
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div @click="foo($event);bar()"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [
- `$event => {`,
- {
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
children: [
- { content: `_ctx.foo` },
- `(`,
- // should NOT prefix $event
- { content: `$event` },
- `);`,
- { content: `_ctx.bar` },
- `()`
+ `$event => {`,
+ {
+ children: [
+ { content: `_ctx.foo` },
+ `(`,
+ // should NOT prefix $event
+ { content: `$event` },
+ `);`,
+ { content: `_ctx.bar` },
+ `()`
+ ]
+ },
+ `}`
]
- },
- `}`
- ]
- }
+ }
+ }
+ ]
})
})
test('should NOT wrap as function if expression is already function expression', () => {
const { node } = parseWithVOn(`<div @click="$event => foo($event)"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `$event => foo($event)`
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `$event => foo($event)`
+ }
+ }
+ ]
})
})
test('should NOT wrap as function if expression is complex member expression', () => {
const { node } = parseWithVOn(`<div @click="a['b' + c]"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.SIMPLE_EXPRESSION,
- content: `a['b' + c]`
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.SIMPLE_EXPRESSION,
+ content: `a['b' + c]`
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div @click="a['b' + c]"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [{ content: `_ctx.a` }, `['b' + `, { content: `_ctx.c` }, `]`]
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [
+ { content: `_ctx.a` },
+ `['b' + `,
+ { content: `_ctx.c` },
+ `]`
+ ]
+ }
+ }
+ ]
})
})
const { node } = parseWithVOn(`<div @click="e => foo(e)"/>`, {
prefixIdentifiers: true
})
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: { content: `onClick` },
- value: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [
- { content: `e` },
- ` => `,
- { content: `_ctx.foo` },
- `(`,
- { content: `e` },
- `)`
- ]
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: { content: `onClick` },
+ value: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [
+ { content: `e` },
+ ` => `,
+ { content: `_ctx.foo` },
+ `(`,
+ { content: `e` },
+ `)`
+ ]
+ }
+ }
+ ]
})
})
test('case conversion for vnode hooks', () => {
const { node } = parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`)
- const props = (node.codegenNode as CallExpression)
- .arguments[1] as ObjectExpression
- expect(props.properties[0]).toMatchObject({
- key: {
- content: `onVnodeMounted`
- },
- value: {
- content: `onMount`
- }
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
+ properties: [
+ {
+ key: {
+ content: `onVnodeMounted`
+ },
+ value: {
+ content: `onMount`
+ }
+ }
+ ]
})
})
cacheHandlers: true
})
expect(root.cached).toBe(1)
- const args = (node.codegenNode as PlainElementCodegenNode).arguments
+ const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
- expect(args.length).toBe(2)
- expect((args[1] as ObjectExpression).properties[0].value).toMatchObject({
+ expect(vnodeCall.patchFlag).toBeUndefined()
+ expect(
+ (vnodeCall.props as ObjectExpression).properties[0].value
+ ).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
cacheHandlers: true
})
expect(root.cached).toBe(1)
- const args = (node.codegenNode as PlainElementCodegenNode).arguments
+ const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
- expect(args.length).toBe(2)
- expect((args[1] as ObjectExpression).properties[0].value).toMatchObject({
+ expect(vnodeCall.patchFlag).toBeUndefined()
+ expect(
+ (vnodeCall.props as ObjectExpression).properties[0].value
+ ).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
cacheHandlers: true
})
expect(root.cached).toBe(1)
- const args = (node.codegenNode as PlainElementCodegenNode).arguments
+ const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
- expect(args.length).toBe(2)
- expect((args[1] as ObjectExpression).properties[0].value).toMatchObject({
+ expect(vnodeCall.patchFlag).toBeUndefined()
+ expect(
+ (vnodeCall.props as ObjectExpression).properties[0].value
+ ).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
cacheHandlers: true
})
expect(root.cached).toBe(1)
- const args = (node.codegenNode as PlainElementCodegenNode).arguments
+ expect(root.cached).toBe(1)
+ const vnodeCall = node.codegenNode as VNodeCall
// should not treat cached handler as dynamicProp, so no flags
- expect(args.length).toBe(2)
- expect((args[1] as ObjectExpression).properties[0].value).toMatchObject({
+ expect(vnodeCall.patchFlag).toBeUndefined()
+ expect(
+ (vnodeCall.props as ObjectExpression).properties[0].value
+ ).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
} from '../../src'
import { transformOnce } from '../../src/transforms/vOnce'
import { transformElement } from '../../src/transforms/transformElement'
-import {
- CREATE_VNODE,
- RENDER_SLOT,
- SET_BLOCK_TRACKING
-} from '../../src/runtimeHelpers'
+import { RENDER_SLOT, SET_BLOCK_TRACKING } from '../../src/runtimeHelpers'
import { transformBind } from '../../src/transforms/vBind'
import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`
}
})
expect(generate(root).code).toMatchSnapshot()
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`
}
})
expect(generate(root).code).toMatchSnapshot()
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE
+ type: NodeTypes.VNODE_CALL,
+ tag: `_component_Comp`
}
})
expect(generate(root).code).toMatchSnapshot()
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
value: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_VNODE
+ type: NodeTypes.VNODE_CALL,
+ tag: `"div"`
}
})
expect(generate(root).code).toMatchSnapshot()
NodeTypes,
ErrorCodes,
ForNode,
- CallExpression,
- ComponentNode
+ ComponentNode,
+ VNodeCall,
+ SlotsExpression
} from '../../src'
import { transformElement } from '../../src/transforms/transformElement'
import { transformOn } from '../../src/transforms/vOn'
root: ast,
slots:
ast.children[0].type === NodeTypes.ELEMENT
- ? (ast.children[0].codegenNode as CallExpression).arguments[2]
+ ? ((ast.children[0].codegenNode as VNodeCall)
+ .children as SlotsExpression)
: null
}
}
{
type: NodeTypes.ELEMENT,
codegenNode: {
- type: NodeTypes.JS_CALL_EXPRESSION,
- arguments: [
- `_component_Inner`,
- `null`,
- createSlotMatcher({
- default: {
- type: NodeTypes.JS_FUNCTION_EXPRESSION,
- params: {
- type: NodeTypes.COMPOUND_EXPRESSION,
- children: [`{ `, { content: `bar` }, ` }`]
+ type: NodeTypes.VNODE_CALL,
+ tag: `_component_Inner`,
+ props: undefined,
+ children: createSlotMatcher({
+ default: {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ params: {
+ type: NodeTypes.COMPOUND_EXPRESSION,
+ children: [`{ `, { content: `bar` }, ` }`]
+ },
+ returns: [
+ {
+ type: NodeTypes.INTERPOLATION,
+ content: {
+ content: `foo`
+ }
},
- returns: [
- {
- type: NodeTypes.INTERPOLATION,
- content: {
- content: `foo`
- }
- },
- {
- type: NodeTypes.INTERPOLATION,
- content: {
- content: `bar`
- }
- },
- {
- type: NodeTypes.INTERPOLATION,
- content: {
- content: `_ctx.baz`
- }
+ {
+ type: NodeTypes.INTERPOLATION,
+ content: {
+ content: `bar`
}
- ]
- }
- }),
- // nested slot should be forced dynamic, since scope variables
- // are not tracked as dependencies of the slot.
- genFlagText(PatchFlags.DYNAMIC_SLOTS)
- ]
+ },
+ {
+ type: NodeTypes.INTERPOLATION,
+ content: {
+ content: `_ctx.baz`
+ }
+ }
+ ]
+ }
+ }),
+ // nested slot should be forced dynamic, since scope variables
+ // are not tracked as dependencies of the slot.
+ patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
}
},
// test scope
)
const div = ((root.children[0] as ForNode).children[0] as ElementNode)
.codegenNode as any
- const comp = div.arguments[2][0]
- expect(comp.codegenNode.arguments[3]).toBe(
+ const comp = div.children[0]
+ expect(comp.codegenNode.patchFlag).toBe(
genFlagText(PatchFlags.DYNAMIC_SLOTS)
)
})
if (root.children[0].type === NodeTypes.FOR) {
const div = (root.children[0].children[0] as ElementNode)
.codegenNode as any
- const comp = div.arguments[2][0]
- flag = comp.codegenNode.arguments[3]
+ const comp = div.children[0]
+ flag = comp.codegenNode.patchFlag
} else {
const innerComp = (root.children[0] as ComponentNode)
.children[0] as ComponentNode
- flag = (innerComp.codegenNode as CallExpression).arguments[3]
+ flag = (innerComp.codegenNode as VNodeCall).patchFlag
}
if (shouldForce) {
expect(flag).toBe(genFlagText(PatchFlags.DYNAMIC_SLOTS))
}
]
})
- expect((root as any).children[0].codegenNode.arguments[3]).toMatch(
+ expect((root as any).children[0].codegenNode.patchFlag).toMatch(
PatchFlags.DYNAMIC_SLOTS + ''
)
expect(generate(root).code).toMatchSnapshot()
}
]
})
- expect((root as any).children[0].codegenNode.arguments[3]).toMatch(
+ expect((root as any).children[0].codegenNode.patchFlag).toMatch(
PatchFlags.DYNAMIC_SLOTS + ''
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
}
]
})
- expect((root as any).children[0].codegenNode.arguments[3]).toMatch(
+ expect((root as any).children[0].codegenNode.patchFlag).toMatch(
PatchFlags.DYNAMIC_SLOTS + ''
)
expect(generate(root).code).toMatchSnapshot()
}
]
})
- expect((root as any).children[0].codegenNode.arguments[3]).toMatch(
+ expect((root as any).children[0].codegenNode.patchFlag).toMatch(
PatchFlags.DYNAMIC_SLOTS + ''
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
}
export function createVNodeCall(
- context: TransformContext,
+ context: TransformContext | null,
tag: VNodeCall['tag'],
props?: VNodeCall['props'],
children?: VNodeCall['children'],
isForBlock: VNodeCall['isForBlock'] = false,
loc = locStub
): VNodeCall {
- if (isBlock) {
- context.helper(OPEN_BLOCK)
- context.helper(CREATE_BLOCK)
- } else {
- context.helper(CREATE_VNODE)
- }
- if (directives) {
- context.helper(WITH_DIRECTIVES)
+ if (context) {
+ if (isBlock) {
+ context.helper(OPEN_BLOCK)
+ context.helper(CREATE_BLOCK)
+ } else {
+ context.helper(CREATE_VNODE)
+ }
+ if (directives) {
+ context.helper(WITH_DIRECTIVES)
+ }
}
return {
return function render(_ctx, _cache) {
with (this) {
- const { createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, openBlock: _openBlock } = _Vue
+ const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
return function render(_ctx, _cache) {
with (this) {
- const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", _mergeProps(obj, {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }), null, 16 /* FULL_PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }), null, 16 /* FULL_PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelDynamic, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelDynamic: _vModelDynamic, createVNode: _createVNode, withDirectives: _withDirectives, resolveDirective: _resolveDirective, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _directive_bind = _resolveDirective(\\"bind\\")
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_directive_bind, val, key],
[_vModelDynamic, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[
_vModelText,
model,
void 0,
{ lazy: true }
]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[
_vModelText,
model,
void 0,
{ number: true }
]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[
_vModelText,
model,
void 0,
{ trim: true }
]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelText, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelCheckbox: _vModelCheckbox, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelCheckbox: _vModelCheckbox, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
type: \\"checkbox\\",
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelCheckbox, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelDynamic: _vModelDynamic, createVNode: _createVNode, withDirectives: _withDirectives, resolveDirective: _resolveDirective, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _directive_bind = _resolveDirective(\\"bind\\")
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_directive_bind, foo, \\"type\\"],
[_vModelDynamic, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelRadio: _vModelRadio, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelRadio: _vModelRadio, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
type: \\"radio\\",
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelRadio, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"input\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
type: \\"text\\",
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelText, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelSelect: _vModelSelect, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelSelect: _vModelSelect, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"select\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"select\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelSelect, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"textarea\\", {
+ return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]), [
+ }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
[_vModelText, model]
- ]))
+ ])
}
}"
`;
return function render(_ctx, _cache) {
with (this) {
- const { vShow: _vShow, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+ const { vShow: _vShow, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
- return (_openBlock(), _withDirectives(_createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */), [
+ return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */)), [
[_vShow, a]
- ]))
+ ])
}
}"
`;
CompilerOptions,
ElementNode,
NodeTypes,
- CallExpression
+ VNodeCall
} from '@vue/compiler-core'
import { transformBind } from '../../../compiler-core/src/transforms/vBind'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
bind: transformBind
}
})
- expect((node.codegenNode as CallExpression).arguments[1]).toMatchObject({
+ expect((node.codegenNode as VNodeCall).props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
]
})
// should not cause the STYLE patchFlag to be attached
- expect((node.codegenNode as CallExpression).arguments.length).toBe(2)
+ expect((node.codegenNode as VNodeCall).patchFlag).toBeUndefined()
})
})
it('should convert v-html to innerHTML', () => {
const ast = transformWithVHtml(`<div v-html="test"/>`)
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
- arguments: [
- `"div"`,
- createObjectMatcher({
- innerHTML: `[test]`
- }),
- `null`,
- genFlagText(PatchFlags.PROPS),
- `["innerHTML"]`
- ]
+ tag: `"div"`,
+ props: createObjectMatcher({
+ innerHTML: `[test]`
+ }),
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.PROPS),
+ dynamicProps: `["innerHTML"]`
})
})
[{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }]
])
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
- arguments: [
- `"div"`,
- createObjectMatcher({
- innerHTML: `[test]`
- }),
- `null`, // <-- children should have been removed
- genFlagText(PatchFlags.PROPS),
- `["innerHTML"]`
- ]
+ tag: `"div"`,
+ props: createObjectMatcher({
+ innerHTML: `[test]`
+ }),
+ children: undefined, // <-- children should have been removed
+ patchFlag: genFlagText(PatchFlags.PROPS),
+ dynamicProps: `["innerHTML"]`
})
})
CompilerOptions,
ElementNode,
ObjectExpression,
- CallExpression,
- NodeTypes
+ NodeTypes,
+ VNodeCall
} from '@vue/compiler-core'
import { transformOn } from '../../src/transforms/vOn'
import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../../src/runtimeHelpers'
})
return {
root: ast,
- props: (((ast.children[0] as ElementNode).codegenNode as CallExpression)
- .arguments[1] as ObjectExpression).properties
+ props: (((ast.children[0] as ElementNode).codegenNode as VNodeCall)
+ .props as ObjectExpression).properties
}
}
})
expect(root.cached).toBe(1)
// should not treat cached handler as dynamicProp, so no flags
- expect((root as any).children[0].codegenNode.arguments.length).toBe(2)
+ expect((root as any).children[0].codegenNode.patchFlag).toBeUndefined()
expect(prop.value).toMatchObject({
type: NodeTypes.JS_CACHE_EXPRESSION,
index: 1,
it('should convert v-text to textContent', () => {
const ast = transformWithVText(`<div v-text="test"/>`)
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
- arguments: [
- `"div"`,
- createObjectMatcher({
- textContent: `[test]`
- }),
- `null`,
- genFlagText(PatchFlags.PROPS),
- `["textContent"]`
- ]
+ tag: `"div"`,
+ props: createObjectMatcher({
+ textContent: `[test]`
+ }),
+ children: undefined,
+ patchFlag: genFlagText(PatchFlags.PROPS),
+ dynamicProps: `["textContent"]`
})
})
[{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }]
])
expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
- arguments: [
- `"div"`,
- createObjectMatcher({
- textContent: `[test]`
- }),
- `null`, // <-- children should have been removed
- genFlagText(PatchFlags.PROPS),
- `["textContent"]`
- ]
+ tag: `"div"`,
+ props: createObjectMatcher({
+ textContent: `[test]`
+ }),
+ children: undefined, // <-- children should have been removed
+ patchFlag: genFlagText(PatchFlags.PROPS),
+ dynamicProps: `["textContent"]`
})
})
exports[`source map 1`] = `
Object {
- "mappings": ";;;UAAA,cACE,aAA8B;IAAzB,aAAmB,4BAAbA,WAAM",
+ "mappings": ";;;wBACE,aAA8B;IAAzB,aAAmB,4BAAbA,WAAM",
"names": Array [
"render",
],
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler sfc: transform asset url support uri fragment 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import _imports_0 from '@svg/file.svg'
`;
exports[`compiler sfc: transform asset url support uri is empty 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"use\\", { href: '' }))
`;
exports[`compiler sfc: transform asset url transform assetUrls 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, Fragment as _Fragment, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import _imports_0 from './logo.png'
import _imports_1 from 'fixtures/logo.png'
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler sfc: transform srcset transform srcset 1`] = `
-"import { createVNode as _createVNode, createBlock as _createBlock, Fragment as _Fragment, openBlock as _openBlock } from \\"vue\\"
+"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import _imports_0 from './logo.png'
</template>
</foo>`).code
).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
+ "const { resolveComponent: _resolveComponent, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
}
} else {
return [
- (_openBlock(), (_ctx.ok)
- ? _createBlock(\\"div\\", { key: 0 }, [
+ (_ctx.ok)
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */))
- ])
- : _createCommentVNode(\\"v-if\\", true))
+ ]))
+ : _createCommentVNode(\\"v-if\\", true)
]
}
},
}
} else {
return [
- (_openBlock(), ok
- ? _createBlock(\\"div\\", { key: 0 }, [
+ ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */))
- ])
- : _createCommentVNode(\\"v-if\\", true))
+ ]))
+ : _createCommentVNode(\\"v-if\\", true)
]
}
},
projects / thirdparty / vuejs / core.git / commitdiff
