Merge pull request #1 from ZeeCoder/v2

v2

Author: ZeeCoder

.babelrc

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

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 .idea
-yarn.lock
 yarn-error.log
 dist
+.cache

.npmignore

@@ -6,3 +6,7 @@ rollup.config.js
 yarn.lock
 yarn-error.log
 browserslist
+karma.conf.js
+.cache
+.travis.yml
+tests

.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+node_js:
+  - 10
+addons:
+  chrome: stable
+script:
+  - yarn build
+  - yarn test:build
+  - yarn test
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: AVhIhFozrf45OjXuFjpL734kSr3Ar/VGqaBzmggF0VWFqOa3stMt6t4gYLRJKrXfr9alMPhB4IdQ7fTjO0EIZh51pT7uRkjAJ8ZUXyDB6fohAFw2Q2mowufOMt2Pu0peC0SDWROosXk0asRAgWhjsMNcNiwgctjr0Pw2DHswq13QBcdL0/sTtTMRnawrjZJBbXtdDb0Q6nfygQjDav6NzpK1uT3elsNKlyf+MiOqNguwc1lgoIqfp2Twvj9a7TmbMf8TFiQjsXZgFZxPYwXZyi62gbcvySEZvEQnYGzUCGsgF+aM3GYsluFmOjMUaUnm9++48gDmKF9+aigowhu5vvVl8XdoI5RIjg/5ibwh04SlHhUab/0JqQy9HmfCkFXDHnzwDyRZMjNlXMfbX+XXSrY3R+WXIfeepdressTHJr3DoPdpkJmic5LN+i8zPjJH/+TU/MMzSot7lTQLD5q5hmxpZi1fCPxAzdVwn7s3uKDtJiUU0i0s864wu7VzRLNBxTLi5uR4mToFNtfQAzuOqOvhK7mGNqSYTIAeCnf67VLHWRLZcqR3bbRCJVt3PT+LKg51nDor/jBnuZTrph1DNo7vGfxIydyQ4EbY3QqDt1gcZoB5imGUc2+4pSzXA0xX9ijwCrNPuh7Vtyg+rV2/R6e9ecdWE5CSz6FzvG5k5TQ=
+  on:
+    tags: true
+  skip_cleanup: true

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## 2.0.0
+
+- [BREAKING] ResizeObserver now always expects a function as a child, to which
+  it passes in a reference as an argument that can be added to the element to be
+  observed.
+- [BREAKING] Returning width and height as the second and third parameters
+  instead of as part of an object
+- [BREAKING] Now reports 1x1 size on before the observer is triggered instead of
+  0x0
+- Added tests using Karma
+
+## 1.0.1
+
+- Relaxed the prop-types dep
+
 ## 1.0.0
 
 - Initial release

README.md

@@ -1,6 +1,9 @@
 # @zeecoder/react-resize-observer
 
-A React component to use ResizeObserver instances.
+A React component that allows you to use a ResizeObserver to measure an element's size.
+
+[![npm version](https://badge.fury.io/js/%40zeecoder%2Freact-resize-observer.svg)](https://npmjs.com/package/@zeecoder/react-resize-observer)
+[![build](https://travis-ci.org/ZeeCoder/react-resize-observer.svg?branch=master)](https://travis-ci.org/ZeeCoder/react-resize-observer)
 
 ## Install
 
@@ -15,9 +18,9 @@ npm install --save @zeecoder/react-resize-observer
 ```js
 const App = () => (
   <ResizeObserver>
-    {size => (
-      <div>
-        My size is {size.width}x{size.height}
+    {(ref, width, height) => (
+      <div ref={ref}>
+        My size is {width}x{height}
       </div>
     )}
   </ResizeObserver>
@@ -26,17 +29,13 @@ const App = () => (
 
 ## Notes
 
-- The children prop must be a function, through which the size changes are
-  communicated
-- If the optional `element` prop is given, the the component will observe the
-  size changes of that given element, instead of looking for the root DOM node
-  inside the component. (This avoids calling `ReactDOM.findDOMNode(this)`.)
 - Uses [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill)
-  internally, which falls back to the native ResizeObserver, if available
+  internally, which falls back to the native ResizeObserver, if available.
 
 ## Related
 
 - [use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
+- [@zeecoder/container-query](https://github.com/ZeeCoder/container-query)
 
 ## License
 

karma.conf.js

@@ -0,0 +1,26 @@
+module.exports = function(config) {
+  const singleRun = process.env.KARMA_SINGLE_RUN !== "false";
+  const browsers = (process.env.KARMA_BROWSERS || "Chrome").split(",");
+
+  config.set({
+    basePath: ".",
+    frameworks: ["jasmine"],
+    files: ["tests/dist/index.js"],
+    autoWatch: true,
+
+    browsers,
+    reporters: ["spec"],
+
+    singleRun,
+
+    // Max concurrency for SauceLabs OS plan
+    concurrency: 5,
+
+    client: {
+      jasmine: {
+        // Order of the tests matter, so don't randomise it
+        random: false
+      }
+    }
+  });
+};

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@zeecoder/react-resize-observer",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
   "repository": "[email protected]:ZeeCoder/react-resize-observer.git",
-  "description": "A React component to use ResizeObserver.",
+  "description": "A React component that allows you to use a ResizeObserver to measure an element's size.",
   "author": "Viktor Hubert <[email protected]>",
   "license": "MIT",
   "scripts": {
     "build": "rollup -c",
+    "test": "karma start",
+    "test:build": "parcel build tests/index.js --out-dir tests/dist",
     "prepublish": "yarn build"
   },
   "husky": {
@@ -32,11 +34,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.2.3",
+    "babel-regenerator-runtime": "^6.5.0",
+    "delay": "^4.1.0",
     "husky": "^1.1.2",
+    "karma": "^3.1.4",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-jasmine": "^2.0.1",
+    "karma-spec-reporter": "^0.0.32",
     "lint-staged": "^7.3.0",
+    "parcel-bundler": "^1.11.0",
     "prettier": "^1.14.3",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "rollup": "^0.66.6",
     "rollup-plugin-babel": "^4.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

src/index.js

@@ -8,13 +8,15 @@ class ResizeObserverComponent extends Component {
     super(props);
 
     this.state = {
-      width: 0,
-      height: 0
+      width: 1,
+      height: 1
     };
+
+    this.ref = React.createRef();
   }
 
   observeIfNeeded() {
-    const element = this.props.element || ReactDOM.findDOMNode(this);
+    const element = this.ref.current;
 
     if (element && this.element !== element) {
       // clean up after a previous element
@@ -60,24 +62,18 @@ class ResizeObserverComponent extends Component {
   }
 
   componentWillUnmount() {
-    if (this.element) {
-      this.unobserve(this.element);
+    if (this.ref.current) {
+      this.unobserve(this.ref.current);
     }
   }
 
   render() {
-    const size = {
-      width: this.state.width,
-      height: this.state.height
-    };
-
-    return this.props.children(size);
+    return this.props.children(this.ref, this.state.width, this.state.height);
   }
 }
 
 ResizeObserverComponent.propTypes = {
-  children: PropTypes.func.isRequired,
-  element: PropTypes.object
+  children: PropTypes.func.isRequired
 };
 
 export default ResizeObserverComponent;

tests/index.js

@@ -0,0 +1,63 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ResizeObserver from "../dist/bundle.esm";
+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
+// the actual lib might not have, giving the false impression that something
+// works while it might actually not, if you use the lib without babel-polyfill.
+import "babel-regenerator-runtime";
+
+const Observed = () => (
+  <ResizeObserver>
+    {(ref, width, height) => (
+      <div
+        ref={ref}
+        id="observed"
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          background: "grey",
+          color: "white",
+          fontWeight: "bold"
+        }}
+      >
+        {width}x{height}
+      </div>
+    )}
+  </ResizeObserver>
+);
+
+beforeAll(() => {
+  const app = document.createElement("div");
+  app.style.position = "relative";
+  app.style.width = "200px";
+  app.style.height = "300px";
+  document.body.appendChild(app);
+
+  ReactDOM.render(<Observed />, app);
+
+  global.app = app;
+  global.observed = document.querySelector("#observed");
+});
+
+it("should render with 1x1 initially, before the ResizeObserver is triggered", async () => {
+  expect(observed.textContent).toBe("1x1");
+});
+
+it("should report the correct size after the size is reported by the ResizeObserver", async () => {
+  await delay(100);
+
+  expect(observed.textContent).toBe("200x300");
+});
+
+it("should report following size changes", async () => {
+  app.style.width = "100px";
+  app.style.height = "100px";
+
+  await delay(100);
+  expect(observed.textContent).toBe("100x100");
+});