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

Addon-docs: Add dynamic snippet support for Svelte #13653

Merged
merged 1 commit into from
Jan 22, 2021

Conversation

j3rem1e
Copy link
Contributor

@j3rem1e j3rem1e commented Jan 15, 2021

Issue: none

What I did

This PR implements the dynamic snippet feature with Svelte.

It supports "wrapper" components, used in storybook to test slots :

  • A component can be annoted with @wrapper to be declared as a wrapper : in this case, the source generated will not reference the wrapper but the real component used by the wrapper
  • A wrapper can annotate a property with @slot to be used as an alias to the default slot

The svelte kitchen sink has been updated to use this feature.

How to test

  • Is this testable with Jest or Chromatic screenshots? Done
  • Does this need a new example in the kitchen sink apps? Done
  • Does this need an update to the documentation? I don't think

If your answer is yes to any of these, please make sure to include it in your PR.

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

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

I'm seeing some funny behavior in the svelte-kitchen-sink; can you check?

Button_-_Rounded_⋅_Storybook

Not sure where the text is coming from.

I'm also seeing some story rendering issues where clicking around sometimes stories don't render at all. It's also showing up in next so I don't think it's at all related to this PR. But I thought I'd bring it up just in case you can take a look:

Button_-_Square_⋅_Storybook

@shilman shilman added this to the 6.2 docs milestone Jan 20, 2021
@j3rem1e
Copy link
Contributor Author

j3rem1e commented Jan 20, 2021

I have created another issue/PR for the rendering of the stories. It's unrelated of this PR, I see it on my own instance with the latest released version.

#13662 : the bug can be story duplicated, or not rendered, or rendered in the wrong preview canvas

@j3rem1e
Copy link
Contributor Author

j3rem1e commented Jan 20, 2021

The 'Squared text' come from here: https://github.com/storybookjs/storybook/blob/next/examples/svelte-kitchen-sink/src/stories/button.stories.js

It's not related to this PR, this property doesn't exist on the ButtonView component so it's not rendered. However you can see it now in the generated code.

I'll try to improve this story.

@j3rem1e j3rem1e force-pushed the svelte-dyn-snippets branch from aee6916 to 4e18a8f Compare January 20, 2021 16:34
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

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

💥 great job @j3rem1e 💥

@shilman shilman changed the title Svelte: Implements dynamic snippet Addon-docs: Add dynamic snippet support for Svelte Args stories Jan 22, 2021
@shilman shilman changed the title Addon-docs: Add dynamic snippet support for Svelte Args stories Addon-docs: Add dynamic snippet support for Svelte Jan 22, 2021
@shilman shilman merged commit eac8b75 into storybookjs:next Jan 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants