fix(🌎): componentProps prop to WithSkiaWeb (#2662)

Co-authored-by: Santiago Topolansky <[email protected]>
Shopify · Sep 30, 2024 · 4c8fd33 · 4c8fd33
1 parent 8f016e9
commit 4c8fd33
Showing 1 changed file with 17 additions and 6 deletions.
diff --git 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>
   );
 };