Merge pull request #6 from welldone-software/dont-transform-classes

Dont transform classes
welldone-software · Jan 19, 2019 · 112fdd0 · 112fdd0
2 parents 1644456 + f22b59b
commit 112fdd0
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 186 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,21 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
+If you are building for latest browsers and don't transpile the "class" keyword use the "no-classes-transpile" dist:
+```js
+import React from 'react';
+
+if (process.env.NODE_ENV !== 'production') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render/dist/no-classes-transpile/umd/whyDidYouRender.min.js');
+  whyDidYouRender(React);
+}
+```
+Not doing so will [result in a bug](https://github.com/welldone-software/why-did-you-render/issues/5)
+where a transpiled class tries to extend a native class:
+
+`class constructors must be invoked with |new|`.
+
+
 Then mark all the components you want to be notified about their re-renders with `whyDidYouRender` like so:
 
 ```js

diff --git a/babel.config.js b/babel.config.js
@@ -7,7 +7,8 @@ module.exports = function(api){
 
   const presets = [
     ['@babel/preset-env', {
-      modules: isTest ? 'commonjs' : false
+      modules: isTest ? 'commonjs' : false,
+      exclude: ['babel-plugin-transform-classes']
     }],
     '@babel/preset-react'
   ]

diff --git a/package.json b/package.json
@@ -5,6 +5,9 @@
   "main": "dist/cjs/whyDidYouRender.min.js",
   "module": "dist/esm/whyDidYouRender.min.js",
   "browser": "dist/umd/whyDidYouRender.min.js",
+  "main-no-classes-transpile": "dist/no-classes-transpile/cjs/whyDidYouRender.min.js",
+  "module-no-classes-transpile": "dist/no-classes-transpile/esm/whyDidYouRender.min.js",
+  "browser-no-classes-transpile": "dist/no-classes-transpile/umd/whyDidYouRender.min.js",
   "files": [
     "src",
     "dist"
@@ -31,7 +34,7 @@
     "cacheDirectory": ".temp/jest-cache"
   },
   "dependencies": {
-    "lodash": "^4.17.11"
+    "lodash": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.0"
@@ -51,29 +54,29 @@
     "concurrently": "^4.1.0",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "eslint": "^5.10.0",
-    "eslint-plugin-jest": "^22.1.2",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint": "^5.12.1",
+    "eslint-plugin-jest": "^22.1.3",
+    "eslint-plugin-react": "^7.12.4",
     "eslint-watch": "^4.0.2",
     "express": "^4.16.4",
     "express-history-api-fallback": "^2.2.1",
-    "husky": "^1.3.0",
+    "husky": "^1.3.1",
     "jest": "^23.6.0",
     "jest-cli": "^23.6.0",
     "magic-string": "^0.25.1",
-    "nollup": "^0.3.0",
+    "nollup": "^0.4.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-hot-loader": "^4.6.3",
     "react-test-renderer": "^16.7.0",
-    "rimraf": "^2.6.2",
-    "rollup": "^0.68.1",
-    "rollup-plugin-babel": "^4.1.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.1.0",
+    "rollup-plugin-babel": "^4.3.1",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-license": "^0.7.0",
+    "rollup-plugin-license": "^0.8.1",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-terser": "^3.0.0"
+    "rollup-plugin-terser": "^4.0.2"
   },
   "authors": [
     "Vitali Zaidman <vzaidman@gmail.com> (https://github.com/vzaidman)"

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,4 +1,4 @@
-import {flatMap} from 'lodash'
+import {flatMap, compact} from 'lodash'
 import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
@@ -13,70 +13,71 @@ MIT Licensed
 Generated by <%= pkg.authors[0] %>
 Generated at <%= moment().format('YYYY-MM-DD') %>
 `
+export default flatMap(['none', 'shouldMinify', 'noClassesTranspile', 'both'], buildMode => {
+  const shouldMinify = buildMode === 'shouldMinify' || buildMode === 'both'
+  const shouldTranspileClasses = buildMode !== 'noClassesTranspile' || buildMode === 'both'
 
-export default flatMap([false, true], shouldMinify => [
-  {
-    input: 'src/index.js',
-    output: {
-      name: 'whyDidYouRender',
-      file: pkg.browser.replace('.min', shouldMinify ? '.min' : ''),
-      format: 'umd',
-      sourcemap: shouldMinify,
-      sourcemapFile: pkg.browser.replace('.js', '.js.map')
-    },
-    plugins: [
-      babel({
-        exclude: 'node_modules/**'
-      }),
-      resolve(),
-      commonjs(),
-      shouldMinify && terser(),
-      license({
-        sourceMap: true,
-        banner
-      })
-    ]
-  },
-  {
-    input: 'src/index.js',
-    output: [
-      // {file: pkg.module, format: 'es'}
-      // when https://github.com/TrySound/rollup-plugin-terser/issues/5 fixed
-      {
-        file: pkg.main.replace('.min', shouldMinify ? '.min' : ''),
-        format: 'cjs',
-        sourcemap: shouldMinify,
-        sourcemapFile: pkg.main.replace('.js', '.js.map')
-      }
-    ],
-    plugins: [
-      babel({
-        exclude: 'node_modules/**'
-      }),
-      resolve(),
-      commonjs(),
-      shouldMinify && terser()
-    ],
-    external: id => /lodash/.test(id)
-  },
-  {
-    input: 'src/index.js',
-    output: [
-      {
-        file: pkg.module.replace('.min', shouldMinify ? '.min' : ''),
-        format: 'esm',
+  const babelPlugins = compact([
+    shouldTranspileClasses && '@babel/plugin-transform-classes'
+  ])
+
+  return [
+    {
+      input: 'src/index.js',
+      output: {
+        name: 'whyDidYouRender',
+        file: (shouldTranspileClasses ? pkg.browser : pkg['browser-no-classes-transpile'])
+          .replace('.min', shouldMinify ? '.min' : ''),
+        format: 'umd',
         sourcemap: shouldMinify,
-        sourcemapFile: pkg.module.replace('.js', '.js.map')
-      }
-    ],
-    plugins: [
-      babel({
-        exclude: 'node_modules/**'
-      }),
-      resolve(),
-      commonjs(),
-      shouldMinify && terser()
-    ],
-    external: id => /lodash/.test(id)
-  }
-])
+        sourcemapFile: pkg.browser.replace('.js', '.js.map')
+      },
+      plugins: [
+        babel({
+          exclude: 'node_modules/**',
+          plugins: babelPlugins
+        }),
+        resolve(),
+        commonjs(),
+        shouldMinify && terser(),
+        license({
+          sourcemap: true,
+          banner
+        })
+      ]
+    },
+    {
+      input: 'src/index.js',
+      output: [
+        {
+          file: (shouldTranspileClasses ? pkg.main : pkg['main-no-classes-transpile'])
+            .replace('.min', shouldMinify ? '.min' : ''),
+          format: 'cjs',
+          sourcemap: shouldMinify,
+          sourcemapFile: pkg.main.replace('.js', '.js.map')
+        },
+        {
+          file: (shouldTranspileClasses ? pkg.module : pkg['module-no-classes-transpile'])
+            .replace('.min', shouldMinify ? '.min' : ''),
+          format: 'esm',
+          sourcemap: shouldMinify,
+          sourcemapFile: pkg.module.replace('.js', '.js.map')
+        }
+      ],
+      plugins: [
+        babel({
+          exclude: 'node_modules/**',
+          plugins: babelPlugins
+        }),
+        resolve(),
+        commonjs(),
+        shouldMinify && terser(),
+        license({
+          sourcemap: true,
+          banner
+        })
+      ],
+      external: id => /lodash/.test(id)
+    }
+  ]
+})