theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(compiler): element transform

Browse Source
This commit is contained in:
Evan You
2019-09-21 17:42:12 -04:00
parent 93440bba97
commit baa8954884
13 changed files with 349 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/compiler-core/__tests__/directives/vFor.spec.ts
View File

@@ -1,6 +1,6 @@
import { parse } from '../../src/parse'
import { transform } from '../../src/transform'
import { transformFor } from '../../src/directives/vFor'
import { transformFor } from '../../src/transforms/vFor'
import { ForNode, NodeTypes } from '../../src/ast'
import { ErrorCodes } from '../../src/errors'
@@ -9,7 +9,7 @@ describe('v-for', () => {
test('number expression', () => {
const node = parse('<span v-for="index in 5" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -25,7 +25,7 @@ describe('v-for', () => {
test('value', () => {
const node = parse('<span v-for="(item) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -41,7 +41,7 @@ describe('v-for', () => {
test('object de-structured value', () => {
const node = parse('<span v-for="({ id, value }) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -57,7 +57,7 @@ describe('v-for', () => {
test('array de-structured value', () => {
const node = parse('<span v-for="([ id, value ]) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -73,7 +73,7 @@ describe('v-for', () => {
test('value and key', () => {
const node = parse('<span v-for="(item, key) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -89,7 +89,7 @@ describe('v-for', () => {
test('value, key and index', () => {
const node = parse('<span v-for="(value, key, index) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -107,7 +107,7 @@ describe('v-for', () => {
test('skipped key', () => {
const node = parse('<span v-for="(value,,index) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -124,7 +124,7 @@ describe('v-for', () => {
test('skipped value and key', () => {
const node = parse('<span v-for="(,,index) in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -141,7 +141,7 @@ describe('v-for', () => {
test('unbracketed value', () => {
const node = parse('<span v-for="item in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -157,7 +157,7 @@ describe('v-for', () => {
test('unbracketed value and key', () => {
const node = parse('<span v-for="item, key in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -174,7 +174,7 @@ describe('v-for', () => {
test('unbracketed value, key and index', () => {
const node = parse('<span v-for="value, key, index in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -192,7 +192,7 @@ describe('v-for', () => {
test('unbracketed skipped key', () => {
const node = parse('<span v-for="value, , index in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -209,7 +209,7 @@ describe('v-for', () => {
test('unbracketed skipped value and key', () => {
const node = parse('<span v-for=", , index in items" />')
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -226,7 +226,7 @@ describe('v-for', () => {
test('missing expression', () => {
const node = parse('<span v-for />')
const onError = jest.fn()
transform(node, { transforms: [transformFor], onError })
transform(node, { nodeTransforms: [transformFor], onError })
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
@@ -239,7 +239,7 @@ describe('v-for', () => {
test('empty expression', () => {
const node = parse('<span v-for="" />')
const onError = jest.fn()
transform(node, { transforms: [transformFor], onError })
transform(node, { nodeTransforms: [transformFor], onError })
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
@@ -252,7 +252,7 @@ describe('v-for', () => {
test('invalid expression', () => {
const node = parse('<span v-for="items" />')
const onError = jest.fn()
transform(node, { transforms: [transformFor], onError })
transform(node, { nodeTransforms: [transformFor], onError })
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
@@ -265,7 +265,7 @@ describe('v-for', () => {
test('missing source', () => {
const node = parse('<span v-for="item in" />')
const onError = jest.fn()
transform(node, { transforms: [transformFor], onError })
transform(node, { nodeTransforms: [transformFor], onError })
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
@@ -278,7 +278,7 @@ describe('v-for', () => {
test('missing value', () => {
const node = parse('<span v-for="in items" />')
const onError = jest.fn()
transform(node, { transforms: [transformFor], onError })
transform(node, { nodeTransforms: [transformFor], onError })
expect(onError).toHaveBeenCalledTimes(1)
expect(onError).toHaveBeenCalledWith(
@@ -293,7 +293,7 @@ describe('v-for', () => {
const source = '<span v-for="item in items" />'
const node = parse(source)
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -328,7 +328,7 @@ describe('v-for', () => {
const source = '<span v-for="( item ) in items" />'
const node = parse(source)
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -363,7 +363,7 @@ describe('v-for', () => {
const source = '<span v-for="( { id, key })in items" />'
const node = parse(source)
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -398,7 +398,7 @@ describe('v-for', () => {
const source = '<span v-for="( item, key, index ) in items" />'
const node = parse(source)
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)
@@ -455,7 +455,7 @@ describe('v-for', () => {
const source = '<span v-for="( item,, index ) in items" />'
const node = parse(source)
transform(node, { transforms: [transformFor] })
transform(node, { nodeTransforms: [transformFor] })
expect(node.children.length).toBe(1)

26
packages/compiler-core/__tests__/directives/vIf.spec.ts
View File

@@ -1,6 +1,6 @@
import { parse } from '../../src/parse'
import { transform } from '../../src/transform'
import { transformIf } from '../../src/directives/vIf'
import { transformIf } from '../../src/transforms/vIf'
import {
IfNode,
NodeTypes,
@@ -15,7 +15,7 @@ describe('compiler: v-if', () => {
test('basic v-if', () => {
const ast = parse(`<div v-if="ok"/>`)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
const node = ast.children[0] as IfNode
expect(node.type).toBe(NodeTypes.IF)
@@ -29,7 +29,7 @@ describe('compiler: v-if', () => {
test('template v-if', () => {
const ast = parse(`<template v-if="ok"><div/>hello<p/></template>`)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
const node = ast.children[0] as IfNode
expect(node.type).toBe(NodeTypes.IF)
@@ -47,7 +47,7 @@ describe('compiler: v-if', () => {
test('v-if + v-else', () => {
const ast = parse(`<div v-if="ok"/><p v-else/>`)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
// should fold branches
expect(ast.children.length).toBe(1)
@@ -72,7 +72,7 @@ describe('compiler: v-if', () => {
test('v-if + v-else-if', () => {
const ast = parse(`<div v-if="ok"/><p v-else-if="orNot"/>`)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
// should fold branches
expect(ast.children.length).toBe(1)
@@ -99,7 +99,7 @@ describe('compiler: v-if', () => {
`<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
// should fold branches
expect(ast.children.length).toBe(1)
@@ -136,7 +136,7 @@ describe('compiler: v-if', () => {
<template v-else>fine</template>
`)
transform(ast, {
transforms: [transformIf]
nodeTransforms: [transformIf]
})
// should fold branches
expect(ast.children.length).toBe(1)
@@ -172,7 +172,7 @@ describe('compiler: v-if', () => {
const ast = parse(`<div v-else/>`)
const spy = jest.fn()
transform(ast, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy
})
expect(spy.mock.calls[0]).toMatchObject([
@@ -185,7 +185,7 @@ describe('compiler: v-if', () => {
const ast2 = parse(`<div/><div v-else/>`)
const spy2 = jest.fn()
transform(ast2, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy2
})
expect(spy2.mock.calls[0]).toMatchObject([
@@ -198,7 +198,7 @@ describe('compiler: v-if', () => {
const ast3 = parse(`<div/>foo<div v-else/>`)
const spy3 = jest.fn()
transform(ast3, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy3
})
expect(spy3.mock.calls[0]).toMatchObject([
@@ -213,7 +213,7 @@ describe('compiler: v-if', () => {
const ast = parse(`<div v-else-if="foo"/>`)
const spy = jest.fn()
transform(ast, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy
})
expect(spy.mock.calls[0]).toMatchObject([
@@ -226,7 +226,7 @@ describe('compiler: v-if', () => {
const ast2 = parse(`<div/><div v-else-if="foo"/>`)
const spy2 = jest.fn()
transform(ast2, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy2
})
expect(spy2.mock.calls[0]).toMatchObject([
@@ -239,7 +239,7 @@ describe('compiler: v-if', () => {
const ast3 = parse(`<div/>foo<div v-else-if="foo"/>`)
const spy3 = jest.fn()
transform(ast3, {
transforms: [transformIf],
nodeTransforms: [transformIf],
onError: spy3
})
expect(spy3.mock.calls[0]).toMatchObject([

28
packages/compiler-core/__tests__/transform.spec.ts
View File

@@ -1,5 +1,5 @@
import { parse } from '../src/parse'
import { transform, Transform } from '../src/transform'
import { transform, NodeTransform } from '../src/transform'
import { ElementNode, NodeTypes } from '../src/ast'
import { ErrorCodes, createCompilerError } from '../src/errors'
@@ -10,12 +10,12 @@ describe('compiler: transform', () => {
// manually store call arguments because context is mutable and shared
// across calls
const calls: any[] = []
const plugin: Transform = (node, context) => {
const plugin: NodeTransform = (node, context) => {
calls.push([node, Object.assign({}, context)])
}
transform(ast, {
transforms: [plugin]
nodeTransforms: [plugin]
})
const div = ast.children[0] as ElementNode
@@ -48,7 +48,7 @@ describe('compiler: transform', () => {
test('context.replaceNode', () => {
const ast = parse(`<div/><span/>`)
const plugin: Transform = (node, context) => {
const plugin: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
// change the node to <p>
context.replaceNode(
@@ -67,7 +67,7 @@ describe('compiler: transform', () => {
}
const spy = jest.fn(plugin)
transform(ast, {
transforms: [spy]
nodeTransforms: [spy]
})
expect(ast.children.length).toBe(2)
@@ -85,14 +85,14 @@ describe('compiler: transform', () => {
const c1 = ast.children[0]
const c2 = ast.children[2]
const plugin: Transform = (node, context) => {
const plugin: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
context.removeNode()
}
}
const spy = jest.fn(plugin)
transform(ast, {
transforms: [spy]
nodeTransforms: [spy]
})
expect(ast.children.length).toBe(2)
@@ -111,7 +111,7 @@ describe('compiler: transform', () => {
const c1 = ast.children[0]
const c2 = ast.children[2]
const plugin: Transform = (node, context) => {
const plugin: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
context.removeNode()
// remove previous sibling
@@ -120,7 +120,7 @@ describe('compiler: transform', () => {
}
const spy = jest.fn(plugin)
transform(ast, {
transforms: [spy]
nodeTransforms: [spy]
})
expect(ast.children.length).toBe(1)
@@ -138,7 +138,7 @@ describe('compiler: transform', () => {
const c1 = ast.children[0]
const d1 = ast.children[1]
const plugin: Transform = (node, context) => {
const plugin: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
context.removeNode()
// remove next sibling
@@ -147,7 +147,7 @@ describe('compiler: transform', () => {
}
const spy = jest.fn(plugin)
transform(ast, {
transforms: [spy]
nodeTransforms: [spy]
})
expect(ast.children.length).toBe(1)
@@ -163,14 +163,14 @@ describe('compiler: transform', () => {
test('onError option', () => {
const ast = parse(`<div/>`)
const loc = ast.children[0].loc.start
const plugin: Transform = (node, context) => {
context.emitError(
const plugin: NodeTransform = (node, context) => {
context.onError(
createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc.start)
)
}
const spy = jest.fn()
transform(ast, {
transforms: [plugin],
nodeTransforms: [plugin],
onError: spy
})
expect(spy.mock.calls[0]).toMatchObject([