diff --git a/.babelrc b/.babelrc index 998d4dfa9b..29de81498b 100644 --- a/.babelrc +++ b/.babelrc @@ -1,20 +1,55 @@ { - "presets": ["@salesforce/babel-preset-design-system-react"], "env": { + "development": { + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "ie 11"], + "node": "8.9.4" + } + }], "react"], + "plugins": ["transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"] + }, "amd": { - "plugins": ["import-noop"] + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "ie 11"], + "node": "8.9.4" + } + }], "react"], + "plugins": ["import-noop", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"] }, "commonjs": { - "plugins": ["import-noop"] - }, + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "ie 11"], + "node": "8.9.4" + } + }], "react"], + "plugins": ["import-noop", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"] + }, + "esm": { + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "ie 11"], + "node": "8.9.4" + }, + "modules": false + }], "react"], + "plugins": ["transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"] + }, "test": { - "plugins": ["istanbul"] + "presets": [["env", { + "targets": { + "browsers": ["last 2 versions", "ie 11"] + } + }], "react"], + "plugins": ["istanbul", "transform-object-rest-spread", "transform-class-properties", "transform-export-extensions"] } }, "ignore": [ - "preset/**", + "preset/**" ], - plugins: [ + "plugins": [ "root-import" ] -} \ No newline at end of file +} diff --git a/components/accordion/index.jsx b/components/accordion/index.jsx index 0a60e80b04..25d753606b 100644 --- a/components/accordion/index.jsx +++ b/components/accordion/index.jsx @@ -61,7 +61,7 @@ class Accordion extends Component { } } -export default Accordion; - Accordion.displayName = ACCORDION; Accordion.propTypes = propTypes; + +export default Accordion; diff --git a/components/avatar/index.jsx b/components/avatar/index.jsx index 3364f9ba91..af8e7f5f0f 100644 --- a/components/avatar/index.jsx +++ b/components/avatar/index.jsx @@ -12,7 +12,7 @@ import PropTypes from 'prop-types'; // [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames) A // simple javascript utility for conditionally joining classNames together. import classNames from '../../utilities/class-names'; -import AVATAR from '../../utilities/constants'; +import { AVATAR } from '../../utilities/constants'; import UtilityIcon from '../icon'; // ### Display Name Always use the canonical component name as the React display @@ -175,4 +175,4 @@ Avatar.defaultProps = defaultProps; Avatar.displayName = displayName; Avatar.propTypes = propTypes; -module.exports = Avatar; +export default Avatar; diff --git a/components/forms/radio/index.jsx b/components/forms/radio/index.jsx index 7382ded04a..5fe7bc7d05 100644 --- a/components/forms/radio/index.jsx +++ b/components/forms/radio/index.jsx @@ -111,4 +111,4 @@ Radio.displayName = RADIO; Radio.propTypes = propTypes; Radio.defaultProps = defaultProps; -module.exports = Radio; +export default Radio; diff --git a/components/radio-group/index.jsx b/components/radio-group/index.jsx index 330b29faeb..f5ee64c157 100644 --- a/components/radio-group/index.jsx +++ b/components/radio-group/index.jsx @@ -138,4 +138,4 @@ RadioGroup.displayName = RADIO_GROUP; RadioGroup.propTypes = propTypes; RadioGroup.defaultProps = defaultProps; -module.exports = RadioGroup; +export default RadioGroup; diff --git a/components/radio-group/radio.jsx b/components/radio-group/radio.jsx index e244acb029..fdb5eaa8d1 100644 --- a/components/radio-group/radio.jsx +++ b/components/radio-group/radio.jsx @@ -1,4 +1,4 @@ // Alias import Radio from '../forms/radio/index'; -module.exports = Radio; +export default Radio; diff --git a/package-lock.json b/package-lock.json index 34f85a11e6..4eec01520f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "integrity": "sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==", "dev": true, "requires": { - "chalk": "2.4.0", + "chalk": "2.4.1", "esutils": "2.0.2", "js-tokens": "3.0.2" }, @@ -90,9 +90,9 @@ } }, "chalk": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", - "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { "ansi-styles": "3.2.1", @@ -150,7 +150,7 @@ "@babel/types": "7.0.0-beta.44", "babylon": "7.0.0-beta.44", "debug": "3.1.0", - "globals": "11.4.0", + "globals": "11.5.0", "invariant": "2.2.2", "lodash": "4.17.5" }, @@ -171,9 +171,9 @@ } }, "globals": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.4.0.tgz", - "integrity": "sha512-Dyzmifil8n/TmSqYDEXbm+C8yitzJQqQIlJQLNRMwa+BOUJpRC19pyVeN12JAjt61xonvXjtff+hJruTRXn5HA==", + "version": "11.5.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.5.0.tgz", + "integrity": "sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==", "dev": true } } @@ -5132,7 +5132,7 @@ "requires": { "ajv": "5.5.2", "babel-code-frame": "6.26.0", - "chalk": "2.4.0", + "chalk": "2.4.1", "concat-stream": "1.6.0", "cross-spawn": "5.1.0", "debug": "3.1.0", @@ -5145,7 +5145,7 @@ "file-entry-cache": "2.0.0", "functional-red-black-tree": "1.0.1", "glob": "7.1.2", - "globals": "11.4.0", + "globals": "11.5.0", "ignore": "3.3.7", "imurmurhash": "0.1.4", "inquirer": "3.3.0", @@ -5186,9 +5186,9 @@ } }, "chalk": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", - "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { "ansi-styles": "3.2.1", @@ -5206,9 +5206,9 @@ } }, "globals": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.4.0.tgz", - "integrity": "sha512-Dyzmifil8n/TmSqYDEXbm+C8yitzJQqQIlJQLNRMwa+BOUJpRC19pyVeN12JAjt61xonvXjtff+hJruTRXn5HA==", + "version": "11.5.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.5.0.tgz", + "integrity": "sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==", "dev": true }, "has-flag": { @@ -16737,7 +16737,7 @@ "requires": { "ajv": "5.5.2", "ajv-keywords": "2.1.1", - "chalk": "2.4.0", + "chalk": "2.4.1", "lodash": "4.17.5", "slice-ansi": "1.0.0", "string-width": "2.1.1" @@ -16753,9 +16753,9 @@ } }, "chalk": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", - "integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", "dev": true, "requires": { "ansi-styles": "3.2.1", diff --git a/preset/index.js b/preset/index.js index 740c5e722c..8b23cffbb5 100644 --- a/preset/index.js +++ b/preset/index.js @@ -7,8 +7,9 @@ module.exports = function buildPreset () { require('babel-preset-env').default(null, { targets: { browsers: ['last 2 versions', 'ie 11'], - node: '6.8', + node: '8.9.4', }, + modules: false, }), require('babel-preset-react'), ], diff --git a/scripts/dist.sh b/scripts/dist.sh index 689506ff09..1ae5975971 100755 --- a/scripts/dist.sh +++ b/scripts/dist.sh @@ -3,7 +3,8 @@ # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license -./node_modules/.bin/babel-node scripts/inline-icons.js --plugins transform-es2015-modules-commonjs +npx babel-node scripts/inline-icons.js \ + --plugins transform-es2015-modules-commonjs echo "# Building design-system-react" echo "## Preparing the .tmp directory" @@ -12,13 +13,17 @@ rm -rf .tmp/ # Uncomment this line if you need to build an AMD/Require.js module # rm -rf .tmp-amd/ rm -rf .tmp-commonjs/ +# Source code rm -rf .tmp-es/ +# ES6 modules +rm -rf .tmp-esm/ +# All the formats!!! rm -rf .tmp-npm/ mkdir -p .tmp/ echo "## Running webpack" -BUILD="./node_modules/.bin/webpack --config webpack.config.dist.js" +BUILD="npx webpack --config webpack.config.dist.js" eval $BUILD eval "MINIFY=true $BUILD" @@ -35,7 +40,8 @@ cp docs/README-dist.md .tmp/README.md echo "## Running JS steps" -./node_modules/.bin/babel-node scripts/dist.js +npx babel-node scripts/dist.js \ + --plugins transform-es2015-modules-commonjs echo "## Copying the components" @@ -45,6 +51,7 @@ cp -r .tmp .tmp-commonjs cp -r .tmp .tmp-es rm -rf .tmp/ +# Copy source code cp -r components .tmp-es/components cp -r styles .tmp-es/styles cp -r icons .tmp-es/icons @@ -76,7 +83,7 @@ echo "## Transpiling with Babel" # CommonJS module transpilation NODE_ENV=commonjs \ -./node_modules/.bin/babel \ +npx babel \ .tmp-es/components \ --plugins transform-es2015-modules-commonjs \ --out-dir .tmp-commonjs/components \ @@ -84,22 +91,54 @@ NODE_ENV=commonjs \ cp -r styles .tmp-commonjs/styles -./node_modules/.bin/babel \ +npx babel \ .tmp-es/icons \ --plugins transform-es2015-modules-commonjs \ --out-dir .tmp-commonjs/icons NODE_ENV=commonjs \ -./node_modules/.bin/babel \ +npx babel \ .tmp-es/utilities \ --plugins transform-es2015-modules-commonjs \ --out-dir .tmp-commonjs/utilities +# ES6 module transpilation +NODE_ENV=esm \ +npx babel \ + .tmp-es/components \ + --out-dir .tmp-esm/components \ + --source-maps \ + --ignore site-stories.js,__docs__,__examples__,__tests__ + +cp -r styles .tmp-esm/styles + +cp -r icons .tmp-esm/icons + +NODE_ENV=esm \ +npx babel \ + .tmp-es/utilities \ + --source-maps \ + --out-dir .tmp-esm/utilities + +NODE_ENV=esm \ +npx babel \ + .tmp-es/icons \ + --out-dir .tmp-esm/icons + + # NPM module structure -# * `[root]/design-system-react.js` (UMD bundle, backwards compatible) -# * `[root]/components/**` ES6 source code. To use: `import Button from 'design-system-react/components/button'`. This will need transpiler plugins. -# * `lib/**` commonjs transpiled (no babel presets needed, linked to from `package.main`, this would be backwards compatible as long as you didn't want real ES6 modules, this would also be compatible with `create-react-app` See https://github.com/facebookincubator/create-react-app/issues/1125 which doesn't transpile `node_modules` ). To use: `import { Button } from 'design-system-react'`. +# You module bundler will decide whether to use `module` or `lib` as an entry point. +# * `/design-system-react.js` (UMD bundle, backwards compatible, all the things! -- DONT' USE in production.) +# * `/components/**` ES6 source code. To use: `import Button from 'design-system-react/components/button'`. This will need transpiler plugins. +# * `module/**` ES6 modules transpiled (babel-env preset needed, linked to from `package.module`, To use: `import { Button } from 'design-system-react'`. +# * `lib/**` commonjs transpiled (no babel presets needed, linked to from `package.main`). To use: `import { Button } from 'design-system-react'`. cp -r .tmp-es .tmp-npm cp -r .tmp-commonjs .tmp-npm/lib +cp -r .tmp-esm .tmp-npm/module + +# Remove browser UMD bundle from commonjs folder, since the files already exists in the root folder +rm .tmp-npm/lib/*.map +rm .tmp-npm/lib/*.js -./node_modules/.bin/babel-node scripts/npm-transform.js --plugins transform-es2015-modules-commonjs +npx babel-node scripts/npm-transform.js \ + --plugins transform-es2015-modules-commonjs diff --git a/scripts/npm-transform.js b/scripts/npm-transform.js index 393d3768ad..464ee7707d 100644 --- a/scripts/npm-transform.js +++ b/scripts/npm-transform.js @@ -34,6 +34,8 @@ async.series( packageJSON.name = '@salesforce/design-system-react'; packageJSON.main = 'lib/components/index.js'; + packageJSON.module = 'module/components/index.js'; + packageJSON.sideEffects = false; fs.writeFile( distPath('package.json'),