Scripts: Add TypeScript for builds and tests

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

packages/create-block/package.json

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

packages/jest-preset-default/README.md

@@ -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.

packages/jest-preset-default/jest-preset.js

@@ -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' ),
 	},
 };

packages/scripts/config/jest-e2e.config.js

@@ -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' ),
 	};
 }
 

packages/scripts/config/jest-unit.config.js

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

packages/scripts/config/webpack.config.js

@@ -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',

packages/scripts/package.json

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