@shopify/react-native-skia 1.3.6 → 1.3.7

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

@@ -1,7 +1,7 @@
 import type { SkRRect, Skia } from "../../../skia/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { DrawingContext } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
@@ -38,7 +38,7 @@ const deflate = (
 
 export class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps> {
   constructor(ctx: NodeContext, props: BoxShadowProps) {
-    super(ctx, DeclarationType.Unknown, NodeType.BoxShadow, props);
+    super(ctx, NodeType.BoxShadow, props);
   }
 
   decorate(_ctx: DeclarationContext) {

package/src/dom/nodes/paint/BlendNode.ts

@@ -1,6 +1,6 @@
 import type { BlendProps } from "../../types/ImageFilters";
 import { BlendMode } from "../../../skia/types";
-import { DeclarationType, NodeType } from "../../types/NodeType";
+import { NodeType } from "../../types/NodeType";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import { enumKey } from "../datatypes";
@@ -9,7 +9,7 @@ import { composeDeclarations } from "../../types/DeclarationContext";
 
 export class BlendNode extends JsiDeclarationNode<BlendProps> {
   constructor(ctx: NodeContext, props: BlendProps) {
-    super(ctx, DeclarationType.ImageFilter, NodeType.Blend, props);
+    super(ctx, NodeType.Blend, props);
   }
 
   decorate(ctx: DeclarationContext) {

package/src/dom/nodes/paint/ColorFilters.ts

@@ -6,14 +6,14 @@ import type {
   BlendColorFilterProps,
   MatrixColorFilterProps,
 } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import { enumKey } from "../datatypes/Enum";
 import type { LerpColorFilterProps } from "../../types/ColorFilters";
 import type { DeclarationContext } from "../../types/DeclarationContext";
 
 export abstract class ColorFilterDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, DeclarationType.ColorFilter, type, props);
+    super(ctx, type, props);
   }
 
   protected composeAndPush(ctx: DeclarationContext, cf1: SkColorFilter) {

package/src/dom/nodes/paint/ImageFilters.ts

@@ -15,7 +15,7 @@ import type {
   OffsetImageFilterProps,
   RuntimeShaderImageFilterProps,
 } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import { processRadius, enumKey } from "../datatypes";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
@@ -58,7 +58,7 @@ const MakeInnerShadow = (
 
 export abstract class ImageFilterDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, DeclarationType.ImageFilter, type, props);
+    super(ctx, type, props);
   }
 
   protected input(ctx: DeclarationContext) {

package/src/dom/nodes/paint/MaskFilters.ts

@@ -2,13 +2,13 @@ import { BlurStyle } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import type { BlurMaskFilterProps } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import { enumKey } from "../datatypes";
 import type { DeclarationContext } from "../../types/DeclarationContext";
 
 export class BlurMaskFilterNode extends JsiDeclarationNode<BlurMaskFilterProps> {
   constructor(ctx: NodeContext, props: BlurMaskFilterProps) {
-    super(ctx, DeclarationType.MaskFilter, NodeType.BlurMaskFilter, props);
+    super(ctx, NodeType.BlurMaskFilter, props);
   }
 
   decorate(ctx: DeclarationContext) {

package/src/dom/nodes/paint/PathEffects.ts

@@ -10,7 +10,7 @@ import type {
   Path1DPathEffectProps,
   Path2DPathEffectProps,
 } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import { enumKey } from "../datatypes/Enum";
 import { processPath } from "../datatypes";
 import type { DeclarationContext } from "../../types/DeclarationContext";
@@ -18,7 +18,7 @@ import { composeDeclarations } from "../../types/DeclarationContext";
 
 abstract class PathEffectDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, DeclarationType.PathEffect, type, props);
+    super(ctx, type, props);
   }
 
   protected composeAndPush(ctx: DeclarationContext, pe1: SkPathEffect) {

package/src/dom/nodes/paint/Shaders.ts

@@ -18,7 +18,7 @@ import type {
   TurbulenceProps,
   TwoPointConicalGradientProps,
 } from "../../types";
-import { DeclarationType, NodeType } from "../../types";
+import { NodeType } from "../../types";
 import {
   enumKey,
   fitRects,
@@ -30,7 +30,7 @@ import {
 
 export abstract class ShaderDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, DeclarationType.Shader, type, props);
+    super(ctx, type, props);
   }
 }
 

package/src/dom/types/Node.ts

@@ -1,5 +1,5 @@
 import type { GroupProps } from "./Common";
-import type { DeclarationType, NodeType } from "./NodeType";
+import type { NodeType } from "./NodeType";
 import type { DeclarationContext } from "./DeclarationContext";
 import type { DrawingContext } from "./DrawingContext";
 
@@ -19,7 +19,7 @@ export interface Node<P> {
 export type Invalidate = () => void;
 
 export interface DeclarationNode<P> extends Node<P> {
-  declarationType: DeclarationType;
+  //declarationType: DeclarationType;
   decorate(ctx: DeclarationContext): void;
 
   setInvalidate(invalidate: Invalidate): void;

package/src/dom/types/NodeType.ts

@@ -72,13 +72,3 @@ export const enum NodeType {
   // Paragraph
   Paragraph = "skParagraph",
 }
-
-export const enum DeclarationType {
-  Paint,
-  Shader,
-  ImageFilter,
-  ColorFilter,
-  PathEffect,
-  MaskFilter,
-  Unknown,
-}

package/src/external/reanimated/useVideo.ts

@@ -36,7 +36,6 @@ const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
       currentFrame.value.dispose();
     }
     currentFrame.value = img;
-  } else {
     copyFrameOnAndroid(currentFrame);
   }
 };
@@ -99,7 +98,6 @@ export const useVideo = (
     () => seek.value,
     (value) => {
       if (value !== null) {
-        copyFrameOnAndroid(currentFrame);
         video?.seek(value);
         currentTime.value = value;
         seek.value = null;

package/src/external/reanimated/useVideoLoading.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import type { Video } from "../../skia/types";
 import { Skia } from "../../skia";
@@ -10,17 +10,20 @@ const runtime = Rea.createWorkletRuntime("video-metadata-runtime");
 type VideoSource = string | null;
 
 export const useVideoLoading = (source: VideoSource) => {
-  const runOnJS = Rea.runOnJS;
+  const { runOnJS } = Rea;
   const [video, setVideo] = useState<Video | null>(null);
-  const cb = (src: string) => {
-    "worklet";
-    const vid = Skia.Video(src) as Video;
-    runOnJS(setVideo)(vid);
-  };
+  const cb = useCallback(
+    (src: string) => {
+      "worklet";
+      const vid = Skia.Video(src) as Video;
+      runOnJS(setVideo)(vid);
+    },
+    [runOnJS]
+  );
   useEffect(() => {
     if (source) {
       Rea.runOnRuntime(runtime, cb)(source);
     }
-  }, [source]);
+  }, [cb, source]);
   return video;
 };

package/src/skia/core/SVG.web.ts

@@ -0,0 +1,29 @@
+import { Skia } from "../Skia";
+import type { DataSourceParam } from "../types";
+
+export const useSVG = (
+  source: DataSourceParam,
+  onError?: (err: Error) => void
+) => {
+  if (source === null || source === undefined) {
+    throw new Error(`Invalid svg data source. Got: ${source}`);
+  }
+  if (
+    typeof source !== "object" ||
+    source instanceof Uint8Array ||
+    typeof source.default !== "string"
+  ) {
+    throw new Error(
+      `Invalid svg data source. Make sure that the source resolves to a string. Got: ${JSON.stringify(
+        source,
+        null,
+        2
+      )}`
+    );
+  }
+  const svg = Skia.SVG.MakeFromString(source.default);
+  if (svg === null && onError !== undefined) {
+    onError(new Error("Failed to create SVG from source."));
+  }
+  return svg;
+};

package/src/skia/types/NativeBuffer/NativeBufferFactory.ts

@@ -25,7 +25,7 @@ export const isNativeBufferWeb = (
   buffer instanceof HTMLCanvasElement ||
   buffer instanceof ImageBitmap ||
   buffer instanceof OffscreenCanvas ||
-  buffer instanceof VideoFrame ||
+  (typeof VideoFrame !== "undefined" && buffer instanceof VideoFrame) ||
   buffer instanceof HTMLImageElement ||
   buffer instanceof SVGImageElement ||
   buffer instanceof CanvasKitWebGLBuffer;

package/src/skia/web/JsiSkCanvas.ts

@@ -42,6 +42,7 @@ import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRSXform } from "./JsiSkRSXform";
+import type { JsiSkSVG } from "./JsiSkSVG";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -302,8 +303,11 @@ export class JsiSkCanvas
     );
   }
 
-  drawSvg(_svgDom: SkSVG, _width?: number, _height?: number) {
-    throw new Error("drawSvg is not implemented on React Native Web");
+  drawSvg(svg: SkSVG, _width?: number, _height?: number) {
+    const image = this.CanvasKit.MakeImageFromCanvasImageSource(
+      (svg as JsiSkSVG).ref
+    );
+    this.ref.drawImage(image, 0, 0);
   }
 
   save() {

package/src/skia/web/JsiSkSVG.ts

@@ -0,0 +1,27 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkSVG } from "../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkSVG
+  extends HostObject<HTMLImageElement, "SVG">
+  implements SkSVG
+{
+  constructor(CanvasKit: CanvasKit, ref: HTMLImageElement) {
+    super(CanvasKit, ref, "SVG");
+  }
+
+  width(): number {
+    return this.ref.width;
+  }
+  height(): number {
+    return this.ref.height;
+  }
+
+  dispose = () => {
+    if (this.ref.parentNode) {
+      this.ref.parentNode.removeChild(this.ref);
+    }
+  };
+}

package/src/skia/web/JsiSkSVGFactory.ts

@@ -1,20 +1,61 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { SkData, SkSVG } from "../types";
+import type { SkSVG } from "../types";
 import type { SVGFactory } from "../types/SVG/SVGFactory";
 
-import { Host, NotImplementedOnRNWeb } from "./Host";
+import { Host } from "./Host";
+import type { JsiSkData } from "./JsiSkData";
+import { JsiSkSVG } from "./JsiSkSVG";
 
 export class JsiSkSVGFactory extends Host implements SVGFactory {
   constructor(CanvasKit: CanvasKit) {
     super(CanvasKit);
   }
 
-  MakeFromData(_data: SkData): SkSVG | null {
-    throw new NotImplementedOnRNWeb();
+  MakeFromData(data: JsiSkData): SkSVG | null {
+    const decoder = new TextDecoder("utf-8");
+    const str = decoder.decode(data.ref);
+    return this.MakeFromString(str);
   }
 
-  MakeFromString(_str: string): SkSVG | null {
-    throw new NotImplementedOnRNWeb();
+  MakeFromString(str: string): SkSVG | null {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(str, "image/svg+xml");
+    const svgElement = svgDoc.documentElement;
+
+    const attrWidth = svgElement.getAttribute("width");
+    const attrHeight = svgElement.getAttribute("height");
+    let width = attrWidth ? parseFloat(attrWidth) : null;
+    let height = attrHeight ? parseFloat(attrHeight) : null;
+
+    const svgDataUrl =
+      "data:image/svg+xml;charset=utf-8," + encodeURIComponent(str);
+    // Create a new HTMLImageElement
+    const img = new Image();
+    img.src = svgDataUrl;
+
+    // Optionally set styles or attributes on the image
+    img.style.display = "none";
+    img.alt = "SVG Image";
+    if (!width || !height) {
+      const viewBox = svgElement.getAttribute("viewBox");
+      if (viewBox) {
+        const viewBoxValues = viewBox.split(" ");
+        if (viewBoxValues.length === 4) {
+          width = width || parseFloat(viewBoxValues[2]);
+          height = height || parseFloat(viewBoxValues[3]);
+        }
+      }
+    }
+    if (width && height) {
+      img.width = width;
+      img.height = height;
+    }
+
+    img.onerror = (e) => {
+      console.error("SVG failed to load", e);
+    };
+    document.body.appendChild(img);
+    return new JsiSkSVG(this.CanvasKit, img);
   }
 }