@shopify/react-native-skia 1.3.6 → 1.3.8

package/lib/typescript/src/dom/nodes/Node.d.ts

@@ -1,5 +1,5 @@
 import type { Skia } from "../../skia/types";
-import type { Node, DeclarationNode, NodeType, DeclarationType } from "../types";
+import type { Node, DeclarationNode, NodeType } from "../types";
 import type { DeclarationContext } from "../types/DeclarationContext";
 export interface NodeContext {
     Skia: Skia;
@@ -21,9 +21,8 @@ export declare abstract class JsiNode<P> implements Node<P> {
 }
 export type Invalidate = () => void;
 export declare abstract class JsiDeclarationNode<P> extends JsiNode<P> implements DeclarationNode<P> {
-    declarationType: DeclarationType;
     private invalidate;
-    constructor(ctx: NodeContext, declarationType: DeclarationType, type: NodeType, props: P);
+    constructor(ctx: NodeContext, type: NodeType, props: P);
     abstract decorate(ctx: DeclarationContext): void;
     protected decorateChildren(ctx: DeclarationContext): void;
     addChild(child: Node<unknown>): void;

package/lib/typescript/src/dom/types/Node.d.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";
 export interface Node<P> {
@@ -14,7 +14,6 @@ export interface Node<P> {
 }
 export type Invalidate = () => void;
 export interface DeclarationNode<P> extends Node<P> {
-    declarationType: DeclarationType;
     decorate(ctx: DeclarationContext): void;
     setInvalidate(invalidate: Invalidate): void;
 }

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

@@ -57,12 +57,3 @@ export declare const enum NodeType {
     Atlas = "skAtlas",
     Paragraph = "skParagraph"
 }
-export declare const enum DeclarationType {
-    Paint = 0,
-    Shader = 1,
-    ImageFilter = 2,
-    ColorFilter = 3,
-    PathEffect = 4,
-    MaskFilter = 5,
-    Unknown = 6
-}

package/lib/typescript/src/skia/core/SVG.web.d.ts

@@ -0,0 +1,2 @@
+import type { DataSourceParam } from "../types";
+export declare const useSVG: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;

package/lib/typescript/src/skia/types/Font/FontMgr.d.ts

@@ -4,5 +4,5 @@ import type { FontStyle } from "./Font";
 export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
     countFamilies(): number;
     getFamilyName(index: number): string;
-    matchFamilyStyle(name?: string, style?: FontStyle): SkTypeface;
+    matchFamilyStyle(name: string, style: FontStyle): SkTypeface;
 }

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

@@ -27,7 +27,7 @@ export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements
     drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont): void;
     drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint): void;
     drawGlyphs(glyphs: number[], positions: SkPoint[], x: number, y: number, font: SkFont, paint: SkPaint): void;
-    drawSvg(_svgDom: SkSVG, _width?: number, _height?: number): void;
+    drawSvg(svg: SkSVG, _width?: number, _height?: number): void;
     save(): number;
     saveLayer(paint?: SkPaint, bounds?: SkRect | null, backdrop?: SkImageFilter | null, flags?: SaveLayerFlag): number;
     restore(): void;

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

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

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

@@ -1,9 +1,10 @@
 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 } from "./Host";
+import type { JsiSkData } from "./JsiSkData";
 export declare class JsiSkSVGFactory extends Host implements SVGFactory {
     constructor(CanvasKit: CanvasKit);
-    MakeFromData(_data: SkData): SkSVG | null;
-    MakeFromString(_str: string): SkSVG | null;
+    MakeFromData(data: JsiSkData): SkSVG | null;
+    MakeFromString(str: string): SkSVG | null;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -108,7 +108,7 @@
     "react-native-reanimated": "3.6.2",
     "ts-jest": "29.1.1",
     "typescript": "5.1.6",
-    "ws": "8.11.0"
+    "ws": "8.17.1"
   },
   "dependencies": {
     "canvaskit-wasm": "0.39.1",

package/src/dom/nodes/Node.ts

@@ -1,10 +1,5 @@
 import type { Skia } from "../../skia/types";
-import type {
-  Node,
-  DeclarationNode,
-  NodeType,
-  DeclarationType,
-} from "../types";
+import type { Node, DeclarationNode, NodeType } from "../types";
 import type { DeclarationContext } from "../types/DeclarationContext";
 
 export interface NodeContext {
@@ -72,12 +67,7 @@ export abstract class JsiDeclarationNode<P>
 {
   private invalidate: Invalidate = () => {};
 
-  constructor(
-    ctx: NodeContext,
-    public declarationType: DeclarationType,
-    type: NodeType,
-    props: P
-  ) {
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
     super(ctx, type, props);
   }
 

package/src/dom/nodes/PaintNode.ts

@@ -1,6 +1,6 @@
 import { StrokeCap, StrokeJoin, PaintStyle, BlendMode } from "../../skia/types";
 import type { DeclarationNode, PaintProps } from "../types";
-import { DeclarationType, NodeType } from "../types";
+import { NodeType } from "../types";
 import type { DeclarationContext } from "../types/DeclarationContext";
 
 import { enumKey } from "./datatypes";
@@ -12,7 +12,7 @@ export class PaintNode
   implements DeclarationNode<PaintProps>
 {
   constructor(ctx: NodeContext, props: PaintProps = {}) {
-    super(ctx, DeclarationType.Paint, NodeType.Paint, props);
+    super(ctx, NodeType.Paint, props);
   }
 
   decorate(ctx: DeclarationContext) {

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/Font/FontMgr.ts

@@ -6,5 +6,5 @@ import type { FontStyle } from "./Font";
 export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
   countFamilies(): number;
   getFamilyName(index: number): string;
-  matchFamilyStyle(name?: string, style?: FontStyle): SkTypeface;
+  matchFamilyStyle(name: string, style: FontStyle): SkTypeface;
 }

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