@shopify/react-native-skia 0.0.135

package/src/renderer/HostConfig.ts

@@ -0,0 +1,303 @@
+/*global NodeJS*/
+import type { HostConfig } from "react-reconciler";
+
+import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
+import { DeclarationNode, DrawingNode, NodeType } from "./nodes";
+import { exhaustiveCheck, shallowEq } from "./typeddash";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      skDeclaration: DeclarationProps<any>;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      skDrawing: DrawingProps<any>;
+    }
+  }
+}
+
+type Instance = Node;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Props = any;
+type TextInstance = Node;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = true;
+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 allChildrenAreMemoized = (node: Instance) => {
+  if (!node.memoizable) {
+    return false;
+  }
+  for (const child of node.children) {
+    if (!child.memoized) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const bustBranchMemoization = (parent: Node) => {
+  if (parent.memoizable) {
+    let ancestor: Node | undefined = parent;
+    while (ancestor) {
+      ancestor.memoized = null;
+      ancestor = ancestor.parent;
+    }
+  }
+};
+
+const bustBranchMemoizable = (parent: Node) => {
+  if (parent.memoizable) {
+    let ancestor: Node | undefined = parent;
+    while (ancestor) {
+      ancestor.memoizable = false;
+      ancestor = ancestor.parent;
+    }
+  }
+};
+
+const appendNode = (parent: Node, child: Node) => {
+  child.parent = parent;
+  bustBranchMemoization(parent);
+  if (!child.memoizable) {
+    bustBranchMemoizable(parent);
+  }
+  if (!parent.memoizable) {
+    child.memoizable = false;
+  }
+  parent.children.push(child);
+};
+
+const removeNode = (parent: Node, child: Node) => {
+  bustBranchMemoization(parent);
+  const index = parent.children.indexOf(child);
+  parent.children.splice(index, 1);
+  child.depMgr.unSubscribeNode(child);
+  // unsubscribe to all children as well
+  for (const c of child.children) {
+    removeNode(child, c);
+  }
+};
+
+const insertBefore = (parent: Node, child: Node, before: Node) => {
+  bustBranchMemoization(parent);
+  const index = parent.children.indexOf(child);
+  if (index !== -1) {
+    parent.children.splice(index, 1);
+  }
+  const beforeIndex = parent.children.indexOf(before);
+  parent.children.splice(beforeIndex, 0, child);
+};
+
+const createNode = (container: Container, type: NodeType, props: Props) => {
+  switch (type) {
+    case NodeType.Drawing:
+      const { onDraw, skipProcessing, ...p1 } = props;
+      return new DrawingNode(container.depMgr, onDraw, skipProcessing, p1);
+    case NodeType.Declaration:
+      const { onDeclare, ...p2 } = props;
+      return new DeclarationNode(container.depMgr, onDeclare, p2);
+    default:
+      // TODO: here we need to throw a nice error message
+      // This is the error that will show up when the user uses nodes not supported by Skia (View, Audio, etc)
+      return exhaustiveCheck(type);
+  }
+};
+
+export const skHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  now: Date.now,
+
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer", container, child);
+    appendNode(container, child);
+  },
+
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+
+  getRootHostContext: (_rootContainerInstance: Node) => {
+    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);
+    return createNode(container, type, props) as Node;
+  },
+
+  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;
+  },
+
+  finalizeContainerChildren: () => {
+    debug("finalizeContainerChildren");
+  },
+
+  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 && !instance.memoizable) {
+      return null;
+    }
+    debug("update ", type);
+    return true;
+  },
+
+  commitUpdate(
+    instance,
+    _updatePayload,
+    type,
+    prevProps,
+    nextProps,
+    _internalHandle
+  ) {
+    debug("commitUpdate: ", type);
+    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {
+      return;
+    }
+    bustBranchMemoization(instance);
+    instance.props = nextProps;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.children.splice(0);
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+
+  removeChildFromContainer: (parent, child) => {
+    removeNode(parent, child);
+  },
+
+  insertInContainerBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+};

package/src/renderer/components/Blend.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import React from "react";
+
+import { isImageFilter, BlendMode, isShader } from "../../skia/types";
+import { createDeclaration } from "../nodes";
+import type { AnimatedProps, SkEnum } from "../processors";
+import { enumKey } from "../processors/Paint";
+
+interface BlendProps {
+  mode: SkEnum<typeof BlendMode>;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<BlendProps>(
+  ({ mode }, children, { Skia }) => {
+    const [inner, outer] = children;
+    const blend = BlendMode[enumKey(mode)];
+    if (isImageFilter(outer) && isImageFilter(inner)) {
+      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+    } else if (isShader(outer) && isShader(inner)) {
+      return Skia.Shader.MakeBlend(blend, outer, inner);
+    }
+    throw new Error("<Blend /> can only blend Shaders or ImageFilters");
+  }
+);
+
+export const Blend = (props: AnimatedProps<BlendProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/Compose.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { isImageFilter, isColorFilter } from "../../skia/types";
+import { createDeclaration } from "../nodes/Declaration";
+import type { AnimatedProps } from "../processors/Animations/Animations";
+
+export interface ComposeProps {
+  children: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration((_, children, { Skia }) => {
+  const [inner, outer] = children;
+  if (isColorFilter(outer) && isColorFilter(inner)) {
+    return Skia.ColorFilter.MakeCompose(outer, inner);
+  } else if (isImageFilter(outer) && isImageFilter(inner)) {
+    return Skia.ImageFilter.MakeCompose(outer, inner);
+  }
+  throw new Error(
+    "ComposeFilter can only compose ColorFilters and ImageFilters"
+  );
+});
+
+export const Compose = (props: AnimatedProps<ComposeProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/Drawing.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import { createDrawing } from "../nodes/Drawing";
+
+interface DrawingProps {
+  drawing: (ctx: DrawingContext) => void;
+}
+
+const onDraw = createDrawing<DrawingProps>((ctx, { drawing }) => {
+  drawing(ctx);
+});
+
+export const Drawing = (props: DrawingProps) => {
+  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;
+};

package/src/renderer/components/Group.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import type { RefObject } from "react";
+
+import type { SkPaint } from "../../skia/types";
+import { ClipOp } from "../../skia/types";
+import {
+  processCanvasTransform,
+  processPaint,
+  processClip,
+} from "../processors";
+import type {
+  CustomPaintProps,
+  TransformProps,
+  AnimatedProps,
+  ClipDef,
+} from "../processors";
+import { createDrawing, DrawingNode } from "../nodes";
+import { isDeclarationNode } from "../nodes/Declaration";
+
+const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
+  "__typename__" in obj && obj.__typename__ === "Paint";
+
+export interface GroupProps extends CustomPaintProps, TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: RefObject<SkPaint> | SkPaint | boolean;
+}
+
+const onDraw = createDrawing<GroupProps>(
+  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
+    const { canvas, opacity, Skia } = ctx;
+    const declarations = node.children
+      .filter(isDeclarationNode)
+      .map((child) => child.draw(ctx));
+
+    const drawings = node.children.filter(
+      (child) => child instanceof DrawingNode
+    );
+    const paint = processPaint(
+      ctx.Skia,
+      ctx.paint.copy(),
+      opacity,
+      groupProps,
+      declarations
+    );
+    const hasTransform = !!groupProps.transform || !!groupProps.matrix;
+    const hasClip = !!clip;
+    const shouldSave = hasTransform || hasClip || !!layer;
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          canvas.saveLayer();
+        } else if (isSkPaint(layer)) {
+          canvas.saveLayer(layer);
+        } else {
+          canvas.saveLayer(layer.current ?? undefined);
+        }
+      } else {
+        canvas.save();
+      }
+      processCanvasTransform(ctx, groupProps);
+      if (clip) {
+        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+        processClip(Skia, canvas, clip, op);
+      }
+    }
+    node.visit(
+      {
+        ...ctx,
+        paint,
+        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
+      },
+      drawings
+    );
+    if (shouldSave) {
+      canvas.restore();
+    }
+  }
+);
+
+export const Group = (props: AnimatedProps<GroupProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/Mask.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import React, { useMemo } from "react";
+
+import { BlendMode } from "../../skia/types";
+import { useCanvas } from "../useCanvas";
+
+import { Group } from "./Group";
+
+interface MaskProps {
+  mode: "luminance" | "alpha";
+  clip: boolean;
+  mask: ReactNode | ReactNode[];
+  children: ReactNode | ReactNode[];
+}
+
+export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+  const { Skia } = useCanvas();
+  const maskPaint = useMemo(() => {
+    const paint = Skia.Paint();
+    paint.setBlendMode(BlendMode.Src);
+    if (mode === "luminance") {
+      paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
+    }
+    return paint;
+  }, [Skia, mode]);
+  const clippingPaint = useMemo(() => {
+    const paint = Skia.Paint();
+    paint.setBlendMode(BlendMode.DstIn);
+    return paint;
+  }, [Skia]);
+  return (
+    <Group layer>
+      <Group layer={maskPaint}>
+        {mask}
+        {clip && <Group layer={clippingPaint}>{children}</Group>}
+      </Group>
+      <Group blendMode="srcIn">{children}</Group>
+    </Group>
+  );
+};
+
+Mask.defaultProps = {
+  mode: "alpha",
+  clip: true,
+};

package/src/renderer/components/Paint.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
+
+import type { SkPaint } from "../../skia/types";
+import type { CustomPaintProps, AnimatedProps } from "../processors";
+import { processPaint } from "../processors";
+import { createDeclaration } from "../nodes";
+import { useCanvas } from "../useCanvas";
+
+export const usePaintRef = () => useRef<SkPaint>(null);
+
+export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
+  children?: ReactNode | ReactNode[];
+}
+
+export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
+  (props, ref) => {
+    const { Skia } = useCanvas();
+    const paint = useMemo(() => Skia.Paint(), [Skia]);
+    useImperativeHandle(ref, () => paint, [paint]);
+    const onDeclare = useMemo(
+      () =>
+        createDeclaration<PaintProps>((paintProps, children, ctx) =>
+          processPaint(ctx.Skia, paint, ctx.opacity, paintProps, children)
+        ),
+      [paint]
+    );
+    return <skDeclaration onDeclare={onDeclare} {...props} />;
+  }
+);

package/src/renderer/components/Picture.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { SkPicture } from "../../skia/types";
+import { createDrawing } from "../nodes/Drawing";
+
+export interface PictureProps {
+  picture: SkPicture;
+}
+
+const onDraw = createDrawing<PictureProps>((ctx, { picture }) => {
+  const { canvas } = ctx;
+  canvas.drawPicture(picture);
+});
+
+export const Picture = (props: PictureProps) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/backdrop/BackdropBlur.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Blur } from "../imageFilters";
+import type { AnimatedProps, Radius } from "../../processors";
+
+import type { BackdropFilterProps } from "./BackdropFilter";
+import { BackdropFilter } from "./BackdropFilter";
+
+interface BackdropBlurProps extends Omit<BackdropFilterProps, "filter"> {
+  blur: Radius;
+}
+
+export const BackdropBlur = ({
+  blur,
+  children,
+  ...props
+}: AnimatedProps<BackdropBlurProps>) => {
+  return (
+    <BackdropFilter filter={<Blur blur={blur} mode="clamp" />} {...props}>
+      {children}
+    </BackdropFilter>
+  );
+};

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import React from "react";
+
+import type { AnimatedProps } from "../../processors";
+import { createDrawing } from "../../nodes";
+import type { Node } from "../../nodes";
+import { getInput } from "../imageFilters/getInput";
+import type { GroupProps } from "../Group";
+import { Group } from "../Group";
+
+const disableFilterMemoization = (children: Node<unknown>[]) => {
+  children.forEach((child) => {
+    child.memoizable = false;
+    disableFilterMemoization(child.children);
+  });
+};
+
+export interface BackdropFilterProps extends GroupProps {
+  filter: ReactNode | ReactNode[];
+}
+
+const onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {
+  disableFilterMemoization(node.children);
+  const toFilter = node.visit(ctx);
+  const filter = getInput(ctx.Skia, toFilter);
+  if (!filter) {
+    throw new Error("No image filter provided to the background");
+  }
+  const { canvas } = ctx;
+  canvas.saveLayer(undefined, null, filter);
+  canvas.restore();
+});
+
+export const BackdropFilter = ({
+  filter: filterChild,
+  children: groupChildren,
+  ...props
+}: AnimatedProps<BackdropFilterProps>) => {
+  return (
+    <Group {...props}>
+      <skDrawing onDraw={onDraw} skipProcessing>
+        {filterChild}
+      </skDrawing>
+      {groupChildren}
+    </Group>
+  );
+};

package/src/renderer/components/backdrop/index.ts

@@ -0,0 +1,2 @@
+export * from "./BackdropFilter";
+export * from "./BackdropBlur";

package/src/renderer/components/colorFilters/BlendColor.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import type { Color } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
+import { createDeclaration } from "../../nodes";
+import type { SkEnum, AnimatedProps } from "../../processors";
+import { enumKey } from "../../processors";
+
+import { composeColorFilter } from "./Compose";
+
+export interface BlendColorProps {
+  mode: SkEnum<typeof BlendMode>;
+  color: Color;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<BlendColorProps>(
+  ({ mode, color }, children, { Skia }) => {
+    const cf = Skia.ColorFilter.MakeBlend(
+      Skia.Color(color),
+      BlendMode[enumKey(mode)]
+    );
+    return composeColorFilter(Skia, cf, children);
+  }
+);
+
+export const BlendColor = (props: AnimatedProps<BlendColorProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/colorFilters/Compose.ts

@@ -0,0 +1,18 @@
+import type { SkColorFilter, Skia } from "../../../skia/types";
+import { isColorFilter, isImageFilter } from "../../../skia/types";
+import type { DeclarationResult } from "../../nodes";
+
+export const composeColorFilter = (
+  Skia: Skia,
+  cf: SkColorFilter,
+  children: DeclarationResult[]
+) => {
+  const [col] = children.filter(isColorFilter);
+  const [img] = children.filter(isImageFilter);
+  if (col) {
+    return Skia.ColorFilter.MakeCompose(cf, col);
+  } else if (img) {
+    return Skia.ImageFilter.MakeColorFilter(cf, img);
+  }
+  return cf;
+};