Storybook: Configure TypeScript project references.#74835
Closed
t-hamano wants to merge 3 commits into
Closed
Conversation
github-actions
Bot
added
[Package] Components
t-hamano
force-pushed
the
storybook-component-name-fix
branch
from
1d72096 to
db69594
Compare
t-hamano
commented
Jan 22, 2026
| "storybook": "^10.1.11", | ||
| "storybook-addon-tag-badges": "^3.0.4", | ||
| "terser": "^5.37.0" | ||
| "terser": "5.32.0" |
Contributor
Author
There was a problem hiding this comment.
I just ran npm install terser --save-dev --workspace @wordpress/storybook, but I’m not sure which version is actually appropriate 🤔
Member
There was a problem hiding this comment.
I think let us use ^, i.e. simply revert this change. Or does that cause any issue?
t-hamano
added
[Type] Code Quality
t-hamano
changed the title
|
Size Change: -754 B (-0.02%) Total Size: 3.09 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 6e45c6f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21238894465
|
t-hamano
changed the title
t-hamano
commented
Jan 22, 2026
t-hamano
force-pushed
the
storybook-component-name-fix
branch
from
8a09ec5 to
6e45c6f
Compare
t-hamano
requested review from
ajitbohra,
ellatrix,
nerrad,
ntwb and
tellthemachines
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| return <BlockControlsFill group="inline" { ...props } />; | ||
| }; | ||
| BlockFormatControls.Slot = function Slot( props ) { | ||
| BlockFormatControls.Slot = ( props ) => { |
Member
There was a problem hiding this comment.
We don't need to revert any of these changes. These are still useful when debugging components in React dev tools. So, I think we can keep these changes.
| * For consistency, options should generally match the options used in Storybook. | ||
| * @type {import('react-docgen-typescript').ParserOptions} | ||
| */ | ||
| // For consistency, options should generally match the options used in Storybook. |
Comment on lines
-434
to
-446
| { | ||
| files: [ | ||
| 'packages/block-editor/src/**', | ||
| 'packages/components/src/**', | ||
| 'packages/dataviews/src/**', | ||
| 'packages/ui/src/**', | ||
| ], | ||
| excludedFiles: [ '**/@(test|stories)/**', '*.native.*' ], | ||
| rules: { | ||
| // Enforce display names for easier debugging and better storybook integration. | ||
| 'react/display-name': 'error', | ||
| }, | ||
| }, |
Member
There was a problem hiding this comment.
As I said in the other comment, this is till useful for React dev tools debugging. This is the reason the ESLint rule exists.
Comment on lines
+10
to
+20
| "references": [ | ||
| { "path": "../packages/components" }, | ||
| { "path": "../packages/block-editor" }, | ||
| { "path": "../packages/icons" }, | ||
| { "path": "../packages/dataviews" }, | ||
| { "path": "../packages/fields" }, | ||
| { "path": "../packages/image-cropper" }, | ||
| { "path": "../packages/media-fields" }, | ||
| { "path": "../packages/theme" }, | ||
| { "path": "../packages/ui" } | ||
| ] |
Member
There was a problem hiding this comment.
Oh! perfect timing. The workspace was not checked for type errors. Thus, I created #74887.
Member
There was a problem hiding this comment.
Should we first ship #74887 to ensure these don't cause TS issues? Right now, the workspace is not checked for TS errors.
Contributor
Author
There was a problem hiding this comment.
I'm a bit confused. I think this PR will ultimately just add references to Storybook and not solve anything, so I'm wondering if it's worth moving forward with this PR 🤔
Member
manzoorwanijk
left a comment
manzoorwanijk
left a comment
There was a problem hiding this comment.
Let us revert the changes to the components themselves, keeping only the config changes here. Those named function declarations and displayName are still useful for debugging components in React Dev tools.
t-hamano
force-pushed
the
storybook-component-name-fix
branch
from
6e45c6f to
c5c7abf
Compare
t-hamano
changed the title
Contributor
Author
|
@manzoorwanijk Thanks for the review! I’ve updated this PR to include only the minimum necessary changes. |
SirLouen
reviewed
Jan 25, 2026
Member
SirLouen
left a comment
SirLouen
left a comment
There was a problem hiding this comment.
If we are adding these references, wouldn't be better to simply convert the workspace to composite: true instead of noEmit?
Member
That means TS will create build output which we don’t want because Storybook handles its own build output. |
This reverts commit c5c7abf.
Contributor
|
I'm slightly confused about the current state of things and what this PR achieves. What problems exactly is this PR trying to fix? |
Contributor
Author
|
I submitted this PR as a result of this discussion: https://wordpress.slack.com/archives/C02QB2JS7/p1768612969553299 The initial goal of this PR was to revert #74716, which added As you say, this PR does nothing in the end 😅 See #74835 (comment) |
Contributor
|
Got it, thank you! Do you think there is still value in applying those changes, or should we close it? |
Contributor
Author
|
Let's close this for now. @manzoorwanijk, feel free to open this PR if it's worth moving forward with. |
Member
My understanding is that it shouldn't be (and wasn't) necessary to assign explicit display names on components that are already named (L106) like this: gutenberg/packages/components/src/angle-picker-control/index.tsx Lines 106 to 107 in 05718a9 So if there's a way to make that work again without the explicit (redundant) display name assignments, I think that would be meaningful. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Attempts to get the source panel to display properly without using
displayName.Why?
I found that one of the reasons why component names are not displayed correctly is #74640. This might be because the execution directory has changed as a result of the storybook being converted into a package.
How?
referencesfield intsconfig.json.terseras before to fix incorrect callback functions likeonChange={function FAe(){}}.Additionally, the important changes in this PR are as follows. The other differences are due to the reversion of #74716.storybook/main.tsstorybook/tsconfig.jsonstorybook/package.jsonTesting Instructions
Test in both development and production builds:
npm run storybook:devNODE_OPTIONS=--max-old-space-size=8192 npm run storybook:build && npx serve ./storybook/buildMake sure:
onChange={() => {}}, notonChange={function FAe(){}}). See components: AdddisplayNameto the anonymous components #74716 (review)