@shopify/react-native-skia 1.7.6 → 1.8.0

package/src/sksg/HostConfig.ts

@@ -0,0 +1,287 @@
+/*global NodeJS*/
+import type { Fiber, HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+
+import { NodeType } from "../dom/types";
+import { shallowEq } from "../renderer/typeddash";
+
+import type { Node } from "./nodes/Node";
+import type { Container } from "./Container";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+const isDeclaration = (type: NodeType) => {
+  "worklet";
+  return (
+    // BlurMaskFilters
+    type === NodeType.BlurMaskFilter ||
+    // ImageFilters
+    type === NodeType.BlendImageFilter ||
+    type === NodeType.BlurImageFilter ||
+    type === NodeType.OffsetImageFilter ||
+    type === NodeType.DropShadowImageFilter ||
+    type === NodeType.MorphologyImageFilter ||
+    type === NodeType.DisplacementMapImageFilter ||
+    type === NodeType.RuntimeShaderImageFilter ||
+    // ColorFilters
+    type === NodeType.MatrixColorFilter ||
+    type === NodeType.BlendColorFilter ||
+    type === NodeType.LumaColorFilter ||
+    type === NodeType.LinearToSRGBGammaColorFilter ||
+    type === NodeType.SRGBToLinearGammaColorFilter ||
+    type === NodeType.LerpColorFilter ||
+    // Shaders
+    type === NodeType.Shader ||
+    type === NodeType.ImageShader ||
+    type === NodeType.ColorShader ||
+    type === NodeType.Turbulence ||
+    type === NodeType.FractalNoise ||
+    type === NodeType.LinearGradient ||
+    type === NodeType.RadialGradient ||
+    type === NodeType.SweepGradient ||
+    type === NodeType.TwoPointConicalGradient ||
+    // Path Effects
+    type === NodeType.CornerPathEffect ||
+    type === NodeType.DiscretePathEffect ||
+    type === NodeType.DashPathEffect ||
+    type === NodeType.Path1DPathEffect ||
+    type === NodeType.Path2DPathEffect ||
+    type === NodeType.SumPathEffect ||
+    type === NodeType.Line2DPathEffect ||
+    // Mixed
+    type === NodeType.Blend ||
+    // Paint
+    type === NodeType.Paint
+  );
+};
+
+type Instance = Node;
+
+type Props = object;
+type TextInstance = Node;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = Node[];
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+
+type SkiaHostConfig = HostConfig<
+  NodeType,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+export const sksgHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: false,
+  isPrimaryRenderer: false,
+  supportsPersistence: true,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  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,
+    props,
+    container,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createInstance", type);
+    container.registerValues(props);
+    const instance = {
+      type,
+      isDeclaration: isDeclaration(type),
+      props,
+      children: [],
+    };
+    return instance;
+  },
+
+  appendInitialChild(parentInstance: Instance, child: Instance | TextInstance) {
+    parentInstance.children.push(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;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.clear();
+  },
+
+  prepareUpdate(
+    _instance: Instance,
+    _type: string,
+    oldProps: Props,
+    newProps: Props,
+    container: Container,
+    _hostContext: HostContext
+  ) {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    container.unregisterValues(oldProps);
+    container.registerValues(newProps);
+    return container;
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  cloneInstance(
+    instance,
+    _updatePayload,
+    _type,
+    _oldProps,
+    newProps,
+    _internalInstanceHandle,
+    keepChildren: boolean,
+    _recyclableInstance: null | Instance
+  ) {
+    debug("cloneInstance");
+
+    return {
+      type: instance.type,
+      props: newProps,
+      children: keepChildren ? [...instance.children] : [],
+      isDeclaration: instance.isDeclaration,
+    };
+  },
+
+  createContainerChildSet(): ChildSet {
+    debug("createContainerChildSet");
+    return [];
+  },
+
+  appendChildToContainerChildSet(
+    childSet: ChildSet,
+    child: Instance | TextInstance
+  ): void {
+    childSet.push(child);
+  },
+
+  finalizeContainerChildren(container: Container, newChildren: ChildSet) {
+    debug("finalizeContainerChildren");
+    container.root = newChildren;
+  },
+
+  replaceContainerChildren(container: Container, newChildren: ChildSet) {
+    debug("replaceContainerChildren");
+    container.root = newChildren;
+  },
+
+  cloneHiddenInstance(
+    _instance: Instance,
+    _type: string,
+    _props: Props
+  ): Instance {
+    debug("cloneHiddenInstance");
+    throw new Error("Not yet implemented.");
+  },
+
+  cloneHiddenTextInstance(_instance: Instance, _text: string): TextInstance {
+    debug("cloneHiddenTextInstance");
+    throw new Error("Not yet implemented.");
+  },
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    throw new Error("Function not implemented.");
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {
+    throw new Error("Function not implemented.");
+  },
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    throw new Error("Function not implemented.");
+  },
+};

package/src/sksg/Reconciler.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import type { OpaqueRoot } from "react-reconciler";
+import ReactReconciler from "react-reconciler";
+
+import type { SkCanvas, Skia } from "../skia/types";
+import { NodeType } from "../dom/types";
+
+import { debug, sksgHostConfig } from "./HostConfig";
+import { Container } from "./Container";
+
+const skiaReconciler = ReactReconciler(sksgHostConfig);
+
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia",
+});
+
+export class SkiaSGRoot {
+  private root: OpaqueRoot;
+  private container: Container;
+
+  constructor(public Skia: Skia, nativeId = -1) {
+    this.container = new Container(Skia, nativeId);
+    this.root = skiaReconciler.createContainer(
+      this.container,
+      0,
+      null,
+      true,
+      null,
+      "",
+      console.error,
+      null
+    );
+  }
+
+  get sg() {
+    const children = this.container.root;
+    return { type: NodeType.Group, props: {}, children, isDeclaration: false };
+  }
+
+  render(element: ReactNode) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    skiaReconciler.updateContainer(element as any, this.root, null, () => {
+      debug("updateContainer");
+    });
+  }
+
+  drawOnCanvas(canvas: SkCanvas) {
+    this.container.drawOnCanvas(canvas);
+  }
+
+  getPicture() {
+    const recorder = this.Skia.PictureRecorder();
+    const canvas = recorder.beginRecording();
+    this.drawOnCanvas(canvas);
+    return recorder.finishRecordingAsPicture();
+  }
+
+  unmount() {
+    this.container.unmounted = true;
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      debug("unmountContainer");
+    });
+  }
+}

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

@@ -0,0 +1,235 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NodeType } from "../../dom/types";
+import type { Node } from "../nodes";
+
+import type { SkColorFilter } from "./MockDeclaration";
+import {
+  compose,
+  DeclarationContext,
+  DeclarationType,
+} from "./MockDeclaration";
+
+const makeSRGBToLinearGammaColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "SRGBToLinearGamma",
+});
+
+const makeBlendColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "Blend",
+});
+
+const makeMatrixColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "Matrix",
+});
+
+const makeLerpColorFilter = (children: SkColorFilter[]) => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: `Lerp(0.5, ${children[0].tag}, ${children[1].tag})`,
+});
+
+const composeColorFilters = (
+  ctx: DeclarationContext,
+  node: Node<any>,
+  cf: SkColorFilter
+) => {
+  ctx.save();
+  node.children.forEach((child) => processContext(ctx, child));
+  const cf1 = ctx.colorFilters.popAllAsOne();
+  ctx.restore();
+  ctx.colorFilters.push(cf1 ? compose(cf, cf1) : cf);
+};
+
+const processContext = (ctx: DeclarationContext, node: Node<any>) => {
+  switch (node.type) {
+    case NodeType.Group:
+      node.children.forEach((child) => processContext(ctx, child));
+      break;
+    case NodeType.SRGBToLinearGammaColorFilter: {
+      const cf = makeSRGBToLinearGammaColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.BlendColorFilter: {
+      const cf = makeBlendColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.MatrixColorFilter: {
+      const cf = makeMatrixColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.LerpColorFilter: {
+      node.children.forEach((child) => processContext(ctx, child));
+      const cf = makeLerpColorFilter(ctx.colorFilters.popAll());
+      ctx.colorFilters.push(cf);
+      break;
+    }
+  }
+};
+
+describe("Declarations", () => {
+  it("should create a filter from a tree 1", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.SRGBToLinearGammaColorFilter,
+          isDeclaration: true,
+          props: {},
+          children: [
+            {
+              type: NodeType.BlendColorFilter,
+              isDeclaration: true,
+              props: {
+                color: "lightblue",
+                mode: "srcIn",
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Compose(SRGBToLinearGamma, Blend)");
+  });
+
+  it("should create a filter from a tree 2", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.LerpColorFilter,
+          isDeclaration: true,
+          props: {
+            t: 0.5,
+          },
+          children: [
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                values: [],
+              },
+              children: [],
+            },
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                values: [],
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Lerp(0.5, Matrix, Matrix)");
+  });
+
+  it("should create a filter from a tree 3", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.MatrixColorFilter,
+          isDeclaration: true,
+          props: {
+            value: [],
+          },
+          children: [],
+        },
+        {
+          type: NodeType.SRGBToLinearGammaColorFilter,
+          isDeclaration: true,
+          props: {},
+          children: [
+            {
+              type: NodeType.LerpColorFilter,
+              isDeclaration: true,
+              props: {
+                t: 0.5,
+              },
+              children: [
+                {
+                  type: NodeType.MatrixColorFilter,
+                  isDeclaration: true,
+                  props: {
+                    values: [],
+                  },
+                  children: [],
+                },
+                {
+                  type: NodeType.MatrixColorFilter,
+                  isDeclaration: true,
+                  props: {
+                    values: [],
+                  },
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe(
+      "Compose(Matrix, Compose(SRGBToLinearGamma, Lerp(0.5, Matrix, Matrix)))"
+    );
+  });
+
+  it("should create a filter from a tree 4", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.MatrixColorFilter,
+          isDeclaration: true,
+          props: {
+            value: [],
+          },
+          children: [
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                value: [],
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Compose(Matrix, Matrix)");
+  });
+});

package/src/{dom/types/DeclarationContext.ts → sksg/__tests__/MockDeclaration.ts}

@@ -1,14 +1,45 @@
-import type {
-  SkShader,
-  SkPaint,
-  SkImageFilter,
-  SkMaskFilter,
-  SkPathEffect,
-  Skia,
-  SkColorFilter,
-} from "../../skia/types";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export enum DeclarationType {
+  ColorFilter,
+  ImageFilter,
+  Shader,
+  MaskFilter,
+  PathEffect,
+  Paint,
+}
+
+interface Filter {
+  tag: string;
+}
+
+export interface SkColorFilter extends Filter {
+  type: DeclarationType.ColorFilter;
+}
+
+interface SkImageFilter extends Filter {
+  type: DeclarationType.ImageFilter;
+}
+
+interface SkShader extends Filter {
+  type: DeclarationType.Shader;
+}
+
+interface SkMaskFilter extends Filter {
+  type: DeclarationType.MaskFilter;
+}
+
+interface SkPathEffect extends Filter {
+  type: DeclarationType.PathEffect;
+}
+
+interface SkPaint extends Filter {
+  type: DeclarationType.Paint;
+}
 
 type Composer<T> = (outer: T, inner: T) => T;
+export const compose: any = <T extends Filter>(outer: T, inner: T) => ({
+  tag: `Compose(${outer.tag}, ${inner.tag})`,
+});
 
 export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
   if (filters.length <= 1) {
@@ -22,11 +53,14 @@ export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
   });
 };
 
-class Declaration<T> {
-  private decls: T[] = [];
-  private indexes = [0];
+class Declaration<T extends Filter> {
+  public decls: T[] = [];
+  public indexes = [0];
+  public composer?: Composer<T>;
 
-  constructor(private composer?: Composer<T>) {}
+  constructor(composer?: Composer<T>) {
+    this.composer = composer;
+  }
 
   private get index() {
     return this.indexes[this.indexes.length - 1];
@@ -53,6 +87,9 @@ class Declaration<T> {
   }
 
   popAllAsOne() {
+    if (this.decls.length === 0) {
+      return undefined;
+    }
     if (!this.composer) {
       throw new Error("No composer for this type of declaration");
     }
@@ -69,14 +106,10 @@ export class DeclarationContext {
   readonly imageFilters: Declaration<SkImageFilter>;
   readonly colorFilters: Declaration<SkColorFilter>;
 
-  constructor(private Skia: Skia) {
-    const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
-    const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
-      this.Skia.ImageFilter
-    );
-    const cfComp = this.Skia.ColorFilter.MakeCompose.bind(
-      this.Skia.ColorFilter
-    );
+  constructor() {
+    const peComp: Composer<SkPathEffect> = compose;
+    const ifComp: Composer<SkImageFilter> = compose;
+    const cfComp: Composer<SkColorFilter> = compose;
     this.paints = new Declaration<SkPaint>();
     this.maskFilters = new Declaration<SkMaskFilter>();
     this.shaders = new Declaration<SkShader>();