Add TypeScript definitions

.gitignore

@@ -1,5 +1,6 @@
 # dependencies
 /node_modules
+/src/resize-observer
 /.pnp
 .pnp.js
 
@@ -16,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -3,22 +3,25 @@
  "version": "1.0.1",
  "description": "Observe multiple React components with a single ResizeObserver.",
  "main": "dist/index.js",
+ "types": "dist/index.d.ts",
  "scripts": {
- "build": "babel src/ -d dist/ --source-maps",
+ "src-type-definitions": "node scripts/src-type-definitions.js",
+ "dist-type-definitions": "node scripts/dist-type-definitions.js",
+ "build": "rimraf dist/ && npm run src-type-definitions && npx tsc && npm run dist-type-definitions",
  "prepare": "npm run build"
  },
  "repository": {
  "type": "git",
  "url": "git+https://github.com/envato/react-resize-observer-hook.git"
  },
  "keywords": [
+ "resize-observer",
  "react-hooks",
  "hooks",
  "react",
- "performance",
- "resize-observer"
+ "performance"
  ],
- "author": "Envato",
+ "author": "marc.dingena@envato.com",
  "license": "MIT",
  "bugs": {
  "url": "https://github.com/envato/react-resize-observer-hook/issues"
@@ -29,11 +32,47 @@
  "react-dom": "^16.12.0"
  },
  "devDependencies": {
- "@babel/cli": "^7.8.4",
- "@babel/core": "^7.8.6",
- "@babel/preset-env": "^7.7.7",
- "@babel/preset-react": "^7.8.3",
+ "@juggle/resize-observer": "^3.2.0",
+ "@types/react": "^16.9.46",
+ "@typescript-eslint/eslint-plugin": "^2.34.0",
+ "@typescript-eslint/parser": "^2.34.0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.8.0",
+ "eslint-config-react-app": "^5.2.1",
+ "eslint-plugin-flowtype": "^4.7.0",
+ "eslint-plugin-import": "^2.22.0",
+ "eslint-plugin-jsx-a11y": "^6.3.1",
+ "eslint-plugin-react": "^7.20.6",
+ "eslint-plugin-react-hooks": "^2.5.1",
+ "husky": "^4.2.5",
+ "lint-staged": "^10.2.11",
+ "prettier": "^2.0.5",
  "react": "^16.12.0",
- "react-dom": "^16.12.0"
+ "react-dom": "^16.12.0",
+ "rimraf": "^3.0.2",
+ "typescript": "^3.9.7"
+ },
+ "eslintConfig": {
+ "extends": "react-app"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "**/*.{js,ts,tsx}": [
+ "eslint --cache --fix",
+ "prettier --write"
+ ]
+ },
+ "prettier": {
+ "arrowParens": "avoid",
+ "jsxSingleQuote": true,
+ "printWidth": 120,
+ "quoteProps": "preserve",
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "none"
  }
 }

scripts/dist-type-definitions.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const sourceRoot = path.resolve('src/resize-observer');
+const destinationRoot = path.resolve('dist/resize-observer');
+
+fs.mkdirSync(destinationRoot);
+
+fs.readdirSync(sourceRoot).forEach(fileName => {
+ const sourceFile = path.resolve(sourceRoot, fileName);
+ const destinationFile = path.resolve(destinationRoot, fileName);
+
+ fs.copyFileSync(sourceFile, destinationFile);
+});

scripts/src-type-definitions.js

@@ -0,0 +1,27 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+
+const sourceRoot = path.resolve('node_modules/@juggle/resize-observer');
+const destinationRoot = path.resolve('src/resize-observer');
+const files = [
+ ['LICENSE', 'LICENSE'],
+ ['lib/ResizeObserver.d.ts', 'ResizeObserver.d.ts'],
+ ['lib/ResizeObserverController.d.ts', 'ResizeObserverController.d.ts'],
+ ['lib/ResizeObserverCallback.d.ts', 'ResizeObserverCallback.d.ts'],
+ ['lib/ResizeObserverOptions.d.ts', 'ResizeObserverOptions.d.ts'],
+ ['lib/ResizeObserverBoxOptions.d.ts', 'ResizeObserverBoxOptions.d.ts'],
+ ['lib/ResizeObserverEntry.d.ts', 'ResizeObserverEntry.d.ts'],
+ ['lib/ResizeObserverSize.d.ts', 'ResizeObserverSize.d.ts'],
+ ['lib/DOMRectReadOnly.d.ts', 'DOMRectReadOnly.d.ts']
+];
+
+rimraf.sync(destinationRoot);
+fs.mkdirSync(destinationRoot);
+
+files.forEach(([sourcePath, destinationPath]) => {
+ const sourceFile = path.resolve(sourceRoot, sourcePath);
+ const destinationFile = path.resolve(destinationRoot, destinationPath);
+
+ fs.copyFileSync(sourceFile, destinationFile);
+});

src/ExtendedElement.ts

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

src/ExtendedResizeObserverEntry.ts

@@ -0,0 +1,6 @@
+import { ExtendedElement } from './ExtendedElement';
+import { ResizeObserverEntry } from './resize-observer/ResizeObserverEntry';
+
+export interface ExtendedResizeObserverEntry extends ResizeObserverEntry {
+ target: ExtendedElement;
+}

src/ResizeObserverContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext } from 'react';
+import { ResizeObserver } from './resize-observer/ResizeObserver';
+import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
+
+interface ResizeObserverConstructor {
+ new (...args: any): ResizeObserver;
+}
+
+interface ProviderProps {
+ ponyfill?: ResizeObserverConstructor;
+ children: React.ReactNode;
+}
+
+interface ExtendedWindow extends Window {
+ ResizeObserver: ResizeObserverConstructor;
+}
+
+declare var window: ExtendedWindow;
+
+const ResizeObserverContext = createContext<ResizeObserver | null>(null);
+
+/**
+ * Bootstraps a new ResizeObserver with a callback function used by the `useResizeObserver` hook.
+ * @argument {ResizeObserverConstructor} _ResizeObserver - Any ResizeObserver constructor, for example from window.ResizeObserver or a ponyfill.
+ * @returns {ResizeObserver} Bootstrapped ResizeObserver instance to assign to `ResizeObserverContext.Provider`'s value.
+ */
+const createResizeObserver = (_ResizeObserver: ResizeObserverConstructor): ResizeObserver => {
+ const handleResizeObserverEntry = (resizeObserverEntry: ExtendedResizeObserverEntry) => {
+ const { onResizeObservation } = resizeObserverEntry.target;
+ onResizeObservation && onResizeObservation(resizeObserverEntry);
+ };
+
+ return new _ResizeObserver((entries: ExtendedResizeObserverEntry[]) => entries.forEach(handleResizeObserverEntry));
+};
+
+/**
+ * Bootstraps a ResizeObserverContext.Provider with a ResizeObserver instance.
+ * @argument {ProviderProps} props
+ * @argument {ResizeObserverConstructor} [props.ponyfill=undefined] - Optional `ResizeObserver` constructor, for example from a ponyfill. Defaults to `window.ResizeObserver`. CAUTION: https://caniuse.com/#feat=mdn-api_resizeobserver_resizeobserver
+ * @argument {React.ReactNode} props.children - This component's children.
+ * @returns {JSX.Element} Context.Provider bootstrapped with a ResizeObserver instance.
+ */
+const Provider = ({ ponyfill = undefined, children }: ProviderProps): JSX.Element => {
+ const instance = createResizeObserver(ponyfill || window.ResizeObserver);
+
+ return <ResizeObserverContext.Provider value={instance}>{children}</ResizeObserverContext.Provider>;
+};
+
+export { ResizeObserverContext, createResizeObserver, Provider };

src/index.js → src/index.ts

@@ -1,2 +1,2 @@
-export { ResizeObserverContext, createResizeObserver, Provider } from './resizeObserverContext';
+export { ResizeObserverContext, createResizeObserver, Provider } from './ResizeObserverContext';
 export { useResizeObserver } from './useResizeObserver';

src/useResizeObserver.ts

@@ -0,0 +1,45 @@
+import { useContext, useCallback, useRef, useState } from 'react';
+import { ResizeObserverContext } from './ResizeObserverContext';
+import { ExtendedElement } from './ExtendedElement';
+import { ExtendedResizeObserverEntry } from './ExtendedResizeObserverEntry';
+import { ResizeObserver } from './resize-observer/ResizeObserver';
+import { ResizeObserverOptions } from './resize-observer/ResizeObserverOptions';
+
+/**
+ * Observe an element's size.
+ * @argument {ResizeObserverOptions} [options] - Options object for `ResizeObserver.observe()`.
+ * @returns {[React.RefCallback<ExtendedElement | null>, ExtendedResizeObserverEntry | null]} Array with: a reference to observed element, a ResizeObserverEntry.
+ */
+const useResizeObserver = (
+ options: ResizeObserverOptions = {}
+): [React.RefCallback<ExtendedElement | null>, ExtendedResizeObserverEntry | null] => {
+ const resizeObserver = useContext<ResizeObserver | null>(ResizeObserverContext);
+
+ const [observedEntry, setObservedEntry] = useState<ExtendedResizeObserverEntry | null>(null);
+
+ const handleResizeObservation = (resizeObserverEntry: ExtendedResizeObserverEntry) =>
+ setObservedEntry(resizeObserverEntry);
+
+ const ref = useRef<ExtendedElement | null>(null);
+
+ const setRef = useCallback(
+ node => {
+ if (ref.current) {
+ resizeObserver?.unobserve(ref.current);
+ delete ref.current.onResizeObservation;
+ }
+
+ if (node) {
+ node.onResizeObservation = handleResizeObservation;
+ resizeObserver?.observe(node, options);
+ }
+
+ ref.current = node;
+ },
+ [resizeObserver, options]
+ );
+
+ return [setRef, observedEntry];
+};
+
+export { useResizeObserver };

tsconfig.json

@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "commonjs",
+ "jsx": "react",
+ "declaration": true,
+ "declarationMap": true,
+ "sourceMap": true,
+ "outDir": "./dist",
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true
+ },
+ "include": ["./src/**/*"],
+ "exclude": ["./src/resize-observer/**/*"]
+}