vue3-yuanma/packages/compiler-core/__tests__/codegen.spec.ts

600 lines
16 KiB
TypeScript
Raw Normal View History

2019-09-25 03:49:02 +08:00
import {
locStub,
2019-09-25 03:49:02 +08:00
generate,
NodeTypes,
RootNode,
createSimpleExpression,
2019-09-25 03:49:02 +08:00
createObjectExpression,
createObjectProperty,
2019-09-25 04:35:01 +08:00
createArrayExpression,
createCompoundExpression,
createInterpolation,
createSequenceExpression,
createCallExpression,
createConditionalExpression,
IfCodegenNode,
2019-10-19 09:51:34 +08:00
ForCodegenNode,
createCacheExpression,
createTemplateLiteral,
createBlockStatement,
createIfStatement,
createAssignmentExpression
2019-09-25 03:49:02 +08:00
} from '../src'
import {
CREATE_VNODE,
2020-01-27 06:35:21 +08:00
TO_DISPLAY_STRING,
RESOLVE_DIRECTIVE,
helperNameMap,
RESOLVE_COMPONENT,
CREATE_COMMENT
} from '../src/runtimeHelpers'
import { createElementWithCodegen } from './testUtils'
2019-10-06 11:20:02 +08:00
import { PatchFlags } from '@vue/shared'
2019-09-25 03:49:02 +08:00
function createRoot(options: Partial<RootNode> = {}): RootNode {
return {
type: NodeTypes.ROOT,
children: [],
helpers: [],
components: [],
directives: [],
imports: [],
hoists: [],
2019-10-19 09:51:34 +08:00
cached: 0,
temps: 0,
codegenNode: createSimpleExpression(`null`, false),
loc: locStub,
2019-09-25 03:49:02 +08:00
...options
}
}
describe('compiler: codegen', () => {
2019-09-25 03:49:02 +08:00
test('module mode preamble', () => {
const root = createRoot({
helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]
2019-09-25 03:49:02 +08:00
})
const { code } = generate(root, { mode: 'module' })
expect(code).toMatch(
`import { ${helperNameMap[CREATE_VNODE]} as _${
helperNameMap[CREATE_VNODE]
}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${
helperNameMap[RESOLVE_DIRECTIVE]
} } from "vue"`
)
expect(code).toMatchSnapshot()
})
test('module mode preamble w/ optimizeBindings: true', () => {
const root = createRoot({
helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]
})
const { code } = generate(root, { mode: 'module', optimizeBindings: true })
expect(code).toMatch(
`import { ${helperNameMap[CREATE_VNODE]}, ${
helperNameMap[RESOLVE_DIRECTIVE]
} } from "vue"`
)
expect(code).toMatch(
`const _${helperNameMap[CREATE_VNODE]} = ${
helperNameMap[CREATE_VNODE]
}, _${helperNameMap[RESOLVE_DIRECTIVE]} = ${
helperNameMap[RESOLVE_DIRECTIVE]
}`
)
2019-09-25 03:49:02 +08:00
expect(code).toMatchSnapshot()
})
test('function mode preamble', () => {
const root = createRoot({
helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]
2019-09-25 03:49:02 +08:00
})
const { code } = generate(root, { mode: 'function' })
expect(code).toMatch(`const _Vue = Vue`)
expect(code).toMatch(
`const { ${helperNameMap[CREATE_VNODE]}: _${
helperNameMap[CREATE_VNODE]
}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${
helperNameMap[RESOLVE_DIRECTIVE]
} } = _Vue`
)
expect(code).toMatchSnapshot()
})
test('function mode preamble w/ prefixIdentifiers: true', () => {
const root = createRoot({
helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]
})
const { code } = generate(root, {
mode: 'function',
prefixIdentifiers: true
})
expect(code).not.toMatch(`const _Vue = Vue`)
expect(code).toMatch(
`const { ${helperNameMap[CREATE_VNODE]}: _${
helperNameMap[CREATE_VNODE]
}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${
helperNameMap[RESOLVE_DIRECTIVE]
} } = Vue`
)
2019-09-25 03:49:02 +08:00
expect(code).toMatchSnapshot()
})
test('assets', () => {
2019-09-25 03:49:02 +08:00
const root = createRoot({
components: [`Foo`, `bar-baz`, `barbaz`],
directives: [`my_dir`]
2019-09-25 03:49:02 +08:00
})
const { code } = generate(root, { mode: 'function' })
expect(code).toMatch(
`const _component_Foo = _${helperNameMap[RESOLVE_COMPONENT]}("Foo")\n`
)
expect(code).toMatch(
`const _component_bar_baz = _${
helperNameMap[RESOLVE_COMPONENT]
}("bar-baz")\n`
)
expect(code).toMatch(
`const _component_barbaz = _${
helperNameMap[RESOLVE_COMPONENT]
}("barbaz")\n`
)
expect(code).toMatch(
`const _directive_my_dir = _${
helperNameMap[RESOLVE_DIRECTIVE]
}("my_dir")\n`
)
2019-09-25 03:49:02 +08:00
expect(code).toMatchSnapshot()
})
test('hoists', () => {
const root = createRoot({
hoists: [
createSimpleExpression(`hello`, false, locStub),
createObjectExpression(
[
createObjectProperty(
createSimpleExpression(`id`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
)
],
locStub
)
]
})
const { code } = generate(root)
expect(code).toMatch(`const _hoisted_1 = hello`)
expect(code).toMatch(`const _hoisted_2 = { id: "foo" }`)
expect(code).toMatchSnapshot()
})
test('temps', () => {
const root = createRoot({
temps: 3
})
const { code } = generate(root)
expect(code).toMatch(`let _temp0, _temp1, _temp2`)
expect(code).toMatchSnapshot()
})
2019-09-25 03:49:02 +08:00
test('prefixIdentifiers: true should inject _ctx statement', () => {
const { code } = generate(createRoot(), { prefixIdentifiers: true })
expect(code).toMatch(`const _ctx = this\n`)
expect(code).toMatchSnapshot()
})
test('static text', () => {
const { code } = generate(
createRoot({
codegenNode: {
type: NodeTypes.TEXT,
content: 'hello',
loc: locStub
}
2019-09-25 03:49:02 +08:00
})
)
expect(code).toMatch(`return "hello"`)
expect(code).toMatchSnapshot()
})
test('interpolation', () => {
const { code } = generate(
createRoot({
codegenNode: createInterpolation(`hello`, locStub)
2019-09-25 03:49:02 +08:00
})
)
2020-01-27 06:35:21 +08:00
expect(code).toMatch(`return _${helperNameMap[TO_DISPLAY_STRING]}(hello)`)
2019-09-25 03:49:02 +08:00
expect(code).toMatchSnapshot()
})
test('comment', () => {
const { code } = generate(
createRoot({
codegenNode: {
type: NodeTypes.COMMENT,
content: 'foo',
loc: locStub
}
2019-09-25 03:49:02 +08:00
})
)
expect(code).toMatch(`return _${helperNameMap[CREATE_COMMENT]}("foo")`)
2019-09-25 03:49:02 +08:00
expect(code).toMatchSnapshot()
})
test('compound expression', () => {
2019-09-25 03:49:02 +08:00
const { code } = generate(
createRoot({
codegenNode: createCompoundExpression([
`_ctx.`,
createSimpleExpression(`foo`, false, locStub),
` + `,
2019-09-25 03:49:02 +08:00
{
type: NodeTypes.INTERPOLATION,
loc: locStub,
content: createSimpleExpression(`bar`, false, locStub)
},
// nested compound
createCompoundExpression([` + `, `nested`])
])
2019-09-25 03:49:02 +08:00
})
)
2020-01-27 06:35:21 +08:00
expect(code).toMatch(
`return _ctx.foo + _${helperNameMap[TO_DISPLAY_STRING]}(bar) + nested`
2020-01-27 06:35:21 +08:00
)
expect(code).toMatchSnapshot()
})
test('ifNode', () => {
2019-09-25 04:35:01 +08:00
const { code } = generate(
createRoot({
codegenNode: {
type: NodeTypes.IF,
loc: locStub,
branches: [],
codegenNode: createSequenceExpression([
createSimpleExpression('foo', false),
createSimpleExpression('bar', false)
]) as IfCodegenNode
}
2019-09-25 04:35:01 +08:00
})
)
expect(code).toMatch(`return (foo, bar)`)
2019-09-25 04:35:01 +08:00
expect(code).toMatchSnapshot()
})
test('forNode', () => {
2019-09-25 03:49:02 +08:00
const { code } = generate(
createRoot({
codegenNode: {
type: NodeTypes.FOR,
loc: locStub,
source: createSimpleExpression('foo', false),
valueAlias: undefined,
keyAlias: undefined,
objectIndexAlias: undefined,
children: [],
2020-02-04 11:21:45 +08:00
parseResult: {} as any,
codegenNode: createSequenceExpression([
createSimpleExpression('foo', false),
createSimpleExpression('bar', false)
]) as ForCodegenNode
}
2019-09-25 03:49:02 +08:00
})
)
expect(code).toMatch(`return (foo, bar)`)
2019-09-25 04:35:01 +08:00
expect(code).toMatchSnapshot()
})
test('Element (callExpression + objectExpression + TemplateChildNode[])', () => {
2019-09-25 04:35:01 +08:00
const { code } = generate(
createRoot({
codegenNode: createElementWithCodegen([
// string
`"div"`,
// ObjectExpression
createObjectExpression(
2019-09-25 04:35:01 +08:00
[
createObjectProperty(
createSimpleExpression(`id`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
),
createObjectProperty(
createSimpleExpression(`prop`, false, locStub),
createSimpleExpression(`bar`, false, locStub)
),
// compound expression as computed key
createObjectProperty(
2019-09-25 04:35:01 +08:00
{
type: NodeTypes.COMPOUND_EXPRESSION,
loc: locStub,
children: [
`foo + `,
createSimpleExpression(`bar`, false, locStub)
]
},
createSimpleExpression(`bar`, false, locStub)
)
],
locStub
),
// ChildNode[]
[
createElementWithCodegen([
`"p"`,
createObjectExpression(
[
createObjectProperty(
// should quote the key!
createSimpleExpression(`some-key`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
)
],
locStub
)
])
],
// flag
PatchFlags.FULL_PROPS + ''
])
2019-09-25 03:49:02 +08:00
})
)
expect(code).toMatch(`
return _${helperNameMap[CREATE_VNODE]}("div", {
2019-09-25 03:49:02 +08:00
id: "foo",
2019-09-25 04:35:01 +08:00
[prop]: bar,
[foo + bar]: bar
}, [
_${helperNameMap[CREATE_VNODE]}("p", { "some-key": "foo" })
], ${PatchFlags.FULL_PROPS})`)
expect(code).toMatchSnapshot()
})
test('ArrayExpression', () => {
const { code } = generate(
createRoot({
codegenNode: createArrayExpression([
createSimpleExpression(`foo`, false),
createCallExpression(`bar`, [`baz`])
])
})
)
expect(code).toMatch(`return [
2019-09-25 03:49:02 +08:00
foo,
bar(baz)
]`)
2019-09-25 03:49:02 +08:00
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({
codegenNode: createConditionalExpression(
createSimpleExpression(`ok`, false),
createCallExpression(`foo`),
createConditionalExpression(
createSimpleExpression(`orNot`, false),
createCallExpression(`bar`),
createCallExpression(`baz`)
)
)
})
)
expect(code).toMatch(
`return ok
? foo()
: orNot
? bar()
: baz()`
)
expect(code).toMatchSnapshot()
})
2019-10-19 09:51:34 +08:00
test('CacheExpression', () => {
const { code } = generate(
createRoot({
cached: 1,
2019-10-19 09:51:34 +08:00
codegenNode: createCacheExpression(
1,
createSimpleExpression(`foo`, false)
)
}),
{
mode: 'module',
prefixIdentifiers: true
}
2019-10-19 09:51:34 +08:00
)
expect(code).toMatch(`const _cache = _ctx.$cache`)
expect(code).toMatch(`_cache[1] || (_cache[1] = foo)`)
expect(code).toMatchSnapshot()
2019-10-19 09:51:34 +08:00
})
test('CacheExpression w/ isVNode: true', () => {
const { code } = generate(
createRoot({
cached: 1,
codegenNode: createCacheExpression(
1,
createSimpleExpression(`foo`, false),
true
)
}),
{
mode: 'module',
prefixIdentifiers: true
}
)
expect(code).toMatch(`const _cache = _ctx.$cache`)
expect(code).toMatch(
`
_cache[1] || (
_setBlockTracking(-1),
_cache[1] = foo,
_setBlockTracking(1),
_cache[1]
)
`.trim()
)
expect(code).toMatchSnapshot()
})
test('TemplateLiteral', () => {
const { code } = generate(
createRoot({
codegenNode: createCallExpression(`_push`, [
createTemplateLiteral([
`foo`,
createCallExpression(`_renderAttr`, ['id', 'foo']),
`bar`
])
])
}),
{ ssr: true, mode: 'module' }
)
expect(code).toMatchInlineSnapshot(`
"
export function ssrRender(_ctx, _push, _parent) {
_push(\`foo\${_renderAttr(id, foo)}bar\`)
}"
`)
})
describe('IfStatement', () => {
test('if', () => {
const { code } = generate(
createRoot({
codegenNode: createBlockStatement([
createIfStatement(
createSimpleExpression('foo', false),
createBlockStatement([createCallExpression(`ok`)])
)
])
}),
{ ssr: true, mode: 'module' }
)
expect(code).toMatchInlineSnapshot(`
"
export function ssrRender(_ctx, _push, _parent) {
if (foo) {
ok()
}
}"
`)
})
test('if/else', () => {
const { code } = generate(
createRoot({
codegenNode: createBlockStatement([
createIfStatement(
createSimpleExpression('foo', false),
createBlockStatement([createCallExpression(`foo`)]),
createBlockStatement([createCallExpression('bar')])
)
])
}),
{ ssr: true, mode: 'module' }
)
expect(code).toMatchInlineSnapshot(`
"
export function ssrRender(_ctx, _push, _parent) {
if (foo) {
foo()
} else {
bar()
}
}"
`)
})
test('if/else-if', () => {
const { code } = generate(
createRoot({
codegenNode: createBlockStatement([
createIfStatement(
createSimpleExpression('foo', false),
createBlockStatement([createCallExpression(`foo`)]),
createIfStatement(
createSimpleExpression('bar', false),
createBlockStatement([createCallExpression(`bar`)])
)
)
])
}),
{ ssr: true, mode: 'module' }
)
expect(code).toMatchInlineSnapshot(`
"
export function ssrRender(_ctx, _push, _parent) {
if (foo) {
foo()
} else if (bar) {
bar()
}
}"
`)
})
test('if/else-if/else', () => {
const { code } = generate(
createRoot({
codegenNode: createBlockStatement([
createIfStatement(
createSimpleExpression('foo', false),
createBlockStatement([createCallExpression(`foo`)]),
createIfStatement(
createSimpleExpression('bar', false),
createBlockStatement([createCallExpression(`bar`)]),
createBlockStatement([createCallExpression('baz')])
)
)
])
}),
{ ssr: true, mode: 'module' }
)
expect(code).toMatchInlineSnapshot(`
"
export function ssrRender(_ctx, _push, _parent) {
if (foo) {
foo()
} else if (bar) {
bar()
} else {
baz()
}
}"
`)
})
})
test('AssignmentExpression', () => {
const { code } = generate(
createRoot({
codegenNode: createAssignmentExpression(
createSimpleExpression(`foo`, false),
createSimpleExpression(`bar`, false)
)
})
)
expect(code).toMatchInlineSnapshot(`
"
return function render() {
with (this) {
2020-02-05 11:56:53 +08:00
return foo = bar
}
}"
`)
})
})