From 4f0c387f0dfed2d5c700d3558397f6a429c1f32d Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Thu, 16 Jan 2025 18:46:07 +0530 Subject: [PATCH 1/6] Push --- documentation/docs/03-template-syntax/18-class.md | 12 ++++++++++++ packages/svelte/elements.d.ts | 2 ++ 2 files changed, 14 insertions(+) diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md index 880a34e9ec53..7f579373d5bc 100644 --- a/documentation/docs/03-template-syntax/18-class.md +++ b/documentation/docs/03-template-syntax/18-class.md @@ -71,6 +71,18 @@ The user of this component has the same flexibility to use a mixture of objects, ``` +Svelte also exposes the `ClassValue` type, which is the type of the value that `class` can take. This is useful if you want to use a type-safe class name in component props: + +```svelte + + +
...
+``` + ## The `class:` directive Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally. diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index 604403f0a261..fe2f106235d6 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -2059,3 +2059,5 @@ export interface SvelteHTMLElements { [name: string]: { [name: string]: any }; } + +export type ClassValue = import('clsx').ClassValue; From 6168ef41c36d992c00e98c73bf2900b46d3ab365 Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Thu, 16 Jan 2025 18:48:31 +0530 Subject: [PATCH 2/6] Cleanup --- packages/svelte/elements.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index fe2f106235d6..ca27e508bb81 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -741,7 +741,7 @@ export interface HTMLAttributes extends AriaAttributes, D accesskey?: string | undefined | null; autocapitalize?: 'characters' | 'off' | 'on' | 'none' | 'sentences' | 'words' | undefined | null; autofocus?: boolean | undefined | null; - class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null; + class?: string | ClassValue | undefined | null; contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null; contextmenu?: string | undefined | null; dir?: 'ltr' | 'rtl' | 'auto' | undefined | null; @@ -1522,7 +1522,7 @@ export interface SvelteWindowAttributes extends HTMLAttributes { export interface SVGAttributes extends AriaAttributes, DOMAttributes { // Attributes which also defined in HTMLAttributes className?: string | undefined | null; - class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null; + class?: string | ClassValue | undefined | null; color?: string | undefined | null; height?: number | string | undefined | null; id?: string | undefined | null; @@ -2060,4 +2060,4 @@ export interface SvelteHTMLElements { [name: string]: { [name: string]: any }; } -export type ClassValue = import('clsx').ClassValue; +export type ClassValue = import('clsx').ClassArray | import('clsx').ClassDictionary; From 89f9bb7e065555b2de1ab379babf21c2cc3a55db Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Thu, 16 Jan 2025 18:50:29 +0530 Subject: [PATCH 3/6] Add changeset --- .changeset/thirty-starfishes-shout.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thirty-starfishes-shout.md diff --git a/.changeset/thirty-starfishes-shout.md b/.changeset/thirty-starfishes-shout.md new file mode 100644 index 000000000000..3c577dcee18e --- /dev/null +++ b/.changeset/thirty-starfishes-shout.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: Expose `ClassValue` from `svelte/elements` From 7fac0946cc1a99a13526bb63524f0c54ab3f98ce Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Thu, 16 Jan 2025 18:53:08 +0530 Subject: [PATCH 4/6] Remove redundant string --- packages/svelte/elements.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index ca27e508bb81..96f15898008d 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -741,7 +741,7 @@ export interface HTMLAttributes extends AriaAttributes, D accesskey?: string | undefined | null; autocapitalize?: 'characters' | 'off' | 'on' | 'none' | 'sentences' | 'words' | undefined | null; autofocus?: boolean | undefined | null; - class?: string | ClassValue | undefined | null; + class?: ClassValue | undefined | null; contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null; contextmenu?: string | undefined | null; dir?: 'ltr' | 'rtl' | 'auto' | undefined | null; @@ -1522,7 +1522,7 @@ export interface SvelteWindowAttributes extends HTMLAttributes { export interface SVGAttributes extends AriaAttributes, DOMAttributes { // Attributes which also defined in HTMLAttributes className?: string | undefined | null; - class?: string | ClassValue | undefined | null; + class?: ClassValue | undefined | null; color?: string | undefined | null; height?: number | string | undefined | null; id?: string | undefined | null; @@ -2060,4 +2060,4 @@ export interface SvelteHTMLElements { [name: string]: { [name: string]: any }; } -export type ClassValue = import('clsx').ClassArray | import('clsx').ClassDictionary; +export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary; From 078e513d74d70fe62b2fb77b55b286117366df68 Mon Sep 17 00:00:00 2001 From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com> Date: Thu, 16 Jan 2025 18:55:22 +0530 Subject: [PATCH 5/6] Update documentation/docs/03-template-syntax/18-class.md Co-authored-by: Paolo Ricciuti --- documentation/docs/03-template-syntax/18-class.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md index 7f579373d5bc..4e96530787a0 100644 --- a/documentation/docs/03-template-syntax/18-class.md +++ b/documentation/docs/03-template-syntax/18-class.md @@ -71,7 +71,7 @@ The user of this component has the same flexibility to use a mixture of objects, ``` -Svelte also exposes the `ClassValue` type, which is the type of the value that `class` can take. This is useful if you want to use a type-safe class name in component props: +Svelte also exposes the `ClassValue` type, which is the type of the value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props: ```svelte