diff --git a/.babelrc-optimize.js b/.babelrc-optimize.js new file mode 100644 index 00000000000..0ba8e0fca0d --- /dev/null +++ b/.babelrc-optimize.js @@ -0,0 +1,15 @@ +// See `wiki/consuming.md` for rationale and consumer requirements. + +const baseConfig = require('./.babelrc.js'); +// Skip `propType` generation +baseConfig.plugins.splice( + baseConfig.plugins.indexOf( + './scripts/babel/proptypes-from-ts-props' + ), + 1 +); +// Transform runtimes using babel plugin. +// Requires consuming applications to use `@babel/runtime`. +baseConfig.plugins.push('@babel/plugin-transform-runtime'); +baseConfig.env = {}; +module.exports = baseConfig; \ No newline at end of file diff --git a/.gitignore b/.gitignore index 059246ac720..8b1fcdabd2a 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ tmp/ dist/ lib/ es/ +optimize/ test-env/ .idea .vscode/ diff --git a/CHANGELOG.md b/CHANGELOG.md index dd61d6ac641..ad7e6091e5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Updated the outline color in `euiCustomControlFocused` mixin to use `$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479)) +- **[Beta]** Added `optimize` build as a lighter weight option more suited to prodcution environments ([#5527](https://github.com/elastic/eui/pull/5527)) ## [`45.0.0`](https://github.com/elastic/eui/tree/v45.0.0) diff --git a/scripts/compile-clean.js b/scripts/compile-clean.js index dd72721f9e1..1990da4f67a 100755 --- a/scripts/compile-clean.js +++ b/scripts/compile-clean.js @@ -3,4 +3,5 @@ const rimraf = require('rimraf'); rimraf.sync('dist'); rimraf.sync('lib'); rimraf.sync('es'); +rimraf.sync('optimize'); rimraf.sync('test-env'); diff --git a/scripts/compile-eui.js b/scripts/compile-eui.js index a60af9e7676..a95c0671f69 100755 --- a/scripts/compile-eui.js +++ b/scripts/compile-eui.js @@ -14,10 +14,11 @@ const IGNORE_PACKAGES = ['**/react-datepicker/test/**/*.js'] function compileLib() { shell.mkdir('-p', 'lib/services', 'lib/test'); - console.log('Compiling src/ to es/, lib/, and test-env/'); + console.log('Compiling src/ to es/, lib/, optimize/, and test-env/'); // Run all code (com|trans)pilation through babel (ESNext JS & TypeScript) + // Default build execSync( `babel --quiet --out-dir=es --extensions .js,.ts,.tsx --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`, { @@ -28,7 +29,6 @@ function compileLib() { }, } ); - execSync( `babel --quiet --out-dir=lib --extensions .js,.ts,.tsx --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`, { @@ -39,6 +39,28 @@ function compileLib() { } ); + // `optimize` build (Beta) + execSync( + `babel --quiet --out-dir=optimize/es --extensions .js,.ts,.tsx --config-file="./.babelrc-optimize.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`, + { + env: { + ...process.env, + BABEL_MODULES: false, + NO_COREJS_POLYFILL: true, + }, + } + ); + execSync( + `babel --quiet --out-dir=optimize/lib --extensions .js,.ts,.tsx --config-file="./.babelrc-optimize.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_TESTENV, ...IGNORE_PACKAGES].join(',')}" src`, + { + env: { + ...process.env, + NO_COREJS_POLYFILL: true, + }, + } + ); + + // `test-env` build execSync( `babel --quiet --out-dir=test-env --extensions .js,.ts,.tsx --config-file="./.babelrc-test-env.js" --ignore "${[...IGNORE_BUILD, ...IGNORE_TESTS, ...IGNORE_PACKAGES].join(',')}" src`, { diff --git a/wiki/consuming.md b/wiki/consuming.md index 54cbe675392..ad3ebd13333 100644 --- a/wiki/consuming.md +++ b/wiki/consuming.md @@ -107,3 +107,28 @@ This eliminates the need to polyfill or transform the EUI build for an environme ### Mocked component files Besides babel transforms, the test environment build consumes mocked component files of the type `src/**/[name].testenv.*`. During the build, files of the type `src/**/[name].*` will be replaced by those with the `testenv` namespace. The purpose of this mocking is to further mitigate the impacts of time- and import-dependent rendering, and simplify environment output such as test snapshots. Information on creating mock component files can be found with [testing documentation](testing.md). + +## Using the `optimize` build (Beta) + +The `optimize` output directory is an opt-in intermediate step as we work towards dedicated, formal build output for development and production environments. + +When compiling with webpack, use the `resolve.alias` configuration to target the desired directory: + +```json +resolve: { + alias: { + '@elastic/eui$': '@elastic/eui/optimize/lib' + } +} +``` + +Designated "Beta" as included babel plugins may change and the output directory is likely to be renamed. + +### Notable differences + +* Absence of `propTypes` + * Significant bundle size decrease + * Likely not suitable for development environments +* Runtime transforms + * Slight bundle size decrease + * Requires `@babel/runtime` be a consumer dependency