@shopify/react-native-skia 0.1.130 → 0.1.131

package/src/renderer/components/image/ImageShader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { SkRect, SkImage } from "../../../skia";
-import { TileMode, FilterMode, MipmapMode } from "../../../skia";
+import type { SkRect, SkImage, Skia } from "../../../skia/types";
+import { TileMode, FilterMode, MipmapMode } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type {
   TransformProps,
@@ -9,12 +9,13 @@ import type {
   AnimatedProps,
   RectCtor,
 } from "../../processors";
-import { localMatrix, enumKey, rect } from "../../processors";
+import { localMatrix, enumKey } from "../../processors";
 
 import type { Fit } from "./BoxFit";
 import { rect2rect, fitRects } from "./BoxFit";
 
 const getRect = (
+  Skia: Skia,
   props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
 ): SkRect | undefined => {
   const { x, y, width, height } = props;
@@ -26,7 +27,7 @@ const getRect = (
     width !== undefined &&
     height !== undefined
   ) {
-    return rect(x, y, width, height);
+    return Skia.XYWHRect(x, y, width, height);
   } else {
     return undefined;
   }
@@ -43,8 +44,8 @@ interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
 }
 
 const onDeclare = createDeclaration<ImageShaderProps>(
-  ({ tx, ty, fm, mm, fit, image, ...imageShaderProps }) => {
-    const rct = getRect(imageShaderProps);
+  ({ tx, ty, fm, mm, fit, image, ...imageShaderProps }, _, { Skia }) => {
+    const rct = getRect(Skia, imageShaderProps);
     if (rct) {
       const rects = fitRects(
         fit,
@@ -62,7 +63,7 @@ const onDeclare = createDeclaration<ImageShaderProps>(
       TileMode[enumKey(ty)],
       FilterMode[enumKey(fm)],
       MipmapMode[enumKey(mm)],
-      localMatrix(imageShaderProps)
+      localMatrix(Skia.Matrix(), imageShaderProps)
     );
   }
 );

package/src/renderer/components/imageFilters/Blur.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, TileMode } from "../../../skia";
+import { TileMode } from "../../../skia/types";
 import type { Radius, SkEnum } from "../../processors";
 import { enumKey } from "../../processors";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
@@ -16,15 +16,17 @@ export interface BlurProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<BlurProps>(({ blur, mode }, children) => {
-  const sigma = processRadius(blur);
-  return Skia.ImageFilter.MakeBlur(
-    sigma.x,
-    sigma.y,
-    TileMode[enumKey(mode)],
-    getInput(children)
-  );
-});
+const onDeclare = createDeclaration<BlurProps>(
+  ({ blur, mode }, children, { Skia }) => {
+    const sigma = processRadius(Skia, blur);
+    return Skia.ImageFilter.MakeBlur(
+      sigma.x,
+      sigma.y,
+      TileMode[enumKey(mode)],
+      getInput(Skia, children)
+    );
+  }
+);
 
 export const Blur = (props: AnimatedProps<BlurProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/imageFilters/DisplacementMap.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, ColorChannel } from "../../../skia";
+import { ColorChannel } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
@@ -16,12 +16,12 @@ export interface DisplacementMapProps {
 }
 
 const onDeclare = createDeclaration<DisplacementMapProps>(
-  ({ channelX, channelY, scale }, children) => {
+  ({ channelX, channelY, scale }, children, { Skia }) => {
     const [in1, in2] = children.filter((c) => !!c);
     const x = ColorChannel[enumKey(channelX)];
     const y = ColorChannel[enumKey(channelY)];
-    const map = getInput([in1]);
-    const input = in2 ? getInput([in2]) : null;
+    const map = getInput(Skia, [in1]);
+    const input = in2 ? getInput(Skia, [in2]) : null;
     if (!map) {
       throw new Error("No DisplacementMap provided");
     }

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,9 +1,10 @@
-import type { SkColor, SkImageFilter } from "../../../skia";
-import { BlendMode, Skia, TileMode } from "../../../skia";
+import type { SkColor, Skia, SkImageFilter } from "../../../skia/types";
+import { BlendMode, TileMode } from "../../../skia/types";
 
-const Black = Skia.Color("black");
+const Black = Float32Array.of(0, 0, 0, 1);
 
 export const MakeInnerShadow = (
+  Skia: Skia,
   shadowOnly: boolean | undefined,
   dx: number,
   dy: number,

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps, Radius } from "../../processors";
 import { processRadius } from "../../processors/Radius";
@@ -14,9 +13,9 @@ export interface MorphologyProps {
 }
 
 const onDeclare = createDeclaration<MorphologyProps>(
-  ({ radius, operator }, children) => {
-    const input = getInput(children);
-    const r = processRadius(radius);
+  ({ radius, operator }, children, { Skia }) => {
+    const input = getInput(Skia, children);
+    const r = processRadius(Skia, radius);
     const factory =
       operator === "dilate"
         ? Skia.ImageFilter.MakeDilate

package/src/renderer/components/imageFilters/Offset.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -13,9 +12,11 @@ export interface OffsetProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<OffsetProps>(({ x, y }, children) => {
-  return Skia.ImageFilter.MakeOffset(x, y, getInput(children));
-});
+const onDeclare = createDeclaration<OffsetProps>(
+  ({ x, y }, children, { Skia }) => {
+    return Skia.ImageFilter.MakeOffset(x, y, getInput(Skia, children));
+  }
+);
 
 export const Offset = (props: AnimatedProps<OffsetProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/imageFilters/RuntimeShader.tsx

@@ -1,20 +1,28 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkRuntimeEffect } from "../../../skia";
+import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
+import { processUniforms } from "../../../skia/types/Shader/Shader";
 
 import { getInput } from "./getInput";
 
 export interface RuntimeShaderProps {
   source: SkRuntimeEffect;
+  uniforms?: Uniforms;
 }
 
 const onDeclare = createDeclaration<RuntimeShaderProps>(
-  ({ source }, children) => {
+  ({ source, uniforms }, children, { Skia }) => {
     const rtb = Skia.RuntimeShaderBuilder(source);
-    return Skia.ImageFilter.MakeRuntimeShader(rtb, null, getInput(children));
+    if (uniforms) {
+      processUniforms(source, uniforms, rtb);
+    }
+    return Skia.ImageFilter.MakeRuntimeShader(
+      rtb,
+      null,
+      getInput(Skia, children)
+    );
   }
 );
 

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { Skia, processColor } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { Color } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { processColor } from "../../processors/Color";
 
 import { getInput } from "./getInput";
 import { MakeInnerShadow } from "./InnerShadow";
@@ -18,12 +18,16 @@ export interface ShadowProps {
 }
 
 const onDeclare = createDeclaration<ShadowProps>(
-  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {
-    const input = getInput(children);
-    const color = processColor(cl, opacity);
+  (
+    { dx, dy, blur, color: cl, shadowOnly, inner },
+    children,
+    { opacity, Skia }
+  ) => {
+    const input = getInput(Skia, children);
+    const color = processColor(Skia, cl, opacity);
     let factory;
     if (inner) {
-      factory = MakeInnerShadow.bind(null, shadowOnly);
+      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
     } else {
       factory = shadowOnly
         ? Skia.ImageFilter.MakeDropShadowOnly

package/src/renderer/components/imageFilters/getInput.ts

@@ -1,7 +1,8 @@
 import type { DeclarationResult } from "../../nodes";
-import { isImageFilter, isColorFilter, isShader, Skia } from "../../../skia";
+import type { Skia } from "../../../skia/types";
+import { isImageFilter, isColorFilter, isShader } from "../../../skia/types";
 
-export const getInput = (children: DeclarationResult[]) => {
+export const getInput = (Skia: Skia, children: DeclarationResult[]) => {
   const [child] = children.filter((c) => c);
   if (!child) {
     return null;

package/src/renderer/components/maskFilters/Blur.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BlurStyle, Skia } from "../../../skia";
+import { BlurStyle } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { SkEnum } from "../../processors";
 import { enumKey } from "../../processors";
@@ -13,7 +13,7 @@ export interface BlurMaskProps {
 }
 
 const onDeclare = createDeclaration<BlurMaskProps>(
-  ({ style, blur, respectCTM }) => {
+  ({ style, blur, respectCTM }, _, { Skia }) => {
     return Skia.MaskFilter.MakeBlur(
       BlurStyle[enumKey(style)],
       blur,

package/src/renderer/components/pathEffects/Corner.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -11,7 +11,7 @@ export interface CornerPathEffectProps {
 }
 
 const onDeclare = createDeclaration<CornerPathEffectProps>(
-  ({ r }, children) => {
+  ({ r }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeCorner(r);
     if (child) {

package/src/renderer/components/pathEffects/Dash.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -12,7 +12,7 @@ export interface DashPathEffectProps {
 }
 
 const onDeclare = createDeclaration<DashPathEffectProps>(
-  ({ intervals, phase }, children) => {
+  ({ intervals, phase }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeDash(intervals, phase);
     if (child) {

package/src/renderer/components/pathEffects/Discrete.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -13,7 +13,7 @@ export interface DiscretePathEffectProps {
 }
 
 const onDeclare = createDeclaration<DiscretePathEffectProps>(
-  ({ length, deviation, seed }, children) => {
+  ({ length, deviation, seed }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeDiscrete(length, deviation, seed);
     if (child) {

package/src/renderer/components/pathEffects/Line2D.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia";
+import type { SkMatrix } from "../../../skia/types";
 
 export interface Line2DPathEffectProps {
   children?: ReactNode | ReactNode[];
@@ -13,7 +13,7 @@ export interface Line2DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Line2DPathEffectProps>(
-  ({ width, matrix }, children) => {
+  ({ width, matrix }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeLine2D(width, matrix);
     if (child) {

package/src/renderer/components/pathEffects/Path1D.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, Path1DEffectStyle, isPathEffect } from "../../../skia";
+import { Path1DEffectStyle, isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import type { SkEnum } from "../../processors/Paint";
@@ -18,10 +18,10 @@ export interface Path1DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Path1DPathEffectProps>(
-  ({ path, advance, phase, style }, children) => {
+  ({ path, advance, phase, style }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakePath1D(
-      processPath(path),
+      processPath(Skia, path),
       advance,
       phase,
       Path1DEffectStyle[enumKey(style)]

package/src/renderer/components/pathEffects/Path2D.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia";
+import type { SkMatrix } from "../../../skia/types";
 import type { PathDef } from "../../processors/Paths";
 import { processPath } from "../../processors/Paths";
 
@@ -15,9 +15,9 @@ export interface Path2DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Path2DPathEffectProps>(
-  ({ path, matrix }, children) => {
+  ({ path, matrix }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakePath2D(matrix, processPath(path));
+    const pe = Skia.PathEffect.MakePath2D(matrix, processPath(Skia, path));
     if (child) {
       if (!pe) {
         return child;

package/src/renderer/components/pathEffects/Sum.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,10 +9,12 @@ export interface SumPathEffectProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<SumPathEffectProps>((_, children) => {
-  const [outer, inner] = children.filter(isPathEffect);
-  return Skia.PathEffect.MakeCompose(outer, inner);
-});
+const onDeclare = createDeclaration<SumPathEffectProps>(
+  (_, children, { Skia }) => {
+    const [outer, inner] = children.filter(isPathEffect);
+    return Skia.PathEffect.MakeCompose(outer, inner);
+  }
+);
 
 export const SumPathEffect = (props: AnimatedProps<SumPathEffectProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/shaders/Color.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 
-import { Skia, processColor } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { processColor } from "../../processors/Color";
 
 export interface ColorShaderProps {
   color: Color;
 }
 
-const onDeclare = createDeclaration<ColorShaderProps>(({ color }) => {
-  return Skia.Shader.MakeColor(processColor(color, 1));
-});
+const onDeclare = createDeclaration<ColorShaderProps>(
+  ({ color }, _, { Skia }) => {
+    return Skia.Shader.MakeColor(processColor(Skia, color, 1));
+  }
+);
 
 export const ColorShader = (props: AnimatedProps<ColorShaderProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/shaders/FractalNoise.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -14,7 +13,7 @@ export interface FractalNoiseProps {
 }
 
 const onDeclare = createDeclaration<FractalNoiseProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }) => {
+  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
     return Skia.Shader.MakeFractalNoise(
       freqX,
       freqY,

package/src/renderer/components/shaders/Gradient.ts

@@ -1,9 +1,9 @@
-import { Skia, TileMode } from "../../../skia";
+import { TileMode } from "../../../skia/types";
 import type { SkEnum } from "../../processors/Paint";
 import type { TransformProps } from "../../processors/Transform";
 import { enumKey } from "../../processors/Paint";
 import { localMatrix } from "../../processors/Transform";
-import type { Color } from "../../../skia";
+import type { Color, Skia } from "../../../skia/types";
 
 export interface GradientProps extends TransformProps {
   colors: Color[];
@@ -12,16 +12,13 @@ export interface GradientProps extends TransformProps {
   flags?: number;
 }
 
-export const processGradientProps = ({
-  colors,
-  positions,
-  mode,
-  flags,
-  ...transform
-}: GradientProps) => ({
+export const processGradientProps = (
+  Skia: Skia,
+  { colors, positions, mode, flags, ...transform }: GradientProps
+) => ({
   colors: colors.map((color) => Skia.Color(color)),
   positions: positions ?? null,
   mode: TileMode[enumKey(mode ?? "clamp")],
   flags,
-  localMatrix: localMatrix(transform),
+  localMatrix: localMatrix(Skia.Matrix(), transform),
 });

package/src/renderer/components/shaders/LinearGradient.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Vector, AnimatedProps } from "../../processors";
-import { Skia } from "../../../skia";
+import type { AnimatedProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
+import type { Vector } from "../../../skia/types";
 
 import type { GradientProps } from "./Gradient";
 import { processGradientProps } from "./Gradient";
@@ -13,9 +13,9 @@ export interface LinearGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<LinearGradientProps>(
-  ({ start, end, ...gradientProps }) => {
+  ({ start, end, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeLinearGradient(
       start,
       end,

package/src/renderer/components/shaders/RadialGradient.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Vector, AnimatedProps } from "../../processors";
-import { Skia } from "../../../skia";
+import type { AnimatedProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
+import type { Vector } from "../../../skia/types";
 
 import type { GradientProps } from "./Gradient";
 import { processGradientProps } from "./Gradient";
@@ -13,9 +13,9 @@ export interface RadialGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<RadialGradientProps>(
-  ({ c, r, ...gradientProps }) => {
+  ({ c, r, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeRadialGradient(
       c,
       r,

package/src/renderer/components/shaders/Shader.tsx

@@ -1,32 +1,12 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { isShader } from "../../../skia";
-import type { SkRuntimeEffect } from "../../../skia";
-import type { Vector, AnimatedProps, TransformProps } from "../../processors";
+import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
+import { isShader, processUniforms } from "../../../skia/types";
+import type { AnimatedProps, TransformProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
 import { localMatrix } from "../../processors";
 
-const isVector = (obj: unknown): obj is Vector =>
-  // We have an issue to check property existence on JSI backed instances
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (obj as any).x !== undefined && (obj as any).y !== undefined;
-
-type UniformValue = number | Vector | readonly number[];
-
-type Uniform = UniformValue | readonly UniformValue[];
-
-interface Uniforms {
-  [name: string]: Uniform;
-}
-
-const processValue = (value: UniformValue): number | readonly number[] => {
-  if (isVector(value)) {
-    return [value.x, value.y];
-  }
-  return value;
-};
-
 export interface ShaderProps extends TransformProps {
   source: SkRuntimeEffect;
   uniforms: Uniforms;
@@ -34,41 +14,11 @@ export interface ShaderProps extends TransformProps {
 }
 
 const onDeclare = createDeclaration<ShaderProps>(
-  ({ uniforms, source, ...transform }, children) => {
-    const processedUniforms = new Array(source.getUniformCount())
-      .fill(0)
-      .flatMap((_, i) => {
-        const name = source.getUniformName(i);
-        const value = uniforms[name];
-        if (value === undefined) {
-          throw new Error(`No value specified for uniform ${name}`);
-        }
-        if (Array.isArray(value)) {
-          return value.flatMap(processValue);
-        }
-        return processValue(value as UniformValue);
-      });
-    const names = Object.keys(uniforms);
-    if (names.length > source.getUniformCount()) {
-      const usedUniforms = new Array(source.getUniformCount())
-        .fill(0)
-        .map((_, i) => source.getUniformName(i));
-      const unusedUniform = names
-        .map((name) => {
-          if (usedUniforms.indexOf(name) === -1) {
-            return name;
-          }
-          return null;
-        })
-        .filter((n) => n !== null);
-      console.warn(
-        "Unused uniforms were provided: " + unusedUniform.join(", ")
-      );
-    }
+  ({ uniforms, source, ...transform }, children, { Skia }) => {
     return source.makeShaderWithChildren(
-      processedUniforms,
+      processUniforms(source, uniforms),
       children.filter(isShader),
-      localMatrix(transform)
+      localMatrix(Skia.Matrix(), transform)
     );
   }
 );

package/src/renderer/components/shaders/SweepGradient.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Vector, AnimatedProps } from "../../processors";
-import { Skia } from "../../../skia";
+import type { AnimatedProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
+import type { Vector } from "../../../skia/types";
 
 import type { GradientProps } from "./Gradient";
 import { processGradientProps } from "./Gradient";
@@ -14,9 +14,9 @@ export interface SweepGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<SweepGradientProps>(
-  ({ c, start, end, ...gradientProps }) => {
+  ({ c, start, end, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeSweepGradient(
       c.x,
       c.y,