@shopify/react-native-skia 0.1.133 → 0.1.137

package/src/skia/web/JsiSkFont.ts

@@ -27,6 +27,12 @@ Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
     return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
   }
 
+  getTextWidth(text: string, paint?: SkPaint | undefined) {
+    const ids = this.getGlyphIDs(text);
+    const widths = this.getGlyphWidths(ids, paint);
+    return widths.reduce((a, b) => a + b, 0);
+  }
+
   getMetrics() {
     const result = this.ref.getMetrics();
     return {

package/src/skia/web/JsiSkMatrix.ts

@@ -51,4 +51,8 @@ export class JsiSkMatrix
       )
     );
   }
+
+  identity() {
+    this.ref.set(this.CanvasKit.Matrix.identity());
+  }
 }

package/src/skia/web/JsiSkia.ts

@@ -63,7 +63,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
   Picture: new JsiSkPictureFactory(CanvasKit),
   Path: new JsiSkPathFactory(CanvasKit),
-  Matrix: (matrix?: number[]) =>
+  Matrix: (matrix?: readonly number[]) =>
     new JsiSkMatrix(
       CanvasKit,
       matrix

package/src/values/api.ts

@@ -6,5 +6,3 @@ declare global {
 
 const { SkiaValueApi } = global;
 export const ValueApi = SkiaValueApi;
-
-export const { createValue, createDerivedValue } = ValueApi;

package/src/values/api.web.ts

@@ -2,4 +2,4 @@ import { ValueApi as ValueApiWeb } from "./web";
 
 export const ValueApi = ValueApiWeb;
 
-export const { createValue, createDerivedValue } = ValueApi;
+export const { createValue, createComputedValue } = ValueApi;

package/src/values/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from "./useClockValue";
-export * from "./useDerivedValue";
+export * from "./useComputedValue";
 export * from "./useValue";
 export * from "./useValueEffect";

package/src/values/hooks/useComputedValue.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+import { ValueApi } from "../api";
+import { isValue } from "../../renderer/processors/Animations";
+
+/**
+ * Creates a new computed value - a value that will calculate its value depending
+ * on other values.
+ * @param cb Callback to calculate new value
+ * @param values Dependant values
+ * @returns A readonly value
+ */
+export const useComputedValue = <R>(cb: () => R, values: unknown[]) =>
+  useMemo(
+    () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    values
+  );
+
+export const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {
+  console.warn("useDerivedValue is deprecated. Use useComputedValue instead.");
+  return useComputedValue(cb, values);
+};

package/src/values/types.ts

@@ -46,10 +46,10 @@ export interface ISkiaValueApi {
    */
   createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
   /**
-   * Creates a derived value. This is a calculated value that returns the result of
+   * Creates a computed value. This is a calculated value that returns the result of
    * a function that is called with the values of the dependencies.
    */
-  createDerivedValue: <R>(
+  createComputedValue: <R>(
     cb: () => R,
     values: Array<SkiaValue<unknown>>
   ) => SkiaValue<R>;

package/src/values/web/{RNSkDerivedValue.ts → RNSkComputedValue.ts}

@@ -2,7 +2,7 @@ import type { DependencyList } from "react";
 
 import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
 
-export class RNSkDerivedValue<T> extends RNSkReadonlyValue<T> {
+export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
   constructor(callback: () => T, dependencies: DependencyList) {
     // Initialize dependencies - we can't call this yet, since
     // super if not called and it requires a start value to be set.

package/src/values/web/api.ts

@@ -9,18 +9,18 @@ import type {
 
 import { RNSkAnimation } from "./RNSkAnimation";
 import { RNSkClockValue } from "./RNSkClockValue";
-import { RNSkDerivedValue } from "./RNSkDerivedValue";
+import { RNSkComputedValue } from "./RNSkComputedValue";
 import { RNSkValue } from "./RNSkValue";
 
 export const ValueApi: ISkiaValueApi = {
   createValue: function <T>(initialValue: T): SkiaMutableValue<T> {
     return new RNSkValue(initialValue);
   },
-  createDerivedValue: function <R>(
+  createComputedValue: function <R>(
     cb: () => R,
     values: SkiaValue<unknown>[]
   ): SkiaValue<R> {
-    return new RNSkDerivedValue(cb, values);
+    return new RNSkComputedValue(cb, values);
   },
   createClockValue: function (): SkiaClockValue {
     return new RNSkClockValue(requestAnimationFrame.bind(window));

package/src/views/SkiaView.web.tsx

@@ -36,29 +36,32 @@ export class SkiaView extends React.Component<
   }
 
   private onLayout(evt: LayoutChangeEvent) {
-    this.setState({
-      width: evt.nativeEvent.layout.width,
-      height: evt.nativeEvent.layout.height,
-    });
-    // Reset canvas / surface on layout change
-    if (this._canvasRef.current) {
-      // Create surface
-      this._surface = new JsiSkSurface(
-        global.CanvasKit,
-        global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)!
-      );
-      // Get canvas and repaint
-      if (this._surface) {
-        this._canvas = this._surface.getCanvas();
-        this.requestRedraw();
-        this.redraw();
+    this.setState(
+      {
+        width: evt.nativeEvent.layout.width,
+        height: evt.nativeEvent.layout.height,
+      },
+      () => {
+        // Reset canvas / surface on layout change
+        if (this._canvasRef.current) {
+          // Create surface
+          this._surface = new JsiSkSurface(
+            global.CanvasKit,
+            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!
+          );
+          // Get canvas and repaint
+          if (this._surface) {
+            this._canvas = this._surface.getCanvas();
+            this.redraw();
+          }
+        }
       }
-    }
+    );
   }
 
   componentDidMount() {
     // Start render loop
-    this.redraw();
+    this.tick();
   }
 
   componentWillUnmount() {
@@ -80,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 (
@@ -103,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++;
   }
 
@@ -122,7 +125,7 @@ export class SkiaView extends React.Component<
    */
   public setDrawMode(mode: DrawMode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
 
   /**
@@ -137,7 +140,7 @@ export class SkiaView extends React.Component<
     _values.forEach((v) => {
       this._unsubscriptions.push(
         v.addListener(() => {
-          this.requestRedraw();
+          this.redraw();
         })
       );
     });
@@ -152,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";

package/lib/commonjs/values/hooks/useDerivedValue.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDerivedValue = void 0;
-
-var _react = require("react");
-
-var _api = require("../api");
-
-var _processors = require("../../renderer/processors");
-
-/**
- * Creates a new derived value - a value that will calculate its value depending
- * on other values.
- * @param cb Callback to calculate new value
- * @param values Dependant values
- * @returns A readonly value
- */
-const useDerivedValue = (cb, values) => (0, _react.useMemo)(() => _api.ValueApi.createDerivedValue(cb, values.filter(_processors.isValue)), // eslint-disable-next-line react-hooks/exhaustive-deps
-values);
-
-exports.useDerivedValue = useDerivedValue;
-//# sourceMappingURL=useDerivedValue.js.map

package/lib/commonjs/values/hooks/useDerivedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useDerivedValue.ts"],"names":["useDerivedValue","cb","values","ValueApi","createDerivedValue","filter","isValue"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,eAAe,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC7B,oBACE,MAAMC,cAASC,kBAAT,CAA+BH,EAA/B,EAAmCC,MAAM,CAACG,MAAP,CAAcC,mBAAd,CAAnC,CADR,EAEE;AACAJ,MAHF,CADK","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors\";\n\n/**\n * Creates a new derived value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useDerivedValue = <R>(cb: () => R, values: unknown[]) =>\n  useMemo(\n    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n"]}

package/lib/commonjs/values/web/RNSkDerivedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["RNSkDerivedValue.ts"],"names":["RNSkDerivedValue","RNSkReadonlyValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,gBAAN,SAAkCC,oCAAlC,CAAuD;AAC5DC,EAAAA,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;AAC3D;AACA;AACA,UAAMC,aAAgC,GAAG,EAAzC;AACA,UAAMC,eAAsD,GAAG;AAC7DC,MAAAA,OAAO,EAAEC;AADoD,KAA/D;AAGAJ,IAAAA,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;AAC5B,UAAI,kBAAkBA,GAAlB,IAAyB,iBAAiBA,GAA9C,EAAmD;AACjDL,QAAAA,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;AAAA;;AAAA,0CAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;AAAA,SAAhD,CADF;AAKD;AACF,KARD;AASA,UAAMH,QAAQ,EAAd;;AAhB2D;;AAAA;;AAiB3D,SAAKU,cAAL,GAAsBR,aAAtB;AACAC,IAAAA,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;AACA,SAAKC,SAAL,GAAiBb,QAAjB;AACD;;AAEOW,EAAAA,gBAAgB,GAAG;AACzB,SAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;AACD;;AAKME,EAAAA,WAAW,GAAG;AACnB,SAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;AACD;;AAhC2D","sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkDerivedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\"__typename__\" in dep && \"addListener\" in dep) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n  }\n}\n"]}

package/lib/module/values/hooks/useDerivedValue.js

@@ -1,14 +0,0 @@
-import { useMemo } from "react";
-import { ValueApi } from "../api";
-import { isValue } from "../../renderer/processors";
-/**
- * Creates a new derived value - a value that will calculate its value depending
- * on other values.
- * @param cb Callback to calculate new value
- * @param values Dependant values
- * @returns A readonly value
- */
-
-export const useDerivedValue = (cb, values) => useMemo(() => ValueApi.createDerivedValue(cb, values.filter(isValue)), // eslint-disable-next-line react-hooks/exhaustive-deps
-values);
-//# sourceMappingURL=useDerivedValue.js.map

package/lib/module/values/hooks/useDerivedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useDerivedValue.ts"],"names":["useMemo","ValueApi","isValue","useDerivedValue","cb","values","createDerivedValue","filter"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,2BAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,eAAe,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC7BL,OAAO,CACL,MAAMC,QAAQ,CAACK,kBAAT,CAA+BF,EAA/B,EAAmCC,MAAM,CAACE,MAAP,CAAcL,OAAd,CAAnC,CADD,EAEL;AACAG,MAHK,CADF","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors\";\n\n/**\n * Creates a new derived value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useDerivedValue = <R>(cb: () => R, values: unknown[]) =>\n  useMemo(\n    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    values\n  );\n"]}

package/lib/module/values/web/RNSkDerivedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["RNSkDerivedValue.ts"],"names":["RNSkReadonlyValue","RNSkDerivedValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe"],"mappings":";;AAEA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,OAAO,MAAMC,gBAAN,SAAkCD,iBAAlC,CAAuD;AAC5DE,EAAAA,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;AAC3D;AACA;AACA,UAAMC,aAAgC,GAAG,EAAzC;AACA,UAAMC,eAAsD,GAAG;AAC7DC,MAAAA,OAAO,EAAEC;AADoD,KAA/D;AAGAJ,IAAAA,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;AAC5B,UAAI,kBAAkBA,GAAlB,IAAyB,iBAAiBA,GAA9C,EAAmD;AACjDL,QAAAA,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;AAAA;;AAAA,0CAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;AAAA,SAAhD,CADF;AAKD;AACF,KARD;AASA,UAAMH,QAAQ,EAAd;;AAhB2D;;AAAA;;AAiB3D,SAAKU,cAAL,GAAsBR,aAAtB;AACAC,IAAAA,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;AACA,SAAKC,SAAL,GAAiBb,QAAjB;AACD;;AAEOW,EAAAA,gBAAgB,GAAG;AACzB,SAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;AACD;;AAKME,EAAAA,WAAW,GAAG;AACnB,SAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;AACD;;AAhC2D","sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkDerivedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\"__typename__\" in dep && \"addListener\" in dep) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n  }\n}\n"]}

package/src/values/hooks/useDerivedValue.ts

@@ -1,18 +0,0 @@
-import { useMemo } from "react";
-
-import { ValueApi } from "../api";
-import { isValue } from "../../renderer/processors";
-
-/**
- * Creates a new derived value - a value that will calculate its value depending
- * on other values.
- * @param cb Callback to calculate new value
- * @param values Dependant values
- * @returns A readonly value
- */
-export const useDerivedValue = <R>(cb: () => R, values: unknown[]) =>
-  useMemo(
-    () => ValueApi.createDerivedValue<R>(cb, values.filter(isValue)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    values
-  );