diff --git a/.yarn/offline-mirror/magic-string-0.25.4.tgz b/.yarn/offline-mirror/magic-string-0.25.4.tgz new file mode 100644 index 000000000000..ce7c5842c85b Binary files /dev/null and b/.yarn/offline-mirror/magic-string-0.25.4.tgz differ diff --git a/.yarn/offline-mirror/rollup-plugin-strip-banner-1.0.0.tgz b/.yarn/offline-mirror/rollup-plugin-strip-banner-1.0.0.tgz new file mode 100644 index 000000000000..db72ef307cf8 Binary files /dev/null and b/.yarn/offline-mirror/rollup-plugin-strip-banner-1.0.0.tgz differ diff --git a/packages/react/package.json b/packages/react/package.json index d4bd2dfac6dc..66ca2f4be944 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -24,7 +24,7 @@ "access": "public" }, "scripts": { - "build": "yarn clean && node scripts/build.js", + "build": "yarn clean && node scripts/build.js && rollup -c", "build-storybook": "cross-env NODE_ENV=production build-storybook", "clean": "rimraf es lib umd storybook-static build react-docgen.json", "prepublish": "yarn build", @@ -107,6 +107,7 @@ "rollup-plugin-node-resolve": "^4.2.3", "rollup-plugin-replace": "^2.2.0", "rollup-plugin-sizes": "^0.5.0", + "rollup-plugin-strip-banner": "^1.0.0", "rollup-plugin-terser": "^4.0.0", "rtlcss": "^2.4.0", "sass-loader": "^8.0.2", diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js new file mode 100644 index 000000000000..748234ca59da --- /dev/null +++ b/packages/react/rollup.config.js @@ -0,0 +1,146 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const babel = require('rollup-plugin-babel'); +const commonjs = require('rollup-plugin-commonjs'); +const resolve = require('rollup-plugin-node-resolve'); +const replace = require('rollup-plugin-replace'); +const stripBanner = require('rollup-plugin-strip-banner'); +const { terser } = require('rollup-plugin-terser'); +const packageJson = require('./package.json'); + +const baseConfig = { + input: './src/index.js', + external: [ + ...Object.keys(packageJson.peerDependencies), + ...Object.keys(packageJson.dependencies), + 'prop-types', + ], + plugins: [ + resolve(), + commonjs({ + include: /node_modules/, + namedExports: { + 'react/index.js': [ + 'Children', + 'Component', + 'PureComponent', + 'Fragment', + 'PropTypes', + 'createElement', + ], + 'react-dom/index.js': ['render'], + 'react-is/index.js': ['isForwardRef'], + }, + }), + babel({ + babelrc: false, + exclude: ['node_modules/**'], + presets: [ + [ + '@babel/preset-env', + { + modules: false, + targets: { + browsers: ['extends browserslist-config-carbon'], + }, + }, + ], + '@babel/preset-react', + ], + plugins: [ + 'dev-expression', + '@babel/plugin-syntax-dynamic-import', + '@babel/plugin-syntax-import-meta', + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-export-namespace-from', + '@babel/plugin-proposal-export-default-from', + ], + }), + stripBanner(), + ], +}; + +const umdExternalDependencies = Object.keys( + packageJson.peerDependencies +).filter(dependency => dependency !== 'carbon-components'); + +const umdBundleConfig = { + input: baseConfig.input, + external: [...umdExternalDependencies, 'prop-types'], + output: { + name: 'CarbonComponentsReact', + format: 'umd', + globals: { + classnames: 'classNames', + 'prop-types': 'PropTypes', + react: 'React', + 'react-dom': 'ReactDOM', + 'carbon-icons': 'CarbonIcons', + }, + }, +}; + +module.exports = [ + // Generates the following bundles: + // ESM: es/index.js + // CommonJS: lib/index.js + { + ...baseConfig, + plugins: [ + ...baseConfig.plugins, + replace({ + 'process.env.NODE_ENV': JSON.stringify('development'), + }), + ], + output: [ + { + format: 'esm', + file: 'es/index.js', + }, + { + format: 'cjs', + file: 'lib/index.js', + }, + ], + }, + + // Generate the development UMD bundle: + // UMD: umd/carbon-components-react.js + { + ...umdBundleConfig, + plugins: [ + ...baseConfig.plugins, + replace({ + 'process.env.NODE_ENV': JSON.stringify('development'), + }), + ], + output: { + ...umdBundleConfig.output, + file: 'umd/carbon-components-react.js', + }, + }, + + // Generate the production UMD bundle: + // UMD: umd/carbon-components-react.min.js + { + ...umdBundleConfig, + plugins: [ + ...baseConfig.plugins, + replace({ + 'process.env.NODE_ENV': JSON.stringify('production'), + }), + terser(), + ], + output: { + ...umdBundleConfig.output, + file: 'umd/carbon-components-react.min.js', + }, + }, +]; diff --git a/packages/react/scripts/build.js b/packages/react/scripts/build.js index 33cf0939c77c..34dc9f40a0e5 100644 --- a/packages/react/scripts/build.js +++ b/packages/react/scripts/build.js @@ -13,9 +13,6 @@ if (inInstall()) { const babelPath = path .resolve(__dirname, '../node_modules/.bin/babel') .replace(/ /g, '\\ '); -const rollupPath = path - .resolve(__dirname, '../node_modules/.bin/rollup') - .replace(/ /g, '\\ '); const exec = (command, extraEnv) => execSync(command, { @@ -43,19 +40,6 @@ try { 'react-docgen.json', JSON.stringify(mapValues(require(`../build/docgen`), '__docgenInfo')) ); - - exec( - `${rollupPath} -c scripts/rollup.config.js -o umd/carbon-components-react.js`, - { - NODE_ENV: 'development', - } - ); - exec( - `${rollupPath} -c scripts/rollup.config.js -o umd/carbon-components-react.min.js`, - { - NODE_ENV: 'production', - } - ); } catch (error) { console.error('One of the commands failed:', error.stack); // eslint-disable-line no-console process.exit(1); diff --git a/packages/react/scripts/rollup.config.js b/packages/react/scripts/rollup.config.js deleted file mode 100644 index 01424d632209..000000000000 --- a/packages/react/scripts/rollup.config.js +++ /dev/null @@ -1,105 +0,0 @@ -'use strict'; - -const chalk = require('chalk'); -const Table = require('cli-table'); -const gzip = require('gzip-size'); - -const commonjs = require('rollup-plugin-commonjs'); -const resolve = require('rollup-plugin-node-resolve'); -const babel = require('rollup-plugin-babel'); -const replace = require('rollup-plugin-replace'); -const { terser } = require('rollup-plugin-terser'); -const sizes = require('rollup-plugin-sizes'); - -const packageJson = require('../package.json'); -const peerDependencies = Object.keys( - packageJson.peerDependencies || {} -).concat(['classnames', 'prop-types']); - -const env = process.env.NODE_ENV || 'development'; -const prodSettings = - env === 'development' - ? [] - : [ - terser(), - sizes({ - report(details) { - const table = new Table({ - head: [ - chalk.gray.yellow('Dependency/app'), - chalk.gray.yellow('Size'), - ], - colAligns: ['left', 'right'], - }); - details.totals - .map(item => [chalk.white.bold(item.name), item.size]) - .forEach(item => { - table.push(item); - }); - console.log(`Sizes of app/dependencies:\n${table}`); // eslint-disable-line no-console - console.log('Total size:', details.total); // eslint-disable-line no-console - }, - }), - { - generateBundle(options, bundle) { - const gzipSize = gzip.sync( - bundle['carbon-components-react.min.js'].code - ); - const { bundleSizeThreshold } = packageJson; - console.log('Total size (gzipped):', gzipSize); // eslint-disable-line no-console - if (gzipSize > bundleSizeThreshold) { - throw new RangeError( - `Exceeded size threshold of ${bundleSizeThreshold} bytes (gzipped)!` - ); - } - }, - }, - ]; - -process.env.BABEL_ENV = 'es'; - -module.exports = { - input: 'src/index.js', - plugins: [ - resolve({ - mainFields: ['jsnext', 'module', 'main'], - }), - commonjs({ - include: [/node_modules/, /icons-react\/lib/], - sourceMap: true, - namedExports: { - 'react/index.js': [ - 'Children', - 'Component', - 'PureComponent', - 'Fragment', - 'PropTypes', - 'createElement', - ], - 'react-dom/index.js': ['render'], - 'react-is/index.js': ['isForwardRef'], - }, - }), - babel({ - exclude: ['node_modules/**'], // only transpile our source code - }), - replace({ - 'process.env.NODE_ENV': JSON.stringify(env), - }), - ...prodSettings, - ], - external: peerDependencies.filter( - dependency => dependency !== 'carbon-components' - ), - output: { - name: 'CarbonComponentsReact', - format: 'umd', - globals: { - classnames: 'classNames', - 'prop-types': 'PropTypes', - react: 'React', - 'react-dom': 'ReactDOM', - 'carbon-icons': 'CarbonIcons', - }, - }, -}; diff --git a/yarn.lock b/yarn.lock index d6117c27bc3a..d761425d4c06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14665,6 +14665,13 @@ magic-string@0.19.1: dependencies: vlq "^0.2.1" +magic-string@0.25.4: + version "0.25.4" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.4.tgz#325b8a0a79fc423db109b77fd5a19183b7ba5143" + integrity sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw== + dependencies: + sourcemap-codec "^1.4.4" + magic-string@^0.25.2: version "0.25.6" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.6.tgz#5586387d1242f919c6d223579cc938bf1420795e" @@ -19504,6 +19511,15 @@ rollup-plugin-strip-banner@^0.2.0: magic-string "0.19.1" rollup-pluginutils "2.0.1" +rollup-plugin-strip-banner@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-strip-banner/-/rollup-plugin-strip-banner-1.0.0.tgz#28ddfb74e7b9c1fe3e612124fa83e571b914e893" + integrity sha512-hatiuCbYCM7db/JmogCn5a4/Un5dLnAIT4ixXmH9qNCbzXJqd0/jnVd/8ZDA3fF7WmmVh7D18GAzha0MMmRpSQ== + dependencies: + extract-banner "0.1.2" + magic-string "0.25.4" + rollup-pluginutils "2.8.2" + rollup-plugin-terser@^4.0.0: version "4.0.4" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz#6f661ef284fa7c27963d242601691dc3d23f994e" @@ -19527,6 +19543,13 @@ rollup-pluginutils@2.0.1: estree-walker "^0.3.0" micromatch "^2.3.11" +rollup-pluginutils@2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" + integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== + dependencies: + estree-walker "^0.6.1" + rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1: version "2.8.2" resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"