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

Chrico commented 1 year ago

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",
}

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:

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
Allow external packages/plugins/themes to load this config via package.json and extend it locally to share the same rules as Gutenberg.
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

gziolo commented 1 year ago

That’s a great idea. Thank you @Chrico for sharing it. For folks interested in working on it, I’m leaving the link to the document that explains the steps required to add a new npm package: https://github.com/WordPress/gutenberg/tree/trunk/packages#creating-a-new-package

https://www.typescriptlang.org/tsconfig#extends

https://github.com/tsconfig/bases

Those resources are very helpful. It looks like the name of the base config file doesn't matter. In addition, I see "tsconfig" used as a term in both places. Combining those two, what do you think about the following potential usage:

tsconfig.json:

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

AdarshRawat1 commented 1 year ago

@gziolo @Chrico I would like to work on this feature.

gziolo commented 1 year ago

@gziolo @Chrico I would like to work on this feature.

Awesome, just open PR and reference this issue whenever you are ready 😄

swissspidy commented 1 year ago

Update all Gutenberg packages to replace relative path packages:

What's the benefit of this? Relative paths are totally fine.

Allow external packages/plugins/themes to load this config via package.json and extend it locally to share the same rules as Gutenberg.

I don't really see external projects using the same tsconfig as Gutenberg as the config is really GB-specific. Just look at the excludes or typeRoots configs for example: https://github.com/WordPress/gutenberg/blob/c1f97cb90d17458a5a44a9be4e76c40f09558386/tsconfig.base.json

WordPress / gutenberg