@shopify/react-native-skia 1.11.8 → 1.11.9-next.1

package/src/renderer/__tests__/Picture.spec.tsx

@@ -4,7 +4,7 @@ import { processResult } from "../../__tests__/setup";
 import { Fill, Picture, Group } from "../components";
 
 import type { EmptyProps } from "./setup";
-import { wait, importSkia, mountCanvas, width } from "./setup";
+import { importSkia, mountCanvas, wait, width } from "./setup";
 
 const CheckPicture = ({}: EmptyProps) => {
   const { createPicture, Skia } = importSkia();
@@ -22,9 +22,7 @@ const CheckPicture = ({}: EmptyProps) => {
         paint.setColor(Skia.Color(color));
         canvas.drawCircle(r, r, r, paint);
       }),
-    // In a non-test environment, createPicture and Skia will be top-level, not part of the array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color]
+    [Skia, color, createPicture, r]
   );
   return (
     <Group>
@@ -63,20 +61,20 @@ const CheckPicture2 = ({}: EmptyProps) => {
 
 describe("Picture", () => {
   it("should respect dependency array", async () => {
-    const { surface, draw } = mountCanvas(<CheckPicture />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckPicture />);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
-    await wait(32);
-    draw();
+    await wait(1000);
+    await draw();
     processResult(surface, "snapshots/pictures/red.png");
   });
 
   it("should not redraw if there are no dependency", async () => {
-    const { surface, draw } = mountCanvas(<CheckPicture2 />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckPicture2 />);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
-    await wait(32);
-    draw();
+    await wait(1000);
+    await draw();
     processResult(surface, "snapshots/pictures/green.png");
   });
 });

package/src/renderer/__tests__/Simple.spec.tsx

@@ -12,8 +12,8 @@ describe("Renderer", () => {
   it("Loads renderer without Skia", () => {
     expect(SkiaRenderer).toBeDefined();
   });
-  it("Light blue rectangle", () => {
-    const surface = drawOnNode(
+  it("Light blue rectangle", async () => {
+    const surface = await drawOnNode(
       <Rect
         x={(width - size) / 2}
         y={(width - size) / 2}
@@ -24,10 +24,10 @@ describe("Renderer", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
-  it("Scaled light blue rectangle", () => {
+  it("Scaled light blue rectangle", async () => {
     const scale = 2;
     const scaled = size / scale;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ scale }]} origin={center}>
         <Rect
           x={(width - scaled) / 2}
@@ -40,7 +40,7 @@ describe("Renderer", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
-  it("Points", () => {
+  it("Points", async () => {
     const { vec } = importSkia();
     const c = { x: width / 2, y: size / 2 + 16 };
     const S = 25;
@@ -69,7 +69,7 @@ describe("Renderer", () => {
     ];
 
     const cubics = [...c1, ...c2, ...c3, ...c4];
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group color="#61DAFB" style="stroke" strokeWidth={3}>
         <Points mode="polygon" points={cubics} />
         <Line p1={c} p2={vec(size, 0)} />

package/src/renderer/__tests__/Surfaces.spec.tsx

@@ -51,11 +51,11 @@ describe("Surface", () => {
       surface.dispose();
     }
   });
-  it("A raster surface shouldn't leak (3)", () => {
+  it("A raster surface shouldn't leak (3)", async () => {
     for (let i = 0; i < 10; i++) {
       //const t = performance.now();
       const r = 128;
-      const surface = drawOnNode(
+      const surface = await drawOnNode(
         <>
           <Group blendMode="multiply">
             <Circle cx={r} cy={r} r={r} color="cyan" />

package/src/renderer/__tests__/Text.spec.tsx

@@ -16,9 +16,9 @@ import {
 } from "./setup";
 
 describe("Test different text examples", () => {
-  it("Should draw Hello World", () => {
+  it("Should draw Hello World", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Text x={0} y={fontSize} font={font} text="Hello World" />
@@ -27,13 +27,13 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/hello-world.png"));
   });
 
-  it("Should draw Hello World vertically", () => {
+  it("Should draw Hello World vertically", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const glyphs = font
       .getGlyphIDs("Hello World!")
       .map((id, i) => ({ id, pos: Skia.Point(0, (i + 1) * fontSize) }));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Glyphs font={font} glyphs={glyphs} />
@@ -42,13 +42,13 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/hello-world-vertical.png"));
   });
 
-  it("Should render the text around a circle", () => {
+  it("Should render the text around a circle", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const r = width / 2;
     path.addCircle(r, r, r / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Group transform={[{ rotate: Math.PI }]} origin={Skia.Point(r, r)}>
@@ -59,11 +59,11 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-path.png"));
   });
 
-  it("Should render a text blob", () => {
+  it("Should render a text blob", async () => {
     const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
     const { Skia } = importSkia();
     const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <TextBlob blob={blob} y={fontSize} x={0} />
@@ -72,7 +72,7 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-blob.png"));
   });
 
-  it("Should render text with Emojis", () => {
+  it("Should render text with Emojis", async () => {
     const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
@@ -85,7 +85,7 @@ describe("Test different text examples", () => {
     const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data)!;
     expect(tf).toBeTruthy();
     const emojiFont = Skia.Font(tf, fontSize);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="white" />
         <Text text="🙋🌎" font={emojiFont} y={fontSize} x={0} />
@@ -94,7 +94,7 @@ describe("Test different text examples", () => {
     processResult(surface, docPath("text/text-emoji.png"));
   });
 
-  it("Should calculate chinese text width correctly", () => {
+  it("Should calculate chinese text width correctly", async () => {
     const { Skia } = importSkia();
     const data = Skia.Data.fromBytes(
       fs.readFileSync(
@@ -109,7 +109,7 @@ describe("Test different text examples", () => {
     const font = Skia.Font(tf, fontSize);
     const text = "欢迎";
     const padding = 16;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Text
           text={text}

package/src/renderer/__tests__/Transform.spec.tsx

@@ -10,18 +10,18 @@ describe("Renderer", () => {
   it("Loads renderer without Skia", () => {
     expect(SkiaRenderer).toBeDefined();
   });
-  it("Scale with origin", () => {
+  it("Scale with origin", async () => {
     const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ scale: 0.5 }]} origin={origin}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Scale with origin using a matrix", () => {
+  it("Scale with origin using a matrix", async () => {
     const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
@@ -31,32 +31,32 @@ describe("Renderer", () => {
       .scale(0.5)
       .translate(-origin.x, -origin.y);
     expect(matrix.get()).toStrictEqual([0.5, 0, 192, 0, 0.5, 192, 0, 0, 1]);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group matrix={matrix}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Scale with matrix and origin", () => {
+  it("Scale with matrix and origin", async () => {
     const { Skia } = importSkia();
     const size = width;
     const matrix = Skia.Matrix();
     const origin = Skia.Point(size / 2, size / 2);
     matrix.scale(0.5);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group matrix={matrix} origin={origin}>
         <Rect x={0} y={0} width={size} height={size} color="lightblue" />
       </Group>
     );
     processResult(surface, "snapshots/transform/scale-origin.png");
   });
-  it("Should rotate a rectangle to 180deg", () => {
+  it("Should rotate a rectangle to 180deg", async () => {
     const { Skia } = importSkia();
     const size = width;
     const origin = Skia.Point(size / 2, size / 2);
     const w = size / 4;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group transform={[{ rotate: Math.PI }]} origin={origin}>
         <Rect
           x={origin.x - w / 2}

package/src/renderer/__tests__/documentation/Group.spec.tsx

@@ -51,12 +51,12 @@ const TestRasterization = () => {
 };
 
 describe("Group", () => {
-  it("Should use a rectangle as a clip", () => {
+  it("Should use a rectangle as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { rect } = importSkia();
     expect(image).toBeTruthy();
     const rct = rect(padding, padding, size - padding * 2, size - padding * 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="lightblue" />
         <Group clip={rct}>
@@ -73,7 +73,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-rect.png"));
   });
-  it("Should use a rounded rectangle as a clip", () => {
+  it("Should use a rounded rectangle as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { rect, rrect } = importSkia();
     expect(image).toBeTruthy();
@@ -82,7 +82,7 @@ describe("Group", () => {
       r,
       r
     );
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={rct}>
         <Image
           image={image}
@@ -96,7 +96,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-rrect.png"));
   });
-  it("Should use a path as a clip", () => {
+  it("Should use a path as a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { processTransform2d, Skia } = importSkia();
     expect(image).toBeTruthy();
@@ -105,7 +105,7 @@ describe("Group", () => {
     )!;
     expect(star).toBeTruthy();
     star.transform(processTransform2d([{ scale: 3 }]));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={star}>
         <Image
           image={image}
@@ -119,7 +119,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/clip-path.png"));
   });
-  it("Should invert a clip", () => {
+  it("Should invert a clip", async () => {
     const image = loadImage("skia/__tests__/assets/oslo.jpg");
     const { processTransform2d, Skia } = importSkia();
     expect(image).toBeTruthy();
@@ -128,7 +128,7 @@ describe("Group", () => {
     )!;
     expect(star).toBeTruthy();
     star.transform(processTransform2d([{ scale: 3 }]));
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group clip={star} invertClip>
         <Image
           image={image}
@@ -142,7 +142,7 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/invert-clip.png"));
   });
-  it("Should scale an SVG Path properly", () => {
+  it("Should scale an SVG Path properly", async () => {
     const { rect, Skia } = importSkia();
     const svgPath =
       // eslint-disable-next-line max-len
@@ -151,7 +151,7 @@ describe("Group", () => {
     expect(path).toBeTruthy();
     const src = path.computeTightBounds();
     const strokeWidth = 30 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox src={src} dst={rect(0, 0, width, height)}>
         <Path
           path={path}
@@ -164,8 +164,8 @@ describe("Group", () => {
     );
     processResult(surface, docPath("group/scale-path.png"));
   });
-  it("Should use saveLayer() properly", () => {
-    const surface = drawOnNode(<TestRasterization />);
+  it("Should use saveLayer() properly", async () => {
+    const surface = await drawOnNode(<TestRasterization />);
     processResult(surface, docPath("group/rasterize.png"));
   });
 });

package/src/renderer/__tests__/documentation/getting-started/HelloWorld.spec.tsx

@@ -35,8 +35,8 @@ describe("Getting Started / Hello World", () => {
       docPath("getting-started/hello-world/blend-modes.png")
     );
   });
-  it("Hello world with the declarative API", () => {
-    const surface = drawOnNode(
+  it("Hello world with the declarative API", async () => {
+    const surface = await drawOnNode(
       <Group blendMode="multiply">
         <Circle cx={r} cy={r} r={r} color="cyan" />
         <Circle cx={size - r} cy={r} r={r} color="magenta" />

package/src/renderer/__tests__/documentation/paint/Overview.spec.tsx

@@ -19,12 +19,12 @@ const TestPaintAssignment = () => {
 };
 
 describe("Paint", () => {
-  it("should draw the color fill and strokes properly", () => {
+  it("should draw the color fill and strokes properly", async () => {
     const { vec } = importSkia();
     const strokeWidth = 10 * PIXEL_RATIO;
     const c = vec(width / 2, height / 2);
     const r = (width - strokeWidth) / 2;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Circle c={c} r={r} color="red">
           <Paint color="lightblue" />
@@ -36,10 +36,10 @@ describe("Paint", () => {
     processResult(surface, docPath("paint/stroke.png"));
   });
 
-  it("should use paint inheritance properly", () => {
+  it("should use paint inheritance properly", async () => {
     const r = width / 6;
     const strokeWidth = 10 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group color="lightblue">
         <Circle cx={r} cy={r} r={r} />
         <Group style="stroke" strokeWidth={strokeWidth}>
@@ -50,17 +50,17 @@ describe("Paint", () => {
     processResult(surface, docPath("paint/inheritance.png"));
   });
 
-  it("should use paint assignement properly", () => {
-    const surface = drawOnNode(<TestPaintAssignment />);
+  it("should use paint assignement properly", async () => {
+    const surface = await drawOnNode(<TestPaintAssignment />);
     processResult(surface, docPath("paint/assignement.png"));
   });
 
-  it("should use the opacity property properly", () => {
+  it("should use the opacity property properly", async () => {
     const { vec } = importSkia();
     const strokeWidth = 30 * PIXEL_RATIO;
     const r = width / 2 - strokeWidth / 2;
     const c = vec(width / 2, height / 2);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group opacity={0.5}>
         <Circle c={c} r={r} color="red" />
         <Circle

package/src/renderer/__tests__/documentation/shapes/Box.spec.tsx

@@ -5,11 +5,11 @@ import { docPath, processResult } from "../../../../__tests__/setup";
 import { Box, BoxShadow, Fill } from "../../../components";
 
 describe("Box", () => {
-  it("should draw a box with inner and outer shadow", () => {
+  it("should draw a box with inner and outer shadow", async () => {
     const { rect, rrect } = importSkia();
     const size = width / 2;
     const d = 10 * PIXEL_RATIO;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Fill color="#add8e6" />
         <Box
@@ -29,9 +29,9 @@ describe("Box", () => {
     );
     processResult(surface, docPath("box/shadows.png"));
   });
-  it("should draw a box with red stroke", () => {
+  it("should draw a box with red stroke", async () => {
     const size = width / 2;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Box
           box={{ width: size, height: size, x: 1, y: 1 }}

package/src/renderer/__tests__/e2e/Atlas.spec.tsx

@@ -168,7 +168,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
@@ -211,7 +211,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
@@ -283,7 +283,7 @@ describe("Atlas", () => {
       width: size.width + strokeWidth,
       height: size.height + strokeWidth,
     };
-    const texture = drawAsImage(
+    const texture = await drawAsImage(
       <Group>
         <Rect
           rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}

package/src/renderer/__tests__/e2e/Offscreen.spec.tsx

@@ -100,7 +100,7 @@ describe("Offscreen Drawings", () => {
     const { width, height } = surface;
     const { drawAsImage } = importSkia();
     const r = width / 2;
-    const image = drawAsImage(
+    const image = await drawAsImage(
       <Circle r={r} cx={r} cy={r} color="lightblue" />,
       { width, height }
     );

package/src/renderer/__tests__/examples/BlendModes.spec.tsx

@@ -12,10 +12,10 @@ import {
 import { height, drawOnNode, width, loadImage, importSkia } from "../setup";
 
 describe("Test blend modes", () => {
-  it("Should nicely blend the product color to the image", () => {
+  it("Should nicely blend the product color to the image", async () => {
     const image = loadImage("skia/__tests__/assets/product.png");
     const rect = { x: 0, y: 0, width, height };
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Mask mask={<Image image={image} rect={rect} />}>
         <Image image={image} rect={rect}>
           <BlendColor color="lightgreen" mode="hue" />
@@ -24,12 +24,12 @@ describe("Test blend modes", () => {
     );
     processResult(surface, "snapshots/demos/product.png");
   });
-  it("Should nicely blend the product color to the image using a runtime effect", () => {
+  it("Should nicely blend the product color to the image using a runtime effect", async () => {
     const { Skia } = importSkia();
     const image = loadImage("skia/__tests__/assets/product.png");
     const rect = { x: 0, y: 0, width, height };
     const source = Skia.RuntimeEffect.Make(blender)!;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Rect rect={rect}>
         <Shader
           source={source}

package/src/renderer/__tests__/setup.tsx

@@ -176,14 +176,14 @@ export const width = 256 * PIXEL_RATIO;
 export const height = 256 * PIXEL_RATIO;
 export const center = { x: width / 2, y: height / 2 };
 
-export const drawOnNode = (element: ReactNode) => {
-  const { surface: ckSurface, draw, root } = mountCanvas(element);
-  draw();
+export const drawOnNode = async (element: ReactNode) => {
+  const { surface: ckSurface, draw, root } = await mountCanvas(element);
+  await draw();
   root.unmount();
   return ckSurface;
 };
 
-export const mountCanvas = (element: ReactNode) => {
+export const mountCanvas = async (element: ReactNode) => {
   const Skia = global.SkiaApi;
   expect(Skia).toBeDefined();
   const ckSurface = Skia.Surface.MakeOffscreen(width, height)!;
@@ -191,18 +191,18 @@ export const mountCanvas = (element: ReactNode) => {
   const canvas = ckSurface.getCanvas();
 
   const root = new SkiaSGRoot(Skia);
-  root.render(element);
   return {
     surface: ckSurface,
     root,
-    draw: () => {
+    draw: async () => {
+      await root.render(element);
       root.drawOnCanvas(canvas);
     },
   };
 };
 
-export const serialize = (element: ReactNode) => {
-  const { root } = mountCanvas(element);
+export const serialize = async (element: ReactNode) => {
+  const { root } = await mountCanvas(element);
   const serialized = serializeNode(root.sg);
   return JSON.stringify(serialized);
 };
@@ -379,11 +379,11 @@ class LocalSurface implements TestingSurface {
     return Promise.resolve(ckSurface.makeImageSnapshot());
   }
 
-  draw(node: ReactNode): Promise<SkImage> {
-    const { surface: ckSurface, draw } = mountCanvas(
+  async draw(node: ReactNode): Promise<SkImage> {
+    const { surface: ckSurface, draw } = await mountCanvas(
       <Group transform={[{ scale: PIXEL_RATIO }]}>{node}</Group>
     );
-    draw();
+    await draw();
     return Promise.resolve(ckSurface.makeImageSnapshot());
   }
 
@@ -440,8 +440,8 @@ return surface.makeImageSnapshot().encodeToBase64();
     return image;
   }
 
-  draw(node: ReactNode) {
-    return this.handleImageResponse(serialize(node));
+  async draw(node: ReactNode) {
+    return this.handleImageResponse(await serialize(node));
   }
 
   screen(screen: string) {

package/src/sksg/Container.ts

@@ -40,12 +40,20 @@ const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
 };
 
 export abstract class Container {
-  public root: Node[] = [];
+  private _root: Node[] = [];
   protected recording: Recording | null = null;
   protected unmounted = false;
 
   constructor(protected Skia: Skia, protected nativeId: number) {}
 
+  get root() {
+    return this._root;
+  }
+
+  set root(value: Node[]) {
+    this._root = value;
+  }
+
   unmount() {
     this.unmounted = true;
   }