@shopify/react-native-skia 0.1.130 → 0.1.131

package/src/renderer/components/shaders/Turbulence.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 TurbulenceProps {
 }
 
 const onDeclare = createDeclaration<TurbulenceProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }) => {
+  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
     return Skia.Shader.MakeTurbulence(
       freqX,
       freqY,

package/src/renderer/components/shaders/TwoPointConicalGradient.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";
@@ -15,9 +15,9 @@ export interface TwoPointConicalGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<TwoPointConicalGradientProps>(
-  ({ start, startR, end, endR, ...gradientProps }) => {
+  ({ start, startR, end, endR, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeTwoPointConicalGradient(
       start,
       startR,

package/src/renderer/components/shapes/Box.tsx

@@ -1,16 +1,29 @@
 import React from "react";
 
-import type { Color, SkRRect, SkJSIInstance, SkRect } from "../../../skia";
-import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import type {
+  Color,
+  SkRRect,
+  SkJSIInstance,
+  SkRect,
+  Skia,
+} from "../../../skia/types";
+import { ClipOp, BlurStyle } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, CustomPaintProps } from "../../processors";
-import { add, vec, rrect } from "../../processors";
-import { rect, isRRect } from "../../processors/Rects";
 import { createDeclaration } from "../../nodes/Declaration";
+import { processColor } from "../../processors/Color";
+import { isRRect } from "../../../skia/types/RRect";
 
-const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
-  rrect(
-    rect(
+const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) =>
+  Skia.RRectXY(
+    Skia.XYWHRect(
       box.rect.x - dx + tx,
       box.rect.y - dy + ty,
       box.rect.width + 2 * dx,
@@ -20,8 +33,14 @@ const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
     box.ry + dy
   );
 
-const deflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
-  inflate(box, -dx, -dy, tx, ty);
+const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => inflate(Skia, box, -dx, -dy, tx, ty);
 
 interface BoxShadowProps {
   dx?: number;
@@ -52,19 +71,19 @@ interface BoxProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
-  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);
-  const { canvas, paint, opacity } = ctx;
+  const { canvas, paint, opacity, Skia } = ctx;
+  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
   const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);
   shadows
     .filter((shadow) => !shadow.inner)
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(color, opacity));
+      lPaint.setColor(processColor(Skia, color, opacity));
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
-      canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);
+      canvas.drawRRect(inflate(Skia, box, spread, spread, dx, dy), lPaint);
     });
   canvas.drawRRect(box, paint);
 
@@ -72,16 +91,16 @@ const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
     .filter((shadow) => shadow.inner)
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const delta = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));
+      const delta = Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
       canvas.save();
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(color, opacity));
+      lPaint.setColor(processColor(Skia, color, opacity));
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
-      const inner = deflate(box, spread, spread, dx, dy);
-      const outer = inflate(box, delta.x, delta.y);
+      const inner = deflate(Skia, box, spread, spread, dx, dy);
+      const outer = inflate(Skia, box, delta.x, delta.y);
       canvas.drawDRRect(outer, inner, lPaint);
       canvas.restore();
     });

package/src/renderer/components/shapes/Circle.tsx

@@ -6,13 +6,12 @@ import type {
   CircleDef,
 } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import { vec } from "../../processors/math/Vector";
 import { processCircle } from "../../processors";
 
 export type CircleProps = CircleDef & CustomPaintProps;
 
-const onDraw = createDrawing<CircleProps>(({ canvas, paint }, def) => {
-  const { c, r } = processCircle(def);
+const onDraw = createDrawing<CircleProps>(({ canvas, paint, Skia }, def) => {
+  const { c, r } = processCircle(Skia, def);
   canvas.drawCircle(c.x, c.y, r, paint);
 });
 
@@ -21,5 +20,5 @@ export const Circle = (props: AnimatedProps<CircleProps>) => {
 };
 
 Circle.defaultProps = {
-  c: vec(0, 0),
+  c: { x: 0, y: 0 },
 };

package/src/renderer/components/shapes/DiffRect.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { CustomPaintProps } from "../../processors";
-import type { SkRRect } from "../../../skia";
+import type { SkRRect } from "../../../skia/types";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { createDrawing } from "../../nodes/Drawing";
 

package/src/renderer/components/shapes/FitBox.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 import type { Fit } from "../image";
 import { rect2rect, fitRects } from "../image";
-import type { SkRect } from "../../../skia";
+import type { SkRect } from "../../../skia/types";
 import { Group } from "../Group";
 
 interface FitProps {

package/src/renderer/components/shapes/Line.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
-import type { CustomPaintProps, Vector, AnimatedProps } from "../../processors";
+import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
+import type { Vector } from "../../../skia/types";
 
 export interface LineProps extends CustomPaintProps {
   p1: Vector;

package/src/renderer/components/shapes/Oval.tsx

@@ -10,10 +10,12 @@ import { createDrawing } from "../../nodes";
 
 export type OvalProps = RectDef & CustomPaintProps;
 
-const onDraw = createDrawing<OvalProps>(({ canvas, paint }, rectProps) => {
-  const rect = processRect(rectProps);
-  canvas.drawOval(rect, paint);
-});
+const onDraw = createDrawing<OvalProps>(
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rect = processRect(Skia, rectProps);
+    canvas.drawOval(rect, paint);
+  }
+);
 
 export const Oval = (props: AnimatedProps<OvalProps>) => {
   return <skDrawing onDraw={onDraw} {...props} />;

package/src/renderer/components/shapes/Patch.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 
-import type {
-  CustomPaintProps,
-  SkEnum,
-  Vector,
-  AnimatedProps,
-} from "../../processors";
+import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { SkPoint, Color } from "../../../skia";
-import { BlendMode, processColor } from "../../../skia";
+import type { SkPoint, Color, Vector } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
+import { processColor } from "../../processors/Color";
 
 export interface CubicBezierHandle {
   pos: Vector;
@@ -30,7 +26,7 @@ export interface PatchProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<PatchProps>(
-  ({ canvas, paint, opacity }, { colors, patch, texture, blendMode }) => {
+  ({ canvas, paint, opacity, Skia }, { colors, patch, texture, blendMode }) => {
     // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
     const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
     const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
@@ -54,7 +50,7 @@ const onDraw = createDrawing<PatchProps>(
         patch[3].c2,
         patch[0].c1,
       ],
-      colors ? colors.map((c) => processColor(c, opacity)) : undefined,
+      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
       texture,
       mode,
       paint

package/src/renderer/components/shapes/Path.tsx

@@ -8,7 +8,7 @@ import type {
 } from "../../processors";
 import { createDrawing } from "../../nodes";
 import { processPath, enumKey } from "../../processors";
-import { FillType } from "../../../skia";
+import { FillType } from "../../../skia/types";
 
 interface StrokeOpts {
   width?: number;
@@ -25,14 +25,14 @@ export interface PathProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<PathProps>(
-  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {
+  ({ canvas, paint, Skia }, { start, end, stroke, fillType, ...pathProps }) => {
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;
     const hasFillType = !!fillType;
     const willMutatePath =
       hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
-    const pristinePath = processPath(pathProps.path);
+    const pristinePath = processPath(Skia, pathProps.path);
     const path = willMutatePath ? pristinePath.copy() : pristinePath;
     if (hasFillType) {
       path.setFillType(FillType[enumKey(fillType)]);

package/src/renderer/components/shapes/Points.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import type { CustomPaintProps, SkEnum } from "../../processors";
-import type { SkPoint } from "../../../skia";
-import { PointMode } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
+import { PointMode } from "../../../skia/types";
 import { enumKey } from "../../processors/Paint";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { createDrawing } from "../../nodes/Drawing";

package/src/renderer/components/shapes/Rect.tsx

@@ -10,10 +10,12 @@ import { processRect } from "../../processors";
 
 export type RectProps = RectDef & CustomPaintProps;
 
-const onDraw = createDrawing<RectProps>(({ canvas, paint }, rectProps) => {
-  const rect = processRect(rectProps);
-  canvas.drawRect(rect, paint);
-});
+const onDraw = createDrawing<RectProps>(
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rect = processRect(Skia, rectProps);
+    canvas.drawRect(rect, paint);
+  }
+);
 
 export const Rect = (props: AnimatedProps<RectProps>) => {
   return <skDrawing onDraw={onDraw} {...props} />;

package/src/renderer/components/shapes/RoundedRect.tsx

@@ -11,8 +11,8 @@ import { processRRect } from "../../processors";
 export type RoundedRectProps = RRectDef & CustomPaintProps;
 
 const onDraw = createDrawing<RoundedRectProps>(
-  ({ canvas, paint }, rectProps) => {
-    const rrect = processRRect(rectProps);
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rrect = processRRect(Skia, rectProps);
     canvas.drawRRect(rrect, paint);
   }
 );

package/src/renderer/components/shapes/Vertices.tsx

@@ -2,9 +2,10 @@ import React from "react";
 
 import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { SkPoint } from "../../../skia";
-import { BlendMode, VertexMode, Skia, processColor } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
+import { BlendMode, VertexMode } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
+import { processColor } from "../../processors/Color";
 
 export interface VerticesProps extends CustomPaintProps {
   colors?: string[];
@@ -17,7 +18,7 @@ export interface VerticesProps extends CustomPaintProps {
 
 const onDraw = createDrawing<VerticesProps>(
   (
-    { canvas, paint, opacity },
+    { canvas, paint, opacity, Skia },
     { colors, vertices, textures, blendMode, mode, indices }
   ) => {
     // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
@@ -28,7 +29,7 @@ const onDraw = createDrawing<VerticesProps>(
       vertexMode,
       vertices,
       textures,
-      colors ? colors.map((c) => processColor(c, opacity)) : undefined,
+      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
       indices
     );
     canvas.drawVertices(vert, blend, paint);

package/src/renderer/components/text/Glyphs.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import type { SkPoint } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
 import { processFont } from "../../processors/Font";
 
@@ -24,8 +24,11 @@ interface ProcessedGlyphs {
 }
 
 const onDraw = createDrawing<GlyphsProps>(
-  ({ canvas, paint, fontMgr }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {
-    const font = processFont(fontMgr, fontDef);
+  (
+    { canvas, paint, fontMgr, Skia },
+    { glyphs: rawGlyphs, x, y, ...fontDef }
+  ) => {
+    const font = processFont(Skia, fontMgr, fontDef);
     const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(
       (acc, glyph) => {
         const { id, pos } = glyph;

package/src/renderer/components/text/Text.tsx

@@ -16,8 +16,8 @@ type TextProps = CustomPaintProps &
   };
 
 const onDraw = createDrawing<TextProps>(
-  ({ canvas, paint, fontMgr }, { text, x, y, ...fontDef }) => {
-    const font = processFont(fontMgr, fontDef);
+  ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {
+    const font = processFont(Skia, fontMgr, fontDef);
     canvas.drawText(text, x, y, paint, font);
   }
 );

package/src/renderer/components/text/TextBlob.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import type { SkTextBlob } from "../../../skia";
+import type { SkTextBlob } from "../../../skia/types";
 
 export interface TextBlobProps extends CustomPaintProps {
   blob: SkTextBlob;

package/src/renderer/components/text/TextPath.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes";
-import type { SkPath, SkRSXform } from "../../../skia";
-import { Skia } from "../../../skia/Skia";
+import type { SkPath, SkRSXform } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
 import { processFont } from "../../processors/Font";
 
@@ -16,7 +15,7 @@ export type TextPathProps = CustomPaintProps &
 
 const onDraw = createDrawing<TextPathProps>(
   (
-    { canvas, paint, fontMgr },
+    { canvas, paint, fontMgr, Skia },
     { text, initialOffset, path: pathDef, ...fontDef }
   ) => {
     const path =
@@ -26,7 +25,7 @@ const onDraw = createDrawing<TextPathProps>(
     if (path === null) {
       throw new Error("Invalid path: " + pathDef);
     }
-    const font = processFont(fontMgr, fontDef);
+    const font = processFont(Skia, fontMgr, fontDef);
     const ids = font.getGlyphIDs(text);
     const widths = font.getGlyphWidths(ids, paint);
     const rsx: SkRSXform[] = [];

package/src/renderer/index.ts

@@ -1,5 +1,5 @@
-export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
 export * from "./useContextBridge";
 export * from "./DependencyManager";
+export * from "./useCanvas";

package/src/renderer/nodes/Declaration.tsx

@@ -5,7 +5,7 @@ import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";
 import { isAnimated, materialize } from "../processors";
 import type { DependencyManager } from "../DependencyManager";
-import type { SkJSIInstance } from "../../skia";
+import type { SkJSIInstance } from "../../skia/types";
 
 import { Node } from "./Node";
 

package/src/renderer/nodes/Drawing.tsx

@@ -2,11 +2,11 @@ import type { DependencyList, ReactNode } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import { processPaint } from "../processors";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import { materialize } from "../processors/Animations/Animations";
-import { isPaint } from "../../skia";
+import { isPaint } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
+import { processPaint } from "../processors";
 
 import { Node } from "./Node";
 
@@ -53,6 +53,7 @@ export class DrawingNode<P> extends Node<P> {
     } else {
       const declarations = this.visit(ctx);
       const paint = processPaint(
+        ctx.Skia,
         ctx.paint.copy(),
         ctx.opacity,
         drawingProps,

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,4 @@
-import type { SkJSIInstance } from "../../skia";
+import type { SkJSIInstance } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";

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

@@ -1,9 +1,6 @@
 import type { SkiaValue } from "../../../values";
-import type { DrawingContext } from "../../DrawingContext";
 import { mapKeys } from "../../typeddash";
 
-export type FrameValue<T> = (ctx: DrawingContext) => T;
-
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
     return false;

package/src/renderer/processors/Circles.ts

@@ -1,5 +1,4 @@
-import type { Vector } from "./math/Vector";
-import { vec } from "./math/Vector";
+import type { Skia, Vector } from "../../skia/types";
 
 interface PointCircleDef {
   c: Vector;
@@ -18,9 +17,10 @@ const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (def as any).cx !== undefined;
-export const processCircle = (def: CircleDef) => {
+
+export const processCircle = (Skia: Skia, def: CircleDef) => {
   if (isCircleScalarDef(def)) {
-    return { c: vec(def.cx, def.cy), r: def.r };
+    return { c: Skia.Point(def.cx, def.cy), r: def.r };
   }
   return def;
 };

package/src/renderer/processors/Clips.ts

@@ -1,14 +1,19 @@
-import type { SkCanvas, ClipOp, SkRect, SkRRect } from "../../skia";
+import { isRRect } from "../../skia/types";
+import type { SkCanvas, ClipOp, SkRect, SkRRect, Skia } from "../../skia/types";
 
 import type { PathDef } from "./Paths";
 import { processPath, isPathDef } from "./Paths";
-import { isRRect } from "./Rects";
 
 export type ClipDef = SkRRect | SkRect | PathDef;
 
-export const processClip = (canvas: SkCanvas, def: ClipDef, op: ClipOp) => {
+export const processClip = (
+  Skia: Skia,
+  canvas: SkCanvas,
+  def: ClipDef,
+  op: ClipOp
+) => {
   if (isPathDef(def)) {
-    const path = processPath(def);
+    const path = processPath(Skia, def);
     canvas.clipPath(path, op, true);
   } else if (isRRect(def)) {
     canvas.clipRRect(def, op, true);

package/src/{skia/core → renderer/processors}/Color.ts

@@ -1,5 +1,4 @@
-import { Skia } from "../Skia";
-import type { Color } from "../types";
+import type { Color, Skia } from "../../skia/types";
 
 export const RED = 0;
 export const GREEN = 1;
@@ -9,7 +8,7 @@ export const ALPHA = 3;
 export const rgbaColor = (r: number, g: number, b: number, a: number) =>
   new Float32Array([r, g, b, a]);
 
-export const processColor = (cl: Color, currentOpacity: number) => {
+export const processColor = (Skia: Skia, cl: Color, currentOpacity: number) => {
   const color = Skia.Color(cl);
   color[ALPHA] *= currentOpacity;
   return color;

package/src/renderer/processors/Font.ts

@@ -1,5 +1,4 @@
-import type { FontMgr, SkFont } from "../../skia";
-import { Skia } from "../../skia/Skia";
+import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
 
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
@@ -8,11 +7,19 @@ export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
 
-export const processFont = (fontMgr: FontMgr, fontDef: FontDef) => {
+export const processFont = (
+  Skia: Skia,
+  fontMgr: SkFontMgr,
+  fontDef: FontDef
+) => {
   let selectedFont: SkFont;
   if (isFont(fontDef)) {
     selectedFont = fontDef.font;
   } else {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
+    );
     const { familyName, size } = fontDef;
     const typeface = fontMgr.matchFamilyStyle(familyName);
     if (typeface === null) {

package/src/renderer/processors/Paint.ts

@@ -5,16 +5,16 @@ import {
   PaintStyle,
   StrokeJoin,
   StrokeCap,
-  processColor,
   isShader,
   isMaskFilter,
   isColorFilter,
   isPathEffect,
   isImageFilter,
-  Skia,
-} from "../../skia";
-import type { SkPaint, Color, SkImageFilter } from "../../skia";
+} from "../../skia/types";
+import type { SkPaint, Color, SkImageFilter, Skia } from "../../skia/types";
 import type { DeclarationResult } from "../nodes";
+
+import { processColor } from "./Color";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export interface ChildrenProps {
@@ -39,6 +39,7 @@ export const enumKey = <K extends string>(k: K) =>
   (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
 
 export const processPaint = (
+  Skia: Skia,
   paint: SkPaint,
   currentOpacity: number,
   {
@@ -59,11 +60,11 @@ export const processPaint = (
     return paintRef.current;
   }
   if (color !== undefined) {
-    const c = processColor(color, currentOpacity);
+    const c = processColor(Skia, color, currentOpacity);
     paint.setShader(null);
     paint.setColor(c);
   } else {
-    const c = processColor(paint.getColor(), currentOpacity);
+    const c = processColor(Skia, paint.getColor(), currentOpacity);
     paint.setColor(c);
   }
   if (blendMode !== undefined) {
@@ -106,7 +107,11 @@ export const processPaint = (
     paint.setImageFilter(
       filters
         .reverse()
-        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
+        .reduce<SkImageFilter | null>(
+          (...args: Parameters<typeof Skia.ImageFilter.MakeCompose>) =>
+            Skia.ImageFilter.MakeCompose(...args),
+          null
+        )
     );
   }
   return paint;

package/src/renderer/processors/Paths.ts

@@ -1,9 +1,9 @@
-import type { SkPath } from "../../skia";
-import { Skia, isPath } from "../../skia";
+import type { SkPath, Skia } from "../../skia/types";
+import { isPath } from "../../skia/types";
 
 export type PathDef = string | SkPath;
 
-export const processPath = (rawPath: PathDef) => {
+export const processPath = (Skia: Skia, rawPath: PathDef) => {
   const path =
     typeof rawPath === "string"
       ? Skia.Path.MakeFromSVGString(rawPath)