Update withErrorBoundary types for forwards compat (#211)

Co-authored-by: Brian Vaughn <[email protected]>

Author: henryqdineen

package.json

@@ -60,7 +60,7 @@
     "@preconstruct/cli": "^2.8.1",
     "@types/assert": "^1.5.10",
     "@types/jest": "^26.0.15",
-    "@types/react": "^18",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18",
     "assert": "^2.0.0",
     "eslint": "^9.13.0",

pnpm-lock.yaml

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { Component, createRef, PropsWithChildren } from "react";
+import { Component, createRef, forwardRef, PropsWithChildren } from "react";
 import { createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { withErrorBoundary } from "./withErrorBoundary";
@@ -81,4 +81,26 @@ describe("withErrorBoundary", () => {
     expect(ref.current).not.toBeNull();
     expect(typeof ref.current?.test).toBe("function");
   });
+
+  it("should forward dom refs", () => {
+    type Props = { foo: string };
+
+    const Div = forwardRef<HTMLDivElement, Props>((props, ref) => {
+      return <div ref={ref}>{props.foo}</div>;
+    });
+    Div.displayName = "Div";
+
+    const Wrapped = withErrorBoundary(Div, {
+      fallback: <div>Error</div>,
+    });
+
+    const ref = createRef<HTMLDivElement>();
+
+    act(() => {
+      root.render(<Wrapped foo="abc" ref={ref} />);
+    });
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
 });

src/withErrorBoundary.test.tsx

@@ -1,26 +1,28 @@
 import {
   createElement,
   forwardRef,
-  ForwardedRef,
   RefAttributes,
   ForwardRefExoticComponent,
   PropsWithoutRef,
   ComponentType,
+  ComponentRef,
+  ComponentProps,
 } from "react";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { ErrorBoundaryProps } from "./types";
 
-export function withErrorBoundary<Props extends object>(
-  component: ComponentType<Props>,
+export function withErrorBoundary<T extends ComponentType<any>>(
+  component: T,
   errorBoundaryProps: ErrorBoundaryProps
-): ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<any>> {
-  const Wrapped = forwardRef<ComponentType<Props>, Props>(
-    (props: Props, ref: ForwardedRef<ComponentType<Props>>) =>
-      createElement(
-        ErrorBoundary,
-        errorBoundaryProps,
-        createElement(component, { ...props, ref })
-      )
+): ForwardRefExoticComponent<
+  PropsWithoutRef<ComponentProps<T>> & RefAttributes<ComponentRef<T>>
+> {
+  const Wrapped = forwardRef<ComponentRef<T>, ComponentProps<T>>((props, ref) =>
+    createElement(
+      ErrorBoundary,
+      errorBoundaryProps,
+      createElement(component, { ...props, ref })
+    )
   );
 
   // Format for display in DevTools