Updates react support to v18

Updates various dependencies to support React 18. Also updates to latest version of react-intersection-observer.

This resolves fpapado#45 & fpapado#46

Author: radfahrer

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "parser": "typescript-eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "plugins": [
     "jsx-a11y"
   ],

package-lock.json

@@ -14,9 +14,9 @@
     "build": "npm-run-all clean bundle:prod copy-defs size",
     "bundle:prod": "microbundle build",
     "bundle:watch": "microbundle watch",
-    "copy-defs": "tsc && cp -r ts-build/*.d.ts dist/",
-    "storybook": "start-storybook -p 8080 -s ./stories/demo",
-    "storybook:build": "npm run bundle:prod && build-storybook -c .storybook -s ./stories/demo -o .out",
+    "copy-defs": "tsc --skipLibCheck && cp -r ts-build/*.d.ts dist/",
+    "storybook": "start-storybook -p 8080",
+    "storybook:build": "npm run bundle:prod && build-storybook -c .storybook -o .out",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir=.out",
     "test": "npm run build",
     "size": "bundlesize",
@@ -65,12 +65,12 @@
   },
   "homepage": "https://github.com/fpapado/react-lazy-images#readme",
   "dependencies": {
-    "react-intersection-observer": "^6.1.0",
+    "react-intersection-observer": "^9.4.0",
     "unionize": "^2.1.2"
   },
   "peerDependencies": {
-    "react": "^15 || ^16",
-    "react-dom": "^15 || ^16"
+    "react": "^15 || ^16 || ^17 || ^18",
+    "react-dom": "^15 || ^16 || ^17 || ^18"
   },
   "devDependencies": {
     "@storybook/addon-actions": "4.0.0-alpha.14",
@@ -79,28 +79,29 @@
     "@storybook/addons": "4.0.0-alpha.14",
     "@storybook/react": "4.0.0-alpha.14",
     "@storybook/storybook-deployer": "^2.3.0",
-    "@types/react": "^16.4.6",
-    "@types/react-dom": "^16.0.6",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "@types/storybook__addon-actions": "^3.0.3",
     "@types/storybook__addon-info": "^3.2.3",
     "@types/storybook__react": "^3.0.8",
+    "@typescript-eslint/parser": "^5.36.2",
     "awesome-typescript-loader": "^5.2",
     "babel-core": "^6.26.3",
-    "bundlesize": "^0.17.0",
+    "bundlesize": "^0.18.1",
     "eslint": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "husky": "^1.0.0-rc.13",
     "lint-staged": "^7.2.0",
     "microbundle": "0.5.1",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.13.7",
-    "react": "^16.4.1",
+    "react": "^18.2.0",
     "react-docgen-typescript": "^1.6.2",
     "react-docgen-typescript-loader": "^2.1.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
-    "react-dom": "^16.4.1",
+    "react-dom": "^18.2.0",
+    "require-from-string": "^2.0.2",
     "tachyons": "^4.10.0",
-    "typescript": "^3.0.1",
-    "typescript-eslint-parser": "^17.0.1"
+    "typescript": "^4.8.2"
   }
 }

package.json

@@ -15,7 +15,7 @@ export interface LazyImageRenderPropArgs {
 
 export interface RefArg {
   /** When not loading eagerly, a ref to bind to the DOM element. This is needed for the intersection calculation to work. */
-  ref?: React.RefObject<any>;
+  ref?: React.RefObject<any> | ((node?: Element | null) => void);
 }
 
 export interface LazyImageProps extends CommonLazyImageProps {
@@ -45,7 +45,7 @@ export interface LazyImageProps extends CommonLazyImageProps {
  * and then swaps it in. Has predefined rendering logic, but the
  * specifics are up to the caller.
  */
-export const LazyImage: React.StatelessComponent<LazyImageProps> = ({
+export const LazyImage: React.FC<LazyImageProps> = ({
   actual,
   placeholder,
   loading,

src/LazyImage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Observer from "react-intersection-observer";
+import { InView } from "react-intersection-observer";
 import { unionize, ofType, UnionOf } from "unionize";
 
 /**
@@ -48,7 +48,7 @@ export interface RenderCallbackArgs {
   imageState: ImageState;
   imageProps: ImageProps;
   /** When not loading eagerly, a ref to bind to the DOM element. This is needed for the intersection calculation to work. */
-  ref?: React.RefObject<any>;
+  ref?: React.RefObject<any> | ((node?: Element | null) => void);
 }
 
 export interface ImageProps {
@@ -194,7 +194,7 @@ export class LazyImageFull extends React.Component<
   static displayName = "LazyImageFull";
 
   /** A central place to store promises.
-   * A bit silly, but passing promsises directly in the state
+   * A bit silly, but passing promises directly in the state
    * was giving me weird timing issues. This way we can keep
    * the promises in check, and pick them up from the respective methods.
    * FUTURE: Could pass the relevant key in Buffering and Loading, so
@@ -300,7 +300,7 @@ export class LazyImageFull extends React.Component<
     // Clear the Promise Cache
     if (this.promiseCache.loading) {
       // NOTE: This does not cancel the request, only the callback.
-      // We weould need fetch() and an AbortHandler for that.
+      // We we would need fetch() and an AbortHandler for that.
       this.promiseCache.loading.cancel();
     }
     if (this.promiseCache.buffering) {
@@ -331,14 +331,16 @@ export class LazyImageFull extends React.Component<
       });
     } else {
       return (
-        <Observer
+        <InView
           rootMargin="50px 0px"
           // TODO: reconsider threshold
           threshold={0.01}
           {...observerProps}
-          onChange={inView => this.update(Action.ViewChanged({ inView }))}
+          onChange={(inView: boolean) =>
+            this.update(Action.ViewChanged({ inView }))
+          }
         >
-          {({ ref }) =>
+          {({ ref }: RenderProps) =>
             children({
               // We know that the state tags and the enum match up, apart
               // from Buffering not being exposed
@@ -350,12 +352,18 @@ export class LazyImageFull extends React.Component<
               ref
             })
           }
-        </Observer>
+        </InView>
       );
     }
   }
 }
 
+interface RenderProps {
+  inView: boolean;
+  entry: IntersectionObserverEntry | undefined;
+  ref: React.RefObject<any> | ((node?: Element | null) => void);
+}
+
 ///// Utilities /////
 
 /** Promise constructor for loading an image */
@@ -384,7 +392,7 @@ const loadImage = (
           // TODO: consider writing the .decode() definition and sending a PR
           //@ts-ignore
           .decode()
-          .then((image: HTMLImageElement) => resolve(image))
+          .then(() => resolve(image))
           .catch((err: any) => reject(err))
       );
     }
@@ -398,7 +406,7 @@ const delayedPromise = (ms: number) =>
   new Promise(resolve => setTimeout(resolve, ms));
 
 interface CancelablePromise {
-  promise: Promise<{}>;
+  promise: Promise<any>;
   cancel: () => void;
 }
 
@@ -412,7 +420,7 @@ interface CancelablePromise {
 const makeCancelable = (promise: Promise<any>): CancelablePromise => {
   let hasCanceled_ = false;
 
-  const wrappedPromise = new Promise((resolve, reject) => {
+  const wrappedPromise: Promise<any> = new Promise((resolve, reject) => {
     promise.then(
       (val: any) => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val))
     );

src/LazyImageFull.tsx

@@ -13,10 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "lib": ["es6", "dom"],
-    "baseUrl": "./",
-    "paths": {
-      "react-intersection-observer": ["src/react-intersection-observer.d.ts"]
-    }
+    "baseUrl": "./"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]