storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.86k stars 9.18k forks source link

custom-elements-manifest -> only "properties" are set when using iframe directly #19167

Open sonntag-philipp opened 1 year ago

sonntag-philipp commented 1 year ago

Describe the bug The slots, attributes and possibly other declaration types are not applied when the component is opened in the iframe directly.

To Reproduce The issue can be reproduced, but as I already spent much effort into debugging the issue I think an thorough explaination would help more.

My problem When creating a new slot or attribute, I am able to set its value in the Storybook directly via the table at the bottom. When opening the component directly in a standalone iframe, I'm not able to pass arguments down to the component via the route.

After a debug session, I came across this piece of code. Here, only the type of properties is set even though attributes, slots and other declarations also have decent type definitions.
If I manually set the type of my slot or attribute using the debugger, the value is correctly displayed.

I would really like to help by opening a PR and removing this issue, but it seems like this constraint for properties is useful for some applications. So I would like to discuss what change should be applied here.

System

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
  Binaries:
    Node: 16.16.0 - ~\AppData\Roaming\nodejs\node.EXE
    npm: 8.11.0 - ~\AppData\Roaming\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.27)
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/addons: ^6.5.9 => 6.5.9
    @storybook/builder-webpack5: ^6.5.10 => 6.5.10
    @storybook/core-common: ^6.5.0 => 6.5.9
    @storybook/csf-tools: ^6.5.0 => 6.5.9
    @storybook/manager-webpack5: ^6.5.10 => 6.5.10
    @storybook/store: ^6.5.0 => 6.5.9
    @storybook/test-runner: ^0.5.0 => 0.5.0
    @storybook/theming: ^6.5.9 => 6.5.9
    @storybook/web-components: ^6.5.9 => 6.5.9

Additional context

sonntag-philipp commented 1 year ago

@thepassle Sorry for the notification, but maybe you could help me understand why things were previously implemented this way.

thepassle commented 1 year ago

Not sure, most of that code already existed when I worked on it. Maybe you can improve it and add support for other things as well :)