WordPress · gziolo · Nov 11, 2021 · Nov 5, 2021 · Nov 8, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -169,7 +169,7 @@
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.23.4",
 		"execa": "4.0.2",
-		"fast-glob": "2.2.7",
+		"fast-glob": "3.2.7",
 		"glob": "7.1.2",
 		"husky": "7.0.0",
 		"inquirer": "7.1.0",

@@ -36,7 +36,7 @@
 		"check-node-version": "^4.1.0",
 		"commander": "^4.1.0",
 		"execa": "^4.0.2",
-		"fast-glob": "^2.2.7",
+		"fast-glob": "^3.2.7",
 		"inquirer": "^7.1.0",
 		"lodash": "^4.17.21",
 		"make-dir": "^3.0.0",

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   Improve support for test files with `.jsx` and `.tsx` extensions ([#36260](https://github.com/WordPress/gutenberg/pull/36260)).
+
 ## 7.1.2 (2021-10-22)
 
 ### Bug Fix

@@ -31,7 +31,7 @@ npm install @wordpress/jest-preset-default --save-dev
 -   `setupFiles` - runs code before each test which sets up global variables required in the testing environment.
 -   `setupFilesAfterEnv` - runs code which adds improved support for `Console` object and `React` components to the testing framework before each test.
 -   `snapshotSerializers` - makes it possible to use snapshot tests on `Enzyme` wrappers.
--   `testMatch`- includes `/test/` subfolder in addition to the glob patterns Jest uses to detect test files. It detects only test files containing `.js` (or `.ts`) suffix. It doesn't match files with `.spec.js` suffix.
+-   `testMatch`- includes `/test/` subfolder in addition to the glob patterns Jest uses to detect test files. It detects only test files containing `.js`, `.jsx`, `.ts` and `.tsx` suffix. It doesn't match files with `.spec.js` suffix.
 -   `timers` - use of [fake timers](https://jestjs.io/docs/en/timer-mocks.html) for functions such as `setTimeout` is enabled.
 -   `transform` - keeps the default [babel-jest](https://github.com/facebook/jest/tree/HEAD/packages/babel-jest) transformer.
 -   `verbose` - each individual test won't be reported during the run.

@@ -17,13 +17,13 @@ module.exports = {
 	],
 	snapshotSerializers: [ require.resolve( 'enzyme-to-json/serializer.js' ) ],
 	testMatch: [
-		'**/__tests__/**/*.[jt]s',
-		'**/test/*.[jt]s',
-		'**/?(*.)test.[jt]s',
+		'**/__tests__/**/*.[jt]s?(x)',
+		'**/test/*.[jt]s?(x)',
+		'**/?(*.)test.[jt]s?(x)',
 	],
 	testPathIgnorePatterns: [ '/node_modules/', '<rootDir>/vendor/' ],
 	timers: 'fake',
 	transform: {
-		'^.+\\.[jt]sx?$': require.resolve( 'babel-jest' ),
+		'\\.[jt]sx?$': require.resolve( 'babel-jest' ),
 	},
 };
@@ -14,6 +14,10 @@
 
 -   The webpack config was updated to no longer include the polyfill by default when creating the `assets.php` file. If your usage requires the `wp-polyfill`, you must explicitly set it as a dependency ([#34536](https://github.com/WordPress/gutenberg/pull/35436)].
 
+### New Features
+
+-   Add basic support for TypeScript in `build`, `start`, `test-e2e` and `test-unit-js` commands ([#36260](https://github.com/WordPress/gutenberg/pull/36260)).
+
 ### Enhancements
 
 -   Allow customization of the `ARTIFACTS_PATH` in the `jest-environment-puppeteer` failed test reporter via the `WP_ARTIFACTS_PATH` environment variable ([#35371](https://github.com/WordPress/gutenberg/pull/35371)).

@@ -58,7 +58,7 @@ We commit to keeping the breaking changes minimal so you can upgrade `@wordpress
 
 ### `build`
 
-Transforms your code according the configuration provided so it’s ready for production and optimized for the best performance. The entry point for your project’s code should be located in `src/index.js`. The output generated will be written to `build/index.js`. This script exits after producing a single build. For incremental builds, better suited for development, see the [start](#start) script.
+Transforms your code according the configuration provided so it’s ready for production and optimized for the best performance. The entry point for your project’s code should be located in `src/index.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`). The output generated will be written to `build/index.js`. This script exits after producing a single build. For incremental builds, better suited for development, see the [start](#start) script.
 
 _Example:_
 
@@ -154,7 +154,7 @@ By default, files located in `build`, `node_modules`, and `vendor` folders are i
 
 ### `lint-js`
 
-Helps enforce coding style guidelines for your JavaScript files.
+Helps enforce coding style guidelines for your JavaScript and TypeScript files.
 
 _Example:_
 
@@ -169,8 +169,8 @@ _Example:_
 
 This is how you execute the script with presented setup:
 
--   `npm run lint:js` - lints JavaScript files in the entire project’s directories.
--   `npm run lint:js:src` - lints JavaScript files in the project’s `src` subfolder’s directories.
+-   `npm run lint:js` - lints JavaScript and TypeScript files in the entire project’s directories.
+-   `npm run lint:js:src` - lints JavaScript and TypeScript files in the project’s `src` subfolder’s directories.
 
 When you run commands similar to the `npm run lint:js:src` example above, you can provide a file, a directory, or `glob` syntax or any combination of them. See [more examples](https://eslint.org/docs/user-guide/command-line-interface).
 
@@ -305,7 +305,7 @@ The command checks which packages whose name starts with `@wordpress/` are used
 
 ### `start`
 
-Transforms your code according the configuration provided so it’s ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. The entry point for your project’s code should be located in `src/index.js`. The output generated will be written to `build/index.js`. For single builds, better suited for production, see the [build](#build) script.
+Transforms your code according the configuration provided so it’s ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. The entry point for your project’s code should be located in `src/index.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`). The output generated will be written to `build/index.js`. For single builds, better suited for production, see the [build](#build) script.
 
 _Example:_
 
@@ -364,8 +364,8 @@ This is how you execute those scripts using the presented setup:
 
 Jest will look for test files with any of the following popular naming conventions:
 
--   Files with `.js` (or `.ts`) suffix at any level of depth in `spec` folders.
--   Files with `.spec.js` (or `.spec.ts`) suffix.
+-   Files with `.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`) suffix at any level of depth in `spec` folders.
+-   Files with `.spec.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`) suffix.
 
 This script automatically detects the best config to start Puppeteer but sometimes you may need to specify custom options:
 
@@ -417,9 +417,9 @@ This is how you execute those scripts using the presented setup:
 
 Jest will look for test files with any of the following popular naming conventions:
 
--   Files with `.js` (or `.ts`) suffix located at any level of depth in `__tests__` folders.
--   Files with `.js` (or `.ts`) suffix directly located in `test` folders.
--   Files with `.test.js` (or `.test.ts`) suffix.
+-   Files with `.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`) suffix located at any level of depth in `__tests__` folders.
+-   Files with `.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`) suffix directly located in `test` folders.
+-   Files with `.test.js` (other supported extensions: `.jsx`, `.ts`, and `.tsx`) suffix.
 
 #### Advanced information
 
@@ -498,7 +498,7 @@ The `build` and `start` commands use [webpack](https://webpack.js.org/) behind t
 -   [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js`
 -   [Output](https://webpack.js.org/configuration/output): `build/index.js`
 -   [Loaders](https://webpack.js.org/loaders/):
-    -   [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) allows transpiling JavaScript files using Babel and webpack.
+    -   [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) allows transpiling JavaScript and TypeScript files using Babel and webpack.
     -   [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) and [`url-loader`](https://webpack.js.org/loaders/url-loader/) makes it possible to handle SVG files in JavaScript code.
     -   [`css-loader`](https://webpack.js.org/loaders/css-loader/) chained with [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) and [sass-loader](https://webpack.js.org/loaders/sass-loader/) let webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 -   [Plugins](https://webpack.js.org/configuration/plugins) (among others):

@@ -21,15 +21,15 @@ const jestE2EConfig = {
 	],
 	setupFilesAfterEnv: [ 'expect-puppeteer' ],
 	testEnvironment: path.join( __dirname, 'jest-environment-puppeteer' ),
-	testMatch: [ '**/specs/**/*.[jt]s', '**/?(*.)spec.[jt]s' ],
+	testMatch: [ '**/specs/**/*.[jt]s?(x)', '**/?(*.)spec.[jt]s?(x)' ],
 	testPathIgnorePatterns: [ '/node_modules/' ],
 	testRunner: 'jest-circus/runner',
 	testTimeout: 30000,
 };
 
 if ( ! hasBabelConfig() ) {
 	jestE2EConfig.transform = {
-		'^.+\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
+		'\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
 	};
 }
 

@@ -19,7 +19,7 @@ const jestUnitConfig = {
 
 if ( ! hasBabelConfig() ) {
 	jestUnitConfig.transform = {
-		'^.+\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
+		'\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ),
 	};
 }
 

@@ -7,7 +7,7 @@ const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const browserslist = require( 'browserslist' );
-const fs = require( 'fs' );
+const { sync: glob } = require( 'fast-glob' );
 const path = require( 'path' );
 
 /**
@@ -36,17 +36,14 @@ let entry = {};
 if ( process.env.WP_ENTRY ) {
 	entry = JSON.parse( process.env.WP_ENTRY );
 } else {
-	// By default the script checks if `src/index.js` exists and sets it as an entry point.
-	// In the future we should add similar handling for `src/script.js` and `src/view.js`.
-	[ 'index' ].forEach( ( entryName ) => {
-		const filepath = path.resolve(
-			process.cwd(),
-			'src',
-			`${ entryName }.js`
-		);
-		if ( fs.existsSync( filepath ) ) {
-			entry[ entryName ] = filepath;
-		}
+	// The script checks whether standard file names can be detected in the `src` folder,
+	// and converts all found files to entry points.
+	const entryFiles = glob( 'src/index.[jt]s?(x)', {
+		absolute: true,
+	} );
+	entryFiles.forEach( ( filepath ) => {
+		const [ entryName ] = path.basename( filepath ).split( '.' );
+		entry[ entryName ] = filepath;
 	} );
 }
 
@@ -115,6 +112,7 @@ const config = {
 		alias: {
 			'lodash-es': 'lodash',
 		},
+		extensions: [ '.ts', '.tsx', '...' ],
 	},
 	optimization: {
 		// Only concatenate modules in production, when not analyzing bundles.
@@ -155,7 +153,7 @@ const config = {
 	module: {
 		rules: [
 			{
-				test: /\.jsx?$/,
+				test: /\.(j|t)sx?$/,
 				exclude: /node_modules/,
 				use: [
 					{
@@ -200,7 +198,7 @@ const config = {
 			},
 			{
 				test: /\.svg$/,
-				issuer: /\.jsx?$/,
+				issuer: /\.(j|t)sx?$/,
 				use: [ '@svgr/webpack', 'url-loader' ],
 				type: 'javascript/auto',
 			},
@@ -259,7 +257,7 @@ if ( ! isProduction ) {
 	// See: https://webpack.js.org/configuration/devtool/#devtool.
 	config.devtool = process.env.WP_DEVTOOL || 'source-map';
 	config.module.rules.unshift( {
-		test: /\.js$/,
+		test: /\.(j|t)sx?$/,
 		exclude: [ /node_modules/ ],
 		use: require.resolve( 'source-map-loader' ),
 		enforce: 'pre',

@@ -56,6 +56,7 @@
 		"eslint": "^7.17.0",
 		"eslint-plugin-markdown": "^2.2.0",
 		"expect-puppeteer": "^4.4.0",
+		"fast-glob": "^3.2.7",
 		"filenamify": "^4.2.0",
 		"jest": "^26.6.3",
 		"jest-circus": "^26.6.3",