Merge pull request #10 from envato/typescript-4-7-4

Support TS 4.6+ types

Author: mdingena

README.md

@@ -24,7 +24,7 @@ This allows you to know the size of each observed element.
 
 # 📚 Docs
 
-This package was developed **and documented** as part of the [`@envato/react-breakpoints`](https://github.com/envato/react-breakpoints) package. It's separated into its own package because I believe it can be used separately if you don't need all the abstractions that React Breakpoints gives you. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/docs/api.md) for more details about `<Provider>` and `useResizeObserver()`.
+This package was developed **and documented** as part of the [`@envato/react-breakpoints`](https://github.com/envato/react-breakpoints) package. It's separated into its own package because I believe it can be used separately if you don't need all the abstractions that React Breakpoints gives you. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/blob/main/docs/api.md) for more details about `<Provider>` and `useResizeObserver()`.
 
 # ⚡️ Quick start
 
@@ -40,7 +40,7 @@ import { Provider as ResizeObserverProvider } from '@envato/react-resize-observe
 const App = () => <ResizeObserverProvider>...</ResizeObserverProvider>;
 ```
 
-⚠️ **Caution** — You may need to pass some props to `<Provider>` to increase **browser support**. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/docs/api.md#provider).
+⚠️ **Caution** — You may need to pass some props to `<Provider>` to increase **browser support**. Please refer to the [React Breakpoints API Docs](https://github.com/envato/react-breakpoints/blob/main/docs/api.md#provider).
 
 ## Observe an element
 

package.json

@@ -5,6 +5,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
+    "compile": "tsc --noEmit",
     "build": "tsc -b",
     "prepare": "npm run build"
   },
@@ -26,8 +27,8 @@
   },
   "homepage": "https://github.com/envato/react-resize-observer-hook#readme",
   "peerDependencies": {
-    "react": "16.8 - 17",
-    "react-dom": "16.8 - 17"
+    "react": "16.8 - 18",
+    "react-dom": "16.8 - 18"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",
@@ -46,7 +47,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "typescript": "^4.2.2"
+    "typescript": "^4.6.0"
   },
   "eslintConfig": {
     "extends": "react-app"

src/ExtendedResizeObserverEntry.ts

@@ -1,6 +1,5 @@
-import { ObservedElement } from './ObservedElement';
+import type { ObservedElement } from './ObservedElement';
 
 export interface ExtendedResizeObserverEntry extends ResizeObserverEntry {
-  readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>; // https://github.com/w3c/csswg-drafts/pull/4476
   target: ObservedElement;
 }

src/ObservedElement.ts

@@ -1,4 +1,4 @@
-import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
+import type { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
 
 export interface ObservedElement extends Element {
   onResizeObservation?: (resizeObserverEntry: ExtendedResizeObserverEntry) => void;

src/Provider.tsx

@@ -7,7 +7,7 @@ interface ProviderProps {
 }
 
 /**
- * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#provider|Provider}
+ * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#provider Provider}
  *
  * Returns a React context provider with a ResizeObserver instance as its value.
  * Uses `window.ResizeObserver` to construct the instance if no `ponyfill` prop is provided.

src/createResizeObserver.ts

@@ -1,8 +1,8 @@
-import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
+import type { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
 
 /**
  * Creates a new ResizeObserver instance that works with the
- * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver}
+ * {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#useresizeobserver useResizeObserver}
  * hook.
  * @example
  * const resizeObserverInstance = createResizeObserver(window.ResizeObserver);

src/index.ts

@@ -1,5 +1,5 @@
-export { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
-export { ObservedElement } from './ObservedElement';
+export type { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
+export type { ObservedElement } from './ObservedElement';
 export { Context } from './Context';
 export { Provider } from './Provider';
 export { createResizeObserver } from './createResizeObserver';

src/useResizeObserver.ts

@@ -1,16 +1,16 @@
+import type { ObservedElement } from './ObservedElement';
+import type { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
 import { useContext, useCallback, useRef, useState } from 'react';
 import { Context } from './Context';
-import { ObservedElement } from './ObservedElement';
-import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
 
 const boxOptions = {
   BORDER_BOX: 'border-box', // https://caniuse.com/mdn-api_resizeobserverentry_borderboxsize
   CONTENT_BOX: 'content-box', // https://caniuse.com/mdn-api_resizeobserverentry_contentboxsize
-  DEVICE_PIXEL_CONTENT_BOX: 'device-pixel-content-box' // https://github.com/w3c/csswg-drafts/pull/4476
+  DEVICE_PIXEL_CONTENT_BOX: 'device-pixel-content-box' // https://caniuse.com/mdn-api_resizeobserverentry_devicepixelcontentboxsize
 };
 
 /**
- * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserver|useResizeObserver}
+ * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#useresizeobserver useResizeObserver}
  *
  * Returns a React callback ref to attach to a DOM element. It also returns
  * a resize observation entry every time the observed element changes size.
@@ -55,21 +55,11 @@ export const useResizeObserver = (
           break;
 
         case boxOptions.DEVICE_PIXEL_CONTENT_BOX:
-          /* TypeScript 4.2 is missing devicePixelContentBoxSize. */
-          if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') {
-            isIdentical = resizeObserverEntry.devicePixelContentBoxSize.every((boxSize, index) => {
-              if (typeof observedEntry.devicePixelContentBoxSize !== 'undefined') {
-                return (
-                  boxSize.inlineSize === observedEntry.devicePixelContentBoxSize[index].inlineSize &&
-                  boxSize.blockSize === observedEntry.devicePixelContentBoxSize[index].blockSize
-                );
-              } else {
-                throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.');
-              }
-            });
-          } else {
-            throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.');
-          }
+          isIdentical = resizeObserverEntry.devicePixelContentBoxSize.every(
+            (boxSize, index) =>
+              boxSize.inlineSize === observedEntry.devicePixelContentBoxSize[index].inlineSize &&
+              boxSize.blockSize === observedEntry.devicePixelContentBoxSize[index].blockSize
+          );
           break;
 
         default: