diff --git a/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts b/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts index f67e25cd..7c2059d7 100644 --- a/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts +++ b/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts @@ -60,6 +60,35 @@ describe('compat: render function', () => { }) }) + test('staticClass + class', () => { + expect( + h('div', { + class: { foo: true }, + staticClass: 'bar' + }) + ).toMatchObject({ + props: { + class: 'bar foo' + } + }) + }) + + test('staticStyle + style', () => { + expect( + h('div', { + style: { color: 'red' }, + staticStyle: { fontSize: '14px' } + }) + ).toMatchObject({ + props: { + style: { + color: 'red', + fontSize: '14px' + } + } + }) + }) + test('on / nativeOn', () => { const fn = () => {} expect( diff --git a/packages/runtime-core/src/compat/renderFn.ts b/packages/runtime-core/src/compat/renderFn.ts index 69e773f3..945c2c2f 100644 --- a/packages/runtime-core/src/compat/renderFn.ts +++ b/packages/runtime-core/src/compat/renderFn.ts @@ -2,6 +2,8 @@ import { extend, isArray, isObject, + normalizeClass, + normalizeStyle, ShapeFlags, toHandlerKey } from '@vue/shared' @@ -141,7 +143,13 @@ export function compatH( } } -function convertLegacyProps(legacyProps?: LegacyVNodeProps): Data & VNodeProps { +function convertLegacyProps( + legacyProps?: LegacyVNodeProps +): Data & VNodeProps | null { + if (!legacyProps) { + return null + } + const converted: Data & VNodeProps = {} for (const key in legacyProps) { @@ -159,11 +167,22 @@ function convertLegacyProps(legacyProps?: LegacyVNodeProps): Data & VNodeProps { : incoming } } - } else { + } else if ( + key !== 'refInFor' && + key !== 'staticStyle' && + key !== 'staticClass' + ) { converted[key] = legacyProps[key as keyof LegacyVNodeProps] } } + if (legacyProps.staticClass) { + converted.class = normalizeClass([legacyProps.staticClass, converted.class]) + } + if (legacyProps.staticStyle) { + converted.style = normalizeStyle([legacyProps.staticStyle, converted.style]) + } + return converted }