feat: add retryWithBackoff utility (#22)

README.md

@@ -851,6 +851,52 @@ For all other props, the last prop object overrides all previous ones.
 
 ---
 
+### retryWithBackoff()
+
+Retry a promise until it resolves or the max number of retries is reached.
+
+#### Arguments
+
+| Name      | Type                                                | Required? | Description                                              |
+| --------- | --------------------------------------------------- | --------- | -------------------------------------------------------- |
+| promiseFn | `() => Promise<T>`                                  | Yes       | A function that returns a promise to retry when it fails |
+| config    | [`RetryWithBackoffConfig`](#retrywithbackoffconfig) | No        | Configuration options                                    |
+
+#### RetryWithBackoffConfig
+
+```ts
+interface RetryWithBackoffConfig {
+  /**
+   * Max number of retries
+   *
+   * @default 4
+   */
+  maxRetries?: number;
+  /**
+   * Initial delay before first retry
+   *
+   * @default 100
+   */
+  initialDelay?: number;
+  /**
+   * Multiplier for each subsequent retry
+   *
+   * @default 2
+   */
+  delayMultiple?: number;
+  /**
+   * A function that should return `false` to stop retrying
+   *
+   * @param error - The error that caused the retry
+   */
+  shouldRetry?: (error: unknown) => boolean;
+}
+```
+
+[**⇗ Back to top**](#exploration)
+
+---
+
 ## Path utilities
 
 Utilities for unix-style paths

package.json

@@ -92,7 +92,16 @@
   "eslintConfig": {
     "extends": [
       "lunde"
-    ]
+    ],
+    "parserOptions": {
+      "project": [
+        "./tsconfig.eslint.json"
+      ]
+    },
+    "rules": {
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-misused-promises": "error"
+    }
   },
   "eslintIgnore": [
     "node_modules",

src/index.ts

@@ -39,4 +39,4 @@ export type {
   UseVirtualizeResult,
 } from "./use-virtualize";
 export { useVisibleNodes } from "./use-visible-nodes";
-export { mergeProps } from "./utils";
+export { mergeProps, retryWithBackoff } from "./utils";

src/node.tsx

@@ -4,6 +4,7 @@ import type { FileTree, FileTreeNode } from "./file-tree";
 import { subject } from "./tree/subject";
 import type { NodePlugin } from "./use-node-plugins";
 import { useNodePlugins } from "./use-node-plugins";
+import { retryWithBackoff } from "./utils";
 
 /**
  * A React component that renders a node in a file tree with plugins. The
@@ -64,7 +65,11 @@ export function useNodeProps<Meta>(config: Omit<NodeProps<Meta>, "as">) {
           if (expanded) {
             tree.collapse(node);
           } else {
-            tree.expand(node);
+            retryWithBackoff(() => tree.expand(node), {
+              shouldRetry() {
+                return node.expanded && !tree.isExpanded(node);
+              },
+            }).catch(() => {});
           }
         }
       },

src/tree/tree.ts

@@ -1,4 +1,5 @@
 import memoizeOne from "@essentials/memoize-one";
+import { retryWithBackoff } from "../utils";
 import type { Node } from "./branch";
 import { Branch } from "./branch";
 import { Leaf } from "./leaf";
@@ -25,7 +26,11 @@ export class Tree<NodeData = {}> {
     this.root = root;
     this.getNodes = getNodes;
     this.comparator = comparator;
-    this.expand(this.root);
+    retryWithBackoff(() => this.expand(this.root), {
+      shouldRetry: () => {
+        return !this.isExpanded(this.root);
+      },
+    }).catch(() => {});
   }
 
   get visibleNodes(): number[] {
@@ -292,7 +297,11 @@ export class Tree<NodeData = {}> {
           const node = nodes[i];
 
           if (isBranch(node) && node.expanded) {
-            this.expand(node);
+            retryWithBackoff(() => this.expand(node), {
+              shouldRetry: () => {
+                return node.expanded && !this.isExpanded(node);
+              },
+            }).catch(() => {});
           }
         }
       })();

src/use-dnd.ts

@@ -6,7 +6,7 @@ import type { Subject } from "./tree/subject";
 import { pureSubject } from "./tree/subject";
 import type { WindowRef } from "./types";
 import { useObserver } from "./use-observer";
-import { shallowEqual } from "./utils";
+import { retryWithBackoff, shallowEqual } from "./utils";
 
 /**
  * A plugin hook for adding drag and drop to the file tree.
@@ -45,11 +45,22 @@ export function useDnd<Meta>(
 
       storedTimeout.current.timeout = setTimeout(() => {
         if (!event.dir.expanded) {
-          fileTree.expand(event.dir).then(() => {
-            if (event.dir === storedDir.current) {
-              dnd.setState({ ...event, type: "expanded" });
+          retryWithBackoff(
+            () =>
+              fileTree.expand(event.dir).then(() => {
+                if (event.dir === storedDir.current) {
+                  dnd.setState({ ...event, type: "expanded" });
+                }
+              }),
+            {
+              shouldRetry() {
+                return (
+                  event.dir === storedDir.current &&
+                  !fileTree.isExpanded(event.dir)
+                );
+              },
             }
-          });
+          ).catch(() => {});
         }
       }, storedConfig.current.dragOverExpandTimeout ?? DEFAULT_DRAG_OVER_EXPAND_TIMEOUT);
     } else if (

src/use-file-tree-snapshot.ts

@@ -50,7 +50,9 @@ export function useFileTreeSnapshot<Meta>(
       }
     }
 
-    observer({ expandedPaths, buriedPaths, version: SNAPSHOT_VERSION });
+    observer({ expandedPaths, buriedPaths, version: SNAPSHOT_VERSION })?.catch(
+      () => {}
+    );
   });
 }
 

src/use-hotkeys.ts

@@ -5,6 +5,7 @@ import type { WindowRef } from "./types";
 import type { useRovingFocus } from "./use-roving-focus";
 import type { useSelections } from "./use-selections";
 import { useVisibleNodes } from "./use-visible-nodes";
+import { retryWithBackoff } from "./utils";
 
 /**
  * A hook for adding standard hotkeys to the file tree.
@@ -182,7 +183,11 @@ export function useHotkeys(fileTree: FileTree, config: UseHotkeysConfig) {
               if (node.expanded) {
                 fileTree.collapse(node);
               } else {
-                fileTree.expand(node);
+                retryWithBackoff(() => fileTree.expand(node), {
+                  shouldRetry() {
+                    return node.expanded && !fileTree.isExpanded(node);
+                  },
+                }).catch(() => {});
               }
             } else {
               selections.clear();

src/use-virtualize.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
 import { act, renderHook } from "@testing-library/react-hooks";
 import { useVirtualize } from ".";
 import { createFileTree } from "./file-tree";

src/utils.test.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from ".";
-import { shallowEqual, throttle } from "./utils";
+import { retryWithBackoff, shallowEqual, throttle } from "./utils";
 
 describe("shallowEqual()", () => {
   it("should return true for equal objects", () => {
@@ -116,3 +116,72 @@ describe("throttle()", () => {
     expect(fn).lastCalledWith(3);
   });
 });
+
+describe("retryWithBackoff()", () => {
+  it("should retry with backoff", async () => {
+    const fn = jest.fn(async () => {
+      throw new Error("error");
+    });
+
+    const promise = retryWithBackoff(fn, {
+      initialDelay: 1,
+      delayMultiple: 2,
+      maxRetries: 3,
+    });
+
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    await Promise.resolve();
+    jest.advanceTimersByTime(1);
+    await Promise.resolve();
+    expect(fn).toHaveBeenCalledTimes(2);
+
+    await Promise.resolve();
+    jest.advanceTimersByTime(2);
+    await Promise.resolve();
+    expect(fn).toHaveBeenCalledTimes(3);
+
+    await Promise.resolve();
+    jest.advanceTimersByTime(4);
+    await Promise.resolve();
+    expect(fn).toHaveBeenCalledTimes(4);
+
+    const catchFn = jest.fn();
+    await promise.catch(catchFn);
+    expect(catchFn).lastCalledWith(new Error("error"));
+  });
+
+  it("should return value", async () => {
+    const fn = jest.fn(async () => {
+      return "foo";
+    });
+    const promise = retryWithBackoff(fn);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(await promise).toBe("foo");
+  });
+
+  it("prevent retrying if shouldRetry returns false", async () => {
+    const fn = jest.fn(async () => {
+      throw new Error("error");
+    });
+
+    const promise = retryWithBackoff(fn, {
+      initialDelay: 1,
+      delayMultiple: 2,
+      maxRetries: 3,
+      shouldRetry: () => false,
+    });
+
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    await Promise.resolve();
+    jest.advanceTimersByTime(1);
+    await Promise.resolve();
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    const catchFn = jest.fn();
+    await promise.catch(catchFn);
+    expect(catchFn).lastCalledWith(new Error("error"));
+  });
+});

src/utils.ts

@@ -131,6 +131,75 @@ export function shallowEqual<
   return true;
 }
 
+/**
+ * Retry a promise until it resolves or the max number of retries is reached.
+ *
+ * @param promiseFn - A function that returns a promise to retry
+ * @param config - Options
+ * @param config.maxRetries - Max number of retries
+ * @param config.initialDelay - Initial delay before first retry
+ * @param config.delayMultiple - Multiplier for each subsequent retry
+ * @param config.shouldRetry - A function that should return `false` to stop retrying
+ */
+export async function retryWithBackoff<T>(
+  promiseFn: () => Promise<T>,
+  config: RetryWithBackoffConfig = {}
+): Promise<T> {
+  const {
+    maxRetries = 4,
+    initialDelay = 100,
+    delayMultiple = 2,
+    shouldRetry,
+  } = config;
+
+  try {
+    const result = await promiseFn();
+    return result;
+  } catch (err) {
+    if (
+      maxRetries === 0 ||
+      (typeof shouldRetry === "function" && !shouldRetry(err))
+    ) {
+      throw err;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, initialDelay));
+    return retryWithBackoff(promiseFn, {
+      maxRetries: maxRetries - 1,
+      initialDelay: initialDelay * delayMultiple,
+      delayMultiple,
+      shouldRetry,
+    });
+  }
+}
+
+export interface RetryWithBackoffConfig {
+  /**
+   * Max number of retries
+   *
+   * @default 4
+   */
+  maxRetries?: number;
+  /**
+   * Initial delay before first retry
+   *
+   * @default 100
+   */
+  initialDelay?: number;
+  /**
+   * Multiplier for each subsequent retry
+   *
+   * @default 2
+   */
+  delayMultiple?: number;
+  /**
+   * A function that should return `false` to stop retrying
+   *
+   * @param error - The error that caused the retry
+   */
+  shouldRetry?: (error: unknown) => boolean;
+}
+
 interface Props {
   [key: string]: any;
 }

tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": []
+}