Skip to content

[Bug] Code snippet generation is broken with Svelte 5.35.1 and up #320

@JReinhold

Description

@JReinhold

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:

Image

But now that the structure has changed, this transformation doesn't take place. This is from 5.35.1:

Image

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

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

  1. Use the addon with Svelte v5.35.1 or above
  2. Open an auto docs view of a story
  3. Expand the "code" view of any of the displayed stories
  4. See the source snippet in there being very wrong, because it's based on wrong data

Metadata

Metadata

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions