From 4c8fd33c1d2f422e0e3246a040857b20f0dcbbec Mon Sep 17 00:00:00 2001
From: Santiago Topolansky <43559181+santitopo@users.noreply.github.com>
Date: Mon, 30 Sep 2024 12:31:54 -0300
Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=8C=8E):=20componentProps=20prop=20to?=
 =?UTF-8?q?=20WithSkiaWeb=20(#2662)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Santiago Topolansky <santiago.topolansky.ctr@one.app>
---
 packages/skia/src/web/WithSkiaWeb.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/skia/src/web/WithSkiaWeb.tsx b/packages/skia/src/web/WithSkiaWeb.tsx
index 1a940481e4..5cd0932264 100644
--- a/packages/skia/src/web/WithSkiaWeb.tsx
+++ b/packages/skia/src/web/WithSkiaWeb.tsx
@@ -5,17 +5,28 @@ import { Platform } from "../Platform";
 
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 
-interface WithSkiaProps {
+type NonOptionalKeys<T> = {
+  [k in keyof T]-?: undefined extends T[k] ? never : k;
+}[keyof T];
+
+type WithSkiaProps<TProps> = {
   fallback?: ComponentProps<typeof Suspense>["fallback"];
-  getComponent: () => Promise<{ default: ComponentType }>;
+  getComponent: () => Promise<{ default: ComponentType<TProps> }>;
   opts?: Parameters<typeof LoadSkiaWeb>[0];
-}
+} & (NonOptionalKeys<TProps> extends never
+  ? {
+      componentProps?: TProps;
+    }
+  : {
+      componentProps: TProps;
+    });
 
-export const WithSkiaWeb = ({
+export const WithSkiaWeb = <TProps extends object>({
   getComponent,
   fallback,
   opts,
-}: WithSkiaProps) => {
+  componentProps,
+}: WithSkiaProps<TProps>) => {
   const Inner = useMemo(
     // TODO: investigate
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,7 +45,7 @@ export const WithSkiaWeb = ({
   );
   return (
     <Suspense fallback={fallback ?? null}>
-      <Inner />
+      <Inner {...componentProps} />
     </Suspense>
   );
 };