You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
At least in the case of using @custom-elements-manifest/analyzer interpreting stencil components:
The members array documents all class members, whether they are exposed attributes/properties, internal methods, or otherwise. This line overwrites the attribute argTypes with members (categorized incorrectly(?) as properties), which creates controls for every field and method in the component, no matter what decorators are applied to the field (even "private", which is included in the manifest, is ignored here).
To Reproduce
The repro instructions don't work for this, because sb needs to be applied to an existing stencil project.
When connecting a stencil project to Storybook via a custom elements manifest like so:
import { defineCustomElements } from '../dist/esm/loader';
import { setCustomElementsManifest } from '@storybook/web-components';
import manifest from '../custom-elements.json';
defineCustomElements();
setCustomElementsManifest(manifest)
And the custom elements manifest is generated by @custom-elements-manifest/analyzer, we get all fields and functions, private/internal or not, added to the members array in addition to whatever other arrays apply-- most notably attributes, which is where exposed stencil attribute/properties (marked with @Prop() decorator) go.
Storybook then creates argTypes from attributes, then overwrites those with argTypes from members which includes everything. Then we have controls and docs for implementation details that are not exposed and should not be part of this documentation.
Storybook could just create controls from attributes and properties, but at the very least it should look for the private field to omit those from documentation.
I kind of addressed this here by filtering out private fields.
However, to prevent having to deliberately mark fields as private, I added a second option that adds the fields that members have that attributes do not, then deletes members.
Describe the bug
At least in the case of using
@custom-elements-manifest/analyzer
interpretingstencil
components:The
members
array documents all class members, whether they are exposed attributes/properties, internal methods, or otherwise. This line overwrites theattribute
argTypes withmembers
(categorized incorrectly(?) asproperties
), which creates controls for every field and method in the component, no matter what decorators are applied to the field (even "private", which is included in the manifest, is ignored here).Here is the line:
storybook/code/renderers/web-components/src/docs/custom-elements.ts
Line 149 in ea70649
See the problem description and images in the issue I sent to open-wc: open-wc/custom-elements-manifest#187
To Reproduce
The repro instructions don't work for this, because sb needs to be applied to an existing stencil project.
When connecting a stencil project to Storybook via a custom elements manifest like so:
And the custom elements manifest is generated by @custom-elements-manifest/analyzer, we get all fields and functions, private/internal or not, added to the
members
array in addition to whatever other arrays apply-- most notablyattributes
, which is where exposed stencil attribute/properties (marked with@Prop()
decorator) go.Storybook then creates
argTypes
fromattributes
, then overwrites those withargTypes
frommembers
which includes everything. Then we have controls and docs for implementation details that are not exposed and should not be part of this documentation.Storybook could just create controls from
attributes
andproperties
, but at the very least it should look for theprivate
field to omit those from documentation.Additional context
Found a related issue: #15436
The text was updated successfully, but these errors were encountered: