From 1de1d618ddb3a571334f875f90e3d8f3300ea7c1 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 2 Nov 2020 10:34:39 +0100 Subject: [PATCH 1/5] calypso-build: add option to build CJS or ESM only to copy-assets and transpile scripts --- packages/calypso-build/CHANGELOG.md | 7 ++-- packages/calypso-build/bin/copy-assets.js | 29 +++++++++++++--- packages/calypso-build/bin/transpile.js | 42 +++++++++++++++++------ 3 files changed, 61 insertions(+), 17 deletions(-) diff --git a/packages/calypso-build/CHANGELOG.md b/packages/calypso-build/CHANGELOG.md index 7751a923c3a43..839c217df4da6 100644 --- a/packages/calypso-build/CHANGELOG.md +++ b/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 diff --git a/packages/calypso-build/bin/copy-assets.js b/packages/calypso-build/bin/copy-assets.js index a5e216e2ed28c..317ef3fe6a384 100755 --- a/packages/calypso-build/bin/copy-assets.js +++ b/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 ); +} diff --git a/packages/calypso-build/bin/transpile.js b/packages/calypso-build/bin/transpile.js index 197775f88b27e..796c739ffa5cf 100755 --- a/packages/calypso-build/bin/transpile.js +++ b/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, + } ); +} From 277b1e7758ebafdb070a74f56ca9890a6763520c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 2 Nov 2020 10:35:56 +0100 Subject: [PATCH 2/5] Search Package: build TS files with tsc instead of Babel, build only ESM in prepare script --- packages/search/package.json | 8 +++++--- packages/search/tsconfig-cjs.json | 12 ++++++++++++ packages/search/tsconfig.json | 3 +-- 3 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 packages/search/tsconfig-cjs.json diff --git a/packages/search/package.json b/packages/search/package.json index 7f3958da3422e..bb9173fdb25a1 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -44,8 +44,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" } } diff --git a/packages/search/tsconfig-cjs.json b/packages/search/tsconfig-cjs.json new file mode 100644 index 0000000000000..bd64442da990d --- /dev/null +++ b/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 + } +} diff --git a/packages/search/tsconfig.json b/packages/search/tsconfig.json index 751fda27a876e..146ee4ec6eee0 100644 --- a/packages/search/tsconfig.json +++ b/packages/search/tsconfig.json @@ -7,8 +7,7 @@ "jsx": "react", "declaration": true, "declarationDir": "dist/types", - "outDir": "dist/types", - "emitDeclarationOnly": true, + "outDir": "dist/esm", "isolatedModules": true, "strict": true, From f8730fcbb1d2f785fc27a36af5f8c797eceeabf4 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 2 Nov 2020 10:43:22 +0100 Subject: [PATCH 3/5] Language Picker Package: build TS files with tsc instead of Babel, build only ESM in prepare script --- packages/language-picker/package.json | 8 +++++--- packages/language-picker/tsconfig-cjs.json | 12 ++++++++++++ packages/language-picker/tsconfig.json | 3 +-- 3 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 packages/language-picker/tsconfig-cjs.json diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index 15b73ac1c7e9a..f5f08d0d6e4bb 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -39,8 +39,10 @@ "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" } } diff --git a/packages/language-picker/tsconfig-cjs.json b/packages/language-picker/tsconfig-cjs.json new file mode 100644 index 0000000000000..bd64442da990d --- /dev/null +++ b/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 + } +} diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json index abb477014a378..a1f79ccc20a3e 100644 --- a/packages/language-picker/tsconfig.json +++ b/packages/language-picker/tsconfig.json @@ -7,8 +7,7 @@ "jsx": "react", "declaration": true, "declarationDir": "dist/types", - "outDir": "dist/types", - "emitDeclarationOnly": true, + "outDir": "dist/esm", "isolatedModules": true, "strict": true, From 8fbec4954a8287e96f13d0d9cbad7950c9c834b7 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 2 Nov 2020 20:26:34 +0100 Subject: [PATCH 4/5] Configure ES5 transpilation correctly --- packages/language-picker/package.json | 3 ++- packages/language-picker/tsconfig.json | 7 +++++-- packages/search/package.json | 3 ++- packages/search/tsconfig.json | 7 +++++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index f5f08d0d6e4bb..0d45000371c4b 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -32,7 +32,8 @@ "@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", diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json index a1f79ccc20a3e..9f9b0cc0cf991 100644 --- a/packages/language-picker/tsconfig.json +++ b/packages/language-picker/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { - "target": "ES2016", - "module": "esnext", + "target": "ES5", + "lib": [ "DOM", "ES2020" ], + "module": "ESNext", "allowJs": true, "checkJs": false, "jsx": "react", @@ -25,6 +26,8 @@ "types": [], "rootDir": "src", + "importHelpers": true, + "composite": true }, "include": [ "src" ] diff --git a/packages/search/package.json b/packages/search/package.json index bb9173fdb25a1..460f009f02cbc 100644 --- a/packages/search/package.json +++ b/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", diff --git a/packages/search/tsconfig.json b/packages/search/tsconfig.json index 146ee4ec6eee0..9f9b0cc0cf991 100644 --- a/packages/search/tsconfig.json +++ b/packages/search/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { - "target": "es2018", - "module": "esnext", + "target": "ES5", + "lib": [ "DOM", "ES2020" ], + "module": "ESNext", "allowJs": true, "checkJs": false, "jsx": "react", @@ -25,6 +26,8 @@ "types": [], "rootDir": "src", + "importHelpers": true, + "composite": true }, "include": [ "src" ] From cb366221d8d098a1eda8715e4da25f3f841edbb9 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 3 Nov 2020 11:16:12 +0100 Subject: [PATCH 5/5] Use ESNext as the lib target, so that we never need to change it --- packages/language-picker/tsconfig.json | 2 +- packages/search/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json index 9f9b0cc0cf991..fda8890fd4180 100644 --- a/packages/language-picker/tsconfig.json +++ b/packages/language-picker/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "target": "ES5", - "lib": [ "DOM", "ES2020" ], + "lib": [ "DOM", "ESNext" ], "module": "ESNext", "allowJs": true, "checkJs": false, diff --git a/packages/search/tsconfig.json b/packages/search/tsconfig.json index 9f9b0cc0cf991..fda8890fd4180 100644 --- a/packages/search/tsconfig.json +++ b/packages/search/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "target": "ES5", - "lib": [ "DOM", "ES2020" ], + "lib": [ "DOM", "ESNext" ], "module": "ESNext", "allowJs": true, "checkJs": false,