-
Notifications
You must be signed in to change notification settings - Fork 35
Description
Describe the bug
In Svelte v5.35.1, sveltejs/svelte#16255 was introduced that made some changes to the compiled output of a Svelte component, that broke how we post-transform that output.
We try to inject additional props to the Story
component, that contains the raw source code, so that can be displayed at runtime. This transformation snapshot from Vite plugin inspect shows what's supposed to happen - it's from 5.35.0:
But now that the structure has changed, this transformation doesn't take place. This is from 5.35.1:
before:
Story(node_3, { name: 'With mainFontSize' });
after:
$.add_svelte_meta(() => Story(node_3, { name: 'With mainFontSize' });
We should find another way to add that "raw source code" information at runtime, relying as little as possible on the structure of the compiled Svelte component as possible, as that is understandably brittle.
The code that looks for that Story()
call is at
addon-svelte-csf/src/parser/extract/compiled/stories.ts
Lines 14 to 33 in 4e1a667
export async function extractStoriesNodesFromExportDefaultFn(params: Params) { | |
const { walk } = await import('zimmerframe'); | |
const { nodes } = params; | |
const { storiesFunctionDeclaration, storyIdentifier } = nodes; | |
const state: Result = []; | |
const visitors: Visitors<ESTreeAST.Node, typeof state> = { | |
CallExpression(node, context) { | |
const { state } = context; | |
if (node.callee.type === 'Identifier' && node.callee.name === storyIdentifier.name) { | |
state.push(node); | |
} | |
}, | |
}; | |
walk(storiesFunctionDeclaration.body, state, visitors); | |
return state; | |
} |
Potentially a shorter term solution is to modify that code to both work with pre and post v5.35.1.
Steps to reproduce the behavior
- Use the addon with Svelte v5.35.1 or above
- Open an auto docs view of a story
- Expand the "code" view of any of the displayed stories
- See the source snippet in there being very wrong, because it's based on wrong data