@shopify/react-native-skia 1.9.1 → 1.10.0

package/lib/module/sksg/Recorder/Recorder.js.map

@@ -1 +1 @@
-{"version":3,"names":["NodeType","isSharedValue","isColorFilter","isImageFilter","isPathEffect","isShader","CommandType","Recorder","constructor","_defineProperty","Set","cursors","push","commands","getRecording","paintPool","animationValues","processProps","props","animatedProps","hasAnimatedProps","key","prop","add","value","undefined","command","length","saveGroup","children","type","Group","restoreGroup","pop","savePaint","SavePaint","restorePaint","RestorePaint","restorePaintDeclaration","RestorePaintDeclaration","materializePaint","MaterializePaint","pushPathEffect","pathEffectType","Error","PushPathEffect","pushImageFilter","imageFilterType","PushImageFilter","pushColorFilter","colorFilterType","PushColorFilter","pushShader","shaderType","Blend","PushShader","pushBlurMaskFilter","PushBlurMaskFilter","composePathEffect","ComposePathEffect","composeColorFilter","ComposeColorFilter","composeImageFilter","ComposeImageFilter","saveCTM","SaveCTM","restoreCTM","RestoreCTM","drawPaint","DrawPaint","saveLayer","SaveLayer","saveBackdropFilter","SaveBackdropFilter","drawBox","boxProps","shadows","forEach","shadow","DrawBox","drawImage","DrawImage","drawCircle","DrawCircle","drawPoints","DrawPoints","drawPath","DrawPath","drawRect","DrawRect","drawRRect","DrawRRect","drawOval","DrawOval","drawLine","DrawLine","drawPatch","DrawPatch","drawVertices","DrawVertices","drawDiffRect","DrawDiffRect","drawText","DrawText","drawTextPath","DrawTextPath","drawTextBlob","DrawTextBlob","drawGlyphs","DrawGlyphs","drawPicture","DrawPicture","drawImageSVG","DrawImageSVG","drawParagraph","DrawParagraph","drawAtlas","DrawAtlas"],"sources":["Recorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport { NodeType } from \"../../dom/types\";\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PaintProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  BoxProps,\n  BoxShadowProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer\";\nimport { isSharedValue } from \"../utils\";\nimport { isColorFilter, isImageFilter, isPathEffect, isShader } from \"../Node\";\nimport type { SkPaint } from \"../../skia/types\";\n\nimport { CommandType } from \"./Core\";\nimport type { Command } from \"./Core\";\n\nexport interface Recording {\n  commands: Command[];\n  paintPool: SkPaint[];\n}\n\ninterface AnimationValues {\n  animationValues: Set<SharedValue<unknown>>;\n}\n\nexport class Recorder {\n  commands: Command[] = [];\n  cursors: Command[][] = [];\n  animationValues: Set<SharedValue<unknown>> = new Set();\n\n  constructor() {\n    this.cursors.push(this.commands);\n  }\n\n  getRecording(): Recording & AnimationValues {\n    return {\n      commands: this.commands,\n      paintPool: [],\n      animationValues: this.animationValues,\n    };\n  }\n\n  private processProps(props: Record<string, unknown>) {\n    const animatedProps: Record<string, SharedValue<unknown>> = {};\n    let hasAnimatedProps = false;\n\n    for (const key in props) {\n      const prop = props[key];\n      if (isSharedValue(prop)) {\n        this.animationValues.add(prop);\n        props[key] = prop.value;\n        animatedProps[key] = prop;\n        hasAnimatedProps = true;\n      }\n    }\n\n    return {\n      props,\n      animatedProps: hasAnimatedProps ? animatedProps : undefined,\n    };\n  }\n\n  private add(command: Command) {\n    if (command.props) {\n      const { animatedProps } = this.processProps(\n        command.props as Record<string, unknown>\n      );\n      if (animatedProps) {\n        command.animatedProps = animatedProps;\n      }\n    }\n    this.cursors[this.cursors.length - 1].push(command);\n  }\n\n  saveGroup() {\n    const children: Command[] = [];\n    this.add({ type: CommandType.Group, children });\n    this.cursors.push(children);\n  }\n\n  restoreGroup() {\n    this.cursors.pop();\n  }\n\n  savePaint(props: AnimatedProps<PaintProps>) {\n    this.add({ type: CommandType.SavePaint, props });\n  }\n\n  restorePaint() {\n    this.add({ type: CommandType.RestorePaint });\n  }\n\n  restorePaintDeclaration() {\n    this.add({ type: CommandType.RestorePaintDeclaration });\n  }\n\n  materializePaint() {\n    this.add({ type: CommandType.MaterializePaint });\n  }\n\n  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isPathEffect(pathEffectType)) {\n      throw new Error(\"Invalid color filter type: \" + pathEffectType);\n    }\n    this.add({\n      type: CommandType.PushPathEffect,\n      pathEffectType,\n      props,\n    });\n  }\n\n  pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isImageFilter(imageFilterType)) {\n      throw new Error(\"Invalid color filter type: \" + imageFilterType);\n    }\n    this.add({\n      type: CommandType.PushImageFilter,\n      imageFilterType,\n      props,\n    });\n  }\n\n  pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isColorFilter(colorFilterType)) {\n      throw new Error(\"Invalid color filter type: \" + colorFilterType);\n    }\n    this.add({\n      type: CommandType.PushColorFilter,\n      colorFilterType,\n      props,\n    });\n  }\n\n  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isShader(shaderType) && !(shaderType === NodeType.Blend)) {\n      throw new Error(\"Invalid color filter type: \" + shaderType);\n    }\n    this.add({ type: CommandType.PushShader, shaderType, props });\n  }\n\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>) {\n    this.add({ type: CommandType.PushBlurMaskFilter, props });\n  }\n\n  composePathEffect() {\n    this.add({ type: CommandType.ComposePathEffect });\n  }\n\n  composeColorFilter() {\n    this.add({ type: CommandType.ComposeColorFilter });\n  }\n\n  composeImageFilter() {\n    this.add({ type: CommandType.ComposeImageFilter });\n  }\n\n  saveCTM(props: AnimatedProps<CTMProps>) {\n    this.add({ type: CommandType.SaveCTM, props });\n  }\n\n  restoreCTM() {\n    this.add({ type: CommandType.RestoreCTM });\n  }\n\n  drawPaint() {\n    this.add({ type: CommandType.DrawPaint });\n  }\n\n  saveLayer() {\n    this.add({ type: CommandType.SaveLayer });\n  }\n\n  saveBackdropFilter() {\n    this.add({ type: CommandType.SaveBackdropFilter });\n  }\n\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n      animatedProps?: Record<string, SharedValue<unknown>>;\n    }[]\n  ) {\n    shadows.forEach((shadow) => {\n      if (shadow.props) {\n        if (shadow.props) {\n          const { animatedProps } = this.processProps(\n            shadow.props as unknown as Record<string, unknown>\n          );\n          if (animatedProps) {\n            shadow.animatedProps = animatedProps;\n          }\n        }\n      }\n    });\n    this.add({ type: CommandType.DrawBox, props: boxProps, shadows });\n  }\n\n  drawImage(props: AnimatedProps<ImageProps>) {\n    this.add({ type: CommandType.DrawImage, props });\n  }\n\n  drawCircle(props: AnimatedProps<CircleProps>) {\n    this.add({ type: CommandType.DrawCircle, props });\n  }\n  drawPoints(props: AnimatedProps<PointsProps>) {\n    this.add({ type: CommandType.DrawPoints, props });\n  }\n\n  drawPath(props: AnimatedProps<PathProps>) {\n    this.add({ type: CommandType.DrawPath, props });\n  }\n\n  drawRect(props: AnimatedProps<RectProps>) {\n    this.add({ type: CommandType.DrawRect, props });\n  }\n\n  drawRRect(props: AnimatedProps<RoundedRectProps>) {\n    this.add({ type: CommandType.DrawRRect, props });\n  }\n\n  drawOval(props: AnimatedProps<OvalProps>) {\n    this.add({ type: CommandType.DrawOval, props });\n  }\n\n  drawLine(props: AnimatedProps<LineProps>) {\n    this.add({ type: CommandType.DrawLine, props });\n  }\n\n  drawPatch(props: AnimatedProps<PatchProps>) {\n    this.add({ type: CommandType.DrawPatch, props });\n  }\n\n  drawVertices(props: AnimatedProps<VerticesProps>) {\n    this.add({ type: CommandType.DrawVertices, props });\n  }\n\n  drawDiffRect(props: AnimatedProps<DiffRectProps>) {\n    this.add({ type: CommandType.DrawDiffRect, props });\n  }\n\n  drawText(props: AnimatedProps<TextProps>) {\n    this.add({ type: CommandType.DrawText, props });\n  }\n\n  drawTextPath(props: AnimatedProps<TextPathProps>) {\n    this.add({ type: CommandType.DrawTextPath, props });\n  }\n\n  drawTextBlob(props: AnimatedProps<TextBlobProps>) {\n    this.add({ type: CommandType.DrawTextBlob, props });\n  }\n\n  drawGlyphs(props: AnimatedProps<GlyphsProps>) {\n    this.add({ type: CommandType.DrawGlyphs, props });\n  }\n\n  drawPicture(props: AnimatedProps<PictureProps>) {\n    this.add({ type: CommandType.DrawPicture, props });\n  }\n\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>) {\n    this.add({ type: CommandType.DrawImageSVG, props });\n  }\n\n  drawParagraph(props: AnimatedProps<ParagraphProps>) {\n    this.add({ type: CommandType.DrawParagraph, props });\n  }\n\n  drawAtlas(props: AnimatedProps<AtlasProps>) {\n    this.add({ type: CommandType.DrawAtlas, props });\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["NodeType","isSharedValue","isColorFilter","isImageFilter","isPathEffect","isShader","CommandType","Recorder","constructor","_defineProperty","Set","cursors","push","commands","getRecording","paintPool","animationValues","processProps","props","animatedProps","hasAnimatedProps","key","prop","add","undefined","command","length","saveGroup","children","type","Group","restoreGroup","pop","savePaint","SavePaint","restorePaint","RestorePaint","restorePaintDeclaration","RestorePaintDeclaration","materializePaint","MaterializePaint","pushPathEffect","pathEffectType","Error","PushPathEffect","pushImageFilter","imageFilterType","PushImageFilter","pushColorFilter","colorFilterType","PushColorFilter","pushShader","shaderType","Blend","PushShader","pushBlurMaskFilter","PushBlurMaskFilter","composePathEffect","ComposePathEffect","composeColorFilter","ComposeColorFilter","composeImageFilter","ComposeImageFilter","saveCTM","SaveCTM","restoreCTM","RestoreCTM","drawPaint","DrawPaint","saveLayer","SaveLayer","saveBackdropFilter","SaveBackdropFilter","drawBox","boxProps","shadows","forEach","shadow","DrawBox","drawImage","DrawImage","drawCircle","DrawCircle","drawPoints","DrawPoints","drawPath","DrawPath","drawRect","DrawRect","drawRRect","DrawRRect","drawOval","DrawOval","drawLine","DrawLine","drawPatch","DrawPatch","drawVertices","DrawVertices","drawDiffRect","DrawDiffRect","drawText","DrawText","drawTextPath","DrawTextPath","drawTextBlob","DrawTextBlob","drawGlyphs","DrawGlyphs","drawPicture","DrawPicture","drawImageSVG","DrawImageSVG","drawParagraph","DrawParagraph","drawAtlas","DrawAtlas"],"sources":["Recorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport { NodeType } from \"../../dom/types\";\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PaintProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  BoxProps,\n  BoxShadowProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer\";\nimport { isSharedValue } from \"../utils\";\nimport { isColorFilter, isImageFilter, isPathEffect, isShader } from \"../Node\";\nimport type { SkPaint } from \"../../skia/types\";\n\nimport { CommandType } from \"./Core\";\nimport type { Command } from \"./Core\";\n\nexport interface Recording {\n  commands: Command[];\n  paintPool: SkPaint[];\n}\n\ninterface AnimationValues {\n  animationValues: Set<SharedValue<unknown>>;\n}\n\nexport class Recorder {\n  commands: Command[] = [];\n  cursors: Command[][] = [];\n  animationValues: Set<SharedValue<unknown>> = new Set();\n\n  constructor() {\n    this.cursors.push(this.commands);\n  }\n\n  getRecording(): Recording & AnimationValues {\n    return {\n      commands: this.commands,\n      paintPool: [],\n      animationValues: this.animationValues,\n    };\n  }\n\n  private processProps(props: Record<string, unknown>) {\n    const animatedProps: Record<string, SharedValue<unknown>> = {};\n    let hasAnimatedProps = false;\n\n    for (const key in props) {\n      const prop = props[key];\n      if (isSharedValue(prop)) {\n        this.animationValues.add(prop);\n        animatedProps[key] = prop;\n        hasAnimatedProps = true;\n      }\n    }\n\n    return {\n      props,\n      animatedProps: hasAnimatedProps ? animatedProps : undefined,\n    };\n  }\n\n  private add(command: Command) {\n    if (command.props) {\n      const { animatedProps } = this.processProps(\n        command.props as Record<string, unknown>\n      );\n      if (animatedProps) {\n        command.animatedProps = animatedProps;\n      }\n    }\n    this.cursors[this.cursors.length - 1].push(command);\n  }\n\n  saveGroup() {\n    const children: Command[] = [];\n    this.add({ type: CommandType.Group, children });\n    this.cursors.push(children);\n  }\n\n  restoreGroup() {\n    this.cursors.pop();\n  }\n\n  savePaint(props: AnimatedProps<PaintProps>) {\n    this.add({ type: CommandType.SavePaint, props });\n  }\n\n  restorePaint() {\n    this.add({ type: CommandType.RestorePaint });\n  }\n\n  restorePaintDeclaration() {\n    this.add({ type: CommandType.RestorePaintDeclaration });\n  }\n\n  materializePaint() {\n    this.add({ type: CommandType.MaterializePaint });\n  }\n\n  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isPathEffect(pathEffectType)) {\n      throw new Error(\"Invalid color filter type: \" + pathEffectType);\n    }\n    this.add({\n      type: CommandType.PushPathEffect,\n      pathEffectType,\n      props,\n    });\n  }\n\n  pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isImageFilter(imageFilterType)) {\n      throw new Error(\"Invalid color filter type: \" + imageFilterType);\n    }\n    this.add({\n      type: CommandType.PushImageFilter,\n      imageFilterType,\n      props,\n    });\n  }\n\n  pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isColorFilter(colorFilterType)) {\n      throw new Error(\"Invalid color filter type: \" + colorFilterType);\n    }\n    this.add({\n      type: CommandType.PushColorFilter,\n      colorFilterType,\n      props,\n    });\n  }\n\n  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>) {\n    if (!isShader(shaderType) && !(shaderType === NodeType.Blend)) {\n      throw new Error(\"Invalid color filter type: \" + shaderType);\n    }\n    this.add({ type: CommandType.PushShader, shaderType, props });\n  }\n\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>) {\n    this.add({ type: CommandType.PushBlurMaskFilter, props });\n  }\n\n  composePathEffect() {\n    this.add({ type: CommandType.ComposePathEffect });\n  }\n\n  composeColorFilter() {\n    this.add({ type: CommandType.ComposeColorFilter });\n  }\n\n  composeImageFilter() {\n    this.add({ type: CommandType.ComposeImageFilter });\n  }\n\n  saveCTM(props: AnimatedProps<CTMProps>) {\n    this.add({ type: CommandType.SaveCTM, props });\n  }\n\n  restoreCTM() {\n    this.add({ type: CommandType.RestoreCTM });\n  }\n\n  drawPaint() {\n    this.add({ type: CommandType.DrawPaint });\n  }\n\n  saveLayer() {\n    this.add({ type: CommandType.SaveLayer });\n  }\n\n  saveBackdropFilter() {\n    this.add({ type: CommandType.SaveBackdropFilter });\n  }\n\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n      animatedProps?: Record<string, SharedValue<unknown>>;\n    }[]\n  ) {\n    shadows.forEach((shadow) => {\n      if (shadow.props) {\n        if (shadow.props) {\n          const { animatedProps } = this.processProps(\n            shadow.props as unknown as Record<string, unknown>\n          );\n          if (animatedProps) {\n            shadow.animatedProps = animatedProps;\n          }\n        }\n      }\n    });\n    this.add({ type: CommandType.DrawBox, props: boxProps, shadows });\n  }\n\n  drawImage(props: AnimatedProps<ImageProps>) {\n    this.add({ type: CommandType.DrawImage, props });\n  }\n\n  drawCircle(props: AnimatedProps<CircleProps>) {\n    this.add({ type: CommandType.DrawCircle, props });\n  }\n  drawPoints(props: AnimatedProps<PointsProps>) {\n    this.add({ type: CommandType.DrawPoints, props });\n  }\n\n  drawPath(props: AnimatedProps<PathProps>) {\n    this.add({ type: CommandType.DrawPath, props });\n  }\n\n  drawRect(props: AnimatedProps<RectProps>) {\n    this.add({ type: CommandType.DrawRect, props });\n  }\n\n  drawRRect(props: AnimatedProps<RoundedRectProps>) {\n    this.add({ type: CommandType.DrawRRect, props });\n  }\n\n  drawOval(props: AnimatedProps<OvalProps>) {\n    this.add({ type: CommandType.DrawOval, props });\n  }\n\n  drawLine(props: AnimatedProps<LineProps>) {\n    this.add({ type: CommandType.DrawLine, props });\n  }\n\n  drawPatch(props: AnimatedProps<PatchProps>) {\n    this.add({ type: CommandType.DrawPatch, props });\n  }\n\n  drawVertices(props: AnimatedProps<VerticesProps>) {\n    this.add({ type: CommandType.DrawVertices, props });\n  }\n\n  drawDiffRect(props: AnimatedProps<DiffRectProps>) {\n    this.add({ type: CommandType.DrawDiffRect, props });\n  }\n\n  drawText(props: AnimatedProps<TextProps>) {\n    this.add({ type: CommandType.DrawText, props });\n  }\n\n  drawTextPath(props: AnimatedProps<TextPathProps>) {\n    this.add({ type: CommandType.DrawTextPath, props });\n  }\n\n  drawTextBlob(props: AnimatedProps<TextBlobProps>) {\n    this.add({ type: CommandType.DrawTextBlob, props });\n  }\n\n  drawGlyphs(props: AnimatedProps<GlyphsProps>) {\n    this.add({ type: CommandType.DrawGlyphs, props });\n  }\n\n  drawPicture(props: AnimatedProps<PictureProps>) {\n    this.add({ type: CommandType.DrawPicture, props });\n  }\n\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>) {\n    this.add({ type: CommandType.DrawImageSVG, props });\n  }\n\n  drawParagraph(props: AnimatedProps<ParagraphProps>) {\n    this.add({ type: CommandType.DrawParagraph, props });\n  }\n\n  drawAtlas(props: AnimatedProps<AtlasProps>) {\n    this.add({ type: CommandType.DrawAtlas, props });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/renderer/Canvas.d.ts

@@ -1,3 +1,3 @@
 export const __esModule: boolean;
-export const Canvas: any;
-export function useCanvasRef(): any;
+export const Canvas: _react.ForwardRefExoticComponent<_react.RefAttributes<any>>;
+import _react = require("react");

package/lib/typescript/lib/commonjs/renderer/CanvasOld.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+export const CanvasOld: any;
+export function useCanvasRef(): any;

package/lib/typescript/lib/commonjs/sksg/HostConfig2.d.ts

@@ -0,0 +1,44 @@
+export const __esModule: boolean;
+export namespace sksgHostConfig {
+    let supportsMutation: boolean;
+    let isPrimaryRenderer: boolean;
+    let supportsPersistence: boolean;
+    let supportsHydration: boolean;
+    let scheduleTimeout: typeof setTimeout;
+    let cancelTimeout: typeof clearTimeout;
+    let noTimeout: number;
+    function appendChildToContainer(container: any, child: any): void;
+    function appendChild(parent: any, child: any): void;
+    function getRootHostContext(_rootContainerInstance: any): null;
+    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): null;
+    function shouldSetTextContent(_type: any, _props: any): boolean;
+    function createTextInstance(_text: any, _rootContainerInstance: any, _hostContext: any, _internalInstanceHandle: any): never;
+    function createInstance(type: any, propsWithChildren: any, _container: any, _hostContext: any, _internalInstanceHandle: any): {
+        type: any;
+        props: any;
+        children: never[];
+    };
+    function appendInitialChild(parentInstance: any, child: any): void;
+    function finalizeInitialChildren(parentInstance: any, _type: any, _props: any, _rootContainerInstance: any, _hostContext: any): boolean;
+    function commitMount(): void;
+    function prepareForCommit(_containerInfo: any): null;
+    function resetAfterCommit(container: any): void;
+    function getPublicInstance(node: any): any;
+    function prepareUpdate(_instance: any, type: any, oldProps: any, newProps: any, rootContainerInstance: any, _hostContext: any): any;
+    function commitUpdate(instance: any, _updatePayload: any, type: any, prevProps: any, nextProps: any, _internalHandle: any): void;
+    function commitTextUpdate(_textInstance: any, _oldText: any, _newText: any): void;
+    function clearContainer(container: any): void;
+    function preparePortalMount(): void;
+    function removeChild(parent: any, child: any): void;
+    function removeChildFromContainer(container: any, child: any): void;
+    function insertInContainerBefore(container: any, child: any, before: any): void;
+    function insertBefore(parent: any, child: any, before: any): void;
+    function getCurrentEventPriority(): number;
+    function beforeActiveInstanceBlur(): void;
+    function afterActiveInstanceBlur(): void;
+    function detachDeletedInstance(): void;
+    function getInstanceFromNode(_node: any): null;
+    function prepareScopeUpdate(_scopeInstance: any, _instance: any): void;
+    function getInstanceFromScope(_scopeInstance: any): null;
+}
+export function debug(...args: any[]): void;

package/lib/typescript/lib/module/index.d.ts

@@ -1,7 +1,7 @@
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/lib/module/renderer/Canvas.d.ts

@@ -1,3 +1 @@
-export function useCanvasRef(): React.MutableRefObject<null>;
-export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+export const Canvas: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/CanvasOld.d.ts

@@ -0,0 +1,3 @@
+export function useCanvasRef(): React.MutableRefObject<null>;
+export const CanvasOld: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/lib/typescript/lib/module/sksg/HostConfig2.d.ts

@@ -0,0 +1,43 @@
+export function debug(...args: any[]): void;
+export namespace sksgHostConfig {
+    let supportsMutation: boolean;
+    let isPrimaryRenderer: boolean;
+    let supportsPersistence: boolean;
+    let supportsHydration: boolean;
+    let scheduleTimeout: typeof setTimeout;
+    let cancelTimeout: typeof clearTimeout;
+    let noTimeout: number;
+    function appendChildToContainer(container: any, child: any): void;
+    function appendChild(parent: any, child: any): void;
+    function getRootHostContext(_rootContainerInstance: any): null;
+    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): null;
+    function shouldSetTextContent(_type: any, _props: any): boolean;
+    function createTextInstance(_text: any, _rootContainerInstance: any, _hostContext: any, _internalInstanceHandle: any): never;
+    function createInstance(type: any, propsWithChildren: any, _container: any, _hostContext: any, _internalInstanceHandle: any): {
+        type: any;
+        props: any;
+        children: never[];
+    };
+    function appendInitialChild(parentInstance: any, child: any): void;
+    function finalizeInitialChildren(parentInstance: any, _type: any, _props: any, _rootContainerInstance: any, _hostContext: any): boolean;
+    function commitMount(): void;
+    function prepareForCommit(_containerInfo: any): null;
+    function resetAfterCommit(container: any): void;
+    function getPublicInstance(node: any): any;
+    function prepareUpdate(_instance: any, type: any, oldProps: any, newProps: any, rootContainerInstance: any, _hostContext: any): any;
+    function commitUpdate(instance: any, _updatePayload: any, type: any, prevProps: any, nextProps: any, _internalHandle: any): void;
+    function commitTextUpdate(_textInstance: any, _oldText: any, _newText: any): void;
+    function clearContainer(container: any): void;
+    function preparePortalMount(): void;
+    function removeChild(parent: any, child: any): void;
+    function removeChildFromContainer(container: any, child: any): void;
+    function insertInContainerBefore(container: any, child: any, before: any): void;
+    function insertBefore(parent: any, child: any, before: any): void;
+    function getCurrentEventPriority(): number;
+    function beforeActiveInstanceBlur(): void;
+    function afterActiveInstanceBlur(): void;
+    function detachDeletedInstance(): void;
+    function getInstanceFromNode(_node: any): null;
+    function prepareScopeUpdate(_scopeInstance: any, _instance: any): void;
+    function getInstanceFromScope(_scopeInstance: any): null;
+}

package/lib/typescript/src/index.d.ts

@@ -1,8 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import type { RefObject, ReactNode, FunctionComponent } from "react";
-import { SkiaDomView } from "../views";
-import type { SkiaBaseViewProps } from "../views";
-export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
-export interface CanvasProps extends SkiaBaseViewProps {
-    ref?: RefObject<SkiaDomView>;
-    children: ReactNode;
-    mode?: "default" | "continuous";
+import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkSize } from "../skia/types";
+export interface CanvasProps extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    mode?: "continuous" | "default";
 }
-export declare const Canvas: FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
+export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;

package/lib/typescript/src/renderer/CanvasOld.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { RefObject, ReactNode, FunctionComponent } from "react";
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
+export interface CanvasOldProps extends SkiaBaseViewProps {
+    ref?: RefObject<SkiaDomView>;
+    children: ReactNode;
+    mode?: "default" | "continuous";
+}
+export declare const CanvasOld: FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;

package/lib/typescript/src/sksg/HostConfig2.d.ts

@@ -0,0 +1,19 @@
+import type { HostConfig } from "react-reconciler";
+import type { NodeType } from "../dom/types";
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+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>;
+export declare const sksgHostConfig: SkiaHostConfig;
+export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/index.ts

@@ -1,8 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/src/renderer/Canvas.tsx

@@ -1,32 +1,24 @@
-import React, {
-  useEffect,
+import {
+  forwardRef,
   useCallback,
+  useEffect,
+  useImperativeHandle,
   useMemo,
-  forwardRef,
   useRef,
 } from "react";
-import type {
-  RefObject,
-  ReactNode,
-  MutableRefObject,
-  ForwardedRef,
-  FunctionComponent,
-} from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 
-import { SkiaDomView } from "../views";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
 import type { SkiaBaseViewProps } from "../views";
 
-import { SkiaRoot } from "./Reconciler";
-
-export const useCanvasRef = () => useRef<SkiaDomView>(null);
-
-export interface CanvasProps extends SkiaBaseViewProps {
-  ref?: RefObject<SkiaDomView>;
-  children: ReactNode;
-  mode?: "default" | "continuous";
-}
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+// TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (
   resultValue: SkiaBaseViewProps["onSize"],
   onLayout?: (event: LayoutChangeEvent) => void
@@ -46,39 +38,40 @@ const useOnSizeEvent = (
   );
 };
 
-export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+export interface CanvasProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas = forwardRef(
   (
     {
-      children,
-      style,
+      mode,
       debug,
-      mode = "default",
-      onSize: _onSize,
+      opaque,
+      children,
+      onSize,
       onLayout: _onLayout,
-      ...props
-    },
-    forwardedRef
+      ...viewProps
+    }: CanvasProps,
+    ref
   ) => {
-    const onLayout = useOnSizeEvent(_onSize, _onLayout);
-    const innerRef = useCanvasRef();
-    const ref = useCombinedRefs(forwardedRef, innerRef);
-    const redraw = useCallback(() => {
-      innerRef.current?.redraw();
-    }, [innerRef]);
-    const getNativeId = useCallback(() => {
-      const id = innerRef.current?.nativeId ?? -1;
-      return id;
-    }, [innerRef]);
+    const rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
 
-    const root = useMemo(
-      () => new SkiaRoot(redraw, getNativeId),
-      [redraw, getNativeId]
-    );
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-    // Render effect
+    // Render effects
     useEffect(() => {
       root.render(children);
-    }, [children, root, redraw]);
+    }, [children, root]);
 
     useEffect(() => {
       return () => {
@@ -86,41 +79,50 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        console.warn("The `mode` property in `Canvas` is deprecated.");
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        SkiaViewApi.requestRedraw(nativeId);
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
     return (
-      <SkiaDomView
-        ref={ref}
-        style={style}
-        root={root.dom}
-        onLayout={onLayout}
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${nativeId}`}
         debug={debug}
-        mode={mode}
-        {...props}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
       />
     );
   }
-) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
-
-/**
- * Combines a list of refs into a single ref. This can be used to provide
- * both a forwarded ref and an internal ref keeping the same functionality
- * on both of the refs.
- * @param refs Array of refs to combine
- * @returns A single ref that can be used in a ref prop.
- */
-const useCombinedRefs = <T,>(
-  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
-) => {
-  const targetRef = React.useRef<T>(null);
-  React.useEffect(() => {
-    refs.forEach((ref) => {
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(targetRef.current);
-        } else {
-          ref.current = targetRef.current;
-        }
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};
+);

package/src/renderer/CanvasOld.tsx

@@ -0,0 +1,126 @@
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  forwardRef,
+  useRef,
+} from "react";
+import type {
+  RefObject,
+  ReactNode,
+  MutableRefObject,
+  ForwardedRef,
+  FunctionComponent,
+} from "react";
+import type { LayoutChangeEvent } from "react-native";
+
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+
+import { SkiaRoot } from "./Reconciler";
+
+export const useCanvasRef = () => useRef<SkiaDomView>(null);
+
+export interface CanvasOldProps extends SkiaBaseViewProps {
+  ref?: RefObject<SkiaDomView>;
+  children: ReactNode;
+  mode?: "default" | "continuous";
+}
+
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
+
+      if (resultValue) {
+        resultValue.value = { width, height };
+      }
+    },
+    [onLayout, resultValue]
+  );
+};
+
+export const CanvasOld = forwardRef<SkiaDomView, CanvasOldProps>(
+  (
+    {
+      children,
+      style,
+      debug,
+      mode = "default",
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
+    const innerRef = useCanvasRef();
+    const ref = useCombinedRefs(forwardedRef, innerRef);
+    const redraw = useCallback(() => {
+      innerRef.current?.redraw();
+    }, [innerRef]);
+    const getNativeId = useCallback(() => {
+      const id = innerRef.current?.nativeId ?? -1;
+      return id;
+    }, [innerRef]);
+
+    const root = useMemo(
+      () => new SkiaRoot(redraw, getNativeId),
+      [redraw, getNativeId]
+    );
+
+    // Render effect
+    useEffect(() => {
+      root.render(children);
+    }, [children, root, redraw]);
+
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
+    return (
+      <SkiaDomView
+        ref={ref}
+        style={style}
+        root={root.dom}
+        onLayout={onLayout}
+        debug={debug}
+        mode={mode}
+        {...props}
+      />
+    );
+  }
+) as FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = <T,>(
+  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
+) => {
+  const targetRef = React.useRef<T>(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};

package/src/sksg/Container.ts

@@ -14,7 +14,7 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
 
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
-  // const start = performance.now();
+  //const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
   replay(ctx, recording.commands);
@@ -87,13 +87,17 @@ class ReanimatedContainer extends Container {
       commands: record.commands,
       paintPool: record.paintPool,
     };
+    const { nativeId, Skia, recording } = this;
     if (animationValues.size > 0) {
-      const { nativeId, Skia, recording } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
+    Rea.runOnUI(() => {
+      "worklet";
+      drawOnscreen(Skia, nativeId, recording!);
+    })();
   }
 }