@shopify/react-native-skia 0.1.237 → 0.1.239

package/lib/module/web/WithSkiaWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\n\nimport { Platform } from \"../Platform\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    // TODO: investigate\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (): any =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AAEA,SAASC,QAAT,QAAyB,aAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;EAAA,IAJO;IAC1BC,YAD0B;IAE1BC,QAF0B;IAG1BC;EAH0B,CAIP;EACnB,MAAMC,KAAK,GAAGT,OAAO,EACnB;EACA;EACA,mBACEC,IAAI,CAAC,YAAY;IACf,IAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;MACzB,MAAMN,WAAW,CAACI,IAAD,CAAjB;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,IAAR,CACE,yEADF;IAGD;;IACD,OAAON,YAAY,EAAnB;EACD,CATG,CAJa,EAcnB,CAACA,YAAD,EAAeE,IAAf,CAdmB,CAArB;EAgBA,oBACE,oBAAC,QAAD;IAAU,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;EAAhC,gBACE,oBAAC,KAAD,OADF,CADF;AAKD,CA1BM"}
+{"version":3,"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn","createElement"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\n\nimport { Platform } from \"../Platform\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    // TODO: investigate\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (): any =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,OAAO;AAEtD,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,WAAW,QAAQ,eAAe;AAQ3C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,YAAY;EACZC,QAAQ;EACRC;AACa,CAAC,KAAK;EACnB,MAAMC,KAAK,GAAGT,OAAO;EACnB;EACA;EACA,mBACEC,IAAI,CAAC,YAAY;IACf,IAAIE,QAAQ,CAACO,EAAE,KAAK,KAAK,EAAE;MACzB,MAAMN,WAAW,CAACI,IAAI,CAAC;IACzB,CAAC,MAAM;MACLG,OAAO,CAACC,IAAI,CACV,yEACF,CAAC;IACH;IACA,OAAON,YAAY,CAAC,CAAC;EACvB,CAAC,CAAC,EACJ,CAACA,YAAY,EAAEE,IAAI,CACrB,CAAC;EACD,oBACET,KAAA,CAAAc,aAAA,CAACX,QAAQ;IAACK,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI;EAAK,gBACnCR,KAAA,CAAAc,aAAA,CAACJ,KAAK,MAAE,CACA,CAAC;AAEf,CAAC"}

package/lib/module/web/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,eAAd"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,eAAe"}

package/lib/typescript/src/external/reanimated/buffers.d.ts

@@ -1,5 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
-export declare const useRectBuffer: (size: number, modifier: (input: SkHostRect, index: number) => void) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: (input: SkRSXform, index: number) => void) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: (input: SkPoint, index: number) => void) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: (input: SkColor, index: number) => void) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+type Modifier<T> = (input: T, index: number) => void;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export {};

package/lib/typescript/src/external/reanimated/interpolators.d.ts

@@ -1,7 +1,7 @@
 import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
 import type { SkPath, SkPoint } from "../../skia/types";
 export declare const notifyChange: (value: SharedValue<unknown>) => void;
-export declare const usePathValue: (cb: (path: SkPath) => void) => SharedValue<SkPath>;
+export declare const usePathValue: (cb: (path: SkPath) => void, init?: SkPath) => SharedValue<SkPath>;
 export declare const useClock: () => SharedValue<number>;
 export declare const usePathInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SharedValue<SkPath>;
 export declare const useVectorInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPoint[], options?: ExtrapolationType) => SharedValue<{

package/lib/typescript/src/external/reanimated/textures.d.ts

@@ -1,5 +1,8 @@
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
-export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
-export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;
+import type { DataSourceParam, SkImage, SkPicture, SkSize } from "../../skia/types";
+export declare const useTexture: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureAsValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureValueFromPicture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const usePictureAsTexture: (picture: SkPicture | null, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useImageAsTexture: (source: DataSourceParam) => SharedValue<SkImage | null>;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.237",
+  "version": "0.1.239",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -83,32 +83,32 @@
     }
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@types/jest": "29.5.6",
-    "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.37",
-    "@types/react-reconciler": "^0.26.7",
-    "@types/ws": "^8.5.3",
+    "@types/pixelmatch": "5.2.4",
+    "@types/pngjs": "6.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-reconciler": "0.26.7",
+    "@types/ws": "8.5.3",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
-    "jest-diff": "^29.7.0",
-    "merge-dirs": "^0.2.1",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^6.0.0",
+    "jest-diff": "29.7.0",
+    "merge-dirs": "0.2.1",
+    "pixelmatch": "5.3.0",
+    "pngjs": "6.0.0",
     "react": "18.1.0",
     "react-native": "0.72.6",
-    "react-native-builder-bob": "^0.18.2",
-    "react-native-reanimated": "^3.5.4",
+    "react-native-builder-bob": "0.18.2",
+    "react-native-reanimated": "3.6.2",
     "ts-jest": "29.1.1",
     "typescript": "5.1.6",
-    "ws": "^8.11.0"
+    "ws": "8.11.0"
   },
   "dependencies": {
     "canvaskit-wasm": "0.39.1",
-    "react-reconciler": "^0.27.0"
+    "react-reconciler": "0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",

package/react-native-skia.podspec

@@ -17,7 +17,7 @@ Pod::Spec.new do |s|
   # optional - use expanded license entry instead:
   # s.license    = { :type => "MIT", :file => "LICENSE" }
   s.authors      = { "Your Name" => "yourname@email.com" }
-  s.platforms    = { :ios => "12.0" }
+  s.platforms    = { :ios => "13.0" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true

package/src/dom/nodes/Node.ts

@@ -38,6 +38,7 @@ export abstract class JsiNode<P> implements Node<P> {
   }
 
   addChild(child: Node<unknown>) {
+    this.removeChild(child);
     this._children.push(child as JsiNode<unknown>);
   }
 

package/src/external/reanimated/buffers.ts

@@ -1,53 +1,56 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { startMapper, stopMapper } from "react-native-reanimated";
+import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
 
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";
 
-import { useDerivedValue, useSharedValue } from "./moduleWrapper";
+import { useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 
+type Modifier<T> = (input: T, index: number) => void;
+
 const useBuffer = <T>(
   size: number,
   bufferInitializer: () => T,
-  modifier: (input: T, index: number) => void
+  modifier: Modifier<T>
 ) => {
   const buffer = useMemo(
     () => new Array(size).fill(0).map(bufferInitializer),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [size]
   );
-  const transforms = useSharedValue(buffer);
-
-  useDerivedValue(() => {
+  const values = useSharedValue(buffer);
+  const mod = modifier as WorkletFunction;
+  const deps = Object.values(mod.__closure ?? {});
+  const mapperId = startMapper(() => {
+    "worklet";
     buffer.forEach((val, index) => {
       modifier(val, index);
     });
-    // Assuming notifyChange is a function that notifies about the change in transforms.
-    notifyChange(transforms);
-  });
+    notifyChange(values);
+  }, deps);
 
-  return transforms;
+  useEffect(() => {
+    return () => {
+      stopMapper(mapperId);
+    };
+  }, [mapperId]);
+
+  return values;
 };
 
-export const useRectBuffer = (
-  size: number,
-  modifier: (input: SkHostRect, index: number) => void
-) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
+export const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>
+  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
 
 // Usage for RSXform Buffer
-export const useRSXformBuffer = (
-  size: number,
-  modifier: (input: SkRSXform, index: number) => void
-) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
+export const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>
+  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
 
 // Usage for Point Buffer
-export const usePointBuffer = (
-  size: number,
-  modifier: (input: SkPoint, index: number) => void
-) => useBuffer(size, () => Skia.Point(0, 0), modifier);
+export const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>
+  useBuffer(size, () => Skia.Point(0, 0), modifier);
 
 // Usage for Color Buffer
-export const useColorBuffer = (
-  size: number,
-  modifier: (input: SkColor, index: number) => void
-) => useBuffer(size, () => Skia.Color("black"), modifier);
+export const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>
+  useBuffer(size, () => Skia.Color("black"), modifier);

package/src/external/reanimated/interpolators.ts

@@ -25,11 +25,14 @@ export const notifyChange = (value: SharedValue<unknown>) => {
   }
 };
 
-export const usePathValue = (cb: (path: SkPath) => void) => {
+export const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {
   const pathInit = useMemo(() => Skia.Path.Make(), []);
   const path = useSharedValue(pathInit);
   useDerivedValue(() => {
     path.value.reset();
+    if (init !== undefined) {
+      path.value.addPath(init);
+    }
     cb(path.value);
     notifyChange(path);
   });

package/src/external/reanimated/textures.tsx

@@ -2,15 +2,21 @@ import { useEffect, useMemo } from "react";
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 
-import type { SkImage, SkPicture, SkSize } from "../../skia/types";
+import type {
+  DataSourceParam,
+  SkImage,
+  SkPicture,
+  SkSize,
+} from "../../skia/types";
 import {
   drawAsImageFromPicture,
   drawAsPicture,
 } from "../../renderer/Offscreen";
+import { Skia, useImage } from "../../skia";
 
 import { runOnUI, useSharedValue } from "./moduleWrapper";
 
-const createTextureValue = (
+const createTexture = (
   texture: SharedValue<SkImage | null>,
   picture: SkPicture,
   size: SkSize
@@ -19,20 +25,63 @@ const createTextureValue = (
   texture.value = drawAsImageFromPicture(picture, size);
 };
 
-export const useTextureValue = (element: ReactElement, size: SkSize) => {
+export const useTexture = (element: ReactElement, size: SkSize) => {
   const picture = useMemo(() => {
     return drawAsPicture(element);
   }, [element]);
-  return useTextureValueFromPicture(picture, size);
+  return usePictureAsTexture(picture, size);
+};
+
+export const useTextureAsValue = (element: ReactElement, size: SkSize) => {
+  console.warn("useTextureAsValue has been renamed to use useTexture");
+  return useTexture(element, size);
 };
 
 export const useTextureValueFromPicture = (
-  picture: SkPicture,
+  picture: SkPicture | null,
+  size: SkSize
+) => {
+  console.warn(
+    "useTextureValueFromPicture has been renamed to use usePictureAsTexture"
+  );
+  return usePictureAsTexture(picture, size);
+};
+
+export const usePictureAsTexture = (
+  picture: SkPicture | null,
   size: SkSize
 ) => {
   const texture = useSharedValue<SkImage | null>(null);
   useEffect(() => {
-    runOnUI(createTextureValue)(texture, picture, size);
+    if (picture !== null) {
+      runOnUI(createTexture)(texture, picture, size);
+    }
   }, [texture, picture, size]);
   return texture;
 };
+
+export const useImageAsTexture = (source: DataSourceParam) => {
+  const image = useImage(source);
+  const size = useMemo(() => {
+    if (image) {
+      return { width: image.width(), height: image.height() };
+    }
+    return { width: 0, height: 0 };
+  }, [image]);
+  const picture = useMemo(() => {
+    if (image) {
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording({
+        x: 0,
+        y: 0,
+        width: size.width,
+        height: size.height,
+      });
+      canvas.drawImage(image, 0, 0);
+      return recorder.finishRecordingAsPicture();
+    } else {
+      return null;
+    }
+  }, [size, image]);
+  return usePictureAsTexture(picture, size);
+};

package/lib/commonjs/animation/types.d.ts

@@ -1,18 +0,0 @@
-export interface SpringConfig {
-    mass?: number;
-    stiffness?: number;
-    damping?: number;
-    velocity?: number;
-}
-export interface TimingConfig {
-    duration?: number;
-    easing?: (t: number) => number;
-}
-export interface AnimationParams {
-    from?: number;
-    to?: number;
-    loop?: boolean;
-    yoyo?: boolean;
-}
-export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> & Pick<AnimationParams, "from">;
-export type AnimationCallback = (current: number) => void;

package/lib/commonjs/animation/types.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=types.js.map

package/lib/commonjs/animation/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SpringConfig {\n  mass?: number;\n  stiffness?: number;\n  damping?: number;\n  velocity?: number;\n}\n\nexport interface TimingConfig {\n  duration?: number;\n  easing?: (t: number) => number;\n}\n\nexport interface AnimationParams {\n  from?: number;\n  to?: number;\n  loop?: boolean;\n  yoyo?: boolean;\n}\n\nexport type RequiredAnimationParams = Required<Omit<AnimationParams, \"from\">> &\n  Pick<AnimationParams, \"from\">;\n\nexport type AnimationCallback = (current: number) => void;\n"],"mappings":""}

package/lib/module/animation/types.d.ts

@@ -1,18 +0,0 @@
-export interface SpringConfig {
-    mass?: number;
-    stiffness?: number;
-    damping?: number;
-    velocity?: number;
-}
-export interface TimingConfig {
-    duration?: number;
-    easing?: (t: number) => number;
-}
-export interface AnimationParams {
-    from?: number;
-    to?: number;
-    loop?: boolean;
-    yoyo?: boolean;
-}
-export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> & Pick<AnimationParams, "from">;
-export type AnimationCallback = (current: number) => void;

package/lib/module/animation/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/lib/module/animation/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SpringConfig {\n  mass?: number;\n  stiffness?: number;\n  damping?: number;\n  velocity?: number;\n}\n\nexport interface TimingConfig {\n  duration?: number;\n  easing?: (t: number) => number;\n}\n\nexport interface AnimationParams {\n  from?: number;\n  to?: number;\n  loop?: boolean;\n  yoyo?: boolean;\n}\n\nexport type RequiredAnimationParams = Required<Omit<AnimationParams, \"from\">> &\n  Pick<AnimationParams, \"from\">;\n\nexport type AnimationCallback = (current: number) => void;\n"],"mappings":""}

package/lib/typescript/src/animation/types.d.ts

@@ -1,18 +0,0 @@
-export interface SpringConfig {
-    mass?: number;
-    stiffness?: number;
-    damping?: number;
-    velocity?: number;
-}
-export interface TimingConfig {
-    duration?: number;
-    easing?: (t: number) => number;
-}
-export interface AnimationParams {
-    from?: number;
-    to?: number;
-    loop?: boolean;
-    yoyo?: boolean;
-}
-export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> & Pick<AnimationParams, "from">;
-export type AnimationCallback = (current: number) => void;

package/src/animation/types.ts

@@ -1,23 +0,0 @@
-export interface SpringConfig {
-  mass?: number;
-  stiffness?: number;
-  damping?: number;
-  velocity?: number;
-}
-
-export interface TimingConfig {
-  duration?: number;
-  easing?: (t: number) => number;
-}
-
-export interface AnimationParams {
-  from?: number;
-  to?: number;
-  loop?: boolean;
-  yoyo?: boolean;
-}
-
-export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> &
-  Pick<AnimationParams, "from">;
-
-export type AnimationCallback = (current: number) => void;