fix(compiler-vapor): set static indeterminate as prop

This commit is contained in:
daiwei 2025-09-30 16:32:22 +08:00
parent 3b5e13c7eb
commit f54719ef32
5 changed files with 44 additions and 2 deletions

View File

@ -1,5 +1,16 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: element transform > checkbox with static indeterminate 1`] = `
"import { setProp as _setProp, template as _template } from 'vue';
const t0 = _template("<input type=\\"checkbox\\">", true)
export function render(_ctx) {
const n0 = t0()
_setProp(n0, "indeterminate", "")
return n0
}"
`;
exports[`compiler: element transform > component > cache v-on expression with unique handler name 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';

View File

@ -583,6 +583,15 @@ describe('compiler: element transform', () => {
expect(ir.block.effect).lengthOf(0)
})
test('checkbox with static indeterminate', () => {
const { code } = compileWithElementTransform(
`<input type="checkbox" indeterminate/>`,
)
expect(code).toContain('_setProp(n0, "indeterminate", "")')
expect(code).toMatchSnapshot()
})
test('props + children', () => {
const { code, ir } = compileWithElementTransform(
`<div id="foo"><span/></div>`,

View File

@ -192,6 +192,9 @@ function resolveSetupReference(name: string, context: TransformContext) {
: undefined
}
// keys cannot be a part of the template and needs to be set dynamically
const dynamicKeys = ['indeterminate']
function transformNativeElement(
node: PlainElementNode,
propsResult: PropsResult,
@ -223,7 +226,12 @@ function transformNativeElement(
} else {
for (const prop of propsResult[1]) {
const { key, values } = prop
if (key.isStatic && values.length === 1 && values[0].isStatic) {
if (
key.isStatic &&
values.length === 1 &&
values[0].isStatic &&
!dynamicKeys.includes(key.content)
) {
template += ` ${key.content}`
if (values[0].content) template += `="${values[0].content}"`
} else {

View File

@ -299,6 +299,17 @@ describe('patchProp', () => {
`Failed setting prop "someProp" on <div>: value foo is invalid.`,
).toHaveBeenWarnedLast()
})
test('checkbox with indeterminate', () => {
const el = document.createElement('input')
el.type = 'checkbox'
setProp(el, 'indeterminate', true)
expect(el.indeterminate).toBe(true)
setProp(el, 'indeterminate', false)
expect(el.indeterminate).toBe(false)
setProp(el, 'indeterminate', '')
expect(el.indeterminate).toBe(true)
})
})
describe('setDynamicProp', () => {

View File

@ -1,6 +1,7 @@
import {
type NormalizedStyle,
canSetValueDirectly,
includeBooleanAttr,
isOn,
isString,
normalizeClass,
@ -81,7 +82,9 @@ export function setDOMProp(el: any, key: string, value: any): void {
let needRemove = false
if (value === '' || value == null) {
const type = typeof prev
if (value == null && type === 'string') {
if (type === 'boolean') {
value = includeBooleanAttr(value)
} else if (value == null && type === 'string') {
// e.g. <div :id="null">
value = ''
needRemove = true