Skip to content

Cannot consistently decorate story source #12410

Closed as not planned
Closed as not planned
@tbuteler

Description

@tbuteler

Describe the bug

I'm trying to write a simple set of HTML stories in with Storybook Vue. Since I need to add backticks to the templates of each story, the "Story" source panel will parse the code snippet with those backticks, which is undesired (and invalidates highlighting). I figured I could easily remove those backticks from the source, but I've found no consistent way of doing this outside of the docs addon.

I've tried using a custom decorator, but however I modify the story, the source panel is still using the original, undecorated source.

This is the story in the MDX file:

<Canvas>
    <Story name="Group">{`
<div class="btnGroup">
    <button type="button" class="btn btn--primary">
    Confirm
    </button>
    <button type="button" class="btn btn--secondaryAlt">
        Cancel
    </button>
</div>
    `}</Story>
</Canvas>

This is the resulting source panel:

Screenshot 2020-09-08 at 06 45 47

Expected behavior

I want source snippets trimmed of backticks. I would've expected the content of the "Story" source panel to allow decorators to modify its content. Alternatively, a tranformSource filter would be preferable (and perhaps more consistent with other parts of Storybook).

Code snippets

This works like a charm, but it's only applicable to Docs pages:

// .storybook/preview.js

export const parameters = {
    docs: {
        transformSource (source, storyId) {
            return source.replace(/^\s*`\s*((.|\s)*)\s*`\s*$/gm, '$1')
        }
    }
}

I've tried using a global decorator, to no avail. It runs every time the story is rendered, sure, but the source panel doesn't respect any transformations:

// .storybook/preview.js

export const decorators = [
    makeDecorator({
        // ...
        wrapper: (storyFn, context, { parameters }) => {
            context.parameters.storySource.source = context.parameters.storySource.source
                .replace(/^\s*`\s*((.|\s)*)\s*`\s*$/gm, '$1')

            return storyFn(context);
        }
    })
]

Strangely, the decorator will take effect on reload for the first-rendered story. Subsequent stories' sources are not decorated when focused.

Video of behavior

Kapture 2020-09-08 at 07 09 18

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions