Support for TypeScript sources in build scripts

WordPress · Feb 1, 2021 · d45668a · d45668a
1 parent 4071ae8
commit d45668a
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 93 deletions.
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
@@ -76,109 +76,114 @@ function getBuildPath( file, buildFolder ) {
 	return path.resolve( pkgBuildPath, relativeToSrcPath );
 }
 
-/**
- * Object of build tasks per file extension.
- *
- * @type {Object<string,Function>}
- */
-const BUILD_TASK_BY_EXTENSION = {
-	async '.scss'( file ) {
-		const outputFile = getBuildPath(
-			file.replace( '.scss', '.css' ),
-			'build-style'
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'build-style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'build-style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ) ),
+		readFile( file, 'utf8' ),
+	] );
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
+		data:
+			[
+				'colors',
+				'breakpoints',
+				'variables',
+				'mixins',
+				'animations',
+				'z-index',
+			]
+				// Editor styles should be excluded from the default CSS vars output.
+				.concat(
+					file.includes( 'common.scss' ) ||
+						( ! file.includes( 'block-library' ) &&
+							! file.includes( 'editor-styles.scss' ) )
+						? [ 'default-custom-properties' ]
+						: []
+				)
+				.map( ( imported ) => `@import "${ imported }";` )
+				.join( ' ' ) + contents,
+	} );
+
+	const result = await postcss(
+		require( '@wordpress/postcss-plugins-preset' )
+	).process( builtSass.css, {
+		from: 'src/app.css',
+		to: 'dest/app.css',
+	} );
+
+	const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process(
+		result.css,
+		{
+			from: 'src/app.css',
+			to: 'dest/app.css',
+		}
+	);
+
+	await Promise.all( [
+		writeFile( outputFile, result.css ),
+		writeFile( outputFileRTL, resultRTL.css ),
+	] );
+}
+
+async function buildJS( file ) {
+	for ( const [ environment, buildDir ] of Object.entries(
+		JS_ENVIRONMENTS
+	) ) {
+		const destPath = getBuildPath(
+			file.replace( /\.tsx?$/, '.js' ),
+			buildDir
 		);
-		const outputFileRTL = getBuildPath(
-			file.replace( '.scss', '-rtl.css' ),
-			'build-style'
+		const babelOptions = getBabelConfig(
+			environment,
+			file.replace( PACKAGES_DIR, '@wordpress' )
 		);
 
-		const [ , contents ] = await Promise.all( [
-			makeDir( path.dirname( outputFile ) ),
-			readFile( file, 'utf8' ),
+		const [ , transformed ] = await Promise.all( [
+			makeDir( path.dirname( destPath ) ),
+			babel.transformFileAsync( file, babelOptions ),
 		] );
-		const builtSass = await renderSass( {
-			file,
-			includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
-			data:
-				[
-					'colors',
-					'breakpoints',
-					'variables',
-					'mixins',
-					'animations',
-					'z-index',
-				]
-					// Editor styles should be excluded from the default CSS vars output.
-					.concat(
-						file.includes( 'common.scss' ) ||
-							( ! file.includes( 'block-library' ) &&
-								! file.includes( 'editor-styles.scss' ) )
-							? [ 'default-custom-properties' ]
-							: []
-					)
-					.map( ( imported ) => `@import "${ imported }";` )
-					.join( ' ' ) + contents,
-		} );
-
-		const result = await postcss(
-			require( '@wordpress/postcss-plugins-preset' )
-		).process( builtSass.css, {
-			from: 'src/app.css',
-			to: 'dest/app.css',
-		} );
-
-		const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process(
-			result.css,
-			{
-				from: 'src/app.css',
-				to: 'dest/app.css',
-			}
-		);
 
 		await Promise.all( [
-			writeFile( outputFile, result.css ),
-			writeFile( outputFileRTL, resultRTL.css ),
+			writeFile( destPath + '.map', JSON.stringify( transformed.map ) ),
+			writeFile(
+				destPath,
+				transformed.code +
+					'\n//# sourceMappingURL=' +
+					path.basename( destPath ) +
+					'.map'
+			),
 		] );
-	},
-
-	async '.js'( file ) {
-		for ( const [ environment, buildDir ] of Object.entries(
-			JS_ENVIRONMENTS
-		) ) {
-			const destPath = getBuildPath( file, buildDir );
-			const babelOptions = getBabelConfig(
-				environment,
-				file.replace( PACKAGES_DIR, '@wordpress' )
-			);
-
-			const [ , transformed ] = await Promise.all( [
-				makeDir( path.dirname( destPath ) ),
-				babel.transformFileAsync( file, babelOptions ),
-			] );
-
-			await Promise.all( [
-				writeFile(
-					destPath + '.map',
-					JSON.stringify( transformed.map )
-				),
-				writeFile(
-					destPath,
-					transformed.code +
-						'\n//# sourceMappingURL=' +
-						path.basename( destPath ) +
-						'.map'
-				),
-			] );
-		}
-	},
+	}
+}
+
+/**
+ * Object of build tasks per file extension.
+ *
+ * @type {Object<string,Function>}
+ */
+const BUILD_TASK_BY_EXTENSION = {
+	'.scss': buildCSS,
+	'.js': buildJS,
+	'.ts': buildJS,
+	'.tsx': buildJS,
 };
 
 module.exports = async ( file, callback ) => {
 	const extension = path.extname( file );
 	const task = BUILD_TASK_BY_EXTENSION[ extension ];
 
 	if ( ! task ) {
-		return;
+		callback( new Error( `No handler for extension: ${ extension }` ) );
 	}
 
 	try {

diff --git a/bin/packages/build.js b/bin/packages/build.js
@@ -194,7 +194,7 @@ if ( files.length ) {
 
 	stream = glob.stream(
 		[
-			`${ PACKAGES_DIR }/*/src/**/*.js`,
+			`${ PACKAGES_DIR }/*/src/**/*.{js,ts,tsx}`,
 			`${ PACKAGES_DIR }/*/src/*.scss`,
 			`${ PACKAGES_DIR }/block-library/src/**/*.js`,
 			`${ PACKAGES_DIR }/block-library/src/*/style.scss`,

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+- Added `@babel/preset-typescript` so that the preset can by default transpile TypeScript files, too.
+
 ## 5.0.0 (2021-01-21)
 
 ### Breaking Changes

diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
@@ -54,7 +54,14 @@ module.exports = ( api ) => {
 	};
 
 	return {
-		presets: [ getPresetEnv() ],
+		presets: [
+			getPresetEnv(),
+			[
+				require.resolve( '@babel/preset-typescript' ),
+				// parse all extensions as TS mainly because Docgen doesn't pass filename info to parser
+				{ allExtensions: true, isTSX: true },
+			],
+		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
 			[

diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
@@ -32,6 +32,7 @@
 		"@babel/plugin-transform-react-jsx": "^7.12.7",
 		"@babel/plugin-transform-runtime": "^7.12.1",
 		"@babel/preset-env": "^7.12.7",
+		"@babel/preset-typescript": "^7.12.7",
 		"@babel/runtime": "^7.12.5",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",