Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Resolve existing type issues #219

Merged
merged 23 commits into from
Nov 5, 2024
Merged

fix: Resolve existing type issues #219

merged 23 commits into from
Nov 5, 2024

Conversation

xeho91
Copy link
Collaborator

@xeho91 xeho91 commented Oct 23, 2024

Things to note

  • Removed first generic type parameter TOverrideArgs which was incomplete.
    I believe is better to focus on getting types to work correctly than adding a new incomplete feature - and we haven't got close on achieving it.
  • Used Cmp instead of CmpOrArgs as the base generic type parameter to simplify the type system in this addon project
  • use legacy syntax on tests and components related to legacy API
  • replace # imports (which uses map from pkg.imports) inside ./src/runtime/**/* - svelte2tsx doesn't support it (yet?) - ❤️ @paoloricciuti for detailed investigation
📦 Published PR as canary version: 4.1.8--canary.219.161a0fb.0

✨ Test out this PR locally via:

npm install @storybook/[email protected]
# or 
yarn add @storybook/[email protected]

Version

Published prerelease version: v5.0.0-next.11

Changelog

💥 Breaking Change

🚀 Enhancement

🐛 Bug Fix

  • fix: Resolve existing type issues #219 (@xeho91)
  • Upgrade version ranges - drop support for Svelte 5 prereleases #225 (@xeho91)
  • fix: parameters attribute from legacy <Story> being removed #224 (@xeho91)
  • Fix errors at enhanceRollupError in Vite #222 (@JReinhold)
  • refactor: Replace deprecated context="module" with module #217 (@xeho91)
  • fix(pre-transform): Move stories target component import declaration from instance to module tag #218 (@xeho91)
  • v5: Fix tags being ignored #206 (@JReinhold)
  • fix(parser): Resolve autodocs tag issue and extracting rawCode #201 (@xeho91)
  • Replace lodash usage with es-toolkit #192 (@JReinhold)
  • chore: use dist folder to load the files #185 (@benoitf)

⚠️ Pushed to next

  • fix typing issue in Example.stories.svelte (@xeho91)
  • remove obsolete test (@xeho91)

🏠 Internal

  • refactor: Improve AST-related types readability & fix existing issues #209 (@xeho91)

Authors: 4

@xeho91 xeho91 self-assigned this Oct 23, 2024
@xeho91 xeho91 added the patch Increment the patch version when merged label Oct 23, 2024
@xeho91
Copy link
Collaborator Author

xeho91 commented Oct 27, 2024

replace # imports (which uses map from pkg.imports) inside ./src/runtime/**/* - svelte2tsx doesn't support it (yet?) - ❤️ @paoloricciuti for detailed investigation

@paoloricciuti Should we create an issue on sveltejs/language-tools regarding this one?

@xeho91 xeho91 requested a review from JReinhold October 27, 2024 09:29
@xeho91 xeho91 marked this pull request as ready for review October 27, 2024 09:29
@paoloricciuti
Copy link
Contributor

replace # imports (which uses map from pkg.imports) inside ./src/runtime/**/* - svelte2tsx doesn't support it (yet?) - ❤️ @paoloricciuti for detailed investigation

@paoloricciuti Should we create an issue on sveltejs/language-tools regarding this one?

I'll investigate a bit better but from what I've seen the transformation is actually correct...the type is lost when TS emit the DTS.

@@ -19,7 +20,7 @@
component: Button,
tags: ['autodocs'],
args: {
children: 'Click me',
children: createRawSnippet(() => ({ render: () => 'Click me' })),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is a good example we want to document, and I don't think it's needed because of line 42 below?

If it's to satisfy types, then I think we should use type modifications instead like as.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing to:

- children: createRawSnippet(() => ({ render: () => 'Click me' })),
+ children: 'Click me' as Snippet,

will produce the error:

Conversion of type 'string' to type 'Snippet<[]>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. [2352]

So, the workaround is:

- children: 'Click me' as Snippet,
+ children: 'Click me' as unknown as Snippet,

Which is cumbersome. Shall we proceed with this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I provided another alternative, which can be reverted: 104d5e0

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait but do you want a snippet or a string? Because those are not interchangeable

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, we want a string here, because we convert it to a snippet down in the template below:

https://github.com/storybookjs/addon-svelte-csf/pull/219/files/6b646f1b2e9a44c8e52814b23ae2d71f93797b07#diff-27706a42acb167034a3d3aa2f621b4a43e00b1bd177c0e87c2028fad8e14b398R41-R43

This procedure ensures you can easily modify the arg as a string in the Control panel, while it still being passed as a snippet to the component.
But it's slightly cumbersome, and I haven't found a way yet to support this pretty common use case better yet - ideas welcome!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xeho91 your alternative looks cleaner, but now it doesn't allow you to modify it in Controls anymore though. but let's stick with it. 👍

Comment on lines +23 to +25
children: createRawSnippet(() => ({
render: () => 'Click me',
})),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same comment, this shouldn't be necessary

src/runtime/LegacyStory.svelte Outdated Show resolved Hide resolved
src/runtime/Story.svelte Outdated Show resolved Hide resolved
@xeho91 xeho91 requested a review from JReinhold October 31, 2024 10:47
Copy link
Collaborator

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still have comments, but I'm approving, and letting you decide if you want to act on them or not. 🙂

@xeho91 xeho91 linked an issue Nov 1, 2024 that may be closed by this pull request
@xeho91 xeho91 changed the title fix(types): Resolve existing type issues fix: Resolve existing type issues Nov 5, 2024
@xeho91 xeho91 merged commit 73be782 into next Nov 5, 2024
6 of 7 checks passed
@shilman
Copy link
Member

shilman commented Nov 5, 2024

🚀 PR was released in v5.0.0-next.11 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Increment the patch version when merged prerelease This change is available in a prerelease.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] Svelte 5: Optional children type error
4 participants