@shopify/react-native-skia 0.1.146 → 0.1.148

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

@@ -1,31 +1,10 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps, Radius } from "../../processors";
-import { processRadius } from "../../processors/Radius";
+import type { MorphologyImageFilterProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-import { getInput } from "./getInput";
-
-export interface MorphologyProps {
-  operator: "erode" | "dilate";
-  radius: Radius;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-const onDeclare = createDeclaration<MorphologyProps>(
-  ({ radius, operator }, children, { Skia }) => {
-    const input = getInput(Skia, children);
-    const r = processRadius(Skia, radius);
-    const factory =
-      operator === "dilate"
-        ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter)
-        : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);
-    return factory(r.x, r.y, input);
-  }
-);
-
-export const Morphology = (props: AnimatedProps<MorphologyProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Morphology = (props: SkiaProps<MorphologyImageFilterProps>) => {
+  return <skMorphologyImageFilter {...props} />;
 };
 
 Morphology.defaultProps = {

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

@@ -1,25 +1,10 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { OffsetImageFilterProps } from "../../../dom/types";
 
-import { getInput } from "./getInput";
-
-export interface OffsetProps {
-  x: number;
-  y: number;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<OffsetProps>(
-  ({ x, y }, children, { Skia }) => {
-    return Skia.ImageFilter.MakeOffset(x, y, getInput(Skia, children));
-  }
-);
-
-export const Offset = (props: AnimatedProps<OffsetProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Offset = (props: SkiaProps<OffsetImageFilterProps>) => {
+  return <skOffsetImageFilter {...props} />;
 };
 
 Offset.defaultProps = {

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

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

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

@@ -1,42 +1,8 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { Color } from "../../../skia/types";
-import { processColor } from "../../processors/Color";
+import type { DropShadowImageFilterProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 
-import { getInput } from "./getInput";
-import { MakeInnerShadow } from "./InnerShadow";
-
-export interface ShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  inner?: boolean;
-  shadowOnly?: boolean;
-}
-
-const onDeclare = createDeclaration<ShadowProps>(
-  (
-    { dx, dy, blur, color: cl, shadowOnly, inner },
-    children,
-    { opacity, Skia }
-  ) => {
-    const input = getInput(Skia, children);
-    const color = processColor(Skia, cl, opacity);
-    let factory;
-    if (inner) {
-      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
-    } else {
-      factory = shadowOnly
-        ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter)
-        : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);
-    }
-    return factory(dx, dy, blur, blur, color, input);
-  }
-);
-
-export const Shadow = (props: AnimatedProps<ShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Shadow = (props: SkiaProps<DropShadowImageFilterProps>) => {
+  return <skDropShadowImageFilter {...props} />;
 };

package/src/renderer/components/index.ts

@@ -13,6 +13,5 @@ export * from "./Picture";
 export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
-export * from "./Compose";
 export * from "./Blend";
 export * from "./Drawing";

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

@@ -1,29 +1,10 @@
 import React from "react";
 
-import { BlurStyle } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { SkEnum } from "../../processors";
-import { enumKey } from "../../processors";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { BlurMaskFilterProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 
-export interface BlurMaskProps {
-  style: SkEnum<typeof BlurStyle>;
-  blur: number;
-  respectCTM: boolean;
-}
-
-const onDeclare = createDeclaration<BlurMaskProps>(
-  ({ style, blur, respectCTM }, _, { Skia }) => {
-    return Skia.MaskFilter.MakeBlur(
-      BlurStyle[enumKey(style)],
-      blur,
-      respectCTM
-    );
-  }
-);
-
-export const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const BlurMask = (props: SkiaProps<BlurMaskFilterProps>) => {
+  return <skBlurMaskFilter {...props} />;
 };
 
 BlurMask.defaultProps = {

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

@@ -1,31 +1,8 @@
-import type { ReactNode } from "react";
 import React from "react";
 
-import { isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { CornerPathEffectProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-export interface CornerPathEffectProps {
-  r: number;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<CornerPathEffectProps>(
-  ({ r }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakeCorner(r);
-    if (child) {
-      if (!pe) {
-        return child;
-      }
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
-
-export const CornerPathEffect = (
-  props: AnimatedProps<CornerPathEffectProps>
-) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const CornerPathEffect = (props: SkiaProps<CornerPathEffectProps>) => {
+  return <skCornerPathEffect {...props} />;
 };

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

@@ -1,27 +1,8 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { DashPathEffectProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-export interface DashPathEffectProps {
-  intervals: number[];
-  phase?: number;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<DashPathEffectProps>(
-  ({ intervals, phase }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakeDash(intervals, phase);
-    if (child) {
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
-
-export const DashPathEffect = (props: AnimatedProps<DashPathEffectProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const DashPathEffect = (props: SkiaProps<DashPathEffectProps>) => {
+  return <skDashPathEffect {...props} />;
 };

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

@@ -1,32 +1,12 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-
-export interface DiscretePathEffectProps {
-  length: number;
-  deviation: number;
-  seed: number;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<DiscretePathEffectProps>(
-  ({ length, deviation, seed }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakeDiscrete(length, deviation, seed);
-    if (child) {
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { DiscretePathEffectProps } from "../../../dom/types";
 
 export const DiscretePathEffect = (
-  props: AnimatedProps<DiscretePathEffectProps>
+  props: SkiaProps<DiscretePathEffectProps>
 ) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+  return <skDiscretePathEffect {...props} />;
 };
 
 DiscretePathEffect.defaultProps = {

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

@@ -1,33 +1,8 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { Line2DPathEffectProps } from "../../../dom/types";
 
-export interface Line2DPathEffectProps {
-  children?: ReactNode | ReactNode[];
-  width: number;
-  matrix: SkMatrix;
-}
-
-const onDeclare = createDeclaration<Line2DPathEffectProps>(
-  ({ width, matrix }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakeLine2D(width, matrix);
-    if (child) {
-      if (!pe) {
-        return child;
-      }
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
-
-export const Line2DPathEffect = (
-  props: AnimatedProps<Line2DPathEffectProps>
-) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Line2DPathEffect = (props: SkiaProps<Line2DPathEffectProps>) => {
+  return <skLine2DPathEffect {...props} />;
 };

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

@@ -1,43 +1,8 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { Path1DEffectStyle, isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkEnum } from "../../processors/Paint";
-import { enumKey } from "../../processors/Paint";
-import type { PathDef } from "../../processors/Paths";
-import { processPath } from "../../processors/Paths";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { Path1DPathEffectProps } from "../../../dom/types";
 
-export interface Path1DPathEffectProps {
-  path: PathDef;
-  children?: ReactNode | ReactNode[];
-  advance: number;
-  phase: number;
-  style: SkEnum<typeof Path1DEffectStyle>;
-}
-
-const onDeclare = createDeclaration<Path1DPathEffectProps>(
-  ({ path, advance, phase, style }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakePath1D(
-      processPath(Skia, path),
-      advance,
-      phase,
-      Path1DEffectStyle[enumKey(style)]
-    );
-    if (child) {
-      if (!pe) {
-        return child;
-      }
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
-
-export const Path1DPathEffect = (
-  props: AnimatedProps<Path1DPathEffectProps>
-) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Path1DPathEffect = (props: SkiaProps<Path1DPathEffectProps>) => {
+  return <skPath1DPathEffect {...props} />;
 };

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

@@ -1,35 +1,8 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { isPathEffect } from "../../../skia/types";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia/types";
-import type { PathDef } from "../../processors/Paths";
-import { processPath } from "../../processors/Paths";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { Path2DPathEffectProps } from "../../../dom/types";
 
-export interface Path2DPathEffectProps {
-  children?: ReactNode | ReactNode[];
-  matrix: SkMatrix;
-  path: PathDef;
-}
-
-const onDeclare = createDeclaration<Path2DPathEffectProps>(
-  ({ path, matrix }, children, { Skia }) => {
-    const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakePath2D(matrix, processPath(Skia, path));
-    if (child) {
-      if (!pe) {
-        return child;
-      }
-      return Skia.PathEffect.MakeCompose(pe, child);
-    }
-    return pe;
-  }
-);
-
-export const Path2DPathEffect = (
-  props: AnimatedProps<Path2DPathEffectProps>
-) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Path2DPathEffect = (props: SkiaProps<Path2DPathEffectProps>) => {
+  return <skPath2DPathEffect {...props} />;
 };

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

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

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

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

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

@@ -1,32 +1,10 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { FractalNoiseProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 
-export interface FractalNoiseProps {
-  freqX: number;
-  freqY: number;
-  octaves: number;
-  seed: number;
-  tileWidth: number;
-  tileHeight: number;
-}
-
-const onDeclare = createDeclaration<FractalNoiseProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
-    return Skia.Shader.MakeFractalNoise(
-      freqX,
-      freqY,
-      octaves,
-      seed,
-      tileWidth,
-      tileHeight
-    );
-  }
-);
-
-export const FractalNoise = (props: AnimatedProps<FractalNoiseProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const FractalNoise = (props: SkiaProps<FractalNoiseProps>) => {
+  return <skFractalNoise {...props} />;
 };
 
 FractalNoise.defaultProps = {

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

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

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

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

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

@@ -1,30 +1,10 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
-import { isShader, processUniforms } from "../../../skia/types";
-import type { AnimatedProps, TransformProps } from "../../processors";
-import { createDeclaration } from "../../nodes/Declaration";
-import { localMatrix } from "../../processors";
+import type { SkiaProps } from "../../processors";
+import type { ShaderProps } from "../../../dom/types";
 
-export interface ShaderProps extends TransformProps {
-  source: SkRuntimeEffect;
-  uniforms: Uniforms;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<ShaderProps>(
-  ({ uniforms, source, ...transform }, children, { Skia }) => {
-    return source.makeShaderWithChildren(
-      processUniforms(source, uniforms),
-      children.filter(isShader),
-      localMatrix(Skia.Matrix(), transform)
-    );
-  }
-);
-
-export const Shader = (props: AnimatedProps<ShaderProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Shader = (props: SkiaProps<ShaderProps>) => {
+  return <skShader {...props} />;
 };
 
 Shader.defaultProps = {