breaking(responsive, xychart): require ResizeObserver or polyfill (#1622)

* breaking(responsive): remove legacy ParentSize, withParentSize and add polyfill option

* fix(xychart, responsive): fix ResizeObserver polyfill

* fix(xychart): clean up ResizeObserverPolyfill types

* fix(visx): fix test

* test(visx): remove tsconfig, fix jest tests

* docs(responsive): fix typo

Author: williaster

config-jest/setup/console.js

@@ -1,3 +1,6 @@
-console.warn = console.error = function mockedConsole(message) {
-  throw new Error(message);
-};
+function mockedConsole(...args) {
+  throw new Error(args);
+}
+
+console.warn = mockedConsole;
+console.error = mockedConsole;

jest.config.js

@@ -42,5 +42,5 @@ module.exports = {
   testURL: 'http://localhost',
   timers: 'fake',
   verbose: false,
-  testPathIgnorePatterns: ['<rootDir>/packages/visx-demo', '<rootDir>/packages/visx-visx'],
+  testPathIgnorePatterns: ['<rootDir>/packages/visx-demo'],
 };

packages/visx-responsive/Readme.md

@@ -6,19 +6,19 @@
 
 The `@visx/responsive` package is here to help you make responsive graphs.
 
-**With Enhancers**
+**Enhancers**
 
 `withScreenSize`
 
 `withParentSize`
 
-**With Components**
+**Components**
 
 `ParentSize`
 
 `ScaleSVG`
 
-## `withScreenSize`
+### `withScreenSize`
 
 If you would like your graph to adapt to the screen size, you can use `withScreenSize()`. The
 resulting component will pass `screenWidth` and `screenHeight` props to the wrapped component
@@ -76,9 +76,9 @@ let chartToRender = (
         parentHeight={parent.height}
         parentTop={parent.top}
         parentLeft={parent.left}
-        // this is the referer to the wrapper component
+        // this is the referrer to the wrapper component
         parentRef={parent.ref}
-        // this function can be called inside MySuperCoolVisxChart to cause a resize of the wrapper component
+        // this function can be called inside MyVisxChart to cause a resize of the wrapper component
         resizeParent={parent.resize}
       />
     )}
@@ -109,10 +109,22 @@ let chartToRender = (
 // ... Render the chartToRender somewhere
 ```
 
-##### ⚠️ `ResizeObserver` dependency
+### ⚠️ `ResizeObserver` dependency
 
-If you don't need a polyfill for `ResizeObserver` or are already including it in your bundle, you
-should use `ParentSizeModern` and `withParentSizeModern` which doesn't include the polyfill.
+The `ParentSize` component and `withParentSize` enhancer rely on `ResizeObserver`s for auto-sizing.
+If you need a polyfill, you can either polute the `window` object or inject it cleanly through
+props:
+
+```tsx
+import { ResizeObserver } from 'your-favorite-polyfill';
+
+function App() {
+  return (
+    <ParentSize resizeObserverPolyfill={ResizeObserver} {...}>
+      {() => {...}}
+    </ParentSize>
+  );
+```
 
 ## Installation
 

packages/visx-responsive/package.json

@@ -28,7 +28,6 @@
   },
   "homepage": "https://github.com/airbnb/visx#readme",
   "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
     "@types/lodash": "^4.14.172",
     "@types/react": "*",
     "lodash": "^4.17.21",
@@ -37,6 +36,9 @@
   "peerDependencies": {
     "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
   },
+  "devDependencies": {
+    "@juggle/resize-observer": "^3.3.1"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/visx-responsive/src/components/ParentSize.tsx

@@ -1,6 +1,11 @@
 import debounce from 'lodash/debounce';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
+import { ResizeObserverPolyfill } from '../types';
+
+// @TODO remove when upgraded to TS 4 which has its own declaration
+interface PrivateWindow {
+  ResizeObserver: ResizeObserverPolyfill;
+}
 
 export type ParentSizeProps = {
   /** Optional `className` to add to the parent `div` wrapper used for size measurement. */
@@ -13,6 +18,8 @@ export type ParentSizeProps = {
   ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];
   /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */
   parentSizeStyles?: React.CSSProperties;
+  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
+  resizeObserverPolyfill?: ResizeObserverPolyfill;
   /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
   children: (
     args: {
@@ -32,14 +39,16 @@ type ParentSizeState = {
 export type ParentSizeProvidedProps = ParentSizeState;
 
 const defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];
+const defaultParentSizeStyles = { width: '100%', height: '100%' };
 
 export default function ParentSize({
   className,
   children,
   debounceTime = 300,
   ignoreDimensions = defaultIgnoreDimensions,
-  parentSizeStyles = { width: '100%', height: '100%' },
+  parentSizeStyles = defaultParentSizeStyles,
   enableDebounceLeadingCall = true,
+  resizeObserverPolyfill,
   ...restProps
 }: ParentSizeProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps>) {
   const target = useRef<HTMLDivElement | null>(null);
@@ -71,9 +80,12 @@ export default function ParentSize({
   }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
 
   useEffect(() => {
-    const observer = new ResizeObserver((entries = [] /** , observer */) => {
+    const LocalResizeObserver =
+      resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;
+
+    const observer = new LocalResizeObserver((entries) => {
       entries.forEach((entry) => {
-        const { left, top, width, height } = entry.contentRect;
+        const { left, top, width, height } = entry?.contentRect ?? {};
         animationFrameID.current = window.requestAnimationFrame(() => {
           resize({ width, height, top, left });
         });
@@ -84,9 +96,9 @@ export default function ParentSize({
     return () => {
       window.cancelAnimationFrame(animationFrameID.current);
       observer.disconnect();
-      if (resize?.cancel) resize.cancel();
+      resize.cancel();
     };
-  }, [resize]);
+  }, [resize, resizeObserverPolyfill]);
 
   return (
     <div style={parentSizeStyles} ref={target} className={className} {...restProps}>

packages/visx-responsive/src/components/ParentSizeModern.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
-import { ResizeObserver } from '@juggle/resize-observer';
+import { ResizeObserver, ResizeObserverPolyfill } from '../types';
 
 const CONTAINER_STYLES = { width: '100%', height: '100%' };
 
+// @TODO remove when upgraded to TS 4 which has its own declaration
+interface PrivateWindow {
+  ResizeObserver: ResizeObserverPolyfill;
+}
+
 export type WithParentSizeProps = {
   debounceTime?: number;
   enableDebounceLeadingCall?: boolean;
@@ -20,6 +25,8 @@ export type WithParentSizeProvidedProps = WithParentSizeState;
 
 export default function withParentSize<BaseComponentProps extends WithParentSizeProps = {}>(
   BaseComponent: React.ComponentType<BaseComponentProps & WithParentSizeProvidedProps>,
+  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
+  resizeObserverPolyfill?: ResizeObserverPolyfill,
 ) {
   return class WrappedComponent extends React.Component<
     BaseComponentProps & WithParentSizeProvidedProps,
@@ -38,7 +45,10 @@ export default function withParentSize<BaseComponentProps extends WithParentSize
     container: HTMLDivElement | null = null;
 
     componentDidMount() {
-      this.resizeObserver = new ResizeObserver((entries /** , observer */) => {
+      const ResizeObserverLocal =
+        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;
+
+      this.resizeObserver = new ResizeObserverLocal((entries) => {
         entries.forEach((entry) => {
           const { width, height } = entry.contentRect;
           this.animationFrameID = window.requestAnimationFrame(() => {