@shopify/react-native-skia 0.1.116 → 0.1.120

package/src/renderer/nodes/Drawing.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from "react";
-import React from "react";
+import type { DependencyList, ReactNode } from "react";
+import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import { processPaint, selectPaint } from "../processors";
+import { processPaint } from "../processors";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia";
@@ -21,16 +21,16 @@ type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>
   cb;
 
+export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
 export type DrawingProps<T> = {
   onDraw: DrawingCallback<T>;
   skipProcessing?: boolean;
   children?: ReactNode | ReactNode[];
 };
 
-export const Drawing = <P,>(props: DrawingProps<P>) => {
-  return <skDrawing {...props} />;
-};
-
 export class DrawingNode<P> extends Node<P> {
   onDraw: DrawingCallback<P>;
   skipProcessing: boolean;
@@ -51,25 +51,15 @@ export class DrawingNode<P> extends Node<P> {
     if (this.skipProcessing) {
       this.onDraw(ctx, drawingProps, this);
     } else {
-      const selectedPaint = selectPaint(ctx.paint, drawingProps);
-      processPaint(selectedPaint, ctx.opacity, drawingProps);
-      // to draw only once:
-      // onDraw({ ...ctx, paint: selectedPaint }, children);
-      [
-        selectedPaint,
-        ...this.children
-          .map((child) => {
-            //if (child.type === NodeType.Declaration) {
-            const ret = child.draw(ctx);
-            if (ret) {
-              return ret;
-            }
-            //}
-            return null;
-          })
-          .filter(isPaint),
-      ].forEach((paint) => {
-        this.onDraw({ ...ctx, paint }, drawingProps, this);
+      const declarations = this.visit(ctx);
+      const paint = processPaint(
+        ctx.paint.copy(),
+        ctx.opacity,
+        drawingProps,
+        declarations
+      );
+      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
+        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
       });
     }
   }

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,3 @@
-import { isPaint } from "../../skia";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
@@ -15,7 +14,7 @@ export abstract class Node<P = unknown> {
   readonly children: Node[] = [];
   _props: AnimatedProps<P>;
   memoizable = false;
-  memoized = false;
+  memoized: DeclarationResult | null = null;
   parent?: Node;
   depMgr: DependencyManager;
 
@@ -38,21 +37,19 @@ export abstract class Node<P = unknown> {
     return this._props;
   }
 
-  visit(ctx: DrawingContext) {
+  visit(ctx: DrawingContext, children?: Node[]) {
     const returnedValues: Exclude<DeclarationResult, null>[] = [];
-    let currentCtx = ctx;
-    this.children.forEach((child) => {
+    (children ?? this.children).forEach((child) => {
       if (!child.memoized) {
-        const ret = child.draw(currentCtx);
+        const ret = child.draw(ctx);
         if (ret) {
-          if (isPaint(ret)) {
-            currentCtx = { ...currentCtx, paint: ret };
-          }
           returnedValues.push(ret);
+          if (child.memoizable) {
+            child.memoized = ret;
+          }
         }
-        if (child.memoizable) {
-          child.memoized = true;
-        }
+      } else {
+        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/src/renderer/processors/Paint.ts

@@ -6,14 +6,22 @@ import {
   StrokeJoin,
   StrokeCap,
   processColor,
+  isShader,
+  isMaskFilter,
+  isColorFilter,
+  isPathEffect,
+  isImageFilter,
+  Skia,
 } from "../../skia";
-import type { SkPaint, Color } from "../../skia";
+import type { SkPaint, Color, SkImageFilter } from "../../skia";
+import type { DeclarationResult } from "../nodes";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export interface ChildrenProps {
   children?: ReactNode | ReactNode[];
 }
 
+// TODO: rename to paint props?
 export interface CustomPaintProps extends ChildrenProps {
   paint?: RefObject<SkPaint>;
   color?: Color;
@@ -33,6 +41,7 @@ export const processPaint = (
   paint: SkPaint,
   currentOpacity: number,
   {
+    paint: paintRef,
     color,
     blendMode,
     style,
@@ -41,8 +50,12 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
-  }: CustomPaintProps
+  }: CustomPaintProps,
+  children: DeclarationResult[]
 ) => {
+  if (paintRef && paintRef.current) {
+    return paintRef.current;
+  }
   if (color !== undefined) {
     const c = processColor(color, currentOpacity);
     paint.setShader(null);
@@ -72,34 +85,24 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
-};
-
-export const selectPaint = (
-  currentPaint: SkPaint,
-  {
-    paint,
-    color: cl,
-    blendMode,
-    style: paintStyle,
-    strokeWidth,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity,
-  }: CustomPaintProps
-) => {
-  const hasCustomPaint =
-    cl !== undefined ||
-    blendMode !== undefined ||
-    paintStyle !== undefined ||
-    strokeWidth !== undefined ||
-    strokeJoin !== undefined ||
-    opacity !== undefined ||
-    strokeCap !== undefined ||
-    strokeMiter !== undefined;
-  const parentPaint = paint?.current ?? currentPaint;
-  if (hasCustomPaint) {
-    return parentPaint.copy();
+  children.forEach((child) => {
+    if (isShader(child)) {
+      paint.setShader(child);
+    } else if (isMaskFilter(child)) {
+      paint.setMaskFilter(child);
+    } else if (isColorFilter(child)) {
+      paint.setColorFilter(child);
+    } else if (isPathEffect(child)) {
+      paint.setPathEffect(child);
+    }
+  });
+  const filters = children.filter(isImageFilter);
+  if (filters.length > 0) {
+    paint.setImageFilter(
+      filters
+        .reverse()
+        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
+    );
   }
-  return parentPaint;
+  return paint;
 };

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

@@ -1,2 +1,18 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export const mix = (value: number, x: number, y: number) =>
   x * (1 - value) + y * value;
+
+/**
+ *  @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 const clamp = (value: number, lowerBound: number, upperBound: number) =>
+  Math.min(Math.max(lowerBound, value), upperBound);

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,4 +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,7 +7,6 @@ import type { SkiaReadonlyValue } from "../values";
 
 import type {
   DrawMode,
-  SkiaViewProps,
   RNSkiaDrawCallback,
   NativeSkiaViewProps,
 } from "./types";
@@ -35,6 +35,30 @@ declare global {
 
 const { SkiaViewApi } = global;
 
+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);
@@ -103,14 +127,14 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   }
 
   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,31 +47,6 @@ export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 
 export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
 
-export type SkiaViewProps = {
-  style?: ViewProps["style"];
-  /**
-   * 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;