Use babel to transpile TS projects (#47502)

* Create a "main" package used as an entrypoint for tsc

* Add missing tsconfig for CJS

* Use new syntax for type-only exports

* Use the new babel-friendly package structure

* Move prepare script to postinstall

* Delete unused prepare script

* Undo watch change

* Build @automattic/languages before trying to run it

* Do not link TS packages

* Use lerna to run prepare on all packages

* Rename build-packages to prepare:packages

* Brign back package build process

* Fix components outDir to dist/esm

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>

client/tsconfig.json

@@ -16,13 +16,7 @@
 			"calypso/*": [ "./*" ]
 		}
 	},
-	"references": [
-		{ "path": "../packages/calypso-analytics" },
-		{ "path": "../packages/components" },
-		{ "path": "../packages/data-stores" },
-		{ "path": "../packages/language-picker" },
-		{ "path": "../packages/react-i18n" }
-	],
+	"references": [ { "path": "../packages" } ],
 	"include": [ "**/*", "../build-tools/**" ],
 	"exclude": [
 		"../**/node_modules/**/*",

package.json

@@ -58,7 +58,7 @@
 		"analyze-icfy": "yarn run build-client-stats && node --max-old-space-size=4096 bin/icfy-analyze.js",
 		"autoprefixer": "postcss -u autoprefixer -r --no-map --config packages/calypso-build/postcss.config.js",
 		"postcss": "postcss -r --config packages/calypso-build/postcss.config.js",
-		"build": "yarn run build-static && yarn run build-packages && yarn run build-css && run-p -s build-devdocs:* && run-p -s build-server build-client-if-prod build-client-if-desktop",
+		"build": "yarn run build-static && yarn run build-css && run-p -s build-devdocs:* && run-p -s build-server build-client-if-prod build-client-if-desktop",
 		"build-css": "run-p -s build-css:*",
 		"build-css:directly": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client client/assets/stylesheets/directly.scss public/directly.css --output-style compressed && yarn run -s postcss public/directly.css",
 		"build-css:reader-mobile": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client client/assets/stylesheets/reader-mobile.scss public/reader-mobile.css --output-style compressed && yarn run -s postcss public/reader-mobile.css",
@@ -90,14 +90,13 @@
 		"build-client-if-prod": "node -e \"process.env.CALYPSO_ENV === 'production' && process.exit(1)\" || yarn run build-client-both && yarn run build-languages-if-enabled",
 		"build-client-if-desktop": "node -e \"(process.env.CALYPSO_ENV === 'desktop' || process.env.CALYPSO_ENV === 'desktop-development') && process.exit(1)\" || yarn run build-client-fallback",
 		"build-client-stats": "NODE_ENV=production CALYPSO_ENV=production EMIT_STATS=true PROGRESS=true yarn run build-client-evergreen",
-		"build-packages": "npx lerna run prepare --stream",
-		"build-packages:watch": "node bin/watch-packages-and-rebuild.js",
+		"build-packages": "tsc --build packages/tsconfig.json && lerna run prepare --stream",
 		"build-languages": "yarn run translate && node bin/build-languages.js",
 		"build-languages-if-enabled": "node -e \"(process.env.BUILD_TRANSLATION_CHUNKS === 'true' || process.env.ENABLE_FEATURES === 'use-translation-chunks') && process.exit(1)\" || yarn run build-languages",
 		"calypso-doctor": "./node_modules/.bin/calypso-doctor",
 		"clean": "yarn run clean:packages && yarn run clean:build && yarn run clean:public && yarn run clean:translations",
 		"clean:build": "npx rimraf build client/server/bundler/*.json client/server/devdocs/search-index.js",
-		"clean:packages": "npx lerna run clean --stream",
+		"clean:packages": "lerna run clean --stream",
 		"clean:public": "npx rimraf public",
 		"clean:translations": "npx rimraf build/strings calypso-strings.pot chunks-map.*.json",
 		"distclean": "yarn run clean && npx rimraf node_modules client/node_modules desktop/node_modules apps/*/node_modules packages/*/node_modules test/e2e/node_modules .cache apps/*/.cache vendor",
@@ -114,7 +113,7 @@
 		"lint:package-json": "npmPkgJsonLint './package.json' './client/package.json' './packages/*/package.json' './apps/*/package.json'",
 		"prestart": "npx check-node-version --package && node bin/welcome.js",
 		"start": "yarn run -s build",
-		"poststart": "run-p -s start-build-if-web start-build-if-desktop build-packages:watch",
+		"poststart": "run-p -s start-build-if-web start-build-if-desktop",
 		"start-fallback": "DEV_TARGET=fallback yarn run start",
 		"start-jetpack-cloud": "CALYPSO_ENV=jetpack-cloud-development yarn start",
 		"start-jetpack-cloud-p": "PORT=3001 CALYPSO_ENV=jetpack-cloud-development yarn run build-server",

packages/browser-data-collector/package.json

@@ -5,8 +5,9 @@
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic Inc.",
-	"main": "dist/cjs/index",
-	"module": "dist/esm/index",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Automattic/wp-calypso.git",
@@ -17,9 +18,9 @@
 		"url": "https://github.com/Automattic/wp-calypso/issues"
 	},
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"prepublish": "yarn run clean",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/calypso-analytics/package.json

@@ -6,8 +6,9 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic Inc.",
 	"sideEffects": true,
-	"main": "dist/cjs/index",
-	"module": "dist/esm/index",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Automattic/wp-calypso.git",
@@ -25,9 +26,9 @@
 		"url": "https://github.com/Automattic/wp-calypso/issues"
 	},
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"prepublish": "yarn run clean",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/calypso-stripe/package.json

@@ -5,12 +5,12 @@
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"types": "dist/types/index.d.ts",
+	"calypso:src": "index.ts",
 	"sideEffects": false,
 	"scripts": {
-		"clean": "npx rimraf dist && tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"build:esm": "tsc --build ./tsconfig.json",
-		"build:cjs": "tsc --build ./tsconfig-cjs.json",
-		"prepare": "yarn run build:esm",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"files": [

packages/components/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.js",
 	"sideEffects": [
 		"*.css",
 		"*.scss"
@@ -46,8 +47,8 @@
 		"ts-loader": "^8.0.8"
 	},
 	"scripts": {
-		"clean": "npx rimraf dist && tsc --build --clean",
-		"prepublish": "yarn run clean",
-		"prepare": "transpile && tsc --build && copy-assets"
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+		"prepack": "yarn run clean && yarn run build"
 	}
 }

packages/components/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/components/tsconfig.json

@@ -7,7 +7,7 @@
 		"jsx": "react",
 		"declaration": true,
 		"declarationDir": "dist/types",
-		"outDir": "dist/types",
+		"outDir": "dist/esm",
 		"isolatedModules": true,
 
 		"strict": true,

packages/composite-checkout/package.json

@@ -5,11 +5,12 @@
 	"main": "dist/cjs/public-api.js",
 	"module": "dist/esm/public-api.js",
 	"types": "dist/types/public-api.d.ts",
+	"calypso:src": "src/public-api.ts",
 	"sideEffects": false,
 	"scripts": {
-		"clean": "npx rimraf dist \"../../.tsc-cache/packages__composite-checkout*\"",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json",
-		"prepublish": "yarn run clean",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"files": [

packages/data-stores/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"sideEffects": false,
 	"repository": {
 		"type": "git",
@@ -26,9 +27,9 @@
 	],
 	"types": "dist/types",
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json",
-		"prepublish": "yarn run clean",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/data-stores/src/auth/index.ts

@@ -17,7 +17,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import { controls as wpcomRequestControls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( config: ActionsConfig ): typeof STORE_KEY {

packages/data-stores/src/domain-suggestions/index.ts

@@ -15,7 +15,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import { controls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 interface StoreConfiguration {

packages/data-stores/src/site/index.ts

@@ -16,7 +16,7 @@ import type { WpcomClientCredentials } from '../shared-types';
 import { controls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( clientCreds: WpcomClientCredentials ): typeof STORE_KEY {

packages/data-stores/src/user/index.ts

@@ -16,7 +16,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import type { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( clientCreds: WpcomClientCredentials ): typeof STORE_KEY {

packages/data-stores/src/verticals-templates/index.ts

@@ -15,7 +15,7 @@ import * as selectors from './selectors';
 import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register(): typeof STORE_KEY {

packages/domain-picker/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.tsx",
 	"sideEffects": [
 		"*.css",
 		"*.scss"
@@ -24,9 +25,9 @@
 	},
 	"types": "dist/types",
 	"scripts": {
-		"clean": "tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json && copy-assets",
-		"prepublish": "yarn run clean",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/domain-picker/src/index.tsx

@@ -1,6 +1,8 @@
 /**
  * Internal dependencies
  */
-export { default, Props } from './domain-picker';
+export { default } from './domain-picker';
+export type { Props } from './domain-picker';
+
 export { ITEM_TYPE_RADIO, ITEM_TYPE_BUTTON } from './domain-picker/suggestion-item';
 export type { SUGGESTION_ITEM_TYPE } from './domain-picker/suggestion-item';

packages/i18n-utils/package.json

@@ -4,6 +4,7 @@
 	"description": "WordPress.com i18n utils",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"types": "dist/types/index.d.ts",
 	"sideEffects": false,
 	"license": "GPL-2.0-or-later",
@@ -14,9 +15,9 @@
 	},
 	"author": "Automattic Inc.",
 	"scripts": {
-		"clean": "npx rimraf dist",
-		"prepublish": "yarn run clean",
-		"prepare": "tsc --build ./tsconfig.json && tsc --build ./tsconfig-cjs.json",
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"prepack": "yarn run clean && yarn run build",
 		"watch": "tsc --build ./tsconfig.json --watch",
 		"download": "node bin/download.js",
 		"test": "yarn jest"

packages/language-picker/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"sideEffects": [
 		"*.css",
 		"*.scss"
@@ -40,10 +41,8 @@
 		"react-dom": "^16.8"
 	},
 	"scripts": {
-		"clean": "npx rimraf dist && tsc --build ./tsconfig.json --clean && tsc --build ./tsconfig-cjs.json --clean",
-		"build:esm": "tsc --build ./tsconfig.json && copy-assets --esm",
-		"build:cjs": "tsc --build ./tsconfig-cjs.json && copy-assets --cjs",
-		"prepare": "yarn run build:esm",
-		"prepack": "yarn run clean && yarn run build:esm && yarn run build:cjs"
+		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && npx rimraf dist",
+		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"prepack": "yarn run clean && yarn run build"
 	}
 }