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

[xeho91]

Closes #29636
Closes #30212

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	77.9 MB	77.9 MB	0 B	2.69	0%
initSize	131 MB	131 MB	446 B	3.28	0%
diffSize	53 MB	53 MB	446 B	3.26	0%
buildSize	7.19 MB	7.19 MB	0 B	0.42	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	-0.42	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	0.42	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	0 B	0.42	0%
buildPreviewSize	3.28 MB	3.28 MB	0 B	0.42	0%
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	20.4s	23.2s	2.8s	1.37	🔺12.3%
generateTime	18.5s	20.5s	1.9s	-0.07	9.5%
initTime	12.4s	14.1s	1.6s	-0.23	11.9%
buildTime	10s	8.6s	-1s -347ms	-0.87	-15.5%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.6s	4.2s	-451ms	-1.6	🔰-10.6%
devManagerResponsive	3.3s	3.1s	-243ms	-1.67	🔰-7.8%
devManagerHeaderVisible	560ms	502ms	-58ms	-1.59	🔰-11.6%
devManagerIndexVisible	587ms	531ms	-56ms	-1.15	-10.5%
devStoryVisibleUncached	1.5s	1.7s	221ms	-0.46	12.6%
devStoryVisible	588ms	532ms	-56ms	-2.03	🔰-10.5%
devAutodocsVisible	523ms	488ms	-35ms	-0.41	-7.2%
devMDXVisible	490ms	439ms	-51ms	-1.13	-11.6%
buildManagerHeaderVisible	555ms	555ms	0ms	-0.21	0%
buildManagerIndexVisible	649ms	646ms	-3ms	-0.15	-0.5%
buildStoryVisible	545ms	546ms	1ms	-0.11	0.2%
buildAutodocsVisible	456ms	414ms	-42ms	-0.91	-10.1%
buildMDXVisible	450ms	389ms	-61ms	-1.26	🔰-15.7%

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}

[xeho91]

@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]

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