Reworked browser builds, make default build compatible with both node…

… & browsers due to non-ideal browser field support

.babelrc.js

@@ -12,5 +12,6 @@ module.exports = {
   	['@babel/proposal-class-properties', { loose }],
   	['@babel/proposal-object-rest-spread', { loose }],
     ['transform-react-remove-prop-types', { mode: 'unsafe-wrap' }],
+    'macros',
   ]
 }

package.json

@@ -35,10 +35,12 @@
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.51",
+    "@babel/helper-module-imports": "7.0.0-beta.52",
     "@babel/plugin-proposal-class-properties": "7.0.0-beta.51",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.51",
     "@babel/preset-env": "7.0.0-beta.51",
     "@babel/preset-react": "7.0.0-beta.51",
+    "babel-plugin-macros": "^2.2.2",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "cross-env": "^5.0.1",

rollup.config.js

@@ -21,20 +21,11 @@ const makeExternalPredicate = externalArr => {
 const createConfig = ({
   output,
   browser = true,
-  server = false,
   umd = false,
   env,
 } = {}) => {
   const min = env === 'production';
 
-  if (browser && server) {
-    throw new Error('Bundle cannot target both `browser` & `server` at the same time. Pass `true` only to one of these options.');
-  }
-
-  if (!browser && !server) {
-    throw new Error('Bundle must target `browser` or `server` environment. Pass `true` to one of these options.');
-  }
-
   return {
     input: 'src/index.js',
     output: ensureArray(output).map(format => Object.assign(
@@ -62,7 +53,6 @@ const createConfig = ({
           : {},
         {
           'process.env.BROWSER': JSON.stringify(browser),
-          'process.env.SERVER': JSON.stringify(server),
         }
       )),
       min && uglify({
@@ -90,7 +80,6 @@ export default [
       { file: pkg.main, format: 'cjs' },
       { file: pkg.module, format: 'esm' },
     ],
-    server: true,
     browser: false,
   }),
   createConfig({

src/calculateNodeHeight.js

@@ -1,6 +1,6 @@
-const isIE = process.env.BROWSER
-  ? !!document.documentElement.currentStyle
-  : false;
+import isBrowser from './isBrowser.macro';
+
+const isIE = isBrowser ? !!document.documentElement.currentStyle : false;
 
 const HIDDEN_TEXTAREA_STYLE = {
   'min-height': '0',
@@ -38,16 +38,15 @@ const SIZING_STYLE = [
 ];
 
 let computedStyleCache = {};
-const hiddenTextarea =
-  process.env.BROWSER && document.createElement('textarea');
+const hiddenTextarea = isBrowser && document.createElement('textarea');
 
 const forceHiddenStyles = node => {
   Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(key => {
     node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
   });
 };
 
-if (process.env.BROWSER) {
+if (isBrowser) {
   forceHiddenStyles(hiddenTextarea);
 }
 
@@ -96,11 +95,11 @@ export default function calculateNodeHeight(
   // measure height of a textarea with a single row
   hiddenTextarea.value = 'x';
   const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-  
+
   // Stores the value's rows count rendered in `hiddenTextarea`,
   // regardless if `maxRows` or `minRows` props are passed
   const valueRowCount = Math.floor(height / singleRowHeight);
-  
+
   if (minRows !== null) {
     minHeight = singleRowHeight * minRows;
     if (boxSizing === 'border-box') {

src/index.js

@@ -5,14 +5,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import calculateNodeHeight, { purgeCache } from './calculateNodeHeight';
+import isBrowser from './isBrowser.macro';
 
 const noop = () => {};
 
 // IE11 has a problem with eval source maps, can be reproduced with:
 // eval('"use strict"; var onNextFrame = window.cancelAnimationFrame; onNextFrame(4);')
 // so we bind window as context in dev modes
 const [onNextFrame, clearNextFrameAction] =
-  process.env.BROWSER && window.requestAnimationFrame
+  isBrowser && window.requestAnimationFrame
     ? process.env.NODE_ENV !== 'development'
       ? [window.requestAnimationFrame, window.cancelAnimationFrame]
       : [
@@ -128,7 +129,7 @@ export default class TextareaAutosize extends React.Component {
   };
 
   _resizeComponent = (callback = noop) => {
-    if (!process.env.BROWSER) {
+    if (!process.env.BROWSER && !this._ref) {
       callback();
       return;
     }

src/isBrowser.js

@@ -0,0 +1 @@
+export default typeof window !== 'undefined' && typeof document !== 'undefined';

src/isBrowser.macro.js

@@ -0,0 +1,28 @@
+const { createMacro, MacroError } = require('babel-plugin-macros');
+const { addDefault } = require('@babel/helper-module-imports');
+
+module.exports = createMacro(({ references, babel: { template } }) => {
+  const usedReferences = Object.keys(references);
+
+  if (usedReferences.length > 1 || usedReferences[0] !== 'default') {
+    throw new MacroError(
+      `${__filename} must be used as default import, instead you have used it as: ${usedReferences.join(
+        ', ',
+      )}.`,
+    );
+  }
+
+  const { name: insertedName } = addDefault(
+    references.default[0],
+    './isBrowser',
+    { nameHint: 'isBrowser' },
+  );
+
+  const enhancedIsBrowser = template(`process.env.BROWSER || ${insertedName}`, {
+    placeholderPattern: false,
+  });
+
+  references.default.forEach(isBrowser => {
+    isBrowser.replaceWith(enhancedIsBrowser().expression);
+  });
+});