WordPress/gutenberg

Typescript - introduce new @wordpress/ts-config package for outside usage

Open

#48954 opened on Mar 9, 2023

View on GitHub
 (4 comments) (23 reactions) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Developer ExperienceGood First IssueNeeds Dev[Type] Enhancementnpm Packages

Description

What problem does this address?

Right now Gutenberg has ~30 @wordpress/*-packages which make use of the tsconfig.base.json by loading it via relative path:

{
	"extends": "../../tsconfig.base.json",
}

See also: https://github.com/search?q=repo%3AWordPress%2Fgutenberg+tsconfig.base.json+language%3A%22JSON+with+Comments%22&type=code&l=JSON+with+Comments

While all other technologies used in wordpress/scripts are having it's own package, Typescript in Gutenberg is still not at a stage where it can be even re-used from other Plugin/Theme/Package-Developers.

For example we have own packages for:

  • @wordpress/babel-preset-default
  • @wordpress/browserslist-config
  • @wordpress/eslint-plugin
  • @wordpress/jest-preset-default
  • @wordpress/npm-package-json-lint-config
  • @wordpress/postcss-plugins-preset
  • @wordpress/prettier-config
  • @wordpress/stylelint-config

What is your proposed solution?

I would suggest to introduce a new @wordpress/ts-config (or @wordpress/typescript-preset - naming is not consistent currently, it's either config, preset, default or plugin?!), which in first step contains the tsconfig.base.json.

This way we could achieve following:

  1. Update all Gutenberg packages to replace relative path packages: https://github.com/search?q=repo%3AWordPress%2Fgutenberg+tsconfig.base.json+language%3A%22JSON+with+Comments%22&type=code&l=JSON+with+Comments
  2. Allow external packages/plugins/themes to load this config via package.json and extend it locally to share the same rules as Gutenberg.
  3. Similar to the @wordpress/eslint-plugin we could also introduce later on recommended and strict variations.

tsconfig.json:

{
	"extends": "@wordpress/ts-config/tsconfig.base.json",
}

Links/Resources

Contributor guide

Tech stack
typescriptnodejs
Domain
developer experiencetoolingbuild system
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScript basicsnpm package creationWordPress Gutenberg structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The issue proposes creating a new @wordpress/ts config package to allow external reuse of Gutenberg's TypeScript configuration (tsconfig.base.json). First, examine the existing tsconfig.base.json file (likely in the root) to understand its contents. Then, review how similar packages like @wordpress/eslint plugin are structured, following the same pattern. The main task is to create the new package directory, add a package.json with appropriate fields, and expose the tsconfig.base.json file. Finally, update all ~30 @wordpress packages that currently extend tsconfig.base.json via a relative path to instead extend from the new package (e.g., "extends": "@wordpress/ts config/tsconfig.base.json"). The issue also mentions potential future variants like "recommended" and "strict" but those can be deferred.