Transpiling again, separate polyfilled build.

Resolves ZeeCoder#14

Author: ZeeCoder

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env", { "loose": true} ]]
+}

.gitignore

@@ -1,6 +1,8 @@
 .cache
 node_modules
 .idea
+yarn.lock
 yarn-error.log*
 dist
+/polyfilled.js
 

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 ## 5.0.0
 
-- **[BREAKING]** `#14` Removed Babel code transpiling and the ResizeObserver polyfill.
+- **[BREAKING]** `#14` Removed the polyfill from the default builds, and shipping
+  it instead as as separate module.
 - **[BREAKING]** `#21` Returning an object instead of an array, so that values not
   needed could be omitted.
 - `#18` Added missing copyright notice in the MIT license.

README.md

@@ -5,13 +5,6 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 [![npm version](https://badge.fury.io/js/use-resize-observer.svg)](https://npmjs.com/package/use-resize-observer)
 [![build](https://travis-ci.org/ZeeCoder/use-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/use-resize-observer)
 
-## On Transpilation / Polyfilling
-
-This library is neither transpiled nor polyfilled by default.
-I recommend using Babel with its "env" preset to transpile your code to your
-target browsers, and adding a [ResizeObserver](https://github.com/que-etc/resize-observer-polyfill)
-poly- or [ponyfill](https://github.com/sindresorhus/ponyfill) when necessary.
-
 ## In Action
 
 [CodeSandbox Demo](https://codesandbox.io/s/nrp0w2r5z0)
@@ -26,6 +19,9 @@ npm install use-resize-observer --save-dev
 
 ## Basic Usage
 
+Note that the default builds are not polyfilled! For instructions and alternatives,
+see the [Transpilation / Polyfilling](##transpilation-/-polyfilling) section.
+
 ```js
 import React from "react";
 import useResizeObserver from "use-resize-observer";
@@ -102,6 +98,22 @@ container/element queries:
 
 [CodeSandbox Demo](https://codesandbox.io/s/use-resize-observer-container-query-with-css-in-js-iitxl)
 
+## Transpilation / Polyfilling
+
+By default the library provides transpiled ES5 modules in CJS / ESM module formats.
+
+Polyfilling is recommended to be done in the host app, and not in the library, as
+that gives users more control over what exact polyfills they might want to use.
+
+However, there's a polyfilled CJS module (without affecting globals) that can be
+used for convenience:
+
+```js
+import useResizeObserver from "use-resize-observer/polyfilled";
+```
+
+[Bundled ResizeObserver implementation](<[ResizeObserver](https://github.com/que-etc/resize-observer-polyfill)>)
+
 ## Related
 
 - [@zeecoder/container-query](https://github.com/ZeeCoder/container-query)

browserslist

@@ -0,0 +1,5 @@
+# Using IE to declare a fixed point.
+# "Last n versions" and such could potentially change the build as time goes on,
+# while this will transpile down to ES5 that'll run in most browsers you probably
+# care about.
+IE >= 11

package.json

@@ -3,6 +3,7 @@
   "version": "5.0.0",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
+  "sideEffects": false,
   "repository": "[email protected]:ZeeCoder/use-resize-observer.git",
   "description": "A React hook that allows you to use a ResizeObserver to measure an element's size.",
   "author": "Viktor Hubert <[email protected]>",
@@ -55,6 +56,11 @@
     "prettier": "^1.14.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "rollup": "^1.20.1"
+    "rollup": "^1.20.1",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-inject": "^3.0.2"
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "^1.5.1"
   }
 }

rollup.config.js

@@ -1,14 +1,41 @@
-export default {
-  input: "src/index.js",
-  output: [
-    {
-      file: "dist/bundle.cjs.js",
-      format: "cjs"
-    },
-    {
-      file: "dist/bundle.esm.js",
-      format: "esm"
-    }
-  ],
-  external: ["react"]
+import babel from "rollup-plugin-babel";
+import inject from "rollup-plugin-inject";
+
+const getConfig = polyfill => {
+  const config = {
+    input: "src/index.js",
+    output: [],
+    plugins: [babel()],
+    external: ["react"]
+  };
+
+  if (polyfill) {
+    config.output = [
+      {
+        file: "polyfilled.js",
+        format: "cjs"
+      }
+    ];
+    config.external.push("resize-observer-polyfill");
+    config.plugins.push(
+      inject({
+        ResizeObserver: "resize-observer-polyfill"
+      })
+    );
+  } else {
+    config.output = [
+      {
+        file: "dist/bundle.cjs.js",
+        format: "cjs"
+      },
+      {
+        file: "dist/bundle.esm.js",
+        format: "esm"
+      }
+    ];
+  }
+
+  return config;
 };
+
+export default [getConfig(), getConfig(true)];

tests/index.js

@@ -1,6 +1,7 @@
-import React, { useEffect, useState, useRef, forwardRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import ReactDOM from "react-dom";
 import useResizeObserver from "../dist/bundle.esm";
+import useResizeObserverPolyfilled from "../polyfilled";
 import delay from "delay";
 // Using the following to support async/await in tests.
 // I'm intentionally not using babel/polyfill, as that would introduce polyfills
@@ -363,3 +364,28 @@ it("should ignore invalid custom refs", async () => {
   await delay(50);
   assertSize({ width: 1, height: 1 });
 });
+
+it("should work with the polyfilled version", async () => {
+  const Test = ({ resolveHandler }) => {
+    const { ref, width, height } = useResizeObserverPolyfilled();
+
+    useEffect(() => {
+      resolveHandler({
+        assertSize: ({ width, height }) => {
+          expect(ref.current.textContent).toBe(`${width}x${height}`);
+        }
+      });
+    }, []);
+
+    return (
+      <div style={{ width: 50, height: 40 }} ref={ref}>
+        {width}x{height}
+      </div>
+    );
+  };
+
+  const { assertSize } = await render(Test);
+
+  await delay(50);
+  assertSize({ width: 50, height: 40 });
+});