Storybook: Docs: web components API table has wrong default value

Created on 27 Jan 2020  路  8Comments  路  Source: storybookjs/storybook

Docs: web components API table has wrong default value
When using @storybook/addon-docs the prop table is not displaying the default value generated from custom-elements.json with [email protected].

To Reproduce

  1. Create new web component storybook project
  2. Create a web component that has a default value in one property
  3. Configure and add @storybook/addon-docs
  4. Generate a custom-elements.json file using [email protected]
  5. Go to the doc page of the web component
  6. See that "DEFAULT" column of the prop table is empty even when in custom-elements.json there is a default value.

Expected behavior
"DEFAULT" column of the prop table has the value specified in custom-elements.json.

Screenshots
Screenshot 2020-01-27 at 09 26 54

Code snippets
Component:

import { LitElement, html, property, customElement } from "lit-element";

@customElement("test-awesome")
export class AwesomeComponent extends LitElement {
    @property({ type: String }) name = "Awesome";

    render() {
        return html`${this.name}`;
    }
}

Additional context
After taking a quick look to the code in addons/docs/src/frameworks/web-components/config.js#L14 I can see that is looking for defaultValue but now it is called default in custom-elements.json. You can see an example of the new format here https://runem.github.io/web-component-analyzer/?format=json .
I guess as the format is experimental and it changed at some point 馃槗

Please, ping me if you need any more information.
I would be more than willing to provide a pull request to fix this problem 馃槃

docs web-components bug

All 8 comments

cc @daKmoR

jup that is the spot 馃憤

yes it is not that stable yet 馃檲

we could do default != undefined ? default : defaultValue to support both 馃

@daKmoR Your call -- you have the most context on what's going on in the WC community. Since we're on 6.0 now we can make breaking changes, and we should do that where we can. When in doubt move things forward. In subsequent releases we'll need to be careful about this kind of stuff as the spec changes, and support back compat until 7.0.

I created a pull request with the suggested fix from @daKmoR. I kept compatibility with defaultValue as maybe it makes sense to include this change for a future 5.X release (if there is any).

If no more 5.X releases are planned then it makes sense to just make the incompatible change and rely only in default.

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 containing PR #9655 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

I updated to 6.0.0-alpha.2 and it works as expected now! Thank you very much 馃槂

Thanks @telpalbrox! Will patch this into 5.3 in a few days too

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.10 containing PR #9655 that references this issue. Upgrade today to try it out!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aericson picture aericson  路  97Comments

maraisr picture maraisr  路  119Comments

43081j picture 43081j  路  61Comments

joeruello picture joeruello  路  79Comments

hansthinhle picture hansthinhle  路  57Comments