@shopify/react-native-skia 0.1.146 → 0.1.148

package/src/renderer/HostComponents.ts

@@ -0,0 +1,269 @@
+import type { ForwardedRef } from "react";
+
+import { NodeType } from "../dom/types";
+import type {
+  CircleProps,
+  DrawingNodeProps,
+  ImageProps,
+  PaintProps,
+  PathProps,
+  CustomDrawingNodeProps,
+  LineProps,
+  OvalProps,
+  DiffRectProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  TextProps,
+  VerticesProps,
+  BlurMaskFilterProps,
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+  MatrixColorFilterProps,
+  ShaderProps,
+  ImageShaderProps,
+  LinearGradientProps,
+  GroupProps,
+  PatchProps,
+  BlendColorFilterProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  CornerPathEffectProps,
+  Line2DPathEffectProps,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  TwoPointConicalGradientProps,
+  TurbulenceProps,
+  SweepGradientProps,
+  RadialGradientProps,
+  ColorProps,
+  PictureProps,
+  ImageSVGProps,
+  LerpColorFilterProps,
+  BoxProps,
+  BoxShadowProps,
+} from "../dom/types";
+import type { ChildrenProps } from "../dom/types/Common";
+import type {
+  BlendProps,
+  MorphologyImageFilterProps,
+} from "../dom/types/ImageFilters";
+import type { PaintNode } from "../dom/nodes/PaintNode";
+
+import type { Container } from "./Container";
+import { exhaustiveCheck } from "./typeddash";
+import type { SkiaProps } from "./processors";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      skGroup: SkiaProps<GroupProps>;
+      skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
+
+      // Drawings
+      skFill: SkiaProps<DrawingNodeProps>;
+      skImage: SkiaProps<ImageProps>;
+      skCircle: SkiaProps<CircleProps>;
+      skPath: SkiaProps<PathProps>;
+      skDrawing: SkiaProps<CustomDrawingNodeProps>;
+      skLine: SkiaProps<LineProps>;
+      skOval: SkiaProps<OvalProps>;
+      skPatch: SkiaProps<PatchProps>;
+      skPoints: SkiaProps<PointsProps>;
+      skRect: SkiaProps<RectProps>;
+      skRRect: SkiaProps<RoundedRectProps>;
+      skVertices: SkiaProps<VerticesProps>;
+      skText: SkiaProps<TextProps>;
+      skTextPath: SkiaProps<TextPathProps>;
+      skTextBlob: SkiaProps<TextBlobProps>;
+      skGlyphs: SkiaProps<GlyphsProps>;
+      skDiffRect: SkiaProps<DiffRectProps>;
+      skPicture: SkiaProps<PictureProps>;
+      skImageSVG: SkiaProps<ImageSVGProps>;
+
+      // BlurMaskFilters
+      skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
+
+      // ImageFilters
+      skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
+      skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
+      skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;
+      skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;
+      skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;
+      skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;
+      skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;
+
+      // ColorFilters
+      skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;
+      skBlendColorFilter: SkiaProps<BlendColorFilterProps>;
+      skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;
+      skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;
+      skLumaColorFilter: SkiaProps<ChildrenProps>;
+      skLerpColorFilter: SkiaProps<LerpColorFilterProps>;
+
+      // Shaders
+      skShader: SkiaProps<ShaderProps>;
+      skImageShader: SkiaProps<ImageShaderProps>;
+      skColorShader: SkiaProps<ColorProps>;
+      skTurbulence: SkiaProps<TurbulenceProps>;
+      skFractalNoise: SkiaProps<TurbulenceProps>;
+      skLinearGradient: SkiaProps<LinearGradientProps>;
+      skRadialGradient: SkiaProps<RadialGradientProps>;
+      skSweepGradient: SkiaProps<SweepGradientProps>;
+      skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;
+
+      // Path Effects
+      skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;
+      skDashPathEffect: SkiaProps<DashPathEffectProps>;
+      skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;
+      skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;
+      skCornerPathEffect: SkiaProps<CornerPathEffectProps>;
+      skSumPathEffect: ChildrenProps;
+      skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;
+
+      // Mixed declarations/drawings
+      skBlend: SkiaProps<BlendProps>;
+      skBackdropFilter: SkiaProps<ChildrenProps>;
+      skBox: SkiaProps<BoxProps>;
+      skBoxShadow: SkiaProps<BoxShadowProps>;
+    }
+  }
+}
+
+export const createNode = (
+  container: Container,
+  type: NodeType,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: any
+) => {
+  const { Sk } = container;
+  switch (type) {
+    case NodeType.Group:
+      return Sk.Group(props);
+    case NodeType.Paint:
+      return Sk.Paint(props);
+    // Drawings
+    case NodeType.Fill:
+      return Sk.Fill(props);
+    case NodeType.Image:
+      return Sk.Image(props);
+    case NodeType.Circle:
+      return Sk.Circle(props);
+    case NodeType.Path:
+      return Sk.Path(props);
+    case NodeType.Drawing:
+      return Sk.CustomDrawing(props);
+    case NodeType.Line:
+      return Sk.Line(props);
+    case NodeType.Oval:
+      return Sk.Oval(props);
+    case NodeType.Patch:
+      return Sk.Patch(props);
+    case NodeType.Points:
+      return Sk.Points(props);
+    case NodeType.Rect:
+      return Sk.Rect(props);
+    case NodeType.RRect:
+      return Sk.RRect(props);
+    case NodeType.Vertices:
+      return Sk.Vertices(props);
+    case NodeType.Text:
+      return Sk.Text(props);
+    case NodeType.TextPath:
+      return Sk.TextPath(props);
+    case NodeType.TextBlob:
+      return Sk.TextBlob(props);
+    case NodeType.Glyphs:
+      return Sk.Glyphs(props);
+    case NodeType.DiffRect:
+      return Sk.DiffRect(props);
+    case NodeType.Picture:
+      return Sk.Picture(props);
+    case NodeType.ImageSVG:
+      return Sk.ImageSVG(props);
+    // Mask Filter
+    case NodeType.BlurMaskFilter:
+      return Sk.BlurMaskFilter(props);
+    // Image Filter
+    case NodeType.BlendImageFilter:
+      return Sk.BlendImageFilter(props);
+    case NodeType.BlurImageFilter:
+      return Sk.BlurImageFilter(props);
+    case NodeType.OffsetImageFilter:
+      return Sk.OffsetImageFilter(props);
+    case NodeType.DropShadowImageFilter:
+      return Sk.DropShadowImageFilter(props);
+    case NodeType.DisplacementMapImageFilter:
+      return Sk.DisplacementMapImageFilter(props);
+    case NodeType.MorphologyImageFilter:
+      return Sk.MorphologyImageFilter(props);
+    case NodeType.RuntimeShaderImageFilter:
+      return Sk.RuntimeShaderImageFilter(props);
+    // Color Filter
+    case NodeType.MatrixColorFilter:
+      return Sk.MatrixColorFilter(props);
+    case NodeType.BlendColorFilter:
+      return Sk.BlendColorFilter(props);
+    case NodeType.LerpColorFilter:
+      return Sk.LerpColorFilter(props);
+    case NodeType.LumaColorFilter:
+      return Sk.LumaColorFilter();
+    case NodeType.LinearToSRGBGammaColorFilter:
+      return Sk.LinearToSRGBGammaColorFilter();
+    case NodeType.SRGBToLinearGammaColorFilter:
+      return Sk.SRGBToLinearGammaColorFilter();
+    // Shader
+    case NodeType.Shader:
+      return Sk.Shader(props);
+    case NodeType.ImageShader:
+      return Sk.ImageShader(props);
+    case NodeType.ColorShader:
+      return Sk.ColorShader(props);
+    case NodeType.Turbulence:
+      return Sk.Turbulence(props);
+    case NodeType.FractalNoise:
+      return Sk.FractalNoise(props);
+    case NodeType.LinearGradient:
+      return Sk.LinearGradient(props);
+    case NodeType.RadialGradient:
+      return Sk.RadialGradient(props);
+    case NodeType.SweepGradient:
+      return Sk.SweepGradient(props);
+    case NodeType.TwoPointConicalGradient:
+      return Sk.TwoPointConicalGradient(props);
+    // Path Effect
+    case NodeType.CornerPathEffect:
+      return Sk.CornerPathEffect(props);
+    case NodeType.DiscretePathEffect:
+      return Sk.DiscretePathEffect(props);
+    case NodeType.DashPathEffect:
+      return Sk.DashPathEffect(props);
+    case NodeType.Path1DPathEffect:
+      return Sk.Path1DPathEffect(props);
+    case NodeType.Path2DPathEffect:
+      return Sk.Path2DPathEffect(props);
+    case NodeType.SumPathEffect:
+      return Sk.SumPathEffect();
+    case NodeType.Line2DPathEffect:
+      return Sk.Line2DPathEffect(props);
+    // Mixed
+    case NodeType.Blend:
+      return Sk.Blend(props);
+    case NodeType.BackdropFilter:
+      return Sk.BackdropFilter(props);
+    case NodeType.Box:
+      return Sk.Box(props);
+    case NodeType.BoxShadow:
+      return Sk.BoxShadow(props);
+    default:
+      return exhaustiveCheck(type);
+  }
+};

package/src/renderer/HostConfig.ts

@@ -1,9 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*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";
+import type { NodeType, Node } from "../dom/types";
+import type { SkiaValue } from "../values";
+
+import type { Container } from "./Container";
+import { createNode } from "./HostComponents";
+import type { AnimatedProps } from "./processors";
+import { isSelector, isValue } from "./processors";
+import { mapKeys, shallowEq } from "./typeddash";
 
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
@@ -12,27 +18,15 @@ export const debug = (...args: Parameters<typeof console.log>) => {
   }
 };
 
-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<unknown>;
 
-type Instance = Node;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Props = any;
-type TextInstance = Node;
+type TextInstance = Node<unknown>;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
 type PublicInstance = Instance;
 type HostContext = null;
-type UpdatePayload = true;
+type UpdatePayload = Container;
 type ChildSet = unknown;
 type TimeoutHandle = NodeJS.Timeout;
 type NoTimeout = -1;
@@ -53,84 +47,20 @@ type SkiaHostConfig = HostConfig<
   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 appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.addChild(child);
 };
 
-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 removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  return parent.removeChild(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);
-  }
+const insertBefore = (
+  parent: Node<unknown>,
+  child: Node<unknown>,
+  before: Node<unknown>
+) => {
+  parent.insertChildBefore(child, before);
 };
 
 export const skHostConfig: SkiaHostConfig = {
@@ -151,7 +81,7 @@ export const skHostConfig: SkiaHostConfig = {
 
   appendChildToContainer(container, child) {
     debug("appendChildToContainer", container, child);
-    appendNode(container, child);
+    appendNode(container.root, child);
   },
 
   appendChild(parent, child) {
@@ -159,7 +89,7 @@ export const skHostConfig: SkiaHostConfig = {
     appendNode(parent, child);
   },
 
-  getRootHostContext: (_rootContainerInstance: Node) => {
+  getRootHostContext: (_rootContainerInstance: Container) => {
     debug("getRootHostContext");
     return null;
   },
@@ -186,13 +116,16 @@ export const skHostConfig: SkiaHostConfig = {
 
   createInstance(
     type,
-    props,
+    pristineProps,
     container,
     _hostContext,
     _internalInstanceHandle
   ) {
     debug("createInstance", type);
-    return createNode(container, type, props) as Node;
+    const props = { ...pristineProps };
+    const node = createNode(container, type, materialize(props));
+    container.depMgr.subscribeNode(node, props);
+    return node;
   },
 
   appendInitialChild(parentInstance, child) {
@@ -221,10 +154,6 @@ export const skHostConfig: SkiaHostConfig = {
     return null;
   },
 
-  finalizeContainerChildren: () => {
-    debug("finalizeContainerChildren");
-  },
-
   resetAfterCommit(container) {
     debug("resetAfterCommit");
     container.redraw();
@@ -236,46 +165,38 @@ export const skHostConfig: SkiaHostConfig = {
   },
 
   prepareUpdate: (
-    instance,
+    _instance,
     type,
     oldProps,
     newProps,
-    _rootContainerInstance,
+    rootContainerInstance,
     _hostContext
   ) => {
     debug("prepareUpdate");
     const propsAreEqual = shallowEq(oldProps, newProps);
-    if (propsAreEqual && !instance.memoizable) {
+    if (propsAreEqual) {
       return null;
     }
     debug("update ", type);
-    return true;
+    return rootContainerInstance;
   },
 
   commitUpdate(
     instance,
-    _updatePayload,
+    updatePayload,
     type,
     prevProps,
     nextProps,
     _internalHandle
   ) {
     debug("commitUpdate: ", type);
-    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {
+    if (shallowEq(prevProps, nextProps)) {
       return;
     }
-    bustBranchMemoization(instance);
-    if (instance instanceof DrawingNode) {
-      const { onDraw, skipProcessing, ...props } = nextProps;
-      instance.props = props;
-    } else if (instance instanceof DeclarationNode) {
-      const { onDeclare, ...props } = nextProps;
-      instance.props = props;
-    } else {
-      throw new Error(
-        "Unsupported instance commitUpdate " + instance.constructor.name
-      );
-    }
+    const props = { ...nextProps };
+    updatePayload.depMgr.unsubscribeNode(instance);
+    instance.setProps(materialize(props));
+    updatePayload.depMgr.subscribeNode(instance, props);
   },
 
   commitTextUpdate: (
@@ -288,7 +209,9 @@ export const skHostConfig: SkiaHostConfig = {
 
   clearContainer: (container) => {
     debug("clearContainer");
-    container.children.splice(0);
+    container.root.children().forEach((child) => {
+      container.root.removeChild(child);
+    });
   },
 
   preparePortalMount: () => {
@@ -299,15 +222,29 @@ export const skHostConfig: SkiaHostConfig = {
     removeNode(parent, child);
   },
 
-  removeChildFromContainer: (parent, child) => {
-    removeNode(parent, child);
+  removeChildFromContainer: (container, child) => {
+    removeNode(container.root, child);
   },
 
-  insertInContainerBefore: (parent, child, before) => {
-    insertBefore(parent, child, before);
+  insertInContainerBefore: (container, child, before) => {
+    insertBefore(container.root, child, before);
   },
 
   insertBefore: (parent, child, before) => {
     insertBefore(parent, child, before);
   },
 };
+
+const materialize = <P>(props: AnimatedProps<P>) => {
+  const result = { ...props };
+  mapKeys(props).forEach((key) => {
+    const prop = props[key];
+    if (isValue(prop)) {
+      result[key] = (prop as SkiaValue<P[typeof key]>).current;
+    } else if (isSelector(prop)) {
+      result[key] = prop.selector(prop.value.current) as P[typeof key];
+    }
+  });
+
+  return result as any;
+};

package/src/renderer/components/Blend.tsx

@@ -1,49 +1,8 @@
-import type { ReactNode } from "react";
 import React from "react";
 
-import type { SkImageFilter, SkShader } from "../../skia/types";
-import { isImageFilter, BlendMode, isShader } from "../../skia/types";
-import { createDeclaration } from "../nodes";
-import type { AnimatedProps, SkEnum } from "../processors";
-import { enumKey } from "../processors/Paint";
-import type { DeclarationResult } from "../nodes/Declaration";
+import type { BlendProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
 
-const childrenAreImageFilters = (
-  children: DeclarationResult[]
-): children is SkImageFilter[] =>
-  children.every((child) => isImageFilter(child));
-
-const childrenAreShaders = (
-  children: DeclarationResult[]
-): children is SkShader[] => children.every((child) => isShader(child));
-
-interface BlendProps {
-  mode: SkEnum<typeof BlendMode>;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<BlendProps>(
-  ({ mode }, children, { Skia }) => {
-    const blend = BlendMode[enumKey(mode)];
-    if (childrenAreImageFilters(children)) {
-      return children.reverse().reduce<SkImageFilter | null>((inner, outer) => {
-        if (inner === null) {
-          return outer;
-        }
-        return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-      }, null);
-    } else if (childrenAreShaders(children)) {
-      return children.reverse().reduce<SkShader | null>((inner, outer) => {
-        if (inner === null) {
-          return outer;
-        }
-        return Skia.Shader.MakeBlend(blend, outer, inner);
-      }, null);
-    }
-    throw new Error("<Blend /> can only blend Shaders or ImageFilters");
-  }
-);
-
-export const Blend = (props: AnimatedProps<BlendProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Blend = (props: SkiaProps<BlendProps>) => {
+  return <skBlend {...props} />;
 };

package/src/renderer/components/Drawing.tsx

@@ -1,16 +1,7 @@
 import React from "react";
 
-import type { DrawingContext } from "../DrawingContext";
-import { createDrawing } from "../nodes/Drawing";
+import type { CustomDrawingNodeProps } from "../../dom/types";
 
-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} />;
+export const Drawing = (props: CustomDrawingNodeProps) => {
+  return <skDrawing {...props} />;
 };