@shopify/react-native-skia 0.1.164 → 0.1.166

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

@@ -7,9 +7,7 @@ export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
 
 export type SkShader = SkJSIInstance<"Shader">;
 
-export type UniformValue = number | Vector | readonly number[];
-
-export type Uniform = UniformValue | readonly UniformValue[];
+export type Uniform = number | Vector | Float32Array | Uniform[];
 
 export interface Uniforms {
   [name: string]: Uniform;
@@ -20,11 +18,16 @@ const isVector = (obj: unknown): obj is Vector =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (obj as any).x !== undefined && (obj as any).y !== undefined;
 
-const processValue = (value: UniformValue): number | readonly number[] => {
-  if (isVector(value)) {
-    return [value.x, value.y];
+const processValue = (values: number[], value: Uniform) => {
+  if (typeof value === "number") {
+    values.push(value);
+  } else if (Array.isArray(value)) {
+    value.forEach((v) => processValue(values, v));
+  } else if (isVector(value)) {
+    values.push(value.x, value.y);
+  } else if (value instanceof Float32Array) {
+    values.push(...value);
   }
-  return value;
 };
 
 export const processUniforms = (
@@ -32,34 +35,25 @@ export const processUniforms = (
   uniforms: Uniforms,
   builder?: SkRuntimeShaderBuilder
 ) => {
-  const processed = new Array(source.getUniformCount())
-    .fill(0)
-    .flatMap((_, i) => {
-      const name = source.getUniformName(i);
-      const value = uniforms[name];
-      if (value === undefined) {
-        throw new Error(`No value specified for uniform ${name}`);
-      }
-      const result = Array.isArray(value)
-        ? value.flatMap(processValue)
-        : processValue(value as UniformValue);
-      builder?.setUniform(name, typeof result === "number" ? [result] : result);
-      return result;
-    });
-  const names = Object.keys(uniforms);
-  if (names.length > source.getUniformCount()) {
-    const usedUniforms = new Array(source.getUniformCount())
-      .fill(0)
-      .map((_, i) => source.getUniformName(i));
-    const unusedUniform = names
-      .map((name) => {
-        if (usedUniforms.indexOf(name) === -1) {
-          return name;
-        }
-        return null;
-      })
-      .filter((n) => n !== null);
-    console.warn("Unused uniforms were provided: " + unusedUniform.join(", "));
+  const result: number[] = [];
+  const uniformsCount = source.getUniformCount();
+  for (let i = 0; i < uniformsCount; i++) {
+    const name = source.getUniformName(i);
+    const value = uniforms[name];
+    if (!value === undefined) {
+      throw new Error(
+        // eslint-disable-next-line max-len
+        `The runtime effect has the uniform value "${name}" declared, but it is missing from the uniforms property of the Runtime effect.`
+      );
+    }
+    if (builder === undefined) {
+      processValue(result, value);
+    } else {
+      const uniformValue: number[] = [];
+      processValue(uniformValue, value);
+      builder.setUniform(name, uniformValue);
+      result.push(...uniformValue);
+    }
   }
-  return processed;
+  return result;
 };

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);
   }
 }