diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap new file mode 100644 index 00000000..d9ce98eb --- /dev/null +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap @@ -0,0 +1,104 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`compiler: v-for codegen basic v-for 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => { + return _createVNode(\\"span\\") + }))) + } +}" +`; + +exports[`compiler: v-for codegen skipped key 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (value, __, index) => { + return _createVNode(\\"span\\") + }))) + } +}" +`; + +exports[`compiler: v-for codegen skipped value & key 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => { + return _createVNode(\\"span\\") + }))) + } +}" +`; + +exports[`compiler: v-for codegen skipped value 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => { + return _createVNode(\\"span\\") + }))) + } +}" +`; + +exports[`compiler: v-for codegen template v-for 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => { + return [ + \\"hello\\", + _createVNode(\\"span\\") + ] + }))) + } +}" +`; + +exports[`compiler: v-for codegen v-if + v-for 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList, Empty: _Empty } = _Vue + + return (_openBlock(), ok + ? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { + return _createVNode(\\"div\\") + })) + : _createBlock(_Empty)) + } +}" +`; + +exports[`compiler: v-for codegen value + key + index 1`] = ` +"const _Vue = Vue + +return function render() { + with (this) { + const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Fragment: _Fragment, renderList: _renderList } = _Vue + + return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => { + return _createVNode(\\"span\\") + }))) + } +}" +`; diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts index 8a5a5f57..0fa36d5b 100644 --- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts @@ -1,38 +1,53 @@ import { parse } from '../../src/parse' import { transform } from '../../src/transform' +import { transformIf } from '../../src/transforms/vIf' import { transformFor } from '../../src/transforms/vFor' +import { transformElement } from '../../src/transforms/transformElement' import { ForNode, NodeTypes, SimpleExpressionNode, ElementNode, - InterpolationNode + InterpolationNode, + SequenceExpression, + CallExpression } from '../../src/ast' import { ErrorCodes } from '../../src/errors' -import { CompilerOptions } from '../../src' +import { CompilerOptions, generate } from '../../src' import { transformExpression } from '../../src/transforms/transformExpression' +import { + OPEN_BLOCK, + CREATE_BLOCK, + FRAGMENT, + RENDER_LIST +} from '../../src/runtimeConstants' function parseWithForTransform( template: string, options: CompilerOptions = {} ) { - const node = parse(template, options) - transform(node, { + const ast = parse(template, options) + transform(ast, { nodeTransforms: [ + transformIf, transformFor, - ...(options.prefixIdentifiers ? [transformExpression] : []) + ...(options.prefixIdentifiers ? [transformExpression] : []), + transformElement ], ...options }) - return node.children[0] + return { + root: ast, + node: ast.children[0] as ForNode + } } describe('compiler: v-for', () => { describe('transform', () => { test('number expression', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).toBeUndefined() expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('index') @@ -40,9 +55,9 @@ describe('compiler: v-for', () => { }) test('value', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).toBeUndefined() expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item') @@ -50,9 +65,9 @@ describe('compiler: v-for', () => { }) test('object de-structured value', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).toBeUndefined() expect((forNode.valueAlias as SimpleExpressionNode).content).toBe( @@ -62,9 +77,9 @@ describe('compiler: v-for', () => { }) test('array de-structured value', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).toBeUndefined() expect((forNode.valueAlias as SimpleExpressionNode).content).toBe( @@ -74,9 +89,9 @@ describe('compiler: v-for', () => { }) test('value and key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).not.toBeUndefined() expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key') expect(forNode.objectIndexAlias).toBeUndefined() @@ -85,9 +100,9 @@ describe('compiler: v-for', () => { }) test('value, key and index', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).not.toBeUndefined() expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key') expect(forNode.objectIndexAlias).not.toBeUndefined() @@ -99,9 +114,9 @@ describe('compiler: v-for', () => { }) test('skipped key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).not.toBeUndefined() expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe( @@ -112,9 +127,9 @@ describe('compiler: v-for', () => { }) test('skipped value and key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).not.toBeUndefined() expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe( @@ -125,9 +140,9 @@ describe('compiler: v-for', () => { }) test('unbracketed value', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).toBeUndefined() expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item') @@ -135,9 +150,9 @@ describe('compiler: v-for', () => { }) test('unbracketed value and key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).not.toBeUndefined() expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key') expect(forNode.objectIndexAlias).toBeUndefined() @@ -146,9 +161,9 @@ describe('compiler: v-for', () => { }) test('unbracketed value, key and index', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).not.toBeUndefined() expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key') expect(forNode.objectIndexAlias).not.toBeUndefined() @@ -160,9 +175,9 @@ describe('compiler: v-for', () => { }) test('unbracketed skipped key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).not.toBeUndefined() expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe( @@ -173,9 +188,9 @@ describe('compiler: v-for', () => { }) test('unbracketed skipped value and key', () => { - const forNode = parseWithForTransform( + const { node: forNode } = parseWithForTransform( '' - ) as ForNode + ) expect(forNode.keyAlias).toBeUndefined() expect(forNode.objectIndexAlias).not.toBeUndefined() expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe( @@ -251,7 +266,7 @@ describe('compiler: v-for', () => { describe('source location', () => { test('value & source', () => { const source = '' - const forNode = parseWithForTransform(source) as ForNode + const { node: forNode } = parseWithForTransform(source) const itemOffset = source.indexOf('item') const value = forNode.valueAlias as SimpleExpressionNode @@ -275,7 +290,7 @@ describe('compiler: v-for', () => { test('bracketed value', () => { const source = '' - const forNode = parseWithForTransform(source) as ForNode + const { node: forNode } = parseWithForTransform(source) const itemOffset = source.indexOf('item') const value = forNode.valueAlias as SimpleExpressionNode @@ -299,7 +314,7 @@ describe('compiler: v-for', () => { test('de-structured value', () => { const source = '' - const forNode = parseWithForTransform(source) as ForNode + const { node: forNode } = parseWithForTransform(source) const value = forNode.valueAlias as SimpleExpressionNode const valueIndex = source.indexOf('{ id, key }') @@ -323,7 +338,7 @@ describe('compiler: v-for', () => { test('bracketed value, key, index', () => { const source = '' - const forNode = parseWithForTransform(source) as ForNode + const { node: forNode } = parseWithForTransform(source) const itemOffset = source.indexOf('item') const value = forNode.valueAlias as SimpleExpressionNode @@ -365,7 +380,7 @@ describe('compiler: v-for', () => { test('skipped key', () => { const source = '' - const forNode = parseWithForTransform(source) as ForNode + const { node: forNode } = parseWithForTransform(source) const itemOffset = source.indexOf('item') const value = forNode.valueAlias as SimpleExpressionNode @@ -399,9 +414,9 @@ describe('compiler: v-for', () => { describe('prefixIdentifiers: true', () => { test('should prefix v-for source', () => { - const node = parseWithForTransform(`
`, { + const { node } = parseWithForTransform(``, { prefixIdentifiers: true - }) as ForNode + }) expect(node.source).toMatchObject({ type: NodeTypes.SIMPLE_EXPRESSION, content: `_ctx.list` @@ -409,10 +424,10 @@ describe('compiler: v-for', () => { }) test('should prefix v-for source w/ complex expression', () => { - const node = parseWithForTransform( + const { node } = parseWithForTransform( ``, { prefixIdentifiers: true } - ) as ForNode + ) expect(node.source).toMatchObject({ type: NodeTypes.COMPOUND_EXPRESSION, children: [ @@ -427,10 +442,10 @@ describe('compiler: v-for', () => { }) test('should not prefix v-for alias', () => { - const node = parseWithForTransform( + const { node } = parseWithForTransform( `