CSF: Support satisfies x as y syntax#32169
Conversation
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
|
View your CI Pipeline Execution ↗ for commit 416cb00
☁️ Nx Cloud last updated this comment at |
satisfies x as y syntax
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
|
Commenting in case this goes stale. @yannbf all good here? |
|
Hey @diagramatics, thanks for your PR! I don't like complexifying CSF support in this way, but I understand the desire to make the use of the latest TS features. Also the CSF code that you're using is a bit of an eyesore!!! I highly recommend taking a look at CSF Factories, released as experimental in 9.0 and going "preview" in 10.0 next month. If that works for you and eliminates the need for this PR, I'll close this. But if it's too fresh or you have some other constraints, I can begrudgingly merge this to get you unblocked. Thanks for your patience!! |
|
Thanks @shilman! Yeah CSF factories looks like it's going to be too fresh for us, especially coming out of migrating some really dynamic |
satisfies x as y syntaxsatisfies x as y syntax
|
@diagramatics Understood. Merging & will patch it back to 9.x to help unblock your efforts!! |
CSF: Support `satisfies x as y` syntax (cherry picked from commit 9eca72f)
What I did
We use
satisfies Meta as Metato enableisolatedDeclarationsin our TypeScript configs. Unfortunately satisfies is a "weak" operator that only exists to imply some additional typechecking. It does not change the type of the expression or imply some true relationship with the annotation. So TS cannot use the annotation for the module signature.csf-toolsdoesn't support this syntax, so this PR fixes it by checking forsatisfies..as.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
nextbranch and editcode/renderers/react/template/stories/decorators.stories.tsxto addsatisfies Meta<typeof Component> as Meta<typeof Component>in the default export.yarn starton root to spin up the test sandbox🚨 Unable to index ./src/stories/renderers/react/decorators.stories.tsx: NoMetaError: CSF: default export must be an objectyarn start. It should pass and parse the CSF correctly.Diff to edit the file below.
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam 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>Greptile Summary
This PR adds support for parsing the TypeScript
satisfies Meta as Metasyntax in Storybook's CSF (Component Story Format) tools. The change addresses a specific need for TypeScript'sisolatedDeclarationsfeature, which requires stronger type annotations for module signatures.The problem being solved is that the
satisfiesoperator alone is considered "weak" by TypeScript - it provides compile-time type checking but doesn't contribute to the module's type signature generation. To enableisolatedDeclarations, developers need to usesatisfies Meta as Meta, combining both type checking (satisfies) and explicit type assertion (as).The implementation extends the existing TypeScript AST parsing logic in
CsfFile.tsto handle the nested structureTSAsExpression(TSSatisfiesExpression(ObjectExpression)). The parser now recognizes this pattern in three key locations:export default { ... } satisfies Meta as Metaconst meta = { ... } satisfies Meta as MetaThe changes are minimal and focused, adding conditional branches to detect and unwrap the nested AST structure to extract the underlying object expression. Comprehensive test coverage has been added to verify the parser correctly handles all variations of the new syntax alongside existing patterns.
This enhancement ensures Storybook's CSF tools remain compatible with modern TypeScript features while maintaining backward compatibility with existing syntax patterns.
Confidence score: 4/5