@shopify/react-native-skia 0.1.164 → 0.1.165

package/lib/module/skia/web/JsiSkRuntimeEffectFactory.js

@@ -12,7 +12,7 @@ export class JsiSkRuntimeEffectFactory extends Host {
       return null;
     }
 
-    return new JsiSkRuntimeEffect(this.CanvasKit, re);
+    return new JsiSkRuntimeEffect(this.CanvasKit, re, sksl);
   }
 
 }

package/lib/module/skia/web/JsiSkRuntimeEffectFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","JsiSkRuntimeEffect","JsiSkRuntimeEffectFactory","constructor","CanvasKit","Make","sksl","re","RuntimeEffect"],"sources":["JsiSkRuntimeEffectFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { RuntimeEffectFactory } from \"../types/RuntimeEffect/RuntimeEffectFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkRuntimeEffect } from \"./JsiSkRuntimeEffect\";\n\nexport class JsiSkRuntimeEffectFactory\n  extends Host\n  implements RuntimeEffectFactory\n{\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(sksl: string) {\n    const re = this.CanvasKit.RuntimeEffect.Make(sksl);\n    if (re === null) {\n      return null;\n    }\n    return new JsiSkRuntimeEffect(this.CanvasKit, re);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,kBAAT,QAAmC,sBAAnC;AAEA,OAAO,MAAMC,yBAAN,SACGF,IADH,CAGP;EACEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,IAAD,EAAe;IACjB,MAAMC,EAAE,GAAG,KAAKH,SAAL,CAAeI,aAAf,CAA6BH,IAA7B,CAAkCC,IAAlC,CAAX;;IACA,IAAIC,EAAE,KAAK,IAAX,EAAiB;MACf,OAAO,IAAP;IACD;;IACD,OAAO,IAAIN,kBAAJ,CAAuB,KAAKG,SAA5B,EAAuCG,EAAvC,CAAP;EACD;;AAXH"}
+{"version":3,"names":["Host","JsiSkRuntimeEffect","JsiSkRuntimeEffectFactory","constructor","CanvasKit","Make","sksl","re","RuntimeEffect"],"sources":["JsiSkRuntimeEffectFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { RuntimeEffectFactory } from \"../types/RuntimeEffect/RuntimeEffectFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkRuntimeEffect } from \"./JsiSkRuntimeEffect\";\n\nexport class JsiSkRuntimeEffectFactory\n  extends Host\n  implements RuntimeEffectFactory\n{\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(sksl: string) {\n    const re = this.CanvasKit.RuntimeEffect.Make(sksl);\n    if (re === null) {\n      return null;\n    }\n    return new JsiSkRuntimeEffect(this.CanvasKit, re, sksl);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,kBAAT,QAAmC,sBAAnC;AAEA,OAAO,MAAMC,yBAAN,SACGF,IADH,CAGP;EACEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,IAAD,EAAe;IACjB,MAAMC,EAAE,GAAG,KAAKH,SAAL,CAAeI,aAAf,CAA6BH,IAA7B,CAAkCC,IAAlC,CAAX;;IACA,IAAIC,EAAE,KAAK,IAAX,EAAiB;MACf,OAAO,IAAP;IACD;;IACD,OAAO,IAAIN,kBAAJ,CAAuB,KAAKG,SAA5B,EAAuCG,EAAvC,EAA2CD,IAA3C,CAAP;EACD;;AAXH"}

package/lib/typescript/src/dom/nodes/datatypes/Circle.d.ts

@@ -1,4 +1,7 @@
 import type { Skia } from "../../../skia/types";
 import type { CircleDef, ScalarCircleDef } from "../../types";
 export declare const isCircleScalarDef: (def: CircleDef) => def is ScalarCircleDef;
-export declare const processCircle: (Skia: Skia, def: CircleDef) => import("../../types").PointCircleDef;
+export declare const processCircle: (Skia: Skia, def: CircleDef) => {
+    c: import("../../../skia/types").SkPoint;
+    r: number;
+};

package/lib/typescript/src/dom/types/Common.d.ts

@@ -9,13 +9,13 @@ export interface ChildrenProps {
     children?: ReactNode | ReactNode[];
 }
 export interface RectCtor {
-    x: number;
-    y: number;
+    x?: number;
+    y?: number;
     width: number;
     height: number;
 }
 export interface RRectCtor extends RectCtor {
-    r: Radius;
+    r?: Radius;
 }
 export declare type RectDef = RectCtor | {
     rect: SkRect;
@@ -24,7 +24,7 @@ export declare type RRectDef = RRectCtor | {
     rect: SkRRect;
 };
 export interface PointCircleDef {
-    c: Vector;
+    c?: Vector;
     r: number;
 }
 export interface ScalarCircleDef {

package/lib/typescript/src/dom/types/Drawings.d.ts

@@ -5,7 +5,7 @@ export interface DrawingNodeProps extends GroupProps {
     paint?: SkPaint;
 }
 export declare type ImageProps = DrawingNodeProps & RectDef & {
-    fit: Fit;
+    fit?: Fit;
     image: SkImage;
 };
 export declare type CircleProps = CircleDef & DrawingNodeProps;

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

@@ -1,15 +1,9 @@
 import type { ReactNode } from "react";
 interface MaskProps {
-    mode: "luminance" | "alpha";
-    clip: boolean;
+    mode?: "luminance" | "alpha";
+    clip?: boolean;
     mask: ReactNode | ReactNode[];
     children: ReactNode | ReactNode[];
 }
-export declare const Mask: {
-    ({ children, mask, mode, clip }: MaskProps): JSX.Element;
-    defaultProps: {
-        mode: string;
-        clip: boolean;
-    };
-};
+export declare const Mask: ({ children, mask, mode, clip, }: MaskProps) => JSX.Element;
 export {};

package/lib/typescript/src/renderer/components/image/Image.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { SkiaProps } from "../../processors";
 import type { ImageProps } from "../../../dom/types";
-export declare const Image: {
-    (props: SkiaProps<ImageProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-        fit: string;
-    };
-};
+export declare const Image: (props: SkiaProps<ImageProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/image/ImageShader.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
 import type { ImageShaderProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
-export declare const ImageShader: {
-    (props: SkiaProps<ImageShaderProps>): JSX.Element;
-    defaultProps: {
-        readonly tx: "decal";
-        readonly ty: "decal";
-        readonly fm: "nearest";
-        readonly mm: "none";
-        readonly fit: "none";
-        readonly transform: readonly [];
-    };
-};
+import type { SkiaDefaultProps } from "../../processors";
+export declare const ImageShader: ({ tx, ty, fm, mm, fit, transform, ...props }: SkiaDefaultProps<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "transform">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Blur.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { BlurImageFilterProps } from "../../../dom/types";
-export declare const Blur: {
-    (props: SkiaProps<BlurImageFilterProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Blur: ({ mode, ...props }: SkiaDefaultProps<BlurImageFilterProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Morphology.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import type { MorphologyImageFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
-export declare const Morphology: {
-    (props: SkiaProps<MorphologyImageFilterProps>): JSX.Element;
-    defaultProps: {
-        operator: string;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors";
+export declare const Morphology: ({ operator, ...props }: SkiaDefaultProps<MorphologyImageFilterProps, "operator">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Offset.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { OffsetImageFilterProps } from "../../../dom/types";
-export declare const Offset: {
-    (props: SkiaProps<OffsetImageFilterProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Offset: ({ x, y, ...props }: SkiaDefaultProps<OffsetImageFilterProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/maskFilters/Blur.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { BlurMaskFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const BlurMask: {
-    (props: SkiaProps<BlurMaskFilterProps>): JSX.Element;
-    defaultProps: {
-        style: string;
-        respectCTM: boolean;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const BlurMask: ({ style, respectCTM, ...props }: SkiaDefaultProps<BlurMaskFilterProps, "style" | "respectCTM">) => JSX.Element;

package/lib/typescript/src/renderer/components/pathEffects/Discrete.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { DiscretePathEffectProps } from "../../../dom/types";
-export declare const DiscretePathEffect: {
-    (props: SkiaProps<DiscretePathEffectProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-    };
-};
+export declare const DiscretePathEffect: ({ seed, ...props }: SkiaDefaultProps<DiscretePathEffectProps, "seed">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/FractalNoise.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { FractalNoiseProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const FractalNoise: {
-    (props: SkiaProps<FractalNoiseProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-        tileWidth: number;
-        tileHeight: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const FractalNoise: ({ seed, tileWidth, tileHeight, ...props }: SkiaDefaultProps<FractalNoiseProps, "seed" | "tileHeight" | "tileWidth">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/Shader.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { ShaderProps } from "../../../dom/types";
-export declare const Shader: {
-    (props: SkiaProps<ShaderProps>): JSX.Element;
-    defaultProps: {
-        uniforms: never[];
-    };
-};
+export declare const Shader: ({ uniforms, ...props }: SkiaDefaultProps<ShaderProps, "uniforms">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/Turbulence.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { TurbulenceProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const Turbulence: {
-    (props: SkiaProps<TurbulenceProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-        tileWidth: number;
-        tileHeight: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const Turbulence: ({ seed, tileWidth, tileHeight, ...props }: SkiaDefaultProps<TurbulenceProps, "seed" | "tileWidth" | "tileHeight">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Circle.d.ts

@@ -1,12 +1,4 @@
 /// <reference types="react" />
 import type { SkiaProps } from "../../processors";
 import type { CircleProps } from "../../../dom/types";
-export declare const Circle: {
-    (props: SkiaProps<CircleProps>): JSX.Element;
-    defaultProps: {
-        c: {
-            x: number;
-            y: number;
-        };
-    };
-};
+export declare const Circle: (props: SkiaProps<CircleProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/FitBox.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { Fit } from "../../../dom/nodes";
 import type { SkRect } from "../../../skia/types";
 interface FitProps {
-    fit: Fit;
+    fit?: Fit;
     src: SkRect;
     dst: SkRect;
     children: ReactNode | ReactNode[];
@@ -16,10 +16,5 @@ export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => readonly [{
 }, {
     readonly scaleY: number;
 }];
-export declare const FitBox: {
-    ({ fit, src, dst, children }: FitProps): JSX.Element;
-    defaultProps: {
-        fit: string;
-    };
-};
+export declare const FitBox: ({ fit, src, dst, children }: FitProps) => JSX.Element;
 export {};

package/lib/typescript/src/renderer/components/shapes/Oval.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { OvalProps } from "../../../dom/types";
 import type { SkiaProps } from "../../processors";
-export declare const Oval: {
-    (props: SkiaProps<OvalProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Oval: (props: SkiaProps<OvalProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Path.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { PathProps } from "../../../dom/types";
-export declare const Path: {
-    (props: SkiaProps<PathProps>): JSX.Element;
-    defaultProps: {
-        start: number;
-        end: number;
-    };
-};
+export declare const Path: ({ start, end, ...props }: SkiaDefaultProps<PathProps, "start" | "end">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Points.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { PointsProps } from "../../../dom/types";
-export declare const Points: {
-    (props: SkiaProps<PointsProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Points: ({ mode, ...props }: SkiaDefaultProps<PointsProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/RoundedRect.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import type { RoundedRectProps } from "../../../dom/types";
 import type { SkiaProps } from "../../processors";
-export declare const RoundedRect: {
-    (props: SkiaProps<RoundedRectProps>): JSX.Element;
-    defaultProps: {
-        r: number;
-    };
-};
+export declare const RoundedRect: (props: SkiaProps<RoundedRectProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Vertices.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { VerticesProps } from "../../../dom/types";
-export declare const Vertices: {
-    (props: SkiaProps<VerticesProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Vertices: ({ mode, ...props }: SkiaDefaultProps<VerticesProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/Glyphs.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { GlyphsProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const Glyphs: {
-    (props: SkiaProps<GlyphsProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const Glyphs: ({ x, y, ...props }: SkiaDefaultProps<GlyphsProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/Text.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextProps } from "../../../dom/types";
-export declare const Text: {
-    (props: SkiaProps<TextProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Text: ({ x, y, ...props }: SkiaDefaultProps<TextProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/TextBlob.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextBlobProps } from "../../../dom/types";
-export declare const TextBlob: {
-    (props: SkiaProps<TextBlobProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const TextBlob: ({ x, y, ...props }: SkiaDefaultProps<TextBlobProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/TextPath.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextPathProps } from "../../../dom/types";
-export declare const TextPath: {
-    (props: SkiaProps<TextPathProps>): JSX.Element;
-    defaultProps: {
-        initialOffset: number;
-    };
-};
+export declare const TextPath: ({ initialOffset, ...props }: SkiaDefaultProps<TextPathProps, "initialOffset">) => JSX.Element;

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

@@ -10,3 +10,8 @@ export declare type AnimatedProps<T, O extends keyof T | never = never> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };
 export declare type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;
+declare type WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {
+    [K in N]?: T[K];
+};
+export declare type SkiaDefaultProps<T extends object, N extends keyof T> = WithOptional<SkiaProps<T>, N>;
+export {};

package/lib/typescript/src/skia/types/RuntimeEffect/RuntimeEffect.d.ts

@@ -45,4 +45,8 @@ export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
      * @param index
      */
     getUniformName(index: number): string;
+    /**
+     * Returns the SkSL source of the runtime effect shader.
+     */
+    source(): string;
 }

package/lib/typescript/src/skia/types/Shader/Shader.d.ts

@@ -4,7 +4,7 @@ import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
 export declare const isShader: (obj: SkJSIInstance<string> | null) => obj is SkShader;
 export declare type SkShader = SkJSIInstance<"Shader">;
 export declare type UniformValue = number | Vector | readonly number[];
-export declare type Uniform = UniformValue | readonly UniformValue[];
+export declare type Uniform = UniformValue | readonly UniformValue[] | Float32Array;
 export interface Uniforms {
     [name: string]: Uniform;
 }

package/lib/typescript/src/skia/web/JsiSkRuntimeEffect.d.ts

@@ -4,7 +4,9 @@ import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
 import { HostObject } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkRuntimeEffect extends HostObject<RuntimeEffect, "RuntimeEffect"> implements SkRuntimeEffect {
-    constructor(CanvasKit: CanvasKit, ref: RuntimeEffect);
+    private sksl;
+    constructor(CanvasKit: CanvasKit, ref: RuntimeEffect, sksl: string);
+    source(): string;
     makeShader(uniforms: number[], localMatrix?: SkMatrix): JsiSkShader;
     makeShaderWithChildren(uniforms: number[], children?: SkShader[], localMatrix?: SkMatrix): JsiSkShader;
     getUniform(index: number): import("canvaskit-wasm").SkSLUniform;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.164",
+  "version": "0.1.165",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/datatypes/Circle.ts

@@ -10,5 +10,5 @@ export const processCircle = (Skia: Skia, def: CircleDef) => {
   if (isCircleScalarDef(def)) {
     return { c: Skia.Point(def.cx, def.cy), r: def.r };
   }
-  return def;
+  return { ...def, c: def.c ?? { x: 0, y: 0 } };
 };

package/src/dom/nodes/datatypes/Rect.ts

@@ -16,7 +16,7 @@ const isRectCtor = (def: RectDef): def is RectCtor =>
 
 export const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {
-    return Skia.XYWHRect(def.x, def.y, def.width, def.height);
+    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);
   } else {
     return def.rect;
   }
@@ -24,9 +24,9 @@ export const processRect = (Skia: Skia, def: RectDef) => {
 
 export const processRRect = (Skia: Skia, def: RRectDef) => {
   if (isRRectCtor(def)) {
-    const r = processRadius(Skia, def.r);
+    const r = processRadius(Skia, def.r ?? 0);
     return Skia.RRectXY(
-      Skia.XYWHRect(def.x, def.y, def.width, def.height),
+      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),
       r.x,
       r.y
     );

package/src/dom/nodes/drawings/ImageNode.ts

@@ -14,7 +14,8 @@ export class ImageNode extends JsiDrawingNode<
   }
 
   deriveProps() {
-    const { image, fit } = this.props;
+    const { image } = this.props;
+    const fit = this.props.fit ?? "contain";
     const rect = processRect(this.Skia, this.props);
     const { src, dst } = fitRects(
       fit,

package/src/dom/types/Common.ts

@@ -37,21 +37,21 @@ export interface ChildrenProps {
 }
 
 export interface RectCtor {
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
   width: number;
   height: number;
 }
 
 export interface RRectCtor extends RectCtor {
-  r: Radius;
+  r?: Radius;
 }
 
 export type RectDef = RectCtor | { rect: SkRect };
 export type RRectDef = RRectCtor | { rect: SkRRect };
 
 export interface PointCircleDef {
-  c: Vector;
+  c?: Vector;
   r: number;
 }
 

package/src/dom/types/Drawings.ts

@@ -34,7 +34,7 @@ export interface DrawingNodeProps extends GroupProps {
 
 export type ImageProps = DrawingNodeProps &
   RectDef & {
-    fit: Fit;
+    fit?: Fit;
     image: SkImage;
   };
 

package/src/renderer/components/Mask.tsx

@@ -6,13 +6,18 @@ import { LumaColorFilter } from "./colorFilters/LumaColorFilter";
 import { Paint } from "./Paint";
 
 interface MaskProps {
-  mode: "luminance" | "alpha";
-  clip: boolean;
+  mode?: "luminance" | "alpha";
+  clip?: boolean;
   mask: ReactNode | ReactNode[];
   children: ReactNode | ReactNode[];
 }
 
-export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+export const Mask = ({
+  children,
+  mask,
+  mode = "alpha",
+  clip = true,
+}: MaskProps) => {
   return (
     <Group layer>
       <Group
@@ -29,8 +34,3 @@ export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
     </Group>
   );
 };
-
-Mask.defaultProps = {
-  mode: "alpha",
-  clip: true,
-};

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

@@ -6,9 +6,3 @@ import type { ImageProps } from "../../../dom/types";
 export const Image = (props: SkiaProps<ImageProps>) => {
   return <skImage {...props} />;
 };
-
-Image.defaultProps = {
-  x: 0,
-  y: 0,
-  fit: "contain",
-};

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

@@ -1,17 +1,29 @@
 import React from "react";
 
 import type { ImageShaderProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const ImageShader = (props: SkiaProps<ImageShaderProps>) => {
-  return <skImageShader {...props} />;
+export const ImageShader = ({
+  tx = "decal",
+  ty = "decal",
+  fm = "nearest",
+  mm = "none",
+  fit = "none",
+  transform = [],
+  ...props
+}: SkiaDefaultProps<
+  ImageShaderProps,
+  "tx" | "ty" | "fm" | "mm" | "fit" | "transform"
+>) => {
+  return (
+    <skImageShader
+      tx={tx}
+      ty={ty}
+      fm={fm}
+      mm={mm}
+      fit={fit}
+      transform={transform}
+      {...props}
+    />
+  );
 };
-
-ImageShader.defaultProps = {
-  tx: "decal",
-  ty: "decal",
-  fm: "nearest",
-  mm: "none",
-  fit: "none",
-  transform: [],
-} as const;

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { BlurImageFilterProps } from "../../../dom/types";
 
-export const Blur = (props: SkiaProps<BlurImageFilterProps>) => {
-  return <skBlurImageFilter {...props} />;
-};
-
-Blur.defaultProps = {
-  mode: "decal",
+export const Blur = ({
+  mode = "decal",
+  ...props
+}: SkiaDefaultProps<BlurImageFilterProps, "mode">) => {
+  return <skBlurImageFilter mode={mode} {...props} />;
 };

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

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { MorphologyImageFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const Morphology = (props: SkiaProps<MorphologyImageFilterProps>) => {
-  return <skMorphologyImageFilter {...props} />;
-};
-
-Morphology.defaultProps = {
-  operator: "dilate",
+export const Morphology = ({
+  operator = "dilate",
+  ...props
+}: SkiaDefaultProps<MorphologyImageFilterProps, "operator">) => {
+  return <skMorphologyImageFilter operator={operator} {...props} />;
 };