From 05b014a8c46834bba42ccd506d18e28064b9dc9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Wed, 21 Jun 2023 17:28:56 +0200 Subject: [PATCH] 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 | 5 ++ .changeset/rotten-doors-fly.md | 5 ++ .changeset/rotten-doors-swim.md | 5 ++ package.json | 57 ++++++++++--- src/getSizingData.ts | 8 +- src/index.tsx | 9 ++- src/resolved-conditions/false.ts | 1 + src/resolved-conditions/true.ts | 1 + tsconfig.json | 3 +- yarn.lock | 133 +++++++++++++++++++++++-------- 10 files changed, 175 insertions(+), 52 deletions(-) create mode 100644 .changeset/fair-pears-invite.md create mode 100644 .changeset/rotten-doors-fly.md create mode 100644 .changeset/rotten-doors-swim.md create mode 100644 src/resolved-conditions/false.ts create mode 100644 src/resolved-conditions/true.ts diff --git a/.changeset/fair-pears-invite.md b/.changeset/fair-pears-invite.md new file mode 100644 index 00000000..d75abbe6 --- /dev/null +++ b/.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. diff --git a/.changeset/rotten-doors-fly.md b/.changeset/rotten-doors-fly.md new file mode 100644 index 00000000..dd7521af --- /dev/null +++ b/.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`. diff --git a/.changeset/rotten-doors-swim.md b/.changeset/rotten-doors-swim.md new file mode 100644 index 00000000..6f74deee --- /dev/null +++ b/.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. diff --git a/package.json b/package.json index ba9a75bf..c5768ac5 100644 --- a/package.json +++ b/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,7 +131,7 @@ "react-dom": "^16.13.1", "rimraf": "^3.0.2", "terser": "^4.7.0", - "typescript": "^4.9.5" + "typescript": "^5.1.3" }, "engines": { "node": ">=10" @@ -102,10 +139,10 @@ "packageManager": "yarn@3.1.1", "preconstruct": { "exports": { - "envConditions": [ - "browser", - "worker" - ] + "importConditionDefaultExport": "default" + }, + "___experimentalFlags_WILL_CHANGE_IN_PATCH": { + "importsConditions": true } } } diff --git a/src/getSizingData.ts b/src/getSizingData.ts index 1c9c22c0..f42454e9 100644 --- a/src/getSizingData.ts +++ b/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); diff --git a/src/index.tsx b/src/index.tsx index e1183f80..b84c6adb 100644 --- a/src/index.tsx +++ b/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, ) => { - if (process.env.NODE_ENV !== 'production' && props.style) { + if (isDevelopment && props.style) { if ('maxHeight' in props.style) { throw new Error( 'Using `style.maxHeight` for 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