From 91edda35918b6eb122211834e806cfe5ce84d89c Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 22:23:56 +0800 Subject: [PATCH 01/12] =?UTF-8?q?remove=20ancient=20code=20=F0=9F=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- code/renderers/svelte/src/types.ts | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts index 503e47002b57..66f361451826 100644 --- a/code/renderers/svelte/src/types.ts +++ b/code/renderers/svelte/src/types.ts @@ -8,25 +8,6 @@ import type { ComponentConstructorOptions, ComponentEvents, SvelteComponent } fr export type StoryContext = StoryContextBase; -export interface ShowErrorArgs { - title: string; - description: string; -} - -export interface MountViewArgs { - Component: any; - target: any; - props: MountProps; - on: any; - Wrapper: any; - WrapperData: any; -} - -interface MountProps { - rounded: boolean; - text: string; -} - type ComponentType< Props extends Record = any, Events extends Record = any, From 7358b5b21cc984a42382a0f18e70fa28b77ac9c7 Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 22:24:46 +0800 Subject: [PATCH 02/12] simplify to use modern `Component` type from svelte --- code/renderers/svelte/src/types.ts | 41 +++++++------------------- code/renderers/svelte/src/typings.d.ts | 4 +-- 2 files changed, 12 insertions(+), 33 deletions(-) diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts index 66f361451826..ebfe203bb165 100644 --- a/code/renderers/svelte/src/types.ts +++ b/code/renderers/svelte/src/types.ts @@ -4,51 +4,30 @@ import type { WebRenderer, } from 'storybook/internal/types'; -import type { ComponentConstructorOptions, ComponentEvents, SvelteComponent } from 'svelte'; +import type { Component, ComponentProps } from 'svelte'; export type StoryContext = StoryContextBase; -type ComponentType< - Props extends Record = any, - Events extends Record = any, -> = new (options: ComponentConstructorOptions) => { - [P in keyof SvelteComponent as P extends `$$${string}` ? never : P]: SvelteComponent< - Props, - Events - >[P]; -}; - -export type Svelte5ComponentType = any> = - typeof import('svelte') extends { mount: any } - ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore svelte.Component doesn't exist in Svelte 4 - import('svelte').Component - : never; - -export interface SvelteRenderer +export interface SvelteRenderer = Component> extends WebRenderer { - component: - | ComponentType ? this['T'] : any> - | Svelte5ComponentType ? this['T'] : any>; + component: Component ? this['T'] : any>; storyResult: this['T'] extends Record - ? SvelteStoryResult : {}> + ? SvelteStoryResult : SvelteStoryResult; mount: ( - Component?: ComponentType | Svelte5ComponentType, + Component?: C, // TODO add proper typesafety - options?: Record & { props: Record } + options?: Record & { props: ComponentProps } ) => Promise; } export interface SvelteStoryResult< Props extends Record = any, - Events extends Record = any, + Exports extends Record = any, + Bindings extends keyof Props | '' = string, > { - Component?: ComponentType | Svelte5ComponentType; - on?: Record extends Events - ? Record void> - : { [K in keyof Events as string extends K ? never : K]?: (event: Events[K]) => void }; + Component?: Component; props?: Props; - decorator?: ComponentType | Svelte5ComponentType; + decorator?: Component; } diff --git a/code/renderers/svelte/src/typings.d.ts b/code/renderers/svelte/src/typings.d.ts index 2e00d983aa34..1195d9bf273a 100644 --- a/code/renderers/svelte/src/typings.d.ts +++ b/code/renderers/svelte/src/typings.d.ts @@ -2,8 +2,8 @@ declare var STORYBOOK_ENV: 'svelte'; declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; declare module '*.svelte' { - import type { ComponentType } from 'svelte'; + import type { Component } from 'svelte'; - const component: ComponentType; + const component: Component; export default component; } From a936c264ff2f3be7a55f5dbf50ca0fb8135a1950 Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 22:30:49 +0800 Subject: [PATCH 03/12] delete old svelte 4 component from testing --- code/renderers/svelte/src/__test__/Button.svelte | 15 +++++++++------ .../renderers/svelte/src/__test__/ButtonV5.svelte | 15 --------------- 2 files changed, 9 insertions(+), 21 deletions(-) delete mode 100644 code/renderers/svelte/src/__test__/ButtonV5.svelte diff --git a/code/renderers/svelte/src/__test__/Button.svelte b/code/renderers/svelte/src/__test__/Button.svelte index b7fd6e8e325c..f2f172f8089f 100644 --- a/code/renderers/svelte/src/__test__/Button.svelte +++ b/code/renderers/svelte/src/__test__/Button.svelte @@ -1,12 +1,15 @@ - diff --git a/code/renderers/svelte/src/__test__/ButtonV5.svelte b/code/renderers/svelte/src/__test__/ButtonV5.svelte deleted file mode 100644 index f2f172f8089f..000000000000 --- a/code/renderers/svelte/src/__test__/ButtonV5.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - From 835e6c44ec47575148d5ea4eacd24086be95b3db Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 23:54:52 +0800 Subject: [PATCH 04/12] remove `expect-type` - is bundled into `vitest` --- code/renderers/svelte/package.json | 1 - code/yarn.lock | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 4d8379a10fda..10820fb65e26 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -61,7 +61,6 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.3", "@testing-library/svelte": "^5.2.4", - "expect-type": "^1.1.0", "svelte": "^5.20.5", "svelte-check": "^4.1.4", "sveltedoc-parser": "^4.2.1", diff --git a/code/yarn.lock b/code/yarn.lock index bcf38043f23d..36f8ac61a7cb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6862,7 +6862,6 @@ __metadata: dependencies: "@sveltejs/vite-plugin-svelte": "npm:^5.0.3" "@testing-library/svelte": "npm:^5.2.4" - expect-type: "npm:^1.1.0" svelte: "npm:^5.20.5" svelte-check: "npm:^4.1.4" sveltedoc-parser: "npm:^4.2.1" @@ -14386,7 +14385,7 @@ __metadata: languageName: node linkType: hard -"expect-type@npm:^1.1.0, expect-type@npm:^1.2.1": +"expect-type@npm:^1.2.1": version: 1.2.1 resolution: "expect-type@npm:1.2.1" checksum: 10c0/b775c9adab3c190dd0d398c722531726cdd6022849b4adba19dceab58dda7e000a7c6c872408cd73d665baa20d381eca36af4f7b393a4ba60dd10232d1fb8898 From 99bbc59a2147495d3819c069d9cbe9b897c6ed37 Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 23:55:37 +0800 Subject: [PATCH 05/12] refactor svelte renderer public-types - simplifcation by using `Component` --- code/renderers/svelte/src/public-types.ts | 42 ++++++++--------------- 1 file changed, 14 insertions(+), 28 deletions(-) diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts index 87b9d58aa0c0..c7414beb560b 100644 --- a/code/renderers/svelte/src/public-types.ts +++ b/code/renderers/svelte/src/public-types.ts @@ -12,10 +12,10 @@ import type { StrictArgs, } from 'storybook/internal/types'; -import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte'; +import type { Component, ComponentProps } from 'svelte'; import type { SetOptional, Simplify } from 'type-fest'; -import type { Svelte5ComponentType, SvelteRenderer } from './types'; +import type { SvelteRenderer } from './types'; export type { Args, ArgTypes, Parameters, StrictArgs } from 'storybook/internal/types'; @@ -24,22 +24,20 @@ export type { Args, ArgTypes, Parameters, StrictArgs } from 'storybook/internal/ * * @see [Default export](https://storybook.js.org/docs/api/csf#default-export) */ -export type Meta = CmpOrArgs extends - | SvelteComponent - | Svelte5ComponentType - ? ComponentAnnotations, Props> - : ComponentAnnotations; +export type Meta = + CmpOrArgs extends Component + ? ComponentAnnotations, Props> + : ComponentAnnotations; /** * Story function that represents a CSFv2 component example. * * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports) */ -export type StoryFn = TCmpOrArgs extends - | SvelteComponent - | Svelte5ComponentType - ? AnnotatedStoryFn - : AnnotatedStoryFn; +export type StoryFn = + TCmpOrArgs extends Component + ? AnnotatedStoryFn + : AnnotatedStoryFn; /** * Story object that represents a CSFv3 component example. @@ -48,32 +46,20 @@ export type StoryFn = TCmpOrArgs extends */ export type StoryObj = MetaOrCmpOrArgs extends { render?: ArgsStoryFn; - component: infer Comp; // We cannot use "extends ComponentType | Svelte5ComponentType" here, because TypeScript for some reason then refuses to ever enter the true branch + component: infer Comp; // We cannot use "extends Component" here, because TypeScript for some reason then refuses to ever enter the true branch args?: infer DefaultArgs; } ? Simplify< - ComponentProps< - Comp extends ComponentType - ? Component - : Comp extends Svelte5ComponentType - ? Comp - : never - > & + ComponentProps ? Comp : never> & ArgsFromMeta > extends infer TArgs ? StoryAnnotations< - SvelteRenderer< - Comp extends ComponentType - ? Component - : Comp extends Svelte5ComponentType - ? Comp - : never - >, + SvelteRenderer ? Comp : never>, TArgs, SetOptional> > : never - : MetaOrCmpOrArgs extends SvelteComponent | Svelte5ComponentType + : MetaOrCmpOrArgs extends Component ? StoryAnnotations, ComponentProps> : StoryAnnotations; From 08d17970ca90a612d4a0b124b46a8d2ee31facd5 Mon Sep 17 00:00:00 2001 From: Mateusz Kadlubowski Date: Tue, 6 May 2025 23:56:10 +0800 Subject: [PATCH 06/12] update test types --- .../renderers/svelte/src/public-types.test.ts | 182 ++++-------------- 1 file changed, 36 insertions(+), 146 deletions(-) diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index 154065beec2f..20f4d23140dd 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -1,5 +1,5 @@ // this file tests Typescript types that's why there are no assertions -import { describe, it } from 'vitest'; +import { describe, expectTypeOf, it } from 'vitest'; import { satisfies } from 'storybook/internal/common'; import type { @@ -9,32 +9,23 @@ import type { StoryAnnotations, } from 'storybook/internal/types'; -import { expectTypeOf } from 'expect-type'; -import { type Component, type ComponentProps, SvelteComponent } from 'svelte'; +import type { Component, ComponentProps } from 'svelte'; import Button from './__test__/Button.svelte'; -import ButtonV5 from './__test__/ButtonV5.svelte'; import Decorator2 from './__test__/Decorator2.svelte'; import Decorator1 from './__test__/Decorator.svelte'; import type { Decorator, Meta, StoryObj } from './public-types'; import type { SvelteRenderer } from './types'; -type SvelteStory< - Comp extends SvelteComponent | Component, +type SvelteStory, Args, RequiredArgs> = StoryAnnotations< + SvelteRenderer, Args, - RequiredArgs, -> = StoryAnnotations, Args, RequiredArgs>; - -// The imported Svelte component in Svelte 5 has an isomorphic type (both function and class). -// In order to test how it would look like for real Svelte 4 components, we need to create the class type manually. -declare class ButtonV4 extends SvelteComponent<{ - disabled: boolean; - label: string; -}> {} + RequiredArgs +>; describe('Meta', () => { it('Generic parameter of Meta can be a component', () => { - const meta: Meta