Create actual browser bundles and transpile everything else

.eslintrc.json

@@ -5,6 +5,9 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended"
   ],
+  "globals": {
+    "__DEV__": "readonly"
+  },
   "rules": {
     "import/no-namespace": 0,
     "no-shadow": 0,

.gitignore

@@ -3,4 +3,6 @@ node_modules
 .DS_Store
 coverage/
 dist/
+lib/
 public/
+stats.html

babel-defines.js

@@ -0,0 +1,13 @@
+const shared = {
+  __DEV__: "process.env.NODE_ENV !== 'production'"
+}
+
+module.exports = {
+  development: shared,
+  test: shared,
+  production: {
+    ...shared,
+    __DEV__: 'false',
+    'process.env.NODE_ENV': "'production'"
+  }
+}

babel.config.js

@@ -0,0 +1,39 @@
+const defines = require('./babel-defines')
+
+function replacementPlugin(env) {
+  return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]
+}
+
+const sharedPlugins = [
+  'macros',
+  'preval',
+  'add-react-displayname',
+  'babel-plugin-styled-components',
+  '@babel/plugin-proposal-object-rest-spread'
+]
+
+const devPlugins = [['@babel/plugin-transform-runtime', {version: '7.9.2', helpers: true}]]
+
+function makePresets(moduleValue) {
+  return [
+    ['@babel/preset-react', {modules: moduleValue}],
+    ['@babel/preset-env', {modules: moduleValue}]
+  ]
+}
+
+module.exports = {
+  env: {
+    development: {
+      presets: makePresets('commonjs'),
+      plugins: [...sharedPlugins, ...devPlugins, replacementPlugin('development')]
+    },
+    production: {
+      presets: makePresets(false),
+      plugins: [...sharedPlugins, replacementPlugin('production')]
+    },
+    test: {
+      presets: makePresets('commonjs'),
+      plugins: [...sharedPlugins, replacementPlugin('test')]
+    }
+  }
+}

docs/content/getting-started.md

@@ -4,30 +4,40 @@ title: Getting Started
 
 ## Installation
 
-To get started using Primer Components, install the package and its two peer dependencies with your package manager of choice:
+To get started using Primer Components, install the package and its peer dependencies with your package manager of choice:
 
 ```bash
 # with npm
-npm install @primer/components react styled-components
+npm install @primer/components react react-dom styled-components
 
 # with yarn
-yarn add @primer/components react styled-components
+yarn add @primer/components react react-dom styled-components
 ```
 
-You can now start importing Primer Components!
+You can now import Primer Components from the main package module:
 
 ```javascript
 import {Box, Flex} from '@primer/components'
 ```
 
+Alternatively, you can import individual components from the `lib` subfolder:
+
+```javascript
+import Box from '@primer/components/lib/Box'
+import Flex from '@primer/components/lib/Flex'
+```
+
+Importing components individually can reduce bundle sizes if you don't have tree-shaking set up in your app.
+
 ### Peer dependencies
 
 Primer Components ships with a few libraries labeled as peer dependencies. These libraries are separated because they are commonly already installed in the host project and having multiple versions can introduce errors.
 
-Before getting started using Primer Components, make sure that the following libraries are installed in your host project:
+Primer Components requires the following libraries to be installed along with it:
 
 - `styled-components` at version 4.0.0 or higher
 - `react` at versions 16.8.0 or higher
+- `react-dom` at versions 16.8.0 or higher
 
 ## BaseStyles
 
@@ -128,3 +138,7 @@ In your `tsconfig.json`, set the `types` array under the `compilerOptions` like
 ```
 
 Of course, customize the array based on the `@types/` packages you have installed for your project.
+
+## Silencing warnings
+
+Like React, Primer Components emits warnings to the JavaScript console under certain conditions, like using deprecated components or props. Similar to React, you can silence these warnings by setting the `NODE_ENV` environment variable to `production` during bundling.

docs/gatsby-node.js

@@ -0,0 +1,23 @@
+const defines = require('../babel-defines')
+
+exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
+  const config = getConfig()
+  // Add our `__DEV__` and `process.env.NODE_ENV` defines
+  config.plugins.push(plugins.define(defines[process.env.NODE_ENV || 'development']))
+
+  config.module.rules = [
+    // Remove the original rule that compiles `.js`. and `.jsx` files...
+    ...config.module.rules.filter(rule => String(rule.test) !== String(/\.jsx?$/)),
+    // ...and replace it with a custom configuration.
+    {
+      // The new configuration is based off the original...
+      ...loaders.js(),
+      test: /\.jsx?$/,
+      exclude: modulePath => /node_modules/.test(modulePath),
+      // ...except that we want to run Primer Components through webpack as well.
+      // By default, Gatsby won't use the define plugin we added above on Primer Components.
+      include: modulePath => /@primer\/components/.test(modulePath)
+    }
+  ]
+  actions.replaceWebpackConfig(config)
+}

docs/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "gatsby clean",
     "develop": "gatsby develop",
-    "build": "cd .. && yarn && cd docs && gatsby build --prefix-paths"
+    "build": "cd .. && yarn && cd docs && cross-env NODE_ENV=production gatsby build --prefix-paths"
   },
   "engines": {
     "node": ">= 10.x"
@@ -23,6 +23,7 @@
     "styled-system": "^5.1.0"
   },
   "devDependencies": {
+    "cross-env": "7.0.2",
     "minipass": "^2.9.0"
   }
-}
+}

docs/yarn.lock

@@ -3906,6 +3906,13 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+cross-env@7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-fetch@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.2.tgz#a47ff4f7fc712daba8f6a695a11c948440d45723"
@@ -3943,6 +3950,15 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
+  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypt@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"

jest.config.js

@@ -2,5 +2,5 @@ module.exports = {
   cacheDirectory: '.test',
   collectCoverage: true,
   collectCoverageFrom: ['src/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.js']
+  setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.js', '<rootDir>/src/utils/test-deprecations.js']
 }

now.json

@@ -2,7 +2,7 @@
   "name": "primer-components",
   "version": 2,
   "alias": "primer-components.now.sh",
-  "files": [".babelrc", "yarn.lock", "docs", "rollup.config.js", "src", "static"],
+  "files": ["babel.config.js", "yarn.lock", "docs", "rollup.config.js", "src", "static"],
   "routes": [
     {"src": "/playroom(/.*)?", "dest": "$1"},
     {"src": "/components(/.*)?", "dest": "/docs$1"},

package.json

@@ -2,13 +2,15 @@
   "name": "@primer/components",
   "version": "19.0.0",
   "description": "Primer react components",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.esm.js",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "start": "cd docs && yarn run develop",
     "predist": "rm -rf dist",
-    "dist": "NODE_ENV=production rollup -c",
+    "dist": "yarn dist:rollup && yarn dist:transpile",
+    "dist:rollup": "cross-env NODE_ENV=production rollup -c",
+    "dist:transpile": "rm -rf lib && babel src --out-dir lib",
     "prepublishOnly": "yarn run dist",
     "lint": "eslint src docs/components",
     "test": "jest -- src",
@@ -28,14 +30,15 @@
   "files": [
     "codemods",
     "dist",
-    "src",
+    "lib",
     "index.d.ts",
-    "!src/__tests__",
-    "!src/utils"
+    "!lib/__tests__"
   ],
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
+    "@babel/helpers": "7.9.2",
+    "@babel/runtime": "7.9.2",
     "@primer/octicons-react": "^9.6.0",
     "@primer/primitives": "3.0.0",
     "@reach/dialog": "0.3.0",
@@ -46,24 +49,31 @@
     "@testing-library/react": "9.4.0",
     "@types/styled-components": "^4.4.0",
     "@types/styled-system": "5.1.2",
-    "babel-plugin-macros": "2.6.1",
+    "babel-plugin-macros": "2.8.0",
     "babel-polyfill": "6.26.0",
     "classnames": "^2.2.5",
     "details-element-polyfill": "2.4.0",
     "jest-axe": "3.2.0",
-    "nanoid": "2.1.4",
     "polished": "3.5.2",
     "react": "^16.10.2",
     "react-is": "16.10.2",
     "styled-system": "5.1.2"
   },
   "devDependencies": {
-    "@babel/core": "7.7.7",
-    "@babel/plugin-proposal-object-rest-spread": "7.6.2",
-    "@babel/preset-env": "7.7.7",
-    "@babel/preset-react": "7.6.3",
+    "@babel/cli": "7.8.4",
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.9.5",
+    "@babel/plugin-transform-runtime": "7.9.0",
+    "@babel/preset-env": "7.9.5",
+    "@babel/preset-react": "7.9.4",
+    "@rollup/plugin-commonjs": "11.1.0",
+    "@rollup/plugin-node-resolve": "7.1.3",
+    "babel-core": "7.0.0-bridge.0",
     "babel-plugin-add-react-displayname": "0.0.5",
-    "babel-plugin-styled-components": "1.10.6",
+    "babel-plugin-preval": "5.0.0",
+    "babel-plugin-styled-components": "1.10.7",
+    "babel-plugin-transform-replace-expressions": "0.2.0",
+    "cross-env": "7.0.2",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
     "eslint": "6.5.1",
@@ -76,26 +86,30 @@
     "jscodeshift": "0.6.4",
     "playroom": "0.15.1",
     "raw.macro": "0.3.0",
-    "react-dom": "16.11.0",
+    "react-dom": "^16.10.2",
     "react-test-renderer": "16.10.2",
-    "rollup": "1.25.1",
-    "rollup-plugin-babel": "4.3.3",
+    "rollup": "2.7.3",
+    "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",
+    "rollup-plugin-terser": "5.3.0",
+    "rollup-plugin-visualizer": "4.0.4",
+    "semver": "7.3.2",
     "styled-components": "4.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "styled-components": "4.x || 5.x"
   },
   "actionBundlesize": {
-    "build": "yarn && yarn dist",
+    "build": "yarn && yarn dist:rollup",
     "files": [
       {
-        "path": "dist/index.esm.js",
+        "path": "dist/browser.esm.js",
         "name": "ESM Build"
       },
       {
-        "path": "dist/index.umd.js",
+        "path": "dist/browser.umd.js",
         "name": "UMD Build"
       }
     ]

rollup.config.js

@@ -1,18 +1,40 @@
 import babel from 'rollup-plugin-babel'
 import commonjs from 'rollup-plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import {terser} from 'rollup-plugin-terser'
+import visualizer from 'rollup-plugin-visualizer'
+
+// NOTE: this can be removed once the next version of rollup-plugin-commonjs is released
+const namedExports = {
+  'prop-types': ['object', 'func', 'oneOfType', 'node', 'bool', 'string', 'any', 'arrayOf'],
+  'react-dom': ['createPortal'],
+  'react-is': ['isValidElementType']
+}
 
 const formats = ['esm', 'umd'] // 'cjs' ?
-const plugins = [babel({exclude: 'node_modules/**'}), commonjs()]
+const plugins = [
+  babel({exclude: 'node_modules/**'}),
+  resolve(),
+  commonjs({namedExports}),
+  terser(),
+  visualizer({sourcemap: true})
+]
 
 export default [
   {
     input: 'src/index.js',
     plugins,
-    external: ['styled-components', 'react'],
+    external: ['styled-components', 'react', 'react-dom'],
     output: formats.map(format => ({
-      file: `dist/index.${format}.js`,
+      file: `dist/browser.${format}.js`,
       format,
-      name: 'primer'
+      sourcemap: true,
+      name: 'primer',
+      globals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        'styled-components': 'styled'
+      }
     }))
   }
 ]