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

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", async () => {
+  it("Should nicely blend the product color to the image", () => {
     const image = loadImage("skia/__tests__/assets/product.png");
     const rect = { x: 0, y: 0, width, height };
-    const surface = await drawOnNode(
+    const surface = 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", async () => {
+  it("Should nicely blend the product color to the image using a runtime effect", () => {
     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 = await drawOnNode(
+    const surface = 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 = async (element: ReactNode) => {
-  const { surface: ckSurface, draw, root } = await mountCanvas(element);
-  await draw();
+export const drawOnNode = (element: ReactNode) => {
+  const { surface: ckSurface, draw, root } = mountCanvas(element);
+  draw();
   root.unmount();
   return ckSurface;
 };
 
-export const mountCanvas = async (element: ReactNode) => {
+export const mountCanvas = (element: ReactNode) => {
   const Skia = global.SkiaApi;
   expect(Skia).toBeDefined();
   const ckSurface = Skia.Surface.MakeOffscreen(width, height)!;
@@ -191,18 +191,18 @@ export const mountCanvas = async (element: ReactNode) => {
   const canvas = ckSurface.getCanvas();
 
   const root = new SkiaSGRoot(Skia);
+  root.render(element);
   return {
     surface: ckSurface,
     root,
-    draw: async () => {
-      await root.render(element);
+    draw: () => {
       root.drawOnCanvas(canvas);
     },
   };
 };
 
-export const serialize = async (element: ReactNode) => {
-  const { root } = await mountCanvas(element);
+export const serialize = (element: ReactNode) => {
+  const { root } = mountCanvas(element);
   const serialized = serializeNode(root.sg);
   return JSON.stringify(serialized);
 };
@@ -379,11 +379,11 @@ class LocalSurface implements TestingSurface {
     return Promise.resolve(ckSurface.makeImageSnapshot());
   }
 
-  async draw(node: ReactNode): Promise<SkImage> {
-    const { surface: ckSurface, draw } = await mountCanvas(
+  draw(node: ReactNode): Promise<SkImage> {
+    const { surface: ckSurface, draw } = mountCanvas(
       <Group transform={[{ scale: PIXEL_RATIO }]}>{node}</Group>
     );
-    await draw();
+    draw();
     return Promise.resolve(ckSurface.makeImageSnapshot());
   }
 
@@ -440,8 +440,8 @@ return surface.makeImageSnapshot().encodeToBase64();
     return image;
   }
 
-  async draw(node: ReactNode) {
-    return this.handleImageResponse(await serialize(node));
+  draw(node: ReactNode) {
+    return this.handleImageResponse(serialize(node));
   }
 
   screen(screen: string) {

package/src/sksg/Container.ts

@@ -40,20 +40,12 @@ const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
 };
 
 export abstract class Container {
-  private _root: Node[] = [];
+  public 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;
   }

package/src/sksg/HostConfig.ts

@@ -1,5 +1,4 @@
 /*global NodeJS*/
-import { createContext } from "react";
 import type { Fiber, HostConfig } from "react-reconciler";
 import { DefaultEventPriority } from "react-reconciler/constants";
 
@@ -9,9 +8,6 @@ import { shallowEq } from "../renderer/typeddash";
 import type { Node } from "./Node";
 import type { Container } from "./Container";
 
-type EventPriority = number;
-const NoEventPriority = 0;
-
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
   if (DEBUG) {
@@ -26,7 +22,7 @@ type TextInstance = Node;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
 type PublicInstance = Instance;
-type HostContext = object;
+type HostContext = null;
 type UpdatePayload = Container;
 type ChildSet = Node[];
 type TimeoutHandle = NodeJS.Timeout;
@@ -47,7 +43,6 @@ type SkiaHostConfig = HostConfig<
   TimeoutHandle,
   NoTimeout
 >;
-let currentUpdatePriority: EventPriority = NoEventPriority;
 
 export const sksgHostConfig: SkiaHostConfig = {
   /**
@@ -64,12 +59,12 @@ export const sksgHostConfig: SkiaHostConfig = {
 
   getRootHostContext: (_rootContainerInstance: Container) => {
     debug("getRootHostContext");
-    return {};
+    return null;
   },
 
   getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
     debug("getChildHostContext");
-    return {};
+    return null;
   },
 
   shouldSetTextContent(_type, _props) {
@@ -130,8 +125,9 @@ export const sksgHostConfig: SkiaHostConfig = {
     return null;
   },
 
-  resetAfterCommit(_container) {
+  resetAfterCommit(container) {
     debug("resetAfterCommit");
+    container.redraw();
   },
 
   getPublicInstance(node: Instance) {
@@ -173,15 +169,16 @@ export const sksgHostConfig: SkiaHostConfig = {
 
   cloneInstance(
     instance,
+    _updatePayload,
     _type,
     _oldProps,
     newProps,
-    _updatePayload,
     _internalInstanceHandle,
     keepChildren: boolean,
     _recyclableInstance: null | Instance
   ) {
     debug("cloneInstance");
+
     return {
       type: instance.type,
       props: newProps,
@@ -237,31 +234,4 @@ export const sksgHostConfig: SkiaHostConfig = {
   getInstanceFromScope: function (_scopeInstance): Instance | null {
     throw new Error("Function not implemented.");
   },
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  shouldAttemptEagerTransition: () => false,
-  trackSchedulerEvent: () => {},
-  resolveEventType: () => null,
-  resolveEventTimeStamp: () => -1.1,
-  requestPostPaintCallback() {},
-  maySuspendCommit: () => false,
-  preloadInstance: () => true, // true indicates already loaded
-  startSuspendingCommit() {},
-  suspendInstance() {},
-  waitForCommitToBeReady: () => null,
-  NotPendingTransition: null,
-  HostTransitionContext: createContext(null),
-  setCurrentUpdatePriority(newPriority: number) {
-    currentUpdatePriority = newPriority;
-  },
-  getCurrentUpdatePriority() {
-    return currentUpdatePriority;
-  },
-  resolveUpdatePriority() {
-    if (currentUpdatePriority !== NoEventPriority) {
-      return currentUpdatePriority;
-    }
-    return DefaultEventPriority;
-  },
-  resetFormInstance() {},
 };

package/src/sksg/HostConfig2.ts

@@ -0,0 +1,247 @@
+/*global NodeJS*/
+import type { Fiber, HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+
+import type { NodeType } from "../dom/types";
+import { shallowEq } from "../renderer/typeddash";
+
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+type Instance = Node<unknown>;
+
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+
+type SkiaHostConfig = HostConfig<
+  NodeType,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.push(child);
+};
+
+const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.splice(parent.children.indexOf(child), 1);
+};
+
+const insertBefore = (
+  parent: Node<unknown>,
+  child: Node<unknown>,
+  before: Node<unknown>
+) => {
+  parent.children.splice(parent.children.indexOf(before), 0, child);
+};
+
+export const sksgHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer");
+    container.root.push(child);
+  },
+
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+
+  getRootHostContext: (_rootContainerInstance: Container) => {
+    debug("getRootHostContext");
+    return null;
+  },
+
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+
+  createTextInstance(
+    _text,
+    _rootContainerInstance,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createTextInstance");
+    // return SpanNode({}, text) as SkNode;
+    throw new Error("Text nodes are not supported yet");
+  },
+
+  createInstance(
+    type,
+    propsWithChildren,
+    _container,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createInstance", type);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = propsWithChildren as any;
+    debug("createInstance", type);
+    const instance = {
+      type,
+      props,
+      children: [],
+    };
+    return instance;
+  },
+
+  appendInitialChild(parentInstance, child) {
+    debug("appendInitialChild");
+    appendNode(parentInstance, child);
+  },
+
+  finalizeInitialChildren(
+    parentInstance,
+    _type,
+    _props,
+    _rootContainerInstance,
+    _hostContext
+  ) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+
+  getPublicInstance(node: Instance) {
+    debug("getPublicInstance");
+    return node;
+  },
+
+  prepareUpdate: (
+    _instance,
+    type,
+    oldProps,
+    newProps,
+    rootContainerInstance,
+    _hostContext
+  ) => {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    debug("update ", type);
+    return rootContainerInstance;
+  },
+
+  commitUpdate(
+    instance,
+    _updatePayload,
+    type,
+    prevProps,
+    nextProps,
+    _internalHandle
+  ) {
+    debug("commitUpdate: ", type);
+    if (shallowEq(prevProps, nextProps)) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = nextProps as any;
+    instance.props = props;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.root = [];
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+
+  removeChildFromContainer: (container, child) => {
+    container.root.splice(container.root.indexOf(child), 1);
+  },
+
+  insertInContainerBefore: (container, child, before) => {
+    container.root.splice(container.root.indexOf(before), 0, child);
+  },
+
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    return null;
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {},
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    return null;
+  },
+};

package/src/sksg/Reconciler.ts

@@ -41,21 +41,13 @@ export class SkiaSGRoot {
     return { type: NodeType.Group, props: {}, children, isDeclaration: false };
   }
 
-  private updateContainer(element: ReactNode) {
-    return new Promise((resolve) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      skiaReconciler.updateContainer(element as any, this.root, null, () => {
-        debug("updateContainer");
-        resolve(true);
-      });
+  render(element: ReactNode) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    skiaReconciler.updateContainer(element as any, this.root, null, () => {
+      debug("updateContainer");
     });
   }
 
-  async render(element: ReactNode) {
-    await this.updateContainer(element);
-    this.container.redraw();
-  }
-
   drawOnCanvas(canvas: SkCanvas) {
     this.container.drawOnCanvas(canvas);
   }
@@ -69,11 +61,8 @@ export class SkiaSGRoot {
 
   unmount() {
     this.container.unmount();
-    return new Promise((resolve) => {
-      skiaReconciler.updateContainer(null, this.root, null, () => {
-        debug("unmountContainer");
-        resolve(true);
-      });
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      debug("unmountContainer");
     });
   }
 }

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

@@ -39,10 +39,10 @@ const Ring = ({ index, progress, width, center }: RingProps) => {
 };
 
 describe("Simple", () => {
-  it("should have a simple render (1)", async () => {
+  it("should have a simple render (1)", () => {
     const { Skia } = importSkia();
     const root = new SkiaSGRoot(Skia);
-    await root.render(<skCircle r={128} color="cyan" />);
+    root.render(<skCircle r={128} color="cyan" />);
     const surface = Skia.Surface.Make(768, 768)!;
     expect(surface).toBeDefined();
     const canvas = surface.getCanvas();
@@ -52,10 +52,10 @@ describe("Simple", () => {
     expect(image).toBeDefined();
     checkImage(image, "snapshots/sksg/simple.png");
   });
-  it("should have a simple render (2)", async () => {
+  it("should have a simple render (2)", () => {
     const { Skia } = importSkia();
     const root = new SkiaSGRoot(Skia);
-    await root.render(
+    root.render(
       <>
         <skFill color="magenta" />
         <skCircle r={128} cx={768 / 2} cy={768 / 2} color="cyan" />
@@ -70,7 +70,7 @@ describe("Simple", () => {
     expect(image).toBeDefined();
     checkImage(image, "snapshots/sksg/simple2.png");
   });
-  it("simple demo", async () => {
+  it("simple demo", () => {
     const { Skia } = importSkia();
     const root = new SkiaSGRoot(Skia);
     const width = 768;
@@ -78,7 +78,7 @@ describe("Simple", () => {
     const center = { x: width / 2, y: height / 2 };
     const progress = 0.5;
     const transform = (() => [{ rotate: mix(progress, -Math.PI, 0) }])();
-    await root.render(
+    root.render(
       <>
         <skFill color="rgb(36,43,56)" />
         <skGroup blendMode="screen" origin={center} transform={transform}>
@@ -108,7 +108,7 @@ describe("Simple", () => {
     checkImage(image, "snapshots/sksg/breathe.png");
   });
 
-  it("simple demo (2)", async () => {
+  it("simple demo (2)", () => {
     const { Skia } = importSkia();
     const root = new SkiaSGRoot(Skia);
     const width = 768;
@@ -116,7 +116,7 @@ describe("Simple", () => {
     const center = { x: width / 2, y: height / 2 };
     const progress = 0;
     const transform = (() => [{ rotate: mix(progress, -Math.PI, 0) }])();
-    await root.render(
+    root.render(
       <>
         <skFill color="rgb(36,43,56)" />
         <skGroup blendMode="screen" origin={center} transform={transform}>

package/cpp/skia/include/gpu/graphite/LogPriority.h

@@ -1,36 +0,0 @@
-/*
- * Copyright 2024 Google LLC
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef skgpu_graphite_LogPriority_DEFINED
-#define skgpu_graphite_LogPriority_DEFINED
-
-/**
- * Note: this file may be included in clients' SkUserConfig.h files, so including any other headers
- * in this file should be avoided.
- */
-
-namespace skgpu::graphite {
-/**
- * SKGPU_GRAPHITE_LOWEST_ACTIVE_LOG_PRIORITY can be defined to one of these values (in
- * SkUserConfig.h) to control Graphite's logging behavior.
- *
- * For example:
- * ```
- * #define SKGPU_GRAPHITE_LOWEST_ACTIVE_LOG_PRIORITY skgpu::graphite::LogPriority::kWarning
- * ```
- * Would cause Graphite to log warnings, non-fatal errors, and fatal errors.
- * However, debug logs would be omitted.
- */
-enum class LogPriority : int {
-    kFatal = 0,
-    kError = 1,
-    kWarning = 2,
-    kDebug = 3,
-};
-};  // namespace skgpu::graphite
-
-#endif // skgpu_graphite_LogPriority_DEFINED

package/cpp/skia/include/gpu/graphite/PrecompileContext.h

@@ -1,52 +0,0 @@
-/*
- * Copyright 2024 Google LLC
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef skgpu_graphite_PrecompileContext_DEFINED
-#define skgpu_graphite_PrecompileContext_DEFINED
-
-#include "include/core/SkRefCnt.h"
-#include "include/private/base/SingleOwner.h"
-
-#include <chrono>
-#include <memory>
-
-namespace skgpu::graphite {
-
-class SharedContext;
-class PrecompileContextPriv;
-class ResourceProvider;
-
-class SK_API PrecompileContext {
-public:
-    ~PrecompileContext();
-
-    /**
-     * Purge Pipelines that haven't been used in the past 'msNotUsed' milliseconds
-     * regardless of whether the pipeline cache is under budget.
-     *
-     * @param msNotUsed   Pipelines not used in these last milliseconds will be cleaned up.
-     */
-    void purgePipelinesNotUsedInMs(std::chrono::milliseconds msNotUsed);
-
-    // Provides access to functions that aren't part of the public API.
-    PrecompileContextPriv priv();
-    const PrecompileContextPriv priv() const;  // NOLINT(readability-const-return-type)
-
-private:
-    friend class PrecompileContextPriv;
-    friend class Context; // for ctor
-
-    PrecompileContext(sk_sp<SharedContext>);
-
-    mutable SingleOwner fSingleOwner;
-    sk_sp<SharedContext> fSharedContext;
-    std::unique_ptr<ResourceProvider> fResourceProvider;
-};
-
-}  // namespace skgpu::graphite
-
-#endif // skgpu_graphite_PrecompileContext_DEFINED