fix(svelte-vite): Use compiled AST output as source of truth for getting component name #30369

xeho91 · 2025-01-24T05:31:29Z

What I did

I've replaced the previous implementation of getting the component name - which was copied from Svelte internals. It doesn't cover edge cases.

Now, it access the AST of compiled output of Svelte file. I believe this is a final source of truth to avoid naming collision with other identifiers. This function handles legacy and modern version of Svelte.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78 MB	78 MB	226 B	1.74	0%
initSize	131 MB	131 MB	-32.4 kB	0.98	0%
diffSize	53 MB	53 MB	-32.7 kB	0.2	-0.1%
buildSize	7.17 MB	7.18 MB	13.2 kB	29.88	0.2%
buildSbAddonsSize	1.85 MB	1.85 MB	-731 B	-4.88	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.87 MB	5.2 kB	869.09	0.3%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	4.46 kB	36.04	0.1%
buildPreviewSize	3.26 MB	3.27 MB	8.78 kB	25.14	0.3%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	17.1s	8.3s	-8s -818ms	-1.88	🔰-105.9%
generateTime	22.5s	20.5s	-1s -975ms	0.32	-9.6%
initTime	15.4s	13.2s	-2s -201ms	0.03	-16.6%
buildTime	10.6s	8.5s	-2s -126ms	-0.32	-24.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.8s	4.6s	-1s -275ms	-0.58	-27.7%
devManagerResponsive	4.4s	3.3s	-1s -149ms	-0.68	-34.4%
devManagerHeaderVisible	929ms	657ms	-272ms	-0.69	-41.4%
devManagerIndexVisible	995ms	673ms	-322ms	-0.94	-47.8%
devStoryVisibleUncached	4s	1.1s	-2s -960ms	-2.12	🔰-263.1%
devStoryVisible	1s	704ms	-318ms	-0.77	-45.2%
devAutodocsVisible	831ms	408ms	-423ms	-2.12	🔰-103.7%
devMDXVisible	675ms	510ms	-165ms	-1.28	🔰-32.4%
buildManagerHeaderVisible	849ms	625ms	-224ms	-0.53	-35.8%
buildManagerIndexVisible	879ms	736ms	-143ms	-0.48	-19.4%
buildStoryVisible	833ms	607ms	-226ms	-0.52	-37.2%
buildAutodocsVisible	653ms	428ms	-225ms	-0.41	-52.6%
buildMDXVisible	641ms	438ms	-203ms	-1.07	-46.3%

Greptile Summary

This PR updates the component name extraction logic in the Svelte docgen plugin to handle both Svelte 4 and 5 compatibility by using compiled AST output.

Added getComponentName function in code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts to extract names from compiled AST
Added IS_SVELTE_V4 flag in code/frameworks/svelte-vite/src/utils.ts to handle version-specific logic
Fixed component name extraction for files with special characters (e.g. +page.svelte)
Fixed reference errors when variables match component names in Svelte 5

_{💡 (4/5) You can add custom instructions or style guidelines for the bot here!}

greptile-apps

_{2 file(s) reviewed, 5 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts

code/frameworks/svelte-vite/src/utils.ts

code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts

xeho91 · 2025-01-24T05:34:00Z

@JReinhold

I wanted to write tests for this case, but given that the changes were applied to svelte-vite package directory, it doesn't have any tests. So, I am puzzled as to where to add.

And also a quick question. Should I make three separate errors inside getComponentName() or should it be one error extending the one from Storybook?

nx-cloud · 2025-01-24T05:36:27Z

View your CI Pipeline Execution ↗ for commit 04ab7b9.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 44s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-28 18:59:03 UTC

storybook-pr-benchmarking · 2025-02-03T14:31:05Z

Package Benchmarks

^{Commit: 04ab7b9, ran on 3 February 2025 at 14:31:03 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	17	17	0
Self size	2.26 MB	2.20 MB	🎉 -61 KB 🎉
Dependency size	7.92 MB	7.91 MB	🎉 -3 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	36	36	0
Self size	12 KB	12 KB	0 B
Dependency size	13.93 MB	13.87 MB	🎉 -65 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	54	54	0
Self size	19.05 MB	19.09 MB	🚨 +37 KB 🚨
Dependency size	14.44 MB	14.44 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	13	13	0
Self size	5 KB	6 KB	🚨 +743 B 🚨
Dependency size	1.31 MB	1.31 MB	🎉 -1 KB 🎉
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	55	55	0
Self size	22 KB	22 KB	0 B
Dependency size	33.49 MB	33.53 MB	🚨 +37 KB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	56	56	0
Self size	1 KB	1 KB	0 B
Dependency size	33.52 MB	33.55 MB	🚨 +37 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	388	388	0
Self size	503 KB	503 KB	🚨 +310 B 🚨
Dependency size	75.37 MB	75.40 MB	🚨 +31 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	277	277	0
Self size	617 KB	612 KB	🎉 -6 KB 🎉
Dependency size	65.45 MB	65.48 MB	🚨 +37 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	113	113	0
Self size	1.11 MB	1.11 MB	🚨 +463 B 🚨
Dependency size	42.63 MB	42.67 MB	🚨 +37 KB 🚨
Bundle Size Analyzer	Link	Link

initial soluton

db59b9a

greptile-apps bot reviewed Jan 24, 2025

View reviewed changes

JReinhold self-assigned this Jan 24, 2025

JReinhold added bug svelte sveltekit ci:normal labels Jan 24, 2025

xeho91 added 2 commits January 27, 2025 05:13

simplify

375762c

atttempt to fix type error

04ab7b9

valentinpalkovic added ci:normal and removed ci:normal labels Feb 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(svelte-vite): Use compiled AST output as source of truth for getting component name #30369

fix(svelte-vite): Use compiled AST output as source of truth for getting component name #30369

xeho91 commented Jan 24, 2025 •

edited by storybook-pr-benchmarking bot

Loading

greptile-apps bot left a comment

xeho91 commented Jan 24, 2025

nx-cloud bot commented Jan 24, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Feb 3, 2025

fix(svelte-vite): Use compiled AST output as source of truth for getting component name #30369

Are you sure you want to change the base?

fix(svelte-vite): Use compiled AST output as source of truth for getting component name #30369

Conversation

xeho91 commented Jan 24, 2025 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

xeho91 commented Jan 24, 2025

nx-cloud bot commented Jan 24, 2025 • edited Loading

storybook-pr-benchmarking bot commented Feb 3, 2025

Package Benchmarks

@storybook/addon-docs

@storybook/addon-essentials

@storybook/core

@storybook/preact-vite

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

xeho91 commented Jan 24, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 24, 2025 •

edited

Loading

`@storybook/addon-docs`

`@storybook/addon-essentials`

`@storybook/core`

`@storybook/preact-vite`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`