@shopify/react-native-skia 0.1.164 → 0.1.165

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { OffsetImageFilterProps } from "../../../dom/types";
 
-export const Offset = (props: SkiaProps<OffsetImageFilterProps>) => {
-  return <skOffsetImageFilter {...props} />;
-};
-
-Offset.defaultProps = {
-  x: 0,
-  y: 0,
+export const Offset = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<OffsetImageFilterProps, "x" | "y">) => {
+  return <skOffsetImageFilter x={x} y={y} {...props} />;
 };

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

@@ -1,13 +1,12 @@
 import React from "react";
 
 import type { BlurMaskFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const BlurMask = (props: SkiaProps<BlurMaskFilterProps>) => {
-  return <skBlurMaskFilter {...props} />;
-};
-
-BlurMask.defaultProps = {
-  style: "normal",
-  respectCTM: true,
+export const BlurMask = ({
+  style = "normal",
+  respectCTM = true,
+  ...props
+}: SkiaDefaultProps<BlurMaskFilterProps, "style" | "respectCTM">) => {
+  return <skBlurMaskFilter style={style} respectCTM={respectCTM} {...props} />;
 };

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

@@ -1,14 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { DiscretePathEffectProps } from "../../../dom/types";
 
-export const DiscretePathEffect = (
-  props: SkiaProps<DiscretePathEffectProps>
-) => {
-  return <skDiscretePathEffect {...props} />;
-};
-
-DiscretePathEffect.defaultProps = {
-  seed: 0,
+export const DiscretePathEffect = ({
+  seed = 0,
+  ...props
+}: SkiaDefaultProps<DiscretePathEffectProps, "seed">) => {
+  return <skDiscretePathEffect seed={seed} {...props} />;
 };

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

@@ -1,14 +1,23 @@
 import React from "react";
 
 import type { FractalNoiseProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const FractalNoise = (props: SkiaProps<FractalNoiseProps>) => {
-  return <skFractalNoise {...props} />;
-};
-
-FractalNoise.defaultProps = {
-  seed: 0,
-  tileWidth: 0,
-  tileHeight: 0,
+export const FractalNoise = ({
+  seed = 0,
+  tileWidth = 0,
+  tileHeight = 0,
+  ...props
+}: SkiaDefaultProps<
+  FractalNoiseProps,
+  "seed" | "tileHeight" | "tileWidth"
+>) => {
+  return (
+    <skFractalNoise
+      seed={seed}
+      tileWidth={tileWidth}
+      tileHeight={tileHeight}
+      {...props}
+    />
+  );
 };

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { ShaderProps } from "../../../dom/types";
 
-export const Shader = (props: SkiaProps<ShaderProps>) => {
-  return <skShader {...props} />;
-};
-
-Shader.defaultProps = {
-  uniforms: [],
+export const Shader = ({
+  uniforms = {},
+  ...props
+}: SkiaDefaultProps<ShaderProps, "uniforms">) => {
+  return <skShader uniforms={uniforms} {...props} />;
 };

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

@@ -1,14 +1,20 @@
 import React from "react";
 
 import type { TurbulenceProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const Turbulence = (props: SkiaProps<TurbulenceProps>) => {
-  return <skTurbulence {...props} />;
-};
-
-Turbulence.defaultProps = {
-  seed: 0,
-  tileWidth: 0,
-  tileHeight: 0,
+export const Turbulence = ({
+  seed = 0,
+  tileWidth = 0,
+  tileHeight = 0,
+  ...props
+}: SkiaDefaultProps<TurbulenceProps, "seed" | "tileWidth" | "tileHeight">) => {
+  return (
+    <skTurbulence
+      seed={seed}
+      tileWidth={tileWidth}
+      tileHeight={tileHeight}
+      {...props}
+    />
+  );
 };

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

@@ -6,7 +6,3 @@ import type { CircleProps } from "../../../dom/types";
 export const Circle = (props: SkiaProps<CircleProps>) => {
   return <skCircle {...props} />;
 };
-
-Circle.defaultProps = {
-  c: { x: 0, y: 0 },
-};

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

@@ -7,7 +7,7 @@ import type { SkRect } from "../../../skia/types";
 import { Group } from "../Group";
 
 interface FitProps {
-  fit: Fit;
+  fit?: Fit;
   src: SkRect;
   dst: SkRect;
   children: ReactNode | ReactNode[];
@@ -18,11 +18,7 @@ export const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {
   return rect2rect(rects.src, rects.dst);
 };
 
-export const FitBox = ({ fit, src, dst, children }: FitProps) => {
+export const FitBox = ({ fit = "contain", src, dst, children }: FitProps) => {
   const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);
   return <Group transform={transform}>{children}</Group>;
 };
-
-FitBox.defaultProps = {
-  fit: "contain",
-};

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

@@ -6,8 +6,3 @@ import type { SkiaProps } from "../../processors";
 export const Oval = (props: SkiaProps<OvalProps>) => {
   return <skOval {...props} />;
 };
-
-Oval.defaultProps = {
-  x: 0,
-  y: 0,
-};

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { PathProps } from "../../../dom/types";
 
-export const Path = (props: SkiaProps<PathProps>) => {
-  return <skPath {...props} />;
-};
-
-Path.defaultProps = {
-  start: 0,
-  end: 1,
+export const Path = ({
+  start = 0,
+  end = 1,
+  ...props
+}: SkiaDefaultProps<PathProps, "start" | "end">) => {
+  return <skPath start={start} end={end} {...props} />;
 };

package/src/renderer/components/shapes/Points.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 { PointsProps } from "../../../dom/types";
 
-export const Points = (props: SkiaProps<PointsProps>) => {
-  return <skPoints {...props} />;
-};
-
-Points.defaultProps = {
-  mode: "points",
+export const Points = ({
+  mode = "points",
+  ...props
+}: SkiaDefaultProps<PointsProps, "mode">) => {
+  return <skPoints mode={mode} {...props} />;
 };

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

@@ -6,7 +6,3 @@ import type { SkiaProps } from "../../processors";
 export const RoundedRect = (props: SkiaProps<RoundedRectProps>) => {
   return <skRRect {...props} />;
 };
-
-RoundedRect.defaultProps = {
-  r: 0,
-};

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { VerticesProps } from "../../../dom/types";
 
-export const Vertices = (props: SkiaProps<VerticesProps>) => {
-  return <skVertices {...props} />;
-};
-
-Vertices.defaultProps = {
-  mode: "triangles",
+export const Vertices = ({
+  mode = "triangles",
+  ...props
+}: SkiaDefaultProps<VerticesProps, "mode">) => {
+  return <skVertices mode={mode} {...props} />;
 };

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

@@ -1,13 +1,12 @@
 import React from "react";
 
 import type { GlyphsProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 
-export const Glyphs = (props: SkiaProps<GlyphsProps>) => {
-  return <skGlyphs {...props} />;
-};
-
-Glyphs.defaultProps = {
-  x: 0,
-  y: 0,
+export const Glyphs = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<GlyphsProps, "x" | "y">) => {
+  return <skGlyphs x={x} y={y} {...props} />;
 };

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextProps } from "../../../dom/types";
 
-export const Text = (props: SkiaProps<TextProps>) => {
-  return <skText {...props} />;
-};
-
-Text.defaultProps = {
-  x: 0,
-  y: 0,
+export const Text = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<TextProps, "x" | "y">) => {
+  return <skText x={x} y={y} {...props} />;
 };

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextBlobProps } from "../../../dom/types";
 
-export const TextBlob = (props: SkiaProps<TextBlobProps>) => {
-  return <skTextBlob {...props} />;
-};
-
-TextBlob.defaultProps = {
-  x: 0,
-  y: 0,
+export const TextBlob = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<TextBlobProps, "x" | "y">) => {
+  return <skTextBlob x={x} y={y} {...props} />;
 };

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextPathProps } from "../../../dom/types";
 
-export const TextPath = (props: SkiaProps<TextPathProps>) => {
-  return <skTextPath {...props} />;
-};
-
-TextPath.defaultProps = {
-  initialOffset: 0,
+export const TextPath = ({
+  initialOffset = 0,
+  ...props
+}: SkiaDefaultProps<TextPathProps, "initialOffset">) => {
+  return <skTextPath initialOffset={initialOffset} {...props} />;
 };

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

@@ -54,10 +54,16 @@ export type AnimatedProps<T, O extends keyof T | never = never> = {
     : AnimatedProp<T[K]>;
 };
 
-// TODO: switch to AnimatedProps<GroupProps> and remove duplicate properties.
-// For instance matrix in color filter becomes colorMatrix
-
 export type SkiaProps<
   P = object,
   O extends keyof P | never = never
 > = AnimatedProps<P, O>;
+
+type WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {
+  [K in N]?: T[K];
+};
+
+export type SkiaDefaultProps<
+  T extends object,
+  N extends keyof T
+> = WithOptional<SkiaProps<T>, N>;

package/src/skia/types/RuntimeEffect/RuntimeEffect.ts

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

package/src/skia/types/Shader/Shader.ts

@@ -9,7 +9,7 @@ export type SkShader = SkJSIInstance<"Shader">;
 
 export type UniformValue = number | Vector | readonly number[];
 
-export type Uniform = UniformValue | readonly UniformValue[];
+export type Uniform = UniformValue | readonly UniformValue[] | Float32Array;
 
 export interface Uniforms {
   [name: string]: Uniform;
@@ -36,10 +36,12 @@ export const processUniforms = (
     .fill(0)
     .flatMap((_, i) => {
       const name = source.getUniformName(i);
-      const value = uniforms[name];
-      if (value === undefined) {
+      const rawValue = uniforms[name];
+      if (rawValue === undefined) {
         throw new Error(`No value specified for uniform ${name}`);
       }
+      const value =
+        rawValue instanceof Float32Array ? Array.from(rawValue) : rawValue;
       const result = Array.isArray(value)
         ? value.flatMap(processValue)
         : processValue(value as UniformValue);

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -11,10 +11,14 @@ export class JsiSkRuntimeEffect
   extends HostObject<RuntimeEffect, "RuntimeEffect">
   implements SkRuntimeEffect
 {
-  constructor(CanvasKit: CanvasKit, ref: RuntimeEffect) {
+  constructor(CanvasKit: CanvasKit, ref: RuntimeEffect, private sksl: string) {
     super(CanvasKit, ref, "RuntimeEffect");
   }
 
+  source() {
+    return this.sksl;
+  }
+
   makeShader(uniforms: number[], localMatrix?: SkMatrix) {
     return new JsiSkShader(
       this.CanvasKit,

package/src/skia/web/JsiSkRuntimeEffectFactory.ts

@@ -18,6 +18,6 @@ export class JsiSkRuntimeEffectFactory
     if (re === null) {
       return null;
     }
-    return new JsiSkRuntimeEffect(this.CanvasKit, re);
+    return new JsiSkRuntimeEffect(this.CanvasKit, re, sksl);
   }
 }