Optimize bundling strategy (#373)

* Optimize bundling strategy

* push condition files

* Create rotten-doors-swim.md

* Create rotten-doors-fly.md

* Create fair-pears-invite.md

.changeset/fair-pears-invite.md

@@ -0,0 +1,5 @@
+---
+"react-textarea-autosize": minor
+---
+
+Compatibility with node's ESM has been improved. `import TextareaAutosize from 'react-textarea-autosize';` was always meant to provide you the default export of this package (the exported component) and now node should load it this way.

.changeset/rotten-doors-fly.md

@@ -0,0 +1,5 @@
+---
+"react-textarea-autosize": minor
+---
+
+SSR environments should now be able to pick smaller bundles through `package.json#exports`.

.changeset/rotten-doors-swim.md

@@ -0,0 +1,5 @@
+---
+"react-textarea-autosize": minor
+---
+
+This package no longer depends on `process.env.NODE_ENV`. To get dev-only warnings you have to configure your bundler/runtime to use the `development` condition.

package.json

@@ -21,15 +21,52 @@
   },
   "exports": {
     ".": {
-      "module": {
-        "worker": "./dist/react-textarea-autosize.worker.esm.js",
-        "browser": "./dist/react-textarea-autosize.browser.esm.js",
-        "default": "./dist/react-textarea-autosize.esm.js"
+      "types": {
+        "import": "./dist/react-textarea-autosize.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.cjs.js"
       },
+      "development": {
+        "worker": {
+          "module": "./dist/react-textarea-autosize.development.esm.js",
+          "import": "./dist/react-textarea-autosize.development.cjs.mjs",
+          "default": "./dist/react-textarea-autosize.development.cjs.js"
+        },
+        "browser": {
+          "module": "./dist/react-textarea-autosize.browser.development.esm.js",
+          "import": "./dist/react-textarea-autosize.browser.development.cjs.mjs",
+          "default": "./dist/react-textarea-autosize.browser.development.cjs.js"
+        },
+        "module": "./dist/react-textarea-autosize.development.esm.js",
+        "import": "./dist/react-textarea-autosize.development.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.development.cjs.js"
+      },
+      "worker": {
+        "module": "./dist/react-textarea-autosize.esm.js",
+        "import": "./dist/react-textarea-autosize.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.cjs.js"
+      },
+      "browser": {
+        "module": "./dist/react-textarea-autosize.browser.esm.js",
+        "import": "./dist/react-textarea-autosize.browser.cjs.mjs",
+        "default": "./dist/react-textarea-autosize.browser.cjs.js"
+      },
+      "module": "./dist/react-textarea-autosize.esm.js",
+      "import": "./dist/react-textarea-autosize.cjs.mjs",
       "default": "./dist/react-textarea-autosize.cjs.js"
     },
     "./package.json": "./package.json"
   },
+  "imports": {
+    "#is-browser": {
+      "worker": "./src/resolved-conditions/false.ts",
+      "browser": "./src/resolved-conditions/true.ts",
+      "default": "./src/resolved-conditions/false.ts"
+    },
+    "#is-development": {
+      "development": "./src/resolved-conditions/true.ts",
+      "default": "./src/resolved-conditions/false.ts"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -70,7 +107,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@changesets/changelog-github": "^0.4.4",
     "@changesets/cli": "^2.22.0",
-    "@preconstruct/cli": "^2.3.0",
+    "@preconstruct/cli": "^2.7.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^10.4.9",
     "@types/react": "^16.14.35",
@@ -94,18 +131,18 @@
     "react-dom": "^16.13.1",
     "rimraf": "^3.0.2",
     "terser": "^4.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.3"
   },
   "engines": {
     "node": ">=10"
   },
   "packageManager": "yarn@3.1.1",
   "preconstruct": {
     "exports": {
-      "envConditions": [
-        "browser",
-        "worker"
-      ]
+      "importConditionDefaultExport": "default"
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
     }
   }
 }

src/getSizingData.ts

@@ -1,3 +1,4 @@
+import isBrowser from '#is-browser';
 import { pick } from './utils';
 
 const SIZING_STYLE = [
@@ -39,10 +40,9 @@ export type SizingData = {
   borderSize: number;
 };
 
-const isIE =
-  typeof document !== 'undefined'
-    ? !!(document.documentElement as any).currentStyle
-    : false;
+const isIE = isBrowser
+  ? !!(document.documentElement as any).currentStyle
+  : false;
 
 const getSizingData = (node: HTMLElement): SizingData | null => {
   const style = window.getComputedStyle(node);

src/index.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import isDevelopment from '#is-development';
+import isBrowser from '#is-browser';
 import calculateNodeHeight from './calculateNodeHeight';
 import getSizingData, { SizingData } from './getSizingData';
 import {
@@ -42,7 +44,7 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
   },
   userRef: React.Ref<HTMLTextAreaElement>,
 ) => {
-  if (process.env.NODE_ENV !== 'production' && props.style) {
+  if (isDevelopment && props.style) {
     if ('maxHeight' in props.style) {
       throw new Error(
         'Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.',
@@ -94,13 +96,14 @@ const TextareaAutosize: React.ForwardRefRenderFunction<
     onChange(event);
   };
 
-  if (typeof document !== 'undefined') {
+  if (isBrowser) {
     React.useLayoutEffect(resizeTextarea);
     useWindowResizeListener(resizeTextarea);
     useFontsLoadedListener(resizeTextarea);
+    return <textarea {...props} onChange={handleChange} ref={ref} />;
   }
 
-  return <textarea {...props} onChange={handleChange} ref={ref} />;
+  return <textarea {...props} ref={ref} />;
 };
 
 export default /* #__PURE__ */ React.forwardRef(TextareaAutosize);

src/resolved-conditions/false.ts

@@ -0,0 +1 @@
+export default false;

src/resolved-conditions/true.ts

@@ -0,0 +1 @@
+export default true;

tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "moduleResolution": "node",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "noEmit": true,
     "strict": true
   }