@shopify/react-native-skia 0.1.115 → 0.1.119

package/lib/typescript/src/renderer/processors/Paint.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, RefObject } from "react";
 import { BlendMode, PaintStyle, StrokeJoin, StrokeCap } from "../../skia";
 import type { SkPaint, Color } from "../../skia";
+import type { DeclarationResult } from "../nodes";
 export declare type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export interface ChildrenProps {
     children?: ReactNode | ReactNode[];
@@ -17,5 +18,4 @@ export interface CustomPaintProps extends ChildrenProps {
     opacity?: number;
 }
 export declare const enumKey: <K extends string>(k: K) => Capitalize<K>;
-export declare const processPaint: (paint: SkPaint, currentOpacity: number, { color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) => void;
-export declare const selectPaint: (currentPaint: SkPaint, { paint, color: cl, blendMode, style: paintStyle, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) => SkPaint;
+export declare const processPaint: (paint: SkPaint, currentOpacity: number, { paint: paintRef, color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps, children: DeclarationResult[]) => SkPaint;

package/lib/typescript/src/renderer/processors/math/Math.d.ts

@@ -1 +1,15 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export declare const mix: (value: number, x: number, y: number) => number;
+/**
+ *  @summary Clamps a node with a lower and upper bound.
+ *  @example
+    clamp(-1, 0, 100); // 0
+    clamp(1, 0, 100); // 1
+    clamp(101, 0, 100); // 100
+  */
+export declare const clamp: (value: number, lowerBound: number, upperBound: number) => number;

package/lib/typescript/src/renderer/processors/math/Matrix3.d.ts

@@ -9,5 +9,6 @@ declare type Transformations = {
     readonly [Name in Transform2dName]: number;
 };
 export declare type Transforms2d = readonly (Pick<Transformations, "translateX"> | Pick<Transformations, "translateY"> | Pick<Transformations, "scale"> | Pick<Transformations, "scaleX"> | Pick<Transformations, "scaleY"> | Pick<Transformations, "skewX"> | Pick<Transformations, "skewY"> | Pick<Transformations, "rotate">)[];
+export declare const matrixVecMul3: (m: Matrix3, v: Vec3) => readonly [number, number, number];
 export declare const processTransform2d: (transforms: Transforms2d) => SkMatrix;
 export {};

package/lib/typescript/src/renderer/typeddash.d.ts

@@ -1,2 +1,3 @@
 export declare const mapKeys: <T>(obj: T) => (keyof T)[];
 export declare const exhaustiveCheck: (a: never) => never;
+export declare const shallowEq: <P>(p1: P, p2: P) => boolean;

package/lib/typescript/src/renderer/useContextBridge.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ReactNode, Context } from "react";
+export declare const useContextBridge: (...contexts: Context<any>[]) => ({ children }: {
+    children: ReactNode;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/lib/typescript/src/skia/Canvas.d.ts

@@ -12,6 +12,7 @@ import type { SkMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
+import type { SkPicture } from "./Picture";
 export declare enum ClipOp {
     Difference = 0,
     Intersect = 1
@@ -372,4 +373,9 @@ export interface SkCanvas {
      * @param m
      */
     concat(m: SkMatrix): void;
+    /**
+     * Draws the given picture using the current clip, current matrix, and the provided paint.
+     * @param skp
+     */
+    drawPicture(skp: SkPicture): void;
 }

package/lib/typescript/src/skia/Picture/Picture.d.ts

@@ -0,0 +1,26 @@
+import type { InputColorMatrix } from "../ColorFilter";
+import type { FilterMode } from "../Image";
+import type { TileMode } from "../ImageFilter";
+import type { SkRect } from "../Rect";
+import type { IShader } from "../Shader";
+export interface SkPicture {
+    /**
+     *  Returns a new shader that will draw with this picture.
+     *
+     *  @param tmx  The tiling mode to use when sampling in the x-direction.
+     *  @param tmy  The tiling mode to use when sampling in the y-direction.
+     *  @param mode How to filter the tiles
+     *  @param localMatrix Optional matrix used when sampling
+     *  @param tileRect The tile rectangle in picture coordinates: this represents the subset
+     *              (or superset) of the picture used when building a tile. It is not
+     *              affected by localMatrix and does not imply scaling (only translation
+     *              and cropping). If null, the tile rect is considered equal to the picture
+     *              bounds.
+     */
+    makeShader(tmx: TileMode, tmy: TileMode, mode: FilterMode, localMatrix?: InputColorMatrix, tileRect?: SkRect): IShader;
+    /**
+     * Returns the serialized format of this SkPicture. The format may change at anytime and
+     * no promises are made for backwards or forward compatibility.
+     */
+    serialize(): Uint8Array | null;
+}

package/lib/typescript/src/skia/Picture/PictureFactory.d.ts

@@ -0,0 +1,8 @@
+import type { SkPicture } from "./Picture";
+export interface PictureFactory {
+    /**
+     * Returns an SkPicture which has been serialized previously to the given bytes.
+     * @param bytes
+     */
+    MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+}

package/lib/typescript/src/skia/Picture/PictureRecorder.d.ts

@@ -0,0 +1,15 @@
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import type { SkPicture } from "./Picture";
+export interface SkPictureRecorder {
+    /**
+     * Returns a canvas on which to draw. When done drawing, call finishRecordingAsPicture()
+     *
+     * @param bounds - a rect to cull the results.
+     */
+    beginRecording(bounds: SkRect): SkCanvas;
+    /**
+     * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.
+     */
+    finishRecordingAsPicture(): SkPicture;
+}

package/lib/typescript/src/skia/Picture/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Picture";
+export * from "./PictureRecorder";
+export * from "./usePicture";
+export * from "./PictureFactory";

package/lib/typescript/src/skia/Picture/usePicture.d.ts

@@ -0,0 +1,11 @@
+import type { DependencyList } from "react";
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import type { SkPicture } from "./Picture";
+/**
+ * Memoizes and returns an SkPicture that can be drawn to another canvas.
+ * @param rect Picture bounds
+ * @param cb Callback for drawing to the canvas
+ * @returns SkPicture
+ */
+export declare const usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => SkPicture;

package/lib/typescript/src/skia/Skia.d.ts

@@ -25,6 +25,7 @@ import "./NativeSetup";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
+import type { PictureFactory, SkPictureRecorder } from "./Picture";
 /**
  * Declares the interface for the native Skia API
  */
@@ -35,6 +36,8 @@ export interface Skia {
     RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;
     Paint: () => SkPaint;
+    PictureRecorder: () => SkPictureRecorder;
+    Picture: PictureFactory;
     Path: PathFactory;
     Matrix: () => SkMatrix;
     ColorFilter: ColorFilterFactory;
@@ -89,6 +92,8 @@ export declare const Skia: {
     XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
     RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
     Paint: () => SkPaint;
+    PictureRecorder: () => SkPictureRecorder;
+    Picture: PictureFactory;
     Path: PathFactory;
     ColorFilter: ColorFilterFactory;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;

package/lib/typescript/src/skia/index.d.ts

@@ -20,3 +20,5 @@ export * from "./Surface";
 export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./Color";
+export * from "./Picture";
+export * from "./Data";

package/lib/typescript/src/views/SkiaView.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import type { ViewProps } from "react-native";
 import type { SkImage, SkRect } from "../skia";
 import type { SkiaReadonlyValue } from "../values";
-import type { DrawMode, RNSkiaDrawCallback, RNSkiaViewProps } from "./types";
+import type { DrawMode, RNSkiaDrawCallback } from "./types";
 declare global {
     var SkiaViewApi: {
         invalidateSkiaView: (nativeId: number) => void;
@@ -11,12 +12,34 @@ declare global {
         registerValuesInView: (nativeId: number, values: SkiaReadonlyValue<unknown>[]) => () => void;
     };
 }
-export declare class SkiaView extends React.Component<RNSkiaViewProps> {
-    constructor(props: RNSkiaViewProps);
+export interface SkiaViewProps extends ViewProps {
+    /**
+     * Sets the drawing mode for the skia view. There are two drawing
+     * modes, "continuous" and "default", where the continuous mode will
+     * continuously redraw the view, and the default mode will only
+     * redraw when any of the regular react properties are changed like
+     * sizes and margins.
+     */
+    mode?: DrawMode;
+    /**
+     * When set to true the view will display information about the
+     * average time it takes to render.
+     */
+    debug?: boolean;
+    /**
+     * Draw callback. Will be called whenever the view is invalidated and
+     * needs to redraw. This is either caused by a change in a react
+     * property, a touch event, or a call to redraw. If the view is in
+     * continuous mode the callback will be called 60 frames per second
+     * by the native view.
+     */
+    onDraw?: RNSkiaDrawCallback;
+}
+export declare class SkiaView extends React.Component<SkiaViewProps> {
+    constructor(props: SkiaViewProps);
     private _nativeId;
-    private _animatingValues;
     get nativeId(): number;
-    componentDidUpdate(prevProps: RNSkiaViewProps): void;
+    componentDidUpdate(prevProps: SkiaViewProps): void;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.
@@ -43,13 +66,5 @@ export declare class SkiaView extends React.Component<RNSkiaViewProps> {
      * @param values Values to register
      */
     registerValues(values: SkiaReadonlyValue<unknown>[]): () => void;
-    /**
-     * Increases the number of animations active in the view.
-     */
-    addAnimation(owner: unknown): void;
-    /**
-     * Decreases the number of animations active in the view.
-     */
-    removeAnimation(owner: unknown): void;
     render(): JSX.Element;
 }

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

@@ -35,29 +35,6 @@ export declare type TouchHandlers = {
 };
 export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
-export declare type RNSkiaViewProps = ViewProps & {
-    /**
-     * Sets the drawing mode for the skia view. There are two drawing
-     * modes, "continuous" and "default", where the continuous mode will
-     * continuously redraw the view, and the default mode will only
-     * redraw when any of the regular react properties are changed like
-     * sizes and margins.
-     */
-    mode?: DrawMode;
-    /**
-     * When set to true the view will display information about the
-     * average time it takes to render.
-     */
-    debug?: boolean;
-    /**
-     * Draw callback. Will be called whenever the view is invalidated and
-     * needs to redraw. This is either caused by a change in a react
-     * property, a touch event, or a call to redraw. If the view is in
-     * continuous mode the callback will be called 60 frames per second
-     * by the native view.
-     */
-    onDraw?: RNSkiaDrawCallback;
-};
 /**
  * Listener interface for value changes
  */

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -4,12 +4,9 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.115",
-  "description": "Skia View for React Native",
+  "version": "0.1.119",
+  "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
-  "types": "lib/typescript/index.d.ts",
-  "react-native": "lib/module/index.js",
-  "module": "lib/module/index.js",
   "files": [
     "src",
     "lib",
@@ -38,7 +35,7 @@
     "tsc": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
     "test": "jest",
-    "postinstall": "yarn node scripts/install-npm.js",
+    "postinstall": "node scripts/install-npm.js",
     "build": "bob build"
   },
   "repository": {
@@ -96,5 +93,8 @@
       "module",
       "typescript"
     ]
-  }
+  },
+  "types": "lib/typescript/index.d.ts",
+  "module": "lib/module/index.js",
+  "react-native": "lib/module/index.js"
 }

package/src/renderer/Canvas.tsx

@@ -11,8 +11,6 @@ import type {
   RefObject,
   ReactNode,
   ComponentProps,
-  Context,
-  ReactElement,
   MutableRefObject,
   ForwardedRef,
 } from "react";
@@ -23,6 +21,8 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { Skia } from "../skia";
 import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import { useValue } from "../values/hooks/useValue";
+import type { SkiaReadonlyValue } from "../values/types";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -30,33 +30,12 @@ import { vec } from "./processors";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
 
-// useContextBridge() is taken from https://github.com/pmndrs/drei#usecontextbridge
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const useContextBridge = (...contexts: Context<any>[]) => {
-  const values =
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    contexts.map((context) => useContext(context));
-  return useMemo(
-    () =>
-      ({ children }: { children: ReactNode }) =>
-        contexts.reduceRight(
-          (acc, Context, i) => (
-            <Context.Provider value={values[i]} children={acc} />
-          ),
-          children
-        ) as ReactElement,
-    [contexts, values]
-  );
-};
-
-interface CanvasContext {
+const CanvasContext = React.createContext<SkiaReadonlyValue<{
   width: number;
   height: number;
-}
+}> | null>(null);
 
-const CanvasContext = React.createContext<CanvasContext | null>(null);
-
-export const useCanvas = () => {
+export const useCanvasSize = () => {
   const canvas = useContext(CanvasContext);
   if (!canvas) {
     throw new Error("Canvas context is not available");
@@ -93,6 +72,7 @@ const defaultFontMgr = Skia.FontMgr.RefDefault();
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
   ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+    const canvasCtx = useValue({ width: 0, height: 0 });
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
@@ -103,7 +83,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       [redraw, ref]
     );
 
-    const canvasCtx = useRef({ width: 0, height: 0 });
     const root = useMemo(
       () => skiaReconciler.createContainer(container, 0, false, null),
       [container]
@@ -111,13 +90,13 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     // Render effect
     useEffect(() => {
       render(
-        <CanvasContext.Provider value={canvasCtx.current}>
+        <CanvasContext.Provider value={canvasCtx}>
           {children}
         </CanvasContext.Provider>,
         root,
         container
       );
-    }, [children, root, redraw, container]);
+    }, [children, root, redraw, container, canvasCtx]);
 
     // Draw callback
     const onDraw = useDrawCallback(
@@ -127,6 +106,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         if (onTouch) {
           onTouch(info.touches);
         }
+        if (
+          width !== canvasCtx.current.width ||
+          height !== canvasCtx.current.height
+        ) {
+          canvasCtx.current = { width, height };
+        }
         const paint = Skia.Paint();
         paint.setAntiAlias(true);
         const ctx = {
@@ -140,7 +125,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           center: vec(width / 2, height / 2),
           fontMgr: fontMgr ?? defaultFontMgr,
         };
-        canvasCtx.current = ctx;
         container.draw(ctx);
       },
       [tick, onTouch]

package/src/renderer/HostConfig.ts

@@ -3,7 +3,7 @@ import type { HostConfig } from "react-reconciler";
 
 import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
 import { DeclarationNode, DrawingNode, NodeType } from "./nodes";
-import { exhaustiveCheck, mapKeys } from "./typeddash";
+import { exhaustiveCheck, shallowEq } from "./typeddash";
 
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
@@ -53,24 +53,6 @@ type SkiaHostConfig = HostConfig<
   NoTimeout
 >;
 
-// Shallow eq on props (without children)
-const shallowEq = <P extends Props>(p1: P, p2: P): boolean => {
-  const keys1 = mapKeys(p1);
-  const keys2 = mapKeys(p2);
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    if (key === "children") {
-      continue;
-    }
-    if (p1[key] !== p2[key]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 const allChildrenAreMemoized = (node: Instance) => {
   if (!node.memoizable) {
     return false;
@@ -87,7 +69,7 @@ const bustBranchMemoization = (parent: Node) => {
   if (parent.memoizable) {
     let ancestor: Node | undefined = parent;
     while (ancestor) {
-      ancestor.memoized = false;
+      ancestor.memoized = null;
       ancestor = ancestor.parent;
     }
   }

package/src/renderer/components/Drawing.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import { createDrawing } from "../nodes/Drawing";
+
+interface DrawingProps {
+  drawing: (ctx: DrawingContext) => void;
+}
+
+const onDraw = createDrawing<DrawingProps>((ctx, { drawing }) => {
+  drawing(ctx);
+});
+
+export const Drawing = (props: DrawingProps) => {
+  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;
+};

package/src/renderer/components/Group.tsx

@@ -3,19 +3,15 @@ import type { RefObject } from "react";
 
 import type { SkPaint } from "../../skia";
 import { ClipOp } from "../../skia";
-import {
-  processTransform,
-  selectPaint,
-  processPaint,
-  processClip,
-} from "../processors";
+import { processTransform, processPaint, processClip } from "../processors";
 import type {
   CustomPaintProps,
   TransformProps,
   AnimatedProps,
   ClipDef,
 } from "../processors";
-import { createDrawing } from "../nodes";
+import { createDrawing, DrawingNode } from "../nodes";
+import { isDeclarationNode } from "../nodes/Declaration";
 
 const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
   "__typename__" in obj && obj.__typename__ === "Paint";
@@ -29,30 +25,51 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
 const onDraw = createDrawing<GroupProps>(
   (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
     const { canvas, opacity } = ctx;
-    const paint = selectPaint(ctx.paint, groupProps);
-    processPaint(paint, opacity, groupProps);
-    if (layer) {
-      if (typeof layer === "boolean") {
-        canvas.saveLayer();
-      } else if (isSkPaint(layer)) {
-        canvas.saveLayer(layer);
+    const declarations = node.children
+      .filter(isDeclarationNode)
+      .map((child) => child.draw(ctx));
+
+    const drawings = node.children.filter(
+      (child) => child instanceof DrawingNode
+    );
+    const paint = processPaint(
+      ctx.paint.copy(),
+      opacity,
+      groupProps,
+      declarations
+    );
+    const hasTransform = !!groupProps.transform || !!groupProps.matrix;
+    const hasClip = !!clip;
+    const shouldSave = hasTransform || hasClip || !!layer;
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          canvas.saveLayer();
+        } else if (isSkPaint(layer)) {
+          canvas.saveLayer(layer);
+        } else {
+          canvas.saveLayer(layer.current ?? undefined);
+        }
       } else {
-        canvas.saveLayer(layer.current ?? undefined);
+        canvas.save();
+      }
+      processTransform(ctx, groupProps);
+      if (clip) {
+        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+        processClip(canvas, clip, op);
       }
-    } else {
-      canvas.save();
     }
-    processTransform(ctx, groupProps);
-    if (clip) {
-      const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-      processClip(canvas, clip, op);
+    node.visit(
+      {
+        ...ctx,
+        paint,
+        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
+      },
+      drawings
+    );
+    if (shouldSave) {
+      canvas.restore();
     }
-    node.visit({
-      ...ctx,
-      paint,
-      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
-    });
-    canvas.restore();
   }
 );