@shopify/react-native-skia 2.11.0-next.2 → 2.12.0-next.1

package/lib/typescript/lib/module/renderer/processors/Animations/Animations.d.ts

@@ -0,0 +1,4 @@
+export function select(value: any, key: any): {
+    __sv: any;
+    __key: any;
+};

package/lib/typescript/lib/module/renderer/processors/Animations/index.d.ts

@@ -1 +1 @@
-export {};
+export * from "./Animations";

package/lib/typescript/lib/module/sksg/utils.d.ts

@@ -1,3 +1,4 @@
 export function isSharedValue(value: any): boolean;
+export function isSharedValueSelector(value: any): boolean;
 export function materialize(props: any): any;
 export function composeDeclarations(filters: any, composer: any): any;

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

@@ -1,6 +1,32 @@
+import type { SharedValue } from "react-native-reanimated";
+/**
+ * Binds a prop to a single key of a "grouped" shared value: one shared value
+ * whose `.value` is an object can drive many props (one key each) instead of
+ * requiring a separate shared value per prop.
+ *
+ * Created via {@link select}. `T` is the type of the selected value; `__type`
+ * is a phantom marker carrying that type and is never present at runtime.
+ */
+export type SharedValueSelector<T> = {
+    __sv: {
+        value: Record<string, unknown>;
+    };
+    __key: string;
+    readonly __type?: T;
+};
 export type AnimatedProp<T> = T | {
     value: T;
-};
+} | SharedValueSelector<T>;
+/**
+ * Selects a single key of a shared value so it can drive an animated prop.
+ * This lets one shared value (whose value is an object) drive multiple props
+ * — one per key — instead of using a separate shared value for each.
+ *
+ * @example
+ * const data = useSharedValue({ x: 0, y: 0, r: 10 });
+ * <Circle cx={select(data, "x")} cy={select(data, "y")} r={select(data, "r")} />
+ */
+export declare const select: <T extends object, K extends keyof T & string>(value: SharedValue<T>, key: K) => SharedValueSelector<T[K]>;
 export type AnimatedProps<T, O extends keyof T | never = never> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };

package/lib/typescript/src/sksg/Recorder/Recorder.d.ts

@@ -42,7 +42,7 @@ export declare class Recorder implements BaseRecorder {
     saveBackdropFilter(): void;
     drawBox(boxProps: AnimatedProps<BoxProps>, shadows: {
         props: BoxShadowProps;
-        animatedProps?: Record<string, SharedValue<unknown>>;
+        animatedProps?: Record<string, unknown>;
     }[]): void;
     drawImage(props: AnimatedProps<ImageProps>): void;
     drawCircle(props: AnimatedProps<CircleProps>): void;

package/lib/typescript/src/sksg/utils.d.ts

@@ -1,5 +1,9 @@
 import type { SharedValue } from "react-native-reanimated";
 export declare const isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;
+export declare const isSharedValueSelector: (value: unknown) => value is {
+    __sv: SharedValue<unknown>;
+    __key: string;
+};
 export declare const materialize: <T extends object>(props: T) => T;
 type Composer<T> = (outer: T, inner: T) => T;
 export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;

package/libs/.graphite

@@ -1 +1 @@
-m150
+m152

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.11.0-next.2",
+  "version": "2.12.0-next.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -139,15 +139,15 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.41.0",
-    "react-native-skia-graphite-android": "150.0.0",
-    "react-native-skia-graphite-apple-ios": "150.0.0",
-    "react-native-skia-graphite-apple-macos": "150.0.0",
+    "react-native-skia-graphite-android": "152.0.0",
+    "react-native-skia-graphite-apple-ios": "152.0.0",
+    "react-native-skia-graphite-apple-macos": "152.0.0",
     "react-reconciler": "0.31.0"
   },
   "graphiteDependencies": {
-    "react-native-skia-graphite-android": "150.0.0",
-    "react-native-skia-graphite-apple-ios": "150.0.0",
-    "react-native-skia-graphite-apple-macos": "150.0.0"
+    "react-native-skia-graphite-android": "152.0.0",
+    "react-native-skia-graphite-apple-ios": "152.0.0",
+    "react-native-skia-graphite-apple-macos": "152.0.0"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/renderer/processors/Animations/Animations.ts

@@ -1,4 +1,37 @@
-export type AnimatedProp<T> = T | { value: T };
+import type { SharedValue } from "react-native-reanimated";
+
+/**
+ * Binds a prop to a single key of a "grouped" shared value: one shared value
+ * whose `.value` is an object can drive many props (one key each) instead of
+ * requiring a separate shared value per prop.
+ *
+ * Created via {@link select}. `T` is the type of the selected value; `__type`
+ * is a phantom marker carrying that type and is never present at runtime.
+ */
+export type SharedValueSelector<T> = {
+  __sv: { value: Record<string, unknown> };
+  __key: string;
+  readonly __type?: T;
+};
+
+export type AnimatedProp<T> = T | { value: T } | SharedValueSelector<T>;
+
+/**
+ * Selects a single key of a shared value so it can drive an animated prop.
+ * This lets one shared value (whose value is an object) drive multiple props
+ * — one per key — instead of using a separate shared value for each.
+ *
+ * @example
+ * const data = useSharedValue({ x: 0, y: 0, r: 10 });
+ * <Circle cx={select(data, "x")} cy={select(data, "y")} r={select(data, "r")} />
+ */
+export const select = <T extends object, K extends keyof T & string>(
+  value: SharedValue<T>,
+  key: K
+): SharedValueSelector<T[K]> => ({
+  __sv: value as unknown as { value: Record<string, unknown> },
+  __key: key,
+});
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"

package/src/sksg/Recorder/Core.ts

@@ -23,6 +23,7 @@ import type {
   DrawingNodeProps,
   SkottieProps,
 } from "../../dom/types";
+import { isSharedValueSelector } from "../utils";
 
 export enum CommandType {
   // Context
@@ -79,7 +80,16 @@ export const materializeCommand = (command: any) => {
   const newProps = { ...command.props };
   if (command.animatedProps) {
     for (const key in command.animatedProps) {
-      newProps[key] = command.animatedProps[key].value;
+      const entry = command.animatedProps[key];
+      if (isSharedValueSelector(entry)) {
+        const group = entry.__sv.value;
+        newProps[key] =
+          group && typeof group === "object"
+            ? (group as Record<string, unknown>)[entry.__key]
+            : undefined;
+      } else {
+        newProps[key] = entry.value;
+      }
     }
   }
   return { ...command, props: newProps };

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -31,7 +31,7 @@ import type {
   DrawingNodeProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
-import { isSharedValue } from "../utils";
+import { isSharedValue, isSharedValueSelector } from "../utils";
 
 /**
  * Currently the recorder only work if the GPU resources (e.g Images) are owned by the main thread.
@@ -55,6 +55,15 @@ export class ReanimatedRecorder implements BaseRecorder {
       return;
     }
     Object.values(props).forEach((value) => {
+      if (isSharedValueSelector(value) && !this.values.has(value.__sv)) {
+        const sv = value.__sv;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        sv.name = `variable${this.values.size}`;
+        this.values.add(sv as SharedValue<unknown>);
+        return;
+      }
+
       if (isSharedValue(value) && !this.values.has(value)) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error

package/src/sksg/Recorder/Recorder.ts

@@ -30,7 +30,7 @@ import type {
   DrawingNodeProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
-import { isSharedValue } from "../utils";
+import { isSharedValue, isSharedValueSelector } from "../utils";
 import { isColorFilter, isImageFilter, isPathEffect, isShader } from "../Node";
 import type { SkPaint, SkPicture, BaseRecorder } from "../../skia/types";
 
@@ -78,7 +78,7 @@ export class Recorder implements BaseRecorder {
   }
 
   private processProps(props: Record<string, unknown>) {
-    const animatedProps: Record<string, SharedValue<unknown>> = {};
+    const animatedProps: Record<string, unknown> = {};
     let hasAnimatedProps = false;
 
     for (const key in props) {
@@ -87,6 +87,10 @@ export class Recorder implements BaseRecorder {
         this.animationValues.add(prop);
         animatedProps[key] = prop;
         hasAnimatedProps = true;
+      } else if (isSharedValueSelector(prop)) {
+        this.animationValues.add(prop.__sv);
+        animatedProps[key] = prop;
+        hasAnimatedProps = true;
       }
     }
 
@@ -222,7 +226,7 @@ export class Recorder implements BaseRecorder {
     boxProps: AnimatedProps<BoxProps>,
     shadows: {
       props: BoxShadowProps;
-      animatedProps?: Record<string, SharedValue<unknown>>;
+      animatedProps?: Record<string, unknown>;
     }[]
   ) {
     shadows.forEach((shadow) => {

package/src/sksg/utils.ts

@@ -10,6 +10,17 @@ export const isSharedValue = <T = unknown>(
   return (value as Record<string, unknown>)?._isReanimatedSharedValue === true;
 };
 
+export const isSharedValueSelector = (
+  value: unknown
+): value is { __sv: SharedValue<unknown>; __key: string } => {
+  "worklet";
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const obj = value as Record<string, unknown>;
+  return isSharedValue(obj.__sv) && typeof obj.__key === "string";
+};
+
 export const materialize = <T extends object>(props: T) => {
   "worklet";
   const result: T = Object.assign({}, props);
@@ -17,6 +28,13 @@ export const materialize = <T extends object>(props: T) => {
     const value = result[key];
     if (isSharedValue(value)) {
       result[key] = value.value as never;
+    } else if (isSharedValueSelector(value)) {
+      const group = value.__sv.value;
+      result[key] = (
+        group && typeof group === "object"
+          ? (group as Record<string, unknown>)[value.__key]
+          : undefined
+      ) as never;
     }
   });
   return result;

package/cpp/skia/include/gpu/graphite/vk/VulkanGraphiteUtils.h

@@ -1,10 +0,0 @@
-/*
- * Copyright 2022 Google LLC
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// DEPRECRATED: VulkanGraphiteUtils.h will be removed in the future, please include
-// VulkanGraphiteContext.h
-#include "include/gpu/graphite/vk/VulkanGraphiteContext.h"

package/cpp/skia/include/private/base/README.md

@@ -1,4 +0,0 @@
-Files in "base" are used by many parts of Skia, but are not part of the public Skia API.
-See also src/base for other files that are part of base, but not needed by the public API.
-
-Files here should not depend on anything other than system headers or other files in base.