Add TypeScript config and package.json for widgets/#78213
Closed
retrofox wants to merge 7 commits into
Closed
Conversation
extends tsconfig.base.json and registers the project in root references so widget sources are type-checked.
declares clsx and @wordpress/* deps so the widget sources satisfy import/no-extraneous-dependencies.
|
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. |
bugs, homepage, keywords, publishConfig, repository fields required by package.json lint rules.
makes JSX.IntrinsicElements globally available so widgets with bare JSX (no @wordpress/* imports) type-check.
|
Size Change: 0 B Total Size: 7.95 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 2c03ad2. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25761846525
|
This was referenced May 13, 2026
simison
reviewed
May 14, 2026
| @@ -0,0 +1,37 @@ | |||
| { | |||
| "name": "@wordpress/widgets-app", | |||
Member
There was a problem hiding this comment.
I found it surprising that we need package.json at the root of widgets. How do we solve this for the /routes top-level folder?
Member
There was a problem hiding this comment.
Thinking further; perhaps each widget should have its own package.json?
Contributor
Author
There was a problem hiding this comment.
Yes, I thought of that as well.
Member
|
Pinging @youknowriad for thoughts on overall architecture. Adding entry to |
Contributor
Author
|
Closed in favor of #78463. Probably we'd like to address the TS config, but let's do it in a follow-up. |
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
2 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?
widgets/tsconfig.jsonas an umbrella project for everything underwidgets/<name>/.widgets/package.jsondeclaring the deps widget sources import.widgetsin the roottsconfig.jsonreferences list.Part of #77616
Why?
widgets/had no TypeScript project of its own and nopackage.json, which caused two unrelated problems:widgets/<name>/weren't covered by any project in the root references, so the editor fell back to an inferred project.@wordpress/*imports,*.module.cssimports, JSX, andReact.CSSPropertiesall surfaced as red squiggles in the IDE even though the runtime code was correct.import/no-extraneous-dependenciesresolves against the nearestpackage.json. Without one insidewidgets/, it landed at the rootpackage.json, which doesn't listclsx,@wordpress/data,@wordpress/ui, etc., so every external import in a widget triggered the rule.The repo already uses project references for every
packages/<name>/and for top-level workspaces likestorybook/. Widgets were the only branch of the tree without that scaffolding.How?
widgets/tsconfig.jsonextends:tsconfig.base.json.rootDir: "."andinclude: [ "**/*.ts", "**/*.tsx" ]since widgets live directly underwidgets/<name>/, not under asrc/subdir.exclude:**/test/**,**/build/**,**/build-types/**to avoid re-reading the emitted.d.tsfiles as input on incremental builds.types:[ "style-imports", "react-css-custom-properties" ]for CSS module imports and CSS custom property typing.references: the@wordpress/*packages the widgets actually import (core-data,data,dataviews,date,element,html-entities,i18n,icons,ui).widgets/package.jsonprivate: true, never published. Mirrors the shape ofstorybook/package.json.dependencieslistsclsxplus the@wordpress/*packages referenced from widget sources, usingfile:../packages/<name>for workspace packages.workspacesarray on purpose: the listed deps are already hoisted viapackages/ui,packages/components, etc. The file exists only so ESLint and TypeScript can find a project boundary for widget files. If a widget eventually imports a new@wordpress/*package, it needs to be added here and inwidgets/tsconfig.json.Root
tsconfig.json{ "path": "widgets" }at the end of thereferencesarray.Testing
npx tsc --build widgetsruns to completion against the widget umbrella (the only errors reported are pre-existing ones inpackages/preferencesandpackages/core-data, unrelated to this change).npx eslint widgets/<any>/*.tsxno longer flagsclsx/@wordpress/*imports as extraneous.widgets/<name>/*.tsxin the IDE —@wordpress/*imports,*.module.cssimports, and JSX all resolve.Dependency notes
Foundational. Independent of:
presentationhint)Consumed downstream by the On This Day widget (PR TBD), which is the
first widget under
widgets/<name>/that exercises this scaffoldingend-to-end.
Follow-ups
widgets/tsconfig.jsonreferences andwidgets/package.jsondependencies.