Merge pull request #14 from envato/typescript-4-6

Upgrade dependencies to support TypeScript 4.6+ types

Author: mdingena

package.json

@@ -4,6 +4,7 @@
   "description": "Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer \"web design's unicorn\" 🦄",
   "main": "dist/index.js",
   "scripts": {
+    "compile": "tsc --noEmit",
     "build": "tsc -b",
     "prepare": "npm run build"
   },
@@ -32,8 +33,8 @@
   },
   "homepage": "https://github.com/envato/react-breakpoints#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",
@@ -52,10 +53,10 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "typescript": "^4.2.2"
+    "typescript": "^4.6.0"
   },
   "dependencies": {
-    "@envato/react-resize-observer-hook": "^1.2.0"
+    "@envato/react-resize-observer-hook": "^1.3.0"
   },
   "eslintConfig": {
     "extends": "react-app"

src/Context.ts

@@ -1,4 +1,4 @@
+import type { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
 import { createContext } from 'react';
-import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
 
 export const Context = createContext<ExtendedResizeObserverEntry | null>(null);

src/Observe.tsx

@@ -1,7 +1,9 @@
-import { ReactNode } from 'react';
-import { ObservedElement, useResizeObserver } from '@envato/react-resize-observer-hook';
+import type { ReactNode } from 'react';
+import type { ObservedElement } from '@envato/react-resize-observer-hook';
+import type { UseBreakpointsOptions } from './useBreakpoints';
+import { useResizeObserver } from '@envato/react-resize-observer-hook';
 import { Context } from './Context';
-import { UseBreakpointsOptions, useBreakpoints } from './useBreakpoints';
+import { useBreakpoints } from './useBreakpoints';
 
 interface ObservedElementProps {
   ref: React.RefCallback<ObservedElement | null>;

src/findBreakpoint.ts

@@ -1,4 +1,4 @@
-import { Breakpoints } from './Breakpoints';
+import type { Breakpoints } from './Breakpoints';
 
 /**
  * From a `breakpoints` object, find the first key that is equal to or greater than

src/index.ts

@@ -1,4 +1,6 @@
-export { Provider, useResizeObserver } from '@envato/react-resize-observer-hook';
+export type { ExtendedResizeObserverEntry, ObservedElement } from '@envato/react-resize-observer-hook';
+export type { UseBreakpointsOptions, UseBreakpointsResult } from './useBreakpoints';
+export { createResizeObserver, Provider, useResizeObserver } from '@envato/react-resize-observer-hook';
 export { Observe } from './Observe';
 export { useBreakpoints } from './useBreakpoints';
 export { Context } from './Context';

src/useBreakpoints.ts

@@ -1,6 +1,6 @@
+import type { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
+import type { Breakpoints } from './Breakpoints';
 import { useRef, useState, useEffect, useMemo } from 'react';
-import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
-import { Breakpoints } from './Breakpoints';
 import { useResizeObserverEntry } from './useResizeObserverEntry';
 import { findBreakpoint } from './findBreakpoint';
 
@@ -28,19 +28,19 @@ export type UseBreakpointsResult = [any, any] & Matches;
 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#usebreakpoints|useBreakpoints}
+ * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#usebreakpoints useBreakpoints}
  *
  * Pass in an options object with at least one of the following properties:
  * - `widths`: objects with width breakpoints as keys and anything as their values;
  * - `heights`: objects with height breakpoints as keys and anything as their values.
  *
  * You may also pass the following additional optional properties:
  * - `box`: the box to measure on the observed element, one of `'border-box' | 'content-box' | 'device-pixel-content-box'`;
- * - `fragment`: index of {@link https://github.com/w3c/csswg-drafts/pull/4529|fragment} of the observed element to measure (default `0`).
+ * - `fragment`: index of {@link https://github.com/w3c/csswg-drafts/pull/4529 fragment} of the observed element to measure (default `0`).
  *
  * Optionally pass in a `ResizeObserverEntry` as the second argument to override fetching one from context.
  *
@@ -106,11 +106,7 @@ export const useBreakpoints = (
       break;
 
     case boxOptions.DEVICE_PIXEL_CONTENT_BOX:
-      if (typeof resizeObserverEntry.devicePixelContentBoxSize !== 'undefined') {
-        observedBoxSize = resizeObserverEntry.devicePixelContentBoxSize[fragment];
-      } else {
-        throw Error('resizeObserverEntry does not contain devicePixelContentBoxSize.');
-      }
+      observedBoxSize = resizeObserverEntry.devicePixelContentBoxSize[fragment];
       break;
 
     default:

src/useResizeObserverEntry.ts

@@ -1,23 +1,23 @@
+import type { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
 import { useContext } from 'react';
-import { ExtendedResizeObserverEntry } from '@envato/react-resize-observer-hook';
 import { Context } from './Context';
 
 /**
- * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#useresizeobserverentry|useResizeObserverEntry}
+ * See API Docs: {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#useresizeobserverentry useResizeObserverEntry}
  *
  * Returns the `ResizeObserverEntry` from the nearest Context.
  *
  * You can also pass in a `ResizeObserverEntry`, which will be returned verbatim.
  * You will almost certainly never need to do this, but because you may not
  * conditionally call hooks, it can be useful to pass in the `ResizeObserverEntry`
  * you receive from
- * {@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}
  * in the same component instead of relying on the value from the nearest Context.
  *
  * This is allowed to facilitate the abstraction in
- * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#usebreakpoints|useBreakpoints}
+ * {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#usebreakpoints useBreakpoints}
  * which is used in the
- * {@linkcode https://github.com/envato/react-breakpoints/blob/master/docs/api.md#observe|Observe}
+ * {@linkcode https://github.com/envato/react-breakpoints/blob/main/docs/api.md#observe Observe}
  * component.
  *
  * @example