Description
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:
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.