@shopify/react-native-skia 0.1.115 → 0.1.119

package/src/renderer/processors/math/Matrix3.ts

@@ -102,6 +102,9 @@ const multiply3 = (m1: Matrix3, m2: Matrix3) => {
   ] as const;
 };
 
+export const matrixVecMul3 = (m: Matrix3, v: Vec3) =>
+  [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)] as const;
+
 const skiaMatrix3 = (m: Matrix3): SkMatrix => {
   return [
     m[0][0],
@@ -117,34 +120,35 @@ const skiaMatrix3 = (m: Matrix3): SkMatrix => {
 };
 
 export const processTransform2d = (transforms: Transforms2d) =>
-  skiaMatrix3(
-    transforms.reduce((acc, transform) => {
-      const key = Object.keys(transform)[0] as Transform2dName;
-      const value = (transform as Pick<Transformations, typeof key>)[key];
-      if (key === "translateX") {
-        return multiply3(acc, translateXMatrix(value));
-      }
-      if (key === "translateY") {
-        return multiply3(acc, translateYMatrix(value));
-      }
-      if (key === "scale") {
-        return multiply3(acc, scaleMatrix(value));
-      }
-      if (key === "scaleX") {
-        return multiply3(acc, scaleXMatrix(value));
-      }
-      if (key === "scaleY") {
-        return multiply3(acc, scaleYMatrix(value));
-      }
-      if (key === "skewX") {
-        return multiply3(acc, skewXMatrix(value));
-      }
-      if (key === "skewY") {
-        return multiply3(acc, skewYMatrix(value));
-      }
-      if (key === "rotate" || key === "rotateZ") {
-        return multiply3(acc, rotateZMatrix(value));
-      }
-      return exhaustiveCheck(key);
-    }, identityMatrix)
-  );
+  skiaMatrix3(processTransform(transforms));
+
+const processTransform = (transforms: Transforms2d) =>
+  transforms.reduce((acc, transform) => {
+    const key = Object.keys(transform)[0] as Transform2dName;
+    const value = (transform as Pick<Transformations, typeof key>)[key];
+    if (key === "translateX") {
+      return multiply3(acc, translateXMatrix(value));
+    }
+    if (key === "translateY") {
+      return multiply3(acc, translateYMatrix(value));
+    }
+    if (key === "scale") {
+      return multiply3(acc, scaleMatrix(value));
+    }
+    if (key === "scaleX") {
+      return multiply3(acc, scaleXMatrix(value));
+    }
+    if (key === "scaleY") {
+      return multiply3(acc, scaleYMatrix(value));
+    }
+    if (key === "skewX") {
+      return multiply3(acc, skewXMatrix(value));
+    }
+    if (key === "skewY") {
+      return multiply3(acc, skewYMatrix(value));
+    }
+    if (key === "rotate" || key === "rotateZ") {
+      return multiply3(acc, rotateZMatrix(value));
+    }
+    return exhaustiveCheck(key);
+  }, identityMatrix);

package/src/renderer/typeddash.ts

@@ -3,3 +3,21 @@ export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];
 export const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unexhaustive handling for ${a}`);
 };
+
+// Shallow eq on props (without children)
+export const shallowEq = <P>(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;
+};

package/src/renderer/useContextBridge.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo, useContext } from "react";
+import type { ReactNode, Context, ReactElement } from "react";
+
+// 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]
+  );
+};

package/src/skia/Canvas.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 enum ClipOp {
   Difference,
@@ -485,4 +486,10 @@ 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/src/skia/Picture/Picture.ts

@@ -0,0 +1,34 @@
+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/src/skia/Picture/PictureFactory.ts

@@ -0,0 +1,9 @@
+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/src/skia/Picture/PictureRecorder.ts

@@ -0,0 +1,18 @@
+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/src/skia/Picture/index.ts

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

package/src/skia/Picture/usePicture.ts

@@ -0,0 +1,28 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import { Skia } from "../Skia";
+
+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 const usePicture = (
+  rect: SkRect,
+  cb: (canvas: SkCanvas) => void,
+  deps: DependencyList = []
+): SkPicture => {
+  return useMemo(() => {
+    const recorder = Skia.PictureRecorder();
+    const canvas = recorder.beginRecording(rect);
+    cb(canvas);
+    return recorder.finishRecordingAsPicture();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cb, rect, deps]);
+};

package/src/skia/Skia.ts

@@ -26,6 +26,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
@@ -41,6 +42,8 @@ export interface Skia {
     resScale: number
   ) => SkContourMeasureIter;
   Paint: () => SkPaint;
+  PictureRecorder: () => SkPictureRecorder;
+  Picture: PictureFactory;
   Path: PathFactory;
   Matrix: () => SkMatrix;
   ColorFilter: ColorFilterFactory;
@@ -106,6 +109,8 @@ export const Skia = {
   XYWHRect: SkiaApi.XYWHRect,
   RRectXY: SkiaApi.RRectXY,
   Paint: SkiaApi.Paint,
+  PictureRecorder: SkiaApi.PictureRecorder,
+  Picture: SkiaApi.Picture,
   Path: SkiaApi.Path,
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,

package/src/skia/index.ts

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

package/src/values/hooks/useDerivedValue.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { ValueApi } from "../api";
-import { isValue } from "../../renderer";
+import { isValue } from "../../renderer/processors";
 
 /**
  * Creates a new derived value - a value that will calculate its value depending

package/src/views/SkiaView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ViewProps } from "react-native";
 import { requireNativeComponent } from "react-native";
 
 import type { SkImage, SkRect } from "../skia";
@@ -6,9 +7,8 @@ import type { SkiaReadonlyValue } from "../values";
 
 import type {
   DrawMode,
-  NativeSkiaViewProps,
   RNSkiaDrawCallback,
-  RNSkiaViewProps,
+  NativeSkiaViewProps,
 } from "./types";
 
 let SkiaViewNativeId = 1000;
@@ -35,8 +35,32 @@ declare global {
 
 const { SkiaViewApi } = global;
 
-export 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 class SkiaView extends React.Component<SkiaViewProps> {
+  constructor(props: SkiaViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId++;
     const { onDraw } = props;
@@ -47,13 +71,12 @@ export class SkiaView extends React.Component<RNSkiaViewProps> {
   }
 
   private _nativeId: number;
-  private _animatingValues: Array<unknown> = [];
 
   public get nativeId() {
     return this._nativeId;
   }
 
-  componentDidUpdate(prevProps: RNSkiaViewProps) {
+  componentDidUpdate(prevProps: SkiaViewProps) {
     const { onDraw } = this.props;
     if (onDraw !== prevProps.onDraw) {
       assertDrawCallbacksEnabled();
@@ -103,48 +126,15 @@ export class SkiaView extends React.Component<RNSkiaViewProps> {
     return SkiaViewApi.registerValuesInView(this._nativeId, values);
   }
 
-  /**
-   * Increases the number of animations active in the view.
-   */
-  public addAnimation(owner: unknown) {
-    if (this._animatingValues.findIndex((p) => p === owner) === -1) {
-      this._animatingValues.push(owner);
-    }
-
-    if (this._animatingValues.length === 1) {
-      if (this.props.mode === "default" || this.props.mode === undefined) {
-        //console.log("SkiaView addAnimation - mode changed to continuous");
-        this.setDrawMode("continuous");
-      }
-    }
-  }
-
-  /**
-   * Decreases the number of animations active in the view.
-   */
-  public removeAnimation(owner: unknown) {
-    const indexOfOwner = this._animatingValues.indexOf(owner);
-    if (indexOfOwner !== -1) {
-      // Remove
-      this._animatingValues = this._animatingValues.filter((p) => p !== owner);
-    }
-    if (this._animatingValues.length === 0) {
-      if (this.props.mode === "default" || this.props.mode === undefined) {
-        //console.log("SkiaView removeAnimation - mode changed to default");
-        this.setDrawMode("default");
-      }
-    }
-  }
-
   render() {
-    const { style, mode, debug = false } = this.props;
+    const { mode, debug = false, ...viewProps } = this.props;
     return (
       <NativeSkiaView
-        style={style}
         collapsable={false}
         nativeID={`${this._nativeId}`}
         mode={mode}
         debug={debug}
+        {...viewProps}
       />
     );
   }

package/src/views/types.ts

@@ -47,30 +47,6 @@ export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 
 export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
 
-export 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/lib/commonjs/renderer/components/Defs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Defs.tsx"],"names":["onDeclare","Defs","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;;;AAMA,MAAMA,SAAS,GAAG,8BAAkB,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALiB,CAAlB;;AAOO,MAAMC,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n  // Do nothing.\n  // The goal of this component is to avoid declared paint from\n  // being used in the drawing context automatically\n  return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/commonjs/renderer/components/imageFilters/DropShadow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropShadow.tsx"],"names":["onDeclare","children","dx","dy","blur","color","shadowOnly","opacity","input","factory","Skia","ImageFilter","MakeDropShadowOnly","MakeDropShadow","DropShadow","props"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAGA;;AAEA;;;;;;AAUA,MAAMA,SAAS,GAAG,oCAChB,OAAsCC,QAAtC,YAAgE;AAAA,MAA/D;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAA+D;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC9D,QAAMC,KAAK,GAAG,wBAASP,QAAT,CAAd;AACA,QAAMQ,OAAO,GAAGH,UAAU,GACtBI,WAAKC,WAAL,CAAiBC,kBADK,GAEtBF,WAAKC,WAAL,CAAiBE,cAFrB;AAGA,SAAOJ,OAAO,CAACP,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqB,yBAAaC,KAAb,EAAoBE,OAApB,CAArB,EAAmDC,KAAnD,CAAd;AACD,CAPe,CAAlB;;AAUO,MAAMM,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEf;AAA1B,KAAyCe,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/Color\";\nimport { processColor } from \"../../../skia/Color\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface DropShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<DropShadowProps>(\n  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {\n    const input = getInput(children);\n    const factory = shadowOnly\n      ? Skia.ImageFilter.MakeDropShadowOnly\n      : Skia.ImageFilter.MakeDropShadow;\n    return factory(dx, dy, blur, blur, processColor(color, opacity), input);\n  }\n);\n\nexport const DropShadow = (props: AnimatedProps<DropShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/components/Defs.js

@@ -1,16 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from "react";
-import { createDeclaration } from "../nodes";
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-export const Defs = props => {
-  return /*#__PURE__*/React.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
-  }, props));
-};
-//# sourceMappingURL=Defs.js.map

package/lib/module/renderer/components/Defs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Defs.tsx"],"names":["React","createDeclaration","onDeclare","Defs","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,iBAAT,QAAkC,UAAlC;AAMA,MAAMC,SAAS,GAAGD,iBAAiB,CAAC,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALkC,CAAnC;AAOA,OAAO,MAAME,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n  // Do nothing.\n  // The goal of this component is to avoid declared paint from\n  // being used in the drawing context automatically\n  return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/components/imageFilters/DropShadow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropShadow.tsx"],"names":["React","Skia","createDeclaration","processColor","getInput","onDeclare","children","dx","dy","blur","color","shadowOnly","opacity","input","factory","ImageFilter","MakeDropShadowOnly","MakeDropShadow","DropShadow","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,QAAqB,eAArB;AACA,SAASC,iBAAT,QAAkC,yBAAlC;AAGA,SAASC,YAAT,QAA6B,qBAA7B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AAUA,MAAMC,SAAS,GAAGH,iBAAiB,CACjC,OAAsCI,QAAtC,YAAgE;AAAA,MAA/D;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAA+D;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC9D,QAAMC,KAAK,GAAGT,QAAQ,CAACE,QAAD,CAAtB;AACA,QAAMQ,OAAO,GAAGH,UAAU,GACtBV,IAAI,CAACc,WAAL,CAAiBC,kBADK,GAEtBf,IAAI,CAACc,WAAL,CAAiBE,cAFrB;AAGA,SAAOH,OAAO,CAACP,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqBN,YAAY,CAACO,KAAD,EAAQE,OAAR,CAAjC,EAAmDC,KAAnD,CAAd;AACD,CAPgC,CAAnC;AAUA,OAAO,MAAMK,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEd;AAA1B,KAAyCc,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/Color\";\nimport { processColor } from \"../../../skia/Color\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface DropShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<DropShadowProps>(\n  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {\n    const input = getInput(children);\n    const factory = shadowOnly\n      ? Skia.ImageFilter.MakeDropShadowOnly\n      : Skia.ImageFilter.MakeDropShadow;\n    return factory(dx, dy, blur, blur, processColor(color, opacity), input);\n  }\n);\n\nexport const DropShadow = (props: AnimatedProps<DropShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/typescript/src/renderer/components/Defs.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from "react";
-export interface DefsProps {
-    children: ReactNode | ReactNode[];
-}
-export declare const Defs: (props: DefsProps) => JSX.Element;

package/src/renderer/components/Defs.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-
-import { createDeclaration } from "../nodes";
-
-export interface DefsProps {
-  children: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-
-export const Defs = (props: DefsProps) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};

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

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { Skia } from "../../../skia";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { Color } from "../../../skia/Color";
-import { processColor } from "../../../skia/Color";
-
-import { getInput } from "./getInput";
-
-export interface DropShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  shadowOnly?: boolean;
-}
-
-const onDeclare = createDeclaration<DropShadowProps>(
-  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
-    const input = getInput(children);
-    const factory = shadowOnly
-      ? Skia.ImageFilter.MakeDropShadowOnly
-      : Skia.ImageFilter.MakeDropShadow;
-    return factory(dx, dy, blur, blur, processColor(color, opacity), input);
-  }
-);
-
-export const DropShadow = (props: AnimatedProps<DropShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};