Migrate build system from Rollup+Babel to tsdown and switch to PNPM

.gitignore

@@ -4,6 +4,7 @@ node_modules
 .vscode
 yarn-error.log*
 dist
-/polyfilled.js
-/polyfilled.d.ts
+/polyfilled.cjs
+/polyfilled.d.cts
+/polyfilled.d.cts.map
 local.log

.size-limit.json

@@ -1,16 +1,16 @@
 [
   {
-    "path": "dist/bundle.esm.js",
+    "path": "dist/index.mjs",
     "limit": "648B",
     "gzip": true
   },
   {
-    "path": "dist/bundle.cjs.js",
+    "path": "dist/index.cjs",
     "limit": "625B",
     "gzip": true
   },
   {
-    "path": "polyfilled.js",
+    "path": "polyfilled.cjs",
     "limit": "3384B",
     "gzip": true
   }

CONTRIBUTING.md

@@ -18,7 +18,7 @@ the required feature can be discussed, as well as the actual implementation.
 - Add new test(s) to cover the new feature in: `test/testing-lib.tsx`.
   Ignore the other test files, as they're fairly old and much harder to add new
   ones to them compared to just using react testing lib.
-- Run all the tests to ensure there are no regressions: `yarn test`,
+- Run all the tests to ensure there are no regressions: `pnpm test`,
 
 ## Using Watch Modes While Developing
 
@@ -30,10 +30,10 @@ every time a change was made.
 
 To do so:
 
-- Run `yarn src:watch` in a terminal tab
-- Run `yarn karma:watch` in another.
+- Run `pnpm src:watch` in a terminal tab
+- Run `pnpm karma:watch` in another.
 
-Don't forget to run `yarn test` at the end once you're done with everything, to
+Don't forget to run `pnpm test` at the end once you're done with everything, to
 make sure the new code is tested for regressions.
 
 If you have a Browserstack account, then you can also run the tests in real browsers using the `test:bs:*` commands.

README.md

@@ -1,6 +1,5 @@
 # use-resize-observer
 
-
 <h1 align="center">
 	<br>
 	<img width="250" src="https://raw.githubusercontent.com/ZeeCoder/use-resize-observer/master/media/Logo.png" alt="useResizeObserver">
@@ -37,7 +36,7 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 ## Install
 
 ```sh
-yarn add use-resize-observer --dev
+pnpm add use-resize-observer --save-dev
 # or
 npm install use-resize-observer --save-dev
 ```
@@ -56,8 +55,8 @@ npm install use-resize-observer --save-dev
 | Name   | Type                    | Description                                    |
 | ------ | ----------------------- | ---------------------------------------------- |
 | ref    | RefCallback             | A callback to be passed to React's "ref" prop. |
-| width  | undefined &#124; number | The width (or "inlineSize") of the element.     |
-| height | undefined &#124; number | The height (or "blockSize") of the element.   |
+| width  | undefined &#124; number | The width (or "inlineSize") of the element.    |
+| height | undefined &#124; number | The height (or "blockSize") of the element.    |
 
 ## Basic Usage
 

package.json

@@ -1,9 +1,20 @@
 {
   "name": "use-resize-observer",
   "version": "9.1.0",
-  "main": "dist/bundle.cjs.js",
-  "module": "dist/bundle.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.cts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./polyfilled": {
+      "types": "./polyfilled.d.cts",
+      "require": "./polyfilled.cjs"
+    }
+  },
   "sideEffects": false,
   "repository": "git@github.com:ZeeCoder/use-resize-observer.git",
   "description": "A React hook that allows you to use a ResizeObserver to measure an element's size.",
@@ -27,34 +38,34 @@
     "resize"
   ],
   "scripts": {
-    "build": "rollup -c && tsc && rm -rf dist/utils && cp dist/index.d.ts polyfilled.d.ts",
-    "watch": "KARMA_BROWSERS=Chrome run-p 'src:watch' 'karma:watch'",
-    "src:watch": "rollup -c -w",
+    "build": "rm -rf dist polyfilled.cjs polyfilled.d.cts polyfilled.d.cts.map && tsdown",
+    "watch": "tsdown --watch",
+    "src:watch": "tsdown --watch",
     "check:size": "size-limit",
     "check:types": "tsc -p tests",
     "check:lint": "eslint src/**",
     "test": "run-s 'build' 'check:size' 'check:types' 'check:lint' 'test:unit' 'test:create:ssr' 'test:headless:chrome'",
     "test:unit": "jest",
     "test:create:ssr": "node ./tests/ssr/create-ssr-test.js",
-    "test:chrome": "KARMA_BROWSERS=Chrome yarn karma:run",
-    "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless yarn karma:run",
-    "test:firefox": "KARMA_BROWSERS=Firefox yarn karma:run",
-    "test:headless:firefox": "KARMA_BROWSERS=FirefoxHeadless yarn karma:run",
+    "test:chrome": "KARMA_BROWSERS=Chrome pnpm karma:run",
+    "test:headless:chrome": "KARMA_BROWSERS=ChromeHeadless pnpm karma:run",
+    "test:firefox": "KARMA_BROWSERS=Firefox pnpm karma:run",
+    "test:headless:firefox": "KARMA_BROWSERS=FirefoxHeadless pnpm karma:run",
     "karma:run": "karma start --singleRun",
     "karma:watch": "KARMA_BROWSERS=Chrome karma start",
-    "prepublish": "yarn build",
+    "prepublish": "pnpm build",
     "test:bs:all": "run-s 'test:bs:modern' 'test:bs:legacy'",
-    "test:bs:modern": "KARMA_BROWSERS=modern yarn karma:run",
-    "test:bs:legacy": "KARMA_BROWSERS=legacy yarn karma:run",
-    "test:bs:chrome": "KARMA_BROWSERS=bs_chrome_latest yarn karma:run",
-    "test:bs:firefox": "KARMA_BROWSERS=bs_firefox_latest yarn karma:run",
-    "test:bs:safari": "KARMA_BROWSERS=bs_safari_13 yarn karma:run",
-    "test:bs:edge": "KARMA_BROWSERS=bs_edge_latest yarn karma:run",
-    "test:bs:opera": "KARMA_BROWSERS=bs_opera_latest yarn karma:run",
-    "test:bs:ie": "KARMA_BROWSERS=bs_ie_11 yarn karma:run",
-    "test:bs:ios_11": "KARMA_BROWSERS=bs_ios_11 yarn karma:run",
-    "test:bs:ios_14": "KARMA_BROWSERS=bs_ios_14 yarn karma:run",
-    "test:bs:samsung": "KARMA_BROWSERS=bs_samsung yarn karma:run",
+    "test:bs:modern": "KARMA_BROWSERS=modern pnpm karma:run",
+    "test:bs:legacy": "KARMA_BROWSERS=legacy pnpm karma:run",
+    "test:bs:chrome": "KARMA_BROWSERS=bs_chrome_latest pnpm karma:run",
+    "test:bs:firefox": "KARMA_BROWSERS=bs_firefox_latest pnpm karma:run",
+    "test:bs:safari": "KARMA_BROWSERS=bs_safari_13 pnpm karma:run",
+    "test:bs:edge": "KARMA_BROWSERS=bs_edge_latest pnpm karma:run",
+    "test:bs:opera": "KARMA_BROWSERS=bs_opera_latest pnpm karma:run",
+    "test:bs:ie": "KARMA_BROWSERS=bs_ie_11 pnpm karma:run",
+    "test:bs:ios_11": "KARMA_BROWSERS=bs_ios_11 pnpm karma:run",
+    "test:bs:ios_14": "KARMA_BROWSERS=bs_ios_14 pnpm karma:run",
+    "test:bs:samsung": "KARMA_BROWSERS=bs_samsung pnpm karma:run",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -76,14 +87,6 @@
     "react-dom": "16.8.0 - 18"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-inject": "^4.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -120,10 +123,10 @@
     "react": "^18.0.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.0.0",
-    "rollup": "^2.6.1",
     "semantic-release": "^19.0.3",
     "size-limit": "^5.0.1",
     "ts-jest": "^28.0.4",
+    "tsdown": "^0.20.0",
     "typescript": "^4.3.5",
     "webpack": "^4.1"
   },