Build: minified builds for CJS and UMD

rpearce · Feb 2, 2020 · c5f6dd7 · c5f6dd7
1 parent 1758c7d
commit c5f6dd7
Show file tree

Hide file tree

Showing 17 changed files with 506 additions and 567 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.2dfc34d20355c3a505e6.bundle.js"></script><script src="vendors~main.2dfc34d20355c3a505e6.bundle.js"></script><script src="main.2dfc34d20355c3a505e6.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.4c3784a4a13351577a47.bundle.js"></script><script src="vendors~main.4c3784a4a13351577a47.bundle.js"></script><script src="main.4c3784a4a13351577a47.bundle.js"></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -16,4 +16,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.775cacdbd62960fa5181.bundle.js"></script><script src="main.2fae4beed0f77a55f27c.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.adebe95079cad17a6241.bundle.js"></script><script src="main.2fae4beed0f77a55f27c.bundle.js"></script></body></html>
diff --git a/docs/main.2dfc34d20355c3a505e6.bundle.js.map b/docs/main.2dfc34d20355c3a505e6.bundle.js.map
diff --git a/docs/main.2dfc34d20355c3a505e6.bundle.js → docs/main.4c3784a4a13351577a47.bundle.js b/docs/main.2dfc34d20355c3a505e6.bundle.js → docs/main.4c3784a4a13351577a47.bundle.js
diff --git a/docs/main.4c3784a4a13351577a47.bundle.js.map b/docs/main.4c3784a4a13351577a47.bundle.js.map
diff --git a/docs/runtime~main.2dfc34d20355c3a505e6.bundle.js.map b/docs/runtime~main.2dfc34d20355c3a505e6.bundle.js.map
diff --git a/...ntime~main.2dfc34d20355c3a505e6.bundle.js → ...ntime~main.4c3784a4a13351577a47.bundle.js b/...ntime~main.2dfc34d20355c3a505e6.bundle.js → ...ntime~main.4c3784a4a13351577a47.bundle.js
diff --git a/docs/runtime~main.4c3784a4a13351577a47.bundle.js.map b/docs/runtime~main.4c3784a4a13351577a47.bundle.js.map
diff --git a/docs/sb_dll/storybook_ui_dll.js b/docs/sb_dll/storybook_ui_dll.js
diff --git a/docs/vendors~main.2dfc34d20355c3a505e6.bundle.js.map b/docs/vendors~main.2dfc34d20355c3a505e6.bundle.js.map
diff --git a/...ndors~main.2dfc34d20355c3a505e6.bundle.js → ...ndors~main.4c3784a4a13351577a47.bundle.js b/...ndors~main.2dfc34d20355c3a505e6.bundle.js → ...ndors~main.4c3784a4a13351577a47.bundle.js
diff --git a/...dfc34d20355c3a505e6.bundle.js.LICENSE.txt → ...c3784a4a13351577a47.bundle.js.LICENSE.txt b/...dfc34d20355c3a505e6.bundle.js.LICENSE.txt → ...c3784a4a13351577a47.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.4c3784a4a13351577a47.bundle.js.map b/docs/vendors~main.4c3784a4a13351577a47.bundle.js.map
diff --git a/...ndors~main.775cacdbd62960fa5181.bundle.js → ...ndors~main.adebe95079cad17a6241.bundle.js b/...ndors~main.775cacdbd62960fa5181.bundle.js → ...ndors~main.adebe95079cad17a6241.bundle.js
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Accessible medium.com-style image zoom for React",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "browser": "dist/umd/index.js",
+  "browser": "dist/umd/react-medium-image-zoom.min.js",
   "repository": {
     "type": "git",
     "url": "git@github.com:rpearce/react-medium-image-zoom.git"
@@ -53,25 +53,25 @@
     "coverage": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "lint": "eslint .",
     "prepublishOnly": "run-p lint test && npm run build:js",
-    "start": "run-s clean build:js && run-p build:js:watch storybook",
+    "start": "BUILD_ENV=esm run-s clean build:js && run-p build:js:watch storybook",
     "storybook": "start-storybook -p 6006",
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.3",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
     "@babel/polyfill": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@rollup/plugin-commonjs": "^11.0.1",
-    "@rollup/plugin-node-resolve": "^7.0.0",
-    "@storybook/addon-a11y": "^5.3.9",
-    "@storybook/addon-actions": "^5.3.9",
-    "@storybook/addon-docs": "^5.3.9",
-    "@storybook/addon-knobs": "^5.3.9",
-    "@storybook/addon-links": "^5.3.9",
-    "@storybook/react": "^5.3.9",
-    "@testing-library/jest-dom": "^5.0.2",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.0",
+    "@storybook/addon-a11y": "^5.3.10",
+    "@storybook/addon-actions": "^5.3.10",
+    "@storybook/addon-docs": "^5.3.10",
+    "@storybook/addon-knobs": "^5.3.10",
+    "@storybook/addon-links": "^5.3.10",
+    "@storybook/react": "^5.3.10",
+    "@testing-library/jest-dom": "^5.1.0",
     "@testing-library/react": "^9.4.0",
     "all-contributors-cli": "^6.13.0",
     "autoprefixer": "^9.7.4",
@@ -87,27 +87,27 @@
     "eslint-plugin-jest": "^23.6.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react": "^7.18.2",
     "eslint-plugin-react-hooks": "^2.3.0",
     "husky": "^4.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.0.0",
-    "lint-staged": "^10.0.3",
+    "lint-staged": "^10.0.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "rollup": "^1.30.1",
-    "rollup-plugin-auto-external": "^3.0.0-alpha.0",
+    "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-postcss": "^2.0.5"
+    "rollup-plugin-postcss": "^2.0.5",
+    "rollup-plugin-terser": "^5.2.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0"
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "react-use": "^13.22.3"
+    "react-use": "^13.22.4"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,15 +1,20 @@
 import { dirname } from 'path'
 import babel from 'rollup-plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
-import external from 'rollup-plugin-auto-external'
 import postcss from 'rollup-plugin-postcss'
 import resolve from '@rollup/plugin-node-resolve'
+import { terser } from 'rollup-plugin-terser'
 import pkg from './package.json'
 
 const plugins = [
   resolve(),
-  external(),
-  commonjs({ include: /node_modules/ }),
+  commonjs({
+    include: /node_modules/,
+    namedExports: {
+      'prop-types': ['bool', 'func', 'node', 'object', 'number', 'string'],
+      'react-dom': ['createPortal']
+    }
+  }),
   babel({
     configFile: './babel.config.js',
     only: ['./source'],
@@ -23,55 +28,89 @@ const plugins = [
   })
 ]
 
-const config = [
+const buildModules = [
+  './source/index.js',
+  './source/helpers.js',
+  './source/Uncontrolled.js',
+  './source/UncontrolledActivated.js',
+  './source/Controlled.js',
+  './source/ControlledActivated.js'
+]
+
+const isExternal = id => !id.startsWith('.')
+
+const esm = [
+  {
+    input: buildModules,
+    output: {
+      dir: dirname(pkg.module),
+      exports: 'named',
+      format: 'esm',
+      name: 'rmiz-esm',
+      sourcemap: true
+    },
+    external: isExternal,
+    plugins
+  }
+]
+
+const cjs = [
   {
-    input: [
-      './source/index.js',
-      './source/helpers.js',
-      './source/Uncontrolled.js',
-      './source/UncontrolledActivated.js',
-      './source/Controlled.js',
-      './source/ControlledActivated.js'
-    ],
-    output: [
-      {
-        dir: dirname(pkg.module),
-        exports: 'named',
-        format: 'esm',
-        name: 'rmiz-esm',
-        sourcemap: true
-      },
-      {
-        dir: dirname(pkg.main),
-        exports: 'named',
-        format: 'cjs',
-        name: 'rmiz-cjs',
-        sourcemap: true
-      }
-    ],
+    input: buildModules,
+    output: {
+      dir: dirname(pkg.main),
+      exports: 'named',
+      format: 'cjs',
+      name: 'rmiz-cjs',
+      sourcemap: true
+    },
+    external: isExternal,
     plugins
   },
   {
     input: './source/index.js',
-    output: [
-      {
-        file: pkg.browser,
-        exports: 'named',
-        format: 'umd',
-        globals: {
-          react: 'React',
-          'react-dom': 'reactDom',
-          'prop-types': 'propTypes',
-          'react-use/lib/useEvent': 'useEvent',
-          'react-use/lib/usePrevious': 'usePrevious',
-          'react-use/lib/useWindowSize': 'useWindowSize'
-        },
-        name: 'rmiz-umd',
-        sourcemap: true
-      }
-    ],
-    plugins
+    output: {
+      file: `${dirname(pkg.main)}/${pkg.name}.min.js`,
+      exports: 'named',
+      format: 'cjs',
+      name: 'rmiz-cjs-min',
+      sourcemap: true
+    },
+    external: isExternal,
+    plugins: plugins.concat(terser())
+  }
+]
+
+const umd = [
+  {
+    input: './source/index.js',
+    output: {
+      file: pkg.browser,
+      exports: 'named',
+      format: 'umd',
+      globals: { react: 'React' },
+      name: 'rmiz-umd',
+      sourcemap: true
+    },
+    external: ['react'],
+    plugins: plugins.concat(terser())
   }
 ]
 
+let config
+
+switch (process.env.BUILD_ENV) {
+  case 'cjs':
+    config = cjs
+    break
+  case 'esm':
+    config = esm
+    break
+  case 'umd':
+    config = umd
+    break
+  default:
+    config = cjs.concat(esm).concat(umd)
+}
+
 export default config