@shopify/react-native-skia 0.1.136 → 0.1.137

package/src/views/SkiaView.web.tsx

@@ -52,7 +52,7 @@ export class SkiaView extends React.Component<
           // Get canvas and repaint
           if (this._surface) {
             this._canvas = this._surface.getCanvas();
-            this.requestRedraw();
+            this.redraw();
           }
         }
       }
@@ -61,7 +61,7 @@ export class SkiaView extends React.Component<
 
   componentDidMount() {
     // Start render loop
-    this.redraw();
+    this.tick();
   }
 
   componentWillUnmount() {
@@ -83,7 +83,7 @@ export class SkiaView extends React.Component<
   /**
    * Sends a redraw request to the native SkiaView.
    */
-  private redraw() {
+  private tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
       if (
@@ -106,11 +106,11 @@ export class SkiaView extends React.Component<
     }
     // Always request a new redraw as long as we're not unmounted
     if (!this._unmounted) {
-      requestAnimationFrame(this.redraw.bind(this));
+      requestAnimationFrame(this.tick.bind(this));
     }
   }
 
-  public requestRedraw() {
+  public redraw() {
     this._redrawRequests++;
   }
 
@@ -125,7 +125,7 @@ export class SkiaView extends React.Component<
    */
   public setDrawMode(mode: DrawMode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
 
   /**
@@ -140,7 +140,7 @@ export class SkiaView extends React.Component<
     _values.forEach((v) => {
       this._unsubscriptions.push(
         v.addListener(() => {
-          this.requestRedraw();
+          this.redraw();
         })
       );
     });
@@ -155,7 +155,7 @@ export class SkiaView extends React.Component<
       type: touchType,
       timestamp: Date.now(),
     });
-    this.requestRedraw();
+    this.redraw();
   }
 
   handleTouchStart(evt: PointerEvent) {

package/src/web/LoadSkiaWeb.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
+import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+
+declare global {
+  var CanvasKit: CanvasKitType;
+}
+
+export const LoadSkiaWeb = async () => {
+  const CanvasKit = await CanvasKitInit();
+  // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+  global.CanvasKit = CanvasKit;
+};
+
+// We keep this function for backward compatibility
+export const LoadSkia = LoadSkiaWeb;

package/src/web/WithSkiaWeb.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ComponentType } from "react";
+import React, { useMemo, lazy, Suspense } from "react";
+import { Platform } from "react-native";
+
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+
+interface WithSkiaProps {
+  fallback: ComponentProps<typeof Suspense>["fallback"];
+  getComponent: () => Promise<{ default: ComponentType }>;
+}
+
+export const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {
+  const Inner = useMemo(
+    () =>
+      lazy(async () => {
+        if (Platform.OS === "web") {
+          await LoadSkiaWeb();
+        } else {
+          console.warn(
+            "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
+          );
+        }
+        return getComponent();
+      }),
+    [getComponent]
+  );
+  return (
+    <Suspense fallback={fallback}>
+      <Inner />
+    </Suspense>
+  );
+};

package/src/web/index.ts

@@ -1,15 +1,2 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
-
-declare global {
-  var CanvasKit: CanvasKitType;
-}
-
-export const LoadSkia = async () => {
-  const CanvasKit = await CanvasKitInit();
-  // The CanvasKit API is stored on the global object and used
-  // to create the JsiSKApi in the Skia.web.ts file.
-  global.CanvasKit = CanvasKit;
-};
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";