Optimize how TypeScript-authored packages are built

packages/calypso-build/CHANGELOG.md

@@ -1,10 +1,13 @@
 # Changelog
 
-## master
+## master (6.5.0)
+
+- Added `--esm` and `--cjs` options to `copy-assets` and `transpile` to do only one kind of
+  the build (ESM or CJS) instead of both that are done by default
 
 ## 6.4.0
 
-- Removed the exceptions for the `import/no-extraneous-dependencies` eslint rule for '*.md.jsx' and '*.md.js' files
+- Removed the exceptions for the `import/no-extraneous-dependencies` eslint rule for '_.md.jsx' and '_.md.js' files
 - Upgraded dependencies
   - typescript to ^4.0.3
   - terser-webpack-plugin to "4.2.2

packages/calypso-build/bin/copy-assets.js

@@ -9,8 +9,8 @@ const rcopy = require( 'recursive-copy' );
 const dir = process.cwd();
 
 const inputDir = path.join( dir, 'src' );
-const outputDirEsm = path.join( dir, 'dist', 'esm' );
-const outputDirCommon = path.join( dir, 'dist', 'cjs' );
+const outputDirESM = path.join( dir, 'dist', 'esm' );
+const outputDirCJS = path.join( dir, 'dist', 'cjs' );
 
 const copyOptions = {
 	overwrite: true,
@@ -26,5 +26,26 @@ const copyOptions = {
 	concurrency: 127,
 };
 
-rcopy( inputDir, outputDirEsm, copyOptions );
-rcopy( inputDir, outputDirCommon, copyOptions );
+let copyAll = true;
+let copyESM = false;
+let copyCJS = false;
+
+for ( const arg of process.argv.slice( 2 ) ) {
+	if ( arg === '--esm' ) {
+		copyAll = false;
+		copyESM = true;
+	}
+
+	if ( arg === '--cjs' ) {
+		copyAll = false;
+		copyCJS = true;
+	}
+}
+
+if ( copyAll || copyESM ) {
+	rcopy( inputDir, outputDirESM, copyOptions );
+}
+
+if ( copyAll || copyCJS ) {
+	rcopy( inputDir, outputDirCJS, copyOptions );
+}

packages/calypso-build/bin/transpile.js

@@ -11,8 +11,24 @@ const root = path.dirname( __dirname );
 const babelPresetFile = path.join( root, 'babel', 'default.js' );
 
 const inputDir = path.join( dir, 'src' );
-const outputDirEsm = path.join( dir, 'dist', 'esm' );
-const outputDirCommon = path.join( dir, 'dist', 'cjs' );
+const outputDirESM = path.join( dir, 'dist', 'esm' );
+const outputDirCJS = path.join( dir, 'dist', 'cjs' );
+
+let transpileAll = true;
+let transpileESM = false;
+let transpileCJS = false;
+
+for ( const arg of process.argv.slice( 2 ) ) {
+	if ( arg === '--esm' ) {
+		transpileAll = false;
+		transpileESM = true;
+	}
+
+	if ( arg === '--cjs' ) {
+		transpileAll = false;
+		transpileCJS = true;
+	}
+}
 
 // If the pattern was just a relative path (**/test/**), Babel would resolve it against the
 // root directory (set as cwd) which isn't an ancestor of any of the source files.
@@ -21,12 +37,16 @@ const testIgnorePattern = path.join( dir, '**/test/**' );
 console.log( 'Building %s', dir );
 const baseCommand = `npx --no-install babel --presets="${ babelPresetFile }" --ignore "${ testIgnorePattern }" --extensions='.js,.jsx,.ts,.tsx'`;
 
-execSync( `${ baseCommand } -d "${ outputDirEsm }" "${ inputDir }"`, {
-	env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults' } ),
-	cwd: root,
-} );
-
-execSync( `${ baseCommand } -d "${ outputDirCommon }" "${ inputDir }"`, {
-	env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults', MODULES: 'commonjs' } ),
-	cwd: root,
-} );
+if ( transpileAll || transpileESM ) {
+	execSync( `${ baseCommand } -d "${ outputDirESM }" "${ inputDir }"`, {
+		env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults' } ),
+		cwd: root,
+	} );
+}
+
+if ( transpileAll || transpileCJS ) {
+	execSync( `${ baseCommand } -d "${ outputDirCJS }" "${ inputDir }"`, {
+		env: Object.assign( {}, process.env, { BROWSERSLIST_ENV: 'defaults', MODULES: 'commonjs' } ),
+		cwd: root,
+	} );
+}

packages/language-picker/package.json

@@ -32,15 +32,18 @@
 		"@babel/runtime": "^7.11.1",
 		"@wordpress/base-styles": "^2.0.1",
 		"@wordpress/components": "^10.0.5",
-		"@wordpress/i18n": "^3.14.0"
+		"@wordpress/i18n": "^3.14.0",
+		"tslib": "^1.10.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8",
 		"react-dom": "^16.8"
 	},
 	"scripts": {
-		"clean": "npx rimraf dist && tsc --build --clean",
-		"prepublish": "yarn run clean",
-		"prepare": "transpile && tsc && copy-assets"
+		"clean": "npx rimraf dist && tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
+		"build:esm": "tsc --project ./tsconfig.json && copy-assets --esm",
+		"build:cjs": "tsc --project ./tsconfig-cjs.json && copy-assets --cjs",
+		"prepare": "yarn run build:esm",
+		"prepack": "yarn run clean && yarn run build:esm && yarn run build:cjs"
 	}
 }

packages/language-picker/tsconfig-cjs.json

@@ -0,0 +1,12 @@
+{
+	"extends": "./tsconfig",
+	"compilerOptions": {
+		"module": "commonjs",
+		"declaration": false,
+		"declarationMap": false,
+		"declarationDir": null,
+		"outDir": "dist/cjs",
+		"composite": false,
+		"incremental": true
+	}
+}

packages/language-picker/tsconfig.json

@@ -1,14 +1,14 @@
 {
 	"compilerOptions": {
-		"target": "ES2016",
-		"module": "esnext",
+		"target": "ES5",
+		"lib": [ "DOM", "ESNext" ],
+		"module": "ESNext",
 		"allowJs": true,
 		"checkJs": false,
 		"jsx": "react",
 		"declaration": true,
 		"declarationDir": "dist/types",
-		"outDir": "dist/types",
-		"emitDeclarationOnly": true,
+		"outDir": "dist/esm",
 		"isolatedModules": true,
 
 		"strict": true,
@@ -26,6 +26,8 @@
 		"types": [],
 		"rootDir": "src",
 
+		"importHelpers": true,
+
 		"composite": true
 	},
 	"include": [ "src" ]

packages/search/package.json

@@ -34,7 +34,8 @@
 		"@wordpress/i18n": "^3.14.0",
 		"@wordpress/icons": "^2.4.0",
 		"classnames": "^2.2.6",
-		"lodash": "^4.17.15"
+		"lodash": "^4.17.15",
+		"tslib": "^1.10.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8",
@@ -44,8 +45,10 @@
 		"@storybook/addon-actions": "^5.3.18"
 	},
 	"scripts": {
-		"clean": "npx rimraf dist && tsc --build --clean",
-		"prepublish": "yarn run clean",
-		"prepare": "transpile && tsc && copy-assets"
+		"clean": "npx rimraf dist && tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
+		"build:esm": "tsc --project ./tsconfig.json && copy-assets --esm",
+		"build:cjs": "tsc --project ./tsconfig-cjs.json && copy-assets --cjs",
+		"prepare": "yarn run build:esm",
+		"prepack": "yarn run clean && yarn run build:esm && yarn run build:cjs"
 	}
 }

packages/search/tsconfig-cjs.json

@@ -0,0 +1,12 @@
+{
+	"extends": "./tsconfig",
+	"compilerOptions": {
+		"module": "commonjs",
+		"declaration": false,
+		"declarationMap": false,
+		"declarationDir": null,
+		"outDir": "dist/cjs",
+		"composite": false,
+		"incremental": true
+	}
+}

packages/search/tsconfig.json

@@ -1,14 +1,14 @@
 {
 	"compilerOptions": {
-		"target": "es2018",
-		"module": "esnext",
+		"target": "ES5",
+		"lib": [ "DOM", "ESNext" ],
+		"module": "ESNext",
 		"allowJs": true,
 		"checkJs": false,
 		"jsx": "react",
 		"declaration": true,
 		"declarationDir": "dist/types",
-		"outDir": "dist/types",
-		"emitDeclarationOnly": true,
+		"outDir": "dist/esm",
 		"isolatedModules": true,
 
 		"strict": true,
@@ -26,6 +26,8 @@
 		"types": [],
 		"rootDir": "src",
 
+		"importHelpers": true,
+
 		"composite": true
 	},
 	"include": [ "src" ]