@shopify/react-native-skia 0.1.115

package/src/renderer/HostConfig.ts

@@ -0,0 +1,321 @@
+/*global NodeJS, performance*/
+import type { HostConfig } from "react-reconciler";
+
+import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
+import { DeclarationNode, DrawingNode, NodeType } from "./nodes";
+import { exhaustiveCheck, mapKeys } 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
+>;
+
+// Shallow eq on props (without children)
+const shallowEq = <P extends Props>(p1: P, p2: P): boolean => {
+  const keys1 = mapKeys(p1);
+  const keys2 = mapKeys(p2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (key === "children") {
+      continue;
+    }
+    if (p1[key] !== p2[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+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 = false;
+      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: performance.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,28 @@
+import type { ReactNode } from "react";
+import React from "react";
+
+import { isImageFilter, Skia, BlendMode } from "../../skia";
+import { createDeclaration } from "../nodes";
+import type { AnimatedProps, SkEnum } from "../processors";
+import { isShader } from "../../skia/Shader/Shader";
+import { enumKey } from "../processors/Paint";
+
+interface BlendProps {
+  mode: SkEnum<typeof BlendMode>;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<BlendProps>(({ mode }, children) => {
+  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,28 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { Skia } from "../../skia";
+import { createDeclaration } from "../nodes/Declaration";
+import type { AnimatedProps } from "../processors/Animations/Animations";
+import { isColorFilter } from "../../skia/ColorFilter/ColorFilter";
+import { isImageFilter } from "../../skia/ImageFilter/ImageFilter";
+
+export interface ComposeProps {
+  children: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration((_, children) => {
+  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/Defs.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { createDeclaration } from "../nodes";
+
+export interface DefsProps {
+  children: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration(() => {
+  // Do nothing.
+  // The goal of this component is to avoid declared paint from
+  // being used in the drawing context automatically
+  return null;
+});
+
+export const Defs = (props: DefsProps) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/Group.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { RefObject } from "react";
+
+import type { SkPaint } from "../../skia";
+import { ClipOp } from "../../skia";
+import {
+  processTransform,
+  selectPaint,
+  processPaint,
+  processClip,
+} from "../processors";
+import type {
+  CustomPaintProps,
+  TransformProps,
+  AnimatedProps,
+  ClipDef,
+} from "../processors";
+import { createDrawing } from "../nodes";
+
+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 } = ctx;
+    const paint = selectPaint(ctx.paint, groupProps);
+    processPaint(paint, opacity, groupProps);
+    if (layer) {
+      if (typeof layer === "boolean") {
+        canvas.saveLayer();
+      } else if (isSkPaint(layer)) {
+        canvas.saveLayer(layer);
+      } else {
+        canvas.saveLayer(layer.current ?? undefined);
+      }
+    } else {
+      canvas.save();
+    }
+    processTransform(ctx, groupProps);
+    if (clip) {
+      const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+      processClip(canvas, clip, op);
+    }
+    node.visit({
+      ...ctx,
+      paint,
+      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
+    });
+    canvas.restore();
+  }
+);
+
+export const Group = (props: AnimatedProps<GroupProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/Mask.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import React, { useMemo } from "react";
+
+import { BlendMode, Skia } from "../../skia";
+
+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 maskPaint = useMemo(() => {
+    const paint = Skia.Paint();
+    paint.setBlendMode(BlendMode.Src);
+    if (mode === "luminance") {
+      paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
+    }
+    return paint;
+  }, [mode]);
+  const clippingPaint = useMemo(() => {
+    const paint = Skia.Paint();
+    paint.setBlendMode(BlendMode.DstIn);
+    return paint;
+  }, []);
+  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,59 @@
+import type { ReactNode } from "react";
+import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
+
+import type { SkPaint, SkImageFilter } from "../../skia";
+import {
+  isShader,
+  isMaskFilter,
+  isColorFilter,
+  Skia,
+  isImageFilter,
+  isPathEffect,
+} from "../../skia";
+import type { CustomPaintProps, AnimatedProps } from "../processors";
+import { processPaint } from "../processors";
+import { createDeclaration } from "../nodes";
+
+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 paint = useMemo(() => Skia.Paint(), []);
+    useImperativeHandle(ref, () => paint, [paint]);
+    const onDeclare = useMemo(
+      () =>
+        createDeclaration<PaintProps>((paintProps, children, ctx) => {
+          processPaint(paint, ctx.opacity, paintProps);
+          children.forEach((child) => {
+            if (isShader(child)) {
+              paint.setShader(child);
+            } else if (isMaskFilter(child)) {
+              paint.setMaskFilter(child);
+            } else if (isColorFilter(child)) {
+              paint.setColorFilter(child);
+            } else if (isPathEffect(child)) {
+              paint.setPathEffect(child);
+            }
+          });
+          const filters = children.filter(isImageFilter);
+          if (filters.length > 0) {
+            paint.setImageFilter(
+              filters
+                .reverse()
+                .reduce<SkImageFilter | null>(
+                  Skia.ImageFilter.MakeCompose,
+                  null
+                )
+            );
+          }
+          return paint;
+        }),
+      [paint]
+    );
+    return <skDeclaration onDeclare={onDeclare} {...props} />;
+  }
+);

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

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

@@ -0,0 +1,17 @@
+import type { SkColorFilter } from "../../../skia";
+import { isColorFilter, isImageFilter, Skia } from "../../../skia";
+import type { DeclarationResult } from "../../nodes";
+
+export const composeColorFilter = (
+  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;
+};