diff --git a/packages/dts-test/tsx.test-d.tsx b/packages/dts-test/tsx.test-d.tsx index a15d16ac4d2..4b4a0dbf9df 100644 --- a/packages/dts-test/tsx.test-d.tsx +++ b/packages/dts-test/tsx.test-d.tsx @@ -17,6 +17,42 @@ expectType(
) +// allow undefined, string, object, array and nested array classes +expectType(
) +expectType(
) +expectType(
) +expectType(
) +expectType(
) +expectType(
) +expectType(
) +expectType( +
+) +expectType( +
+) +expectType( +
+) + // #7955 expectType(
) diff --git a/packages/runtime-dom/src/jsx.ts b/packages/runtime-dom/src/jsx.ts index dfa4fc561c6..580fa9300fb 100644 --- a/packages/runtime-dom/src/jsx.ts +++ b/packages/runtime-dom/src/jsx.ts @@ -252,10 +252,16 @@ export type StyleValue = | CSSProperties | Array +export type ClassValue = + | undefined + | string + | Record + | Array + export interface HTMLAttributes extends AriaAttributes, EventHandlers { innerHTML?: string - class?: any + class?: ClassValue style?: StyleValue // Standard HTML Attributes diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts index a3cb104c003..bf9cf7e33be 100644 --- a/packages/shared/__tests__/normalizeProp.spec.ts +++ b/packages/shared/__tests__/normalizeProp.spec.ts @@ -1,6 +1,10 @@ import { normalizeClass, parseStringStyle } from '../src' describe('normalizeClass', () => { + test('handles undefined correctly', () => { + expect(normalizeClass(undefined)).toEqual('') + }) + test('handles string correctly', () => { expect(normalizeClass('foo')).toEqual('foo') }) @@ -11,12 +15,56 @@ describe('normalizeClass', () => { ) }) + test('handles empty array correctly', () => { + expect(normalizeClass([])).toEqual('') + }) + + test('handles nested array correctly', () => { + expect(normalizeClass(['foo', ['bar'], [['baz']]])).toEqual('foo bar baz') + }) + test('handles object correctly', () => { expect(normalizeClass({ foo: true, bar: false, baz: true })).toEqual( 'foo baz' ) }) + test('handles empty object correctly', () => { + expect(normalizeClass({})).toEqual('') + }) + + test('handles arrays and objects correctly', () => { + expect( + normalizeClass(['foo', ['bar'], { baz: true }, [{ qux: true }]]) + ).toEqual('foo bar baz qux') + }) + + test('handles array of objects with falsy values', () => { + expect( + normalizeClass([ + { foo: false }, + { bar: 0 }, + { baz: -0 }, + { qux: '' }, + { quux: null }, + { corge: undefined }, + { grault: NaN } + ]) + ).toEqual('') + }) + + test('handles array of objects with truthy values', () => { + expect( + normalizeClass([ + { foo: true }, + { bar: 'not-empty' }, + { baz: 1 }, + { qux: {} }, + { quux: [] } + ]) + ).toEqual('foo bar baz qux quux') + }) + // #6777 test('parse multi-line inline style', () => { expect(