Skip to content

Commit

Permalink
feat: generate specific function when the prop key is static
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygj6
ygj6 committed Jan 21, 2024
1 parent 51098cf commit bfb818f
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 46 deletions.
24 changes: 12 additions & 12 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`compiler v-bind > .attr modifier 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setAttr as _setAttr } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "^foo-bar", undefined, _ctx.id)
_setAttr(n1, "foo-bar", undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setAttr as _setAttr } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, "^foo-bar", undefined, _ctx.fooBar)
_setAttr(n1, "foo-bar", undefined, _ctx.fooBar)
})
return n0
}"
Expand Down Expand Up @@ -71,42 +71,42 @@ export function render(_ctx) {
`;

exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
_setDOMProp(n1, "fooBar", undefined, _ctx.id)
})
return n0
}"
`;

exports[`compiler v-bind > .prop modifier 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
_setDOMProp(n1, "fooBar", undefined, _ctx.id)
})
return n0
}"
Expand All @@ -127,14 +127,14 @@ export function render(_ctx) {
`;
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
"import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
"import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
export function render(_ctx) {
const t0 = _template("<div></div>")
const n0 = t0()
const { 0: [n1],} = _children(n0)
_renderEffect(() => {
_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)
})
return n0
}"
Expand Down
30 changes: 12 additions & 18 deletions packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ describe('compiler v-bind', () => {

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `.fooBar`,
content: `fooBar`,
isStatic: true,
},
value: {
Expand All @@ -256,15 +256,15 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains('_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)')
expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.id)')
})

test('.prop modifier w/ no expression', () => {
const { ir, code } = compileWithVBind(`<div v-bind:fooBar.prop />`)

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `.fooBar`,
content: `fooBar`,
isStatic: true,
},
value: {
Expand All @@ -275,9 +275,7 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains(
'_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)',
)
expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)')
})

test('.prop modifier w/ dynamic arg', () => {
Expand Down Expand Up @@ -308,7 +306,7 @@ describe('compiler v-bind', () => {

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `.fooBar`,
content: `fooBar`,
isStatic: true,
},
value: {
Expand All @@ -319,15 +317,15 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains('_setDynamicProp(n1, ".fooBar", undefined, _ctx.id)')
expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.id)')
})

test('.prop modifier (shortband) w/ no expression', () => {
const { ir, code } = compileWithVBind(`<div .fooBar />`)

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `.fooBar`,
content: `fooBar`,
isStatic: true,
},
value: {
Expand All @@ -338,17 +336,15 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains(
'_setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)',
)
expect(code).contains('_setDOMProp(n1, "fooBar", undefined, _ctx.fooBar)')
})

test('.attr modifier', () => {
const { ir, code } = compileWithVBind(`<div v-bind:foo-bar.attr="id"/>`)

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `^foo-bar`,
content: `foo-bar`,
isStatic: true,
},
value: {
Expand All @@ -359,15 +355,15 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains('_setDynamicProp(n1, "^foo-bar", undefined, _ctx.id)')
expect(code).contains('_setAttr(n1, "foo-bar", undefined, _ctx.id)')
})

test('.attr modifier w/ no expression', () => {
const { ir, code } = compileWithVBind(`<div v-bind:foo-bar.attr />`)

expect(ir.effect[0].operations[0]).toMatchObject({
key: {
content: `^foo-bar`,
content: `foo-bar`,
isStatic: true,
},
value: {
Expand All @@ -378,8 +374,6 @@ describe('compiler v-bind', () => {

expect(code).matchSnapshot()
expect(code).contains('renderEffect')
expect(code).contains(
'_setDynamicProp(n1, "^foo-bar", undefined, _ctx.fooBar)',
)
expect(code).contains('_setAttr(n1, "foo-bar", undefined, _ctx.fooBar)')
})
})
41 changes: 41 additions & 0 deletions packages/compiler-vapor/src/generators/prop.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,52 @@
import type { CodegenContext } from '../generate'
import type { SetPropIRNode } from '../ir'
import { genExpression } from './expression'
import { isString } from '@vue/shared'

export function genSetProp(oper: SetPropIRNode, context: CodegenContext) {
const { pushFnCall, pushMulti, newline, vaporHelper, helper } = context

newline()

if (isString(oper.key) || oper.key.isStatic) {
let keyName: string = isString(oper.key)
? oper.key
: JSON.stringify(oper.key)

if (keyName === 'class') {
pushFnCall(vaporHelper('setClass'), `n${oper.element}`, 'undefined', () =>
genExpression(oper.value, context),
)
return
}

if (keyName === 'style') {
pushFnCall(vaporHelper('setStyle'), `n${oper.element}`, 'undefined', () =>
genExpression(oper.value, context),
)
return
}

if (oper.runtimePrefix) {
pushFnCall(
vaporHelper(oper.runtimePrefix === '.' ? 'setDOMProp' : 'setAttr'),
`n${oper.element}`,
() => {
if (oper.runtimeCamelize) {
pushFnCall(helper('camelize'), () =>
genExpression(oper.key, context),
)
} else {
genExpression(oper.key, context)
}
},
'undefined',
() => genExpression(oper.value, context),
)
return
}
}

pushFnCall(
vaporHelper('setDynamicProp'),
`n${oper.element}`,
Expand Down
21 changes: 5 additions & 16 deletions packages/compiler-vapor/src/transforms/vBind.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,6 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
}
}

let prefix: string | undefined
if (modifiers.includes('prop')) {
prefix = injectPrefix(arg, '.')
}
if (modifiers.includes('attr')) {
prefix = injectPrefix(arg, '^')
}

if (!exp.content.trim()) {
context.options.onError(
createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
Expand All @@ -64,15 +56,12 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
key: arg,
value: exp,
runtimeCamelize: camel,
runtimePrefix: prefix,
runtimePrefix: modifiers.includes('prop')
? '.'
: modifiers.includes('attr')
? '^'
: undefined,
},
],
)
}

const injectPrefix = (arg: SimpleExpressionNode, prefix: string) => {
if (!arg.isStatic) {
return prefix
}
arg.content = prefix + arg.content
}

0 comments on commit bfb818f

Please sign in to comment.