@shopify/react-native-skia 0.1.141 → 0.1.145

package/src/skia/core/Typeface.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 
 import { useRawData } from "./Data";
 
@@ -9,6 +9,6 @@ const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
  * Returns a Skia Typeface object
  * */
 export const useTypeface = (
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, tfFactory, onError);

package/src/skia/types/Data/Data.ts

@@ -2,4 +2,14 @@ import type { SkJSIInstance } from "../JsiInstance";
 
 export type SkData = SkJSIInstance<"Data">;
 
-export type DataSource = ReturnType<typeof require> | string | Uint8Array;
+type RNModule = number;
+type ESModule = {
+  __esModule: true;
+  default: string;
+};
+export type DataModule = RNModule | ESModule;
+export type DataSource = DataModule | string | Uint8Array;
+export type DataSourceParam = DataSource | null | undefined;
+
+export const isRNModule = (mod: DataModule): mod is RNModule =>
+  typeof mod === "number";

package/src/skia/types/Paint/Paint.ts

@@ -34,6 +34,12 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    */
   copy(): SkPaint;
 
+  /**
+   * Sets all SkPaint contents to their initial values. This is equivalent to replacing
+     SkPaint with the result of SkPaint().
+   */
+  reset(): void;
+
   /**
    * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
    * (sRGB gamut, and encoded with the sRGB transfer function).

package/src/skia/types/Picture/Picture.ts

@@ -3,8 +3,9 @@ import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
 import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkPicture {
+export interface SkPicture extends SkJSIInstance<"Picture"> {
   /**
    *  Returns a new shader that will draw with this picture.
    *

package/src/skia/web/Host.ts

@@ -1,11 +1,10 @@
-/* eslint-disable no-nested-ternary */
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
 export class NotImplementedOnRNWeb extends Error {
-  constructor() {
-    super("Not implemented on React Native Web");
+  constructor(msg?: string) {
+    super(msg ?? "Not implemented on React Native Web");
   }
 }
 
@@ -17,12 +16,12 @@ export abstract class Host {
   }
 }
 
-export abstract class HostObject<T, N extends string>
+export abstract class BaseHostObject<T, N extends string>
   extends Host
   implements SkJSIInstance<N>
 {
   readonly __typename__: N;
-  readonly ref: T;
+  ref: T;
 
   constructor(CanvasKit: CanvasKit, ref: T, typename: N) {
     super(CanvasKit);
@@ -31,23 +30,14 @@ export abstract class HostObject<T, N extends string>
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type NonNullish = {};
-
-export const toOptionalValue = <T>(
-  value: NonNullish | undefined | null
-): T | undefined | null =>
-  value === undefined ? undefined : value === null ? null : toValue(value);
-
-export const toUndefinedableValue = <T>(
-  value: NonNullish | undefined
-): T | undefined => (value === undefined ? undefined : toValue(value));
-
-export const toNullableValue = <T>(value: NonNullish | null): T | null =>
-  value === null ? null : toValue(value);
-
-export const toValue = <T>(value: NonNullish): T =>
-  (value as HostObject<T, string>).ref;
+export abstract class HostObject<T, N extends string> extends BaseHostObject<
+  T,
+  N
+> {
+  static fromValue<T>(value: SkJSIInstance<string>) {
+    return (value as HostObject<T, string>).ref;
+  }
+}
 
 export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
 export const optEnum = (

package/src/skia/web/JsiSkCanvas.ts

@@ -1,4 +1,4 @@
-import type { Canvas, Image, CanvasKit, Paint } from "canvaskit-wasm";
+import type { Canvas, CanvasKit } from "canvaskit-wasm";
 
 import type {
   BlendMode,
@@ -24,14 +24,19 @@ import type {
   SkVertices,
 } from "../types";
 
-import {
-  ckEnum,
-  HostObject,
-  toValue,
-  toUndefinedableValue,
-  toOptionalValue,
-} from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkVertices } from "./JsiSkVertices";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkFont } from "./JsiSkFont";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import { JsiSkPicture } from "./JsiSkPicture";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -43,13 +48,18 @@ export class JsiSkCanvas
 
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
-      JsiSkRect.fromValue(this.CanvasKit, rect).ref,
-      toValue<Paint>(paint)
+      JsiSkRect.fromValue(this.CanvasKit, rect),
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawImage(image: SkImage, x: number, y: number, paint?: SkPaint) {
-    this.ref.drawImage(toValue<Image>(image), x, y, toOptionalValue(paint));
+    this.ref.drawImage(
+      JsiSkImage.fromValue(image),
+      x,
+      y,
+      paint ? JsiSkPaint.fromValue(paint) : paint
+    );
   }
 
   drawImageRect(
@@ -60,10 +70,10 @@ export class JsiSkCanvas
     fastSample?: boolean
   ) {
     this.ref.drawImageRect(
-      toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
-      toValue<Paint>(paint),
+      JsiSkImage.fromValue(img),
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
+      JsiSkPaint.fromValue(paint),
       fastSample
     );
   }
@@ -77,12 +87,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageCubic(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -95,12 +105,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageOptions(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -112,11 +122,11 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageNine(
-      toValue(img),
-      toValue(center),
-      toValue(dest),
+      JsiSkImage.fromValue(img),
+      Array.from(JsiSkRect.fromValue(this.CanvasKit, center)),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(filter),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -129,12 +139,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectCubic(
-      toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
+      JsiSkImage.fromValue(img),
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -147,29 +157,33 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectOptions(
-      toValue<Image>(img),
-      JsiSkRect.fromValue(this.CanvasKit, src).ref,
-      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
+      JsiSkImage.fromValue(img),
+      JsiSkRect.fromValue(this.CanvasKit, src),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
   drawPaint(paint: SkPaint) {
-    this.ref.drawPaint(toValue(paint));
+    this.ref.drawPaint(JsiSkPaint.fromValue(paint));
   }
 
   drawLine(x0: number, y0: number, x1: number, y1: number, paint: SkPaint) {
-    this.ref.drawLine(x0, y0, x1, y1, toValue(paint));
+    this.ref.drawLine(x0, y0, x1, y1, JsiSkPaint.fromValue(paint));
   }
 
   drawCircle(cx: number, cy: number, radius: number, paint: SkPaint) {
-    this.ref.drawCircle(cx, cy, radius, toValue(paint));
+    this.ref.drawCircle(cx, cy, radius, JsiSkPaint.fromValue(paint));
   }
 
   drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
-    this.ref.drawVertices(toValue(verts), ckEnum(mode), toValue(paint));
+    this.ref.drawVertices(
+      JsiSkVertices.fromValue(verts),
+      ckEnum(mode),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPatch(
@@ -182,9 +196,9 @@ export class JsiSkCanvas
     this.ref.drawPatch(
       cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
-      toOptionalValue(texs),
+      texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
       mode ? ckEnum(mode) : null,
-      toUndefinedableValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : undefined
     );
   }
 
@@ -196,7 +210,7 @@ export class JsiSkCanvas
     this.ref.drawPoints(
       ckEnum(mode),
       points.map(({ x, y }) => [x, y]).flat(),
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -208,36 +222,57 @@ export class JsiSkCanvas
     paint: SkPaint
   ) {
     this.ref.drawArc(
-      toValue(oval),
+      JsiSkRect.fromValue(this.CanvasKit, oval),
       startAngle,
       sweepAngle,
       useCenter,
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawRRect(rrect: SkRRect, paint: SkPaint) {
-    this.ref.drawRRect(toValue(rrect), toValue(paint));
+    this.ref.drawRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, rrect),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
-    this.ref.drawDRRect(toValue(outer), toValue(inner), toValue(paint));
+    this.ref.drawDRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, outer),
+      JsiSkRRect.fromValue(this.CanvasKit, inner),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawOval(oval: SkRect, paint: SkPaint) {
-    this.ref.drawOval(toValue(oval), toValue(paint));
+    this.ref.drawOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPath(path: SkPath, paint: SkPaint) {
-    this.ref.drawPath(toValue(path), toValue(paint));
+    this.ref.drawPath(JsiSkPath.fromValue(path), JsiSkPaint.fromValue(paint));
   }
 
   drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont) {
-    this.ref.drawText(str, x, y, toValue(paint), toValue(font));
+    this.ref.drawText(
+      str,
+      x,
+      y,
+      JsiSkPaint.fromValue(paint),
+      JsiSkFont.fromValue(font)
+    );
   }
 
   drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint) {
-    this.ref.drawTextBlob(toValue(blob), x, y, toValue(paint));
+    this.ref.drawTextBlob(
+      JsiSkTextBlob.fromValue(blob),
+      x,
+      y,
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawGlyphs(
@@ -253,8 +288,8 @@ export class JsiSkCanvas
       positions.map((p) => [p.x, p.y]).flat(),
       x,
       y,
-      toValue(font),
-      toValue(paint)
+      JsiSkFont.fromValue(font),
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -273,9 +308,9 @@ export class JsiSkCanvas
     flags?: SaveLayerFlag
   ) {
     return this.ref.saveLayer(
-      toUndefinedableValue(paint),
-      toOptionalValue(bounds),
-      toOptionalValue(backdrop),
+      paint ? JsiSkPaint.fromValue(paint) : undefined,
+      bounds ? JsiSkRect.fromValue(this.CanvasKit, bounds) : bounds,
+      backdrop ? JsiSkImageFilter.fromValue(backdrop) : backdrop,
       flags
     );
   }
@@ -309,22 +344,30 @@ export class JsiSkCanvas
   }
 
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipPath(toValue(path), ckEnum(op), doAntiAlias);
+    this.ref.clipPath(JsiSkPath.fromValue(path), ckEnum(op), doAntiAlias);
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipRect(toValue(rect), ckEnum(op), doAntiAlias);
+    this.ref.clipRect(
+      JsiSkRect.fromValue(this.CanvasKit, rect),
+      ckEnum(op),
+      doAntiAlias
+    );
   }
 
   clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipRRect(toValue(rrect), ckEnum(op), doAntiAlias);
+    this.ref.clipRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, rrect),
+      ckEnum(op),
+      doAntiAlias
+    );
   }
 
   concat(m: SkMatrix) {
-    this.ref.concat(toValue(m));
+    this.ref.concat(JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {
-    this.ref.drawPicture(toValue(skp));
+    this.ref.drawPicture(JsiSkPicture.fromValue(skp));
   }
 }

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -8,7 +8,7 @@ import type {
   BlendMode,
 } from "../types";
 
-import { ckEnum, Host, toValue, NotImplementedOnRNWeb } from "./Host";
+import { ckEnum, Host } from "./Host";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkColorFilterFactory
@@ -29,21 +29,28 @@ export class JsiSkColorFilterFactory
   MakeBlend(color: SkColor, mode: BlendMode) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeBlend(toValue(color), ckEnum(mode))
+      this.CanvasKit.ColorFilter.MakeBlend(color, ckEnum(mode))
     );
   }
 
   MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeCompose(toValue(outer), toValue(inner))
+      this.CanvasKit.ColorFilter.MakeCompose(
+        JsiSkColorFilter.fromValue(outer),
+        JsiSkColorFilter.fromValue(inner)
+      )
     );
   }
 
   MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeLerp(t, toValue(dst), toValue(src))
+      this.CanvasKit.ColorFilter.MakeLerp(
+        t,
+        JsiSkColorFilter.fromValue(dst),
+        JsiSkColorFilter.fromValue(src)
+      )
     );
   }
 
@@ -62,6 +69,9 @@ export class JsiSkColorFilterFactory
   }
 
   MakeLumaColorFilter(): SkColorFilter {
-    throw new NotImplementedOnRNWeb();
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLuma()
+    );
   }
 }

package/src/skia/web/JsiSkFont.ts

@@ -9,7 +9,9 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, toValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
@@ -43,7 +45,12 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
 
   // TODO: Fix return value in the C++ implementation, it return float32
   getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
-    return [...this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null)];
+    return [
+      ...this.ref.getGlyphWidths(
+        glyphs,
+        paint ? JsiSkPaint.fromValue(paint) : null
+      ),
+    ];
   }
 
   getGlyphIntercepts(
@@ -55,7 +62,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     return [
       ...this.ref.getGlyphIntercepts(
         glyphs,
-        positions.map((p) => toValue(p)),
+        positions.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
         top,
         bottom
       ),
@@ -120,6 +127,6 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setTypeface(face: SkTypeface | null) {
-    this.ref.setTypeface(face ? toValue(face) : null);
+    this.ref.setTypeface(face ? JsiSkTypeface.fromValue(face) : null);
   }
 }

package/src/skia/web/JsiSkImage.ts

@@ -11,7 +11,8 @@ import type {
   TileMode,
 } from "../types";
 
-import { ckEnum, HostObject, toValue } from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
@@ -41,7 +42,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         ckEnum(fm),
         ckEnum(mm),
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }
@@ -60,7 +61,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         B,
         C,
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }

package/src/skia/web/JsiSkImageFactory.ts

@@ -3,8 +3,9 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { SkData, ImageInfo } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 
-import { Host, toValue, ckEnum } from "./Host";
+import { Host, ckEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkData } from "./JsiSkData";
 
 export class JsiSkImageFactory extends Host implements ImageFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -12,7 +13,9 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
   }
 
   MakeImageFromEncoded(encoded: SkData) {
-    const image = this.CanvasKit.MakeImageFromEncoded(toValue(encoded));
+    const image = this.CanvasKit.MakeImageFromEncoded(
+      JsiSkData.fromValue(encoded)
+    );
     if (image === null) {
       return null;
     }
@@ -29,7 +32,7 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
         height: info.height,
         width: info.width,
       },
-      toValue(data),
+      JsiSkData.fromValue(data),
       bytesPerRow
     );
     if (image === null) {