root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 5 Packages Projects Releases Wiki Activity

test(compiler-vapor): v-bind="obj" (#119)

This commit is contained in:
ygj6 2024-02-06 20:26:55 +08:00 committed by GitHub
parent 77743006b8
commit c4a567b93d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 267 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
View File

@ -27,3 +27,69 @@ export function render(_ctx) {
return n0 return n0
}" }"
`; `;
exports[`compiler: element transform > static props 1`] = `
"import { template as _template } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
const n0 = t0()
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, _ctx.obj)
})
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { id: "foo" }, _ctx.obj)
})
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, _ctx.obj, { id: "foo" })
})
return n0
}"
`;
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })
})
return n0
}"
`;

201
packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
View File

@ -18,6 +18,207 @@ const compileWithElementTransform = makeCompile({
describe('compiler: element transform', () => { describe('compiler: element transform', () => {
test.todo('baisc') test.todo('baisc')
test('static props', () => {
const { code, ir } = compileWithElementTransform(
`<div id="foo" class="bar" />`,
)
expect(code).toMatchSnapshot()
expect(code).contains('<div id=\\"foo\\" class=\\"bar\\"></div>"')
expect(ir.effect.length).toBe(0)
})
test('v-bind="obj"', () => {
const { code, ir } = compileWithElementTransform(`<div v-bind="obj" />`)
expect(code).toMatchSnapshot()
expect(ir.effect).toMatchObject([
{
expressions: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
],
operations: [
{
type: IRNodeTypes.SET_DYNAMIC_PROPS,
element: 1,
props: [
{
type: 4,
content: 'obj',
isStatic: false,
},
],
},
],
},
])
expect(code).contains('_setDynamicProps(n1, _ctx.obj)')
})
test('v-bind="obj" after static prop', () => {
const { code, ir } = compileWithElementTransform(
`<div id="foo" v-bind="obj" />`,
)
expect(code).toMatchSnapshot()
expect(ir.effect).toMatchObject([
{
expressions: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
],
operations: [
{
type: IRNodeTypes.SET_DYNAMIC_PROPS,
element: 1,
props: [
[
{
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'id',
isStatic: true,
},
values: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'foo',
isStatic: true,
},
],
},
],
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
],
},
],
},
])
expect(code).contains('_setDynamicProps(n1, { id: "foo" }, _ctx.obj)')
})
test('v-bind="obj" before static prop', () => {
const { code, ir } = compileWithElementTransform(
`<div v-bind="obj" id="foo" />`,
)
expect(code).toMatchSnapshot()
expect(ir.effect).toMatchObject([
{
expressions: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
],
operations: [
{
type: IRNodeTypes.SET_DYNAMIC_PROPS,
element: 1,
props: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
[
{
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'id',
isStatic: true,
},
values: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'foo',
isStatic: true,
},
],
},
],
],
},
],
},
])
expect(code).contains('_setDynamicProps(n1, _ctx.obj, { id: "foo" })')
})
test('v-bind="obj" between static props', () => {
const { code, ir } = compileWithElementTransform(
`<div id="foo" v-bind="obj" class="bar" />`,
)
expect(code).toMatchSnapshot()
expect(ir.effect).toMatchObject([
{
expressions: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
],
operations: [
{
type: IRNodeTypes.SET_DYNAMIC_PROPS,
element: 1,
props: [
[
{
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'id',
isStatic: true,
},
values: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'foo',
isStatic: true,
},
],
},
],
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'obj',
isStatic: false,
},
[
{
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'class',
isStatic: true,
},
values: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'bar',
isStatic: true,
},
],
},
],
],
},
],
},
])
expect(code).contains(
'_setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })',
)
})
test.todo('props merging: event handlers', () => { test.todo('props merging: event handlers', () => {
const { code, ir } = compileWithElementTransform( const { code, ir } = compileWithElementTransform(
`<div @click.foo="a" @click.bar="b" />`, `<div @click.foo="a" @click.bar="b" />`,