Svelte: Simplify public types - use modern Component
#31394
Conversation
|
View your CI Pipeline Execution ↗ for commit 49291b2
☁️ Nx Cloud last updated this comment at |
JReinhold
left a comment
JReinhold
left a comment
There was a problem hiding this comment.
LGTM! 🎉
Will need @kasperpeulen's eyes as well.
If possible would also love @dummdidumm's eyes on this, to ensure we haven't missed anything. The relevant context is that we've dropped support for Svelte 4 now.
There was a problem hiding this comment.
Pull Request Overview
This PR simplifies and modernizes the Svelte renderer types by removing legacy code and types while updating tests to reflect the new modern component API. Key changes include replacing legacy Svelte component types with the modern Component interface, updating associated generic types, and revising unit tests to use the new type assertion method.
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| code/renderers/svelte/src/types.ts | Simplified types by removing legacy Svelte types and updating the SvelteRenderer interface. |
| code/renderers/svelte/src/public-types.ts | Updated public types to use modern Component type and adjusted type inference in Meta and StoryObj. |
| code/renderers/svelte/src/public-types.test.ts | Revised tests to align with updated type definitions and replaced deprecated assertions. |
| code/renderers/svelte/src/test/Decorator*.svelte | Updated decorator test components to use $props() and new render syntax. |
| code/renderers/svelte/src/test/Button.svelte | Updated Button component to align with Svelte 5 event binding and API changes. |
| code/renderers/svelte/package.json | Removed the now redundant dependency "expect-type". |
WalkthroughThe changes migrate Svelte typings and test components to a unified Component/ComponentProps model. Multiple test Svelte components stop using exported Sequence Diagram(s)mermaid Note over Parent,OldComp: Old prop flow Note over Parent,NewComp: New prop flow mermaid Note over Consumer,OldTypes: Old typing model Note over Consumer,NewTypes: New typing model Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
…com/xeho91/storybook into feat/refactor-svelte-renderer-types
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
code/renderers/svelte/src/types.ts (2)
11-23: Prefercomponent: Cfor stronger specificity and inferenceYou already parameterize
SvelteRendereras<C extends Component...>. TypingcomponentasCtightens the contract and avoids coupling it tothis['T'](which represents args, not necessarily the component’s props).-export interface SvelteRenderer<C extends Component<any, any, any> = Component<any, any, any>> +export interface SvelteRenderer<C extends Component<any, any, any> = Component<any, any, any>> extends WebRenderer { - component: Component<this['T'] extends Record<string, any> ? this['T'] : any>; + component: C;
18-22: Optional: makepropsoptional inmountoptionsSeveral Storybook render paths call
mount()without props. Consider makingpropsoptional to ease adoption while keeping type-safety when provided.- options?: Record<string, any> & { props: ComponentProps<C> } + options?: Record<string, any> & { props?: ComponentProps<C> }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (14)
code/renderers/svelte/package.json(0 hunks)code/renderers/svelte/src/__test__/Button.svelte(1 hunks)code/renderers/svelte/src/__test__/ButtonV5.svelte(0 hunks)code/renderers/svelte/src/__test__/Decorator.svelte(1 hunks)code/renderers/svelte/src/__test__/Decorator2.svelte(1 hunks)code/renderers/svelte/src/__test__/composeStories/Button.stories.ts(1 hunks)code/renderers/svelte/src/__test__/composeStories/CustomRenderComponent.svelte(1 hunks)code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte(1 hunks)code/renderers/svelte/src/__test__/composeStories/StoryWithLocaleComponent.svelte(1 hunks)code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts(1 hunks)code/renderers/svelte/src/public-types.test.ts(9 hunks)code/renderers/svelte/src/public-types.ts(3 hunks)code/renderers/svelte/src/types.ts(1 hunks)code/renderers/svelte/src/typings.d.ts(1 hunks)
💤 Files with no reviewable changes (2)
- code/renderers/svelte/package.json
- code/renderers/svelte/src/test/ButtonV5.svelte
🧰 Additional context used
📓 Path-based instructions (4)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/svelte/src/__test__/composeStories/portable-stories.test.tscode/renderers/svelte/src/public-types.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/svelte/src/__test__/composeStories/portable-stories.test.tscode/renderers/svelte/src/public-types.test.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Adhere to ESLint and Prettier rules across all JS/TS source files
Files:
code/renderers/svelte/src/__test__/composeStories/portable-stories.test.tscode/renderers/svelte/src/__test__/composeStories/Button.stories.tscode/renderers/svelte/src/types.tscode/renderers/svelte/src/typings.d.tscode/renderers/svelte/src/public-types.test.tscode/renderers/svelte/src/public-types.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode
Files:
code/renderers/svelte/src/__test__/composeStories/portable-stories.test.tscode/renderers/svelte/src/__test__/composeStories/Button.stories.tscode/renderers/svelte/src/types.tscode/renderers/svelte/src/typings.d.tscode/renderers/svelte/src/public-types.test.tscode/renderers/svelte/src/public-types.ts
🧠 Learnings (11)
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
PR: storybookjs/storybook#32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: The useGlobals hook from storybook/manager-api returns a tuple where the third element (storyGlobals) is typed as Globals, not Globals | undefined. This means TypeScript guarantees it's always defined, making the `in` operator safe to use without additional null checks.
Applied to files:
code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.sveltecode/renderers/svelte/src/public-types.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.sveltecode/renderers/svelte/src/public-types.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (19)
code/renderers/svelte/src/__test__/composeStories/Button.stories.ts (1)
107-107: Type annotation improved for modern Svelte 5 component typing.This correctly changes from
StoryObj<CustomRenderComponent>toStoryObj<typeof CustomRenderComponent>, aligning with the modern Svelte 5 Component-based typing approach where component types are inferred usingtypeofrather than instance types.code/renderers/svelte/src/__test__/Decorator2.svelte (2)
2-8: Modern Svelte 5 prop handling pattern correctly implemented.This migration from exported props to typed internal props using
$props()is consistent with Svelte 5's modern component patterns. ThePropsinterface provides clear typing, and the destructuring assignment ensures type safety while maintaining the component's expected behavior.
13-13: Snippet rendering correctly replaces slot-based content.The change from
<slot />to{@render children()}properly utilizes Svelte 5's Snippet pattern for composable content, which is the modern approach for passing renderable content between components.code/renderers/svelte/src/__test__/composeStories/StoryWithLocaleComponent.svelte (2)
1-10: Props migration follows modern Svelte 5 patterns.The transition from exported props to internal typed destructuring via
$props()is correctly implemented. This approach provides better type safety and aligns with Svelte 5's component architecture where props are internally managed rather than exported.
15-15: Template syntax correctly updated for shorthand prop binding.The change from
<Button label={label} />to<Button {label} />uses Svelte's shorthand property binding syntax, which is cleaner and more idiomatic when the prop name matches the variable name.code/renderers/svelte/src/__test__/Button.svelte (2)
2-10: Component modernization with proper TypeScript typing.The refactor correctly implements the Svelte 5 pattern by:
- Moving from exported props to a typed
Propsinterface- Using
$props()for internal prop management- Adding proper TypeScript types including an optional callback for the
clickedprop- The comment accurately explains the dual typing approach needed for Svelte 5 function vs class components
13-13: Event handling correctly modernized from dispatch to direct callback.Replacing the dispatch-based event pattern with direct
onclick={clicked}binding is the appropriate modern Svelte 5 approach. This simplifies the event flow and improves type safety by making the callback explicit in the props interface.code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte (2)
1-8: Props modernization with proper typing.The migration from exported props to typed destructuring via
$props()is implemented correctly. The inline type annotation provides clear contracts for both themockFnfunction signature andloadedobject structure.
10-10: Reactive data computation correctly updated with$derived.Using
$derived(mockFn && loaded && mockFn('render'))is the appropriate Svelte 5 pattern for computed values that depend on props. This replaces the previous reactive statement approach and provides better performance and clearer dependencies.code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts (1)
4-4: Clean up unused Vitest import.Removing the unused
viimport is appropriate since the test doesn't use any mocking functionality. The remaining imports (afterEach,describe,expect,it) are sufficient for the test's requirements.Based on coding guidelines, note that while this file has a
.test.tsextension, the removal ofviimport appears intentional since no mocking is used in this particular test file.code/renderers/svelte/src/typings.d.ts (1)
5-8: Module typing correctly updated for Svelte 5 Component type.This change properly migrates from the deprecated
ComponentTypeto the modernComponenttype, which is the standard approach in Svelte 5. In Svelte 4, the common type is ComponentType, but in Svelte 5 it is Component. ComponentType is now obsolete because the new Component type is the component type already.code/renderers/svelte/src/__test__/Decorator.svelte (2)
2-8: Modern component prop pattern correctly implemented.The migration follows the same modernization pattern seen across other test components:
- Importing
Snippettype for renderable content- Defining a
Propsinterface with proper typing- Using
$props()destructuring for internal prop managementThis approach provides better type safety and aligns with Svelte 5's component architecture.
13-13: Snippet rendering pattern correctly applied.The replacement of
<slot />with{@render children()}properly implements Svelte 5's Snippet-based content composition, which is more explicit and type-safe than the previous slot-based approach.code/renderers/svelte/src/public-types.test.ts (2)
2-2: LGTM: Switch to Vitest’s typed assertionsImporting
expectTypeOffromvitestand usingtoExtendaligns with current best practices.
20-24: LGTM: Helper type aligns with newSvelteRenderer<Comp>shape
SvelteStorycorrectly threads the component throughSvelteRenderer<Comp>.code/renderers/svelte/src/public-types.ts (3)
27-31: LGTM:Metasimplified to modernComponentClean conditional on
Component<infer Props>removes legacy unions and keeps props inference accurate.
37-41: LGTM:StoryFnconditional matches new component typingUsing
AnnotatedStoryFn<SvelteRenderer, Props>keeps the function shape consistent with the renderer.
47-65: LGTM:StoryObjinference overcomponentandargsCorrectly infers args via
ComponentProps<Comp>andArgsFromMeta, and threadsSvelteRenderer<Comp>.code/renderers/svelte/src/types.ts (1)
25-33: LGTM:SvelteStoryResultupdated toComponent-based surfaceUsing
Component<Props, Exports, Bindings>for bothComponentanddecoratoraligns with Svelte 5 patterns.
code/renderers/svelte/src/__test__/composeStories/CustomRenderComponent.svelte
Outdated
Show resolved
Hide resolved
…Component.svelte Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…com/xeho91/storybook into feat/refactor-svelte-renderer-types
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/renderers/svelte/src/public-types.test.ts (1)
20-24: Avoid shadowing imported Args; also remove unnecessary anys.Rename generic params and constrain Comp to Component without arity to reduce noise and shadowing.
Apply this diff:
-type SvelteStory<Comp extends Component<any, any, any>, Args, RequiredArgs> = StoryAnnotations< - SvelteRenderer<Comp>, - Args, - RequiredArgs ->; +type SvelteStory<Comp extends Component, TArgs, TRequiredArgs> = StoryAnnotations< + SvelteRenderer<Comp>, + TArgs, + TRequiredArgs +>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (1)
code/renderers/svelte/src/public-types.test.ts(9 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/svelte/src/public-types.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/svelte/src/public-types.test.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Adhere to ESLint and Prettier rules across all JS/TS source files
Files:
code/renderers/svelte/src/public-types.test.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode
Files:
code/renderers/svelte/src/public-types.test.ts
🧠 Learnings (2)
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/svelte/src/public-types.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/renderers/svelte/src/public-types.test.ts
🧬 Code graph analysis (1)
code/renderers/svelte/src/public-types.test.ts (1)
code/core/src/csf/csf-factories.ts (1)
Meta(77-96)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (13)
code/renderers/svelte/src/public-types.test.ts (13)
12-12: Modern Svelte typings import is correct.Component/ComponentProps from svelte aligns with the new unified types.
28-38: Meta and explicit SvelteRenderer checks are correct.The typeof usage in type positions and the toExtend assertions align with the new API.
47-49: Using default SvelteRenderer generic here is fine.This keeps the test focused on props-as-generic for Meta.
55-67: satisfies + Meta + SvelteStory expectation reads correctly.Type inference and RequiredArgs shape look right.
71-94: Combined meta/story args constraints are asserted correctly.The negative case and subsequent Expected type are accurate.
103-108: Props-based Meta variant expectation is consistent.Matches the required full-args shape.
112-118: StoryObj extends SvelteStory<typeof Button,…> is correct.Confirms component-as-generic usage is valid.
126-145: Render-widened args inference looks good.ComponentProps with additional theme discriminant resolves as expected.
156-172: Decorator-widened args inference is correct.Decorator param surfaces in RequiredArgs as intended.
175-201: Multiple decorators inference validated.Both decorator args are required and reflected properly.
205-212: Resolved: use typeof Button in type positions.The previous issue is fixed; StoryObj and the final assertion are now correct.
215-224: Args-only StoryObj variants compile as intended.Confirms overloaded generic usage.
2-2: Remove leftoverexpect-typeimports andtoMatchTypeOfusages across test files, replacing them with Vitest’s built-inexpectTypeOfassertions.⛔ Skipped due to learnings
Learnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original functionLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test casesLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.197Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviorsLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocksLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocksLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.197Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focusedLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.197Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()Learnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject usesLearnt from: CR PR: storybookjs/storybook#0 File: .cursorrules:0-0 Timestamp: 2025-09-17T08:11:04.287Z Learning: Applies to code/**/*.{test,spec}.{ts,tsx} : Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsxLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.197Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks togetherLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest testsLearnt from: CR PR: storybookjs/storybook#0 File: .cursor/rules/spy-mocking.mdc:0-0 Timestamp: 2025-09-17T08:11:47.196Z Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
2 participants
What I did
Clean up types inside the
/code/renderers/svelte:Componentupdate tests for
/code/renderers/svelte/public-types.tsremoved dependency
expect-typewhich is bundled into Vitestreplace deprecated
toMatchTypeOfwithtoExtendin testsremove type tests related to Events (Svelte 5 components no longer needs those types, because they were related to
legacy
on:<event-name>directive)Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Summary by CodeRabbit