react-native-skia 0.0.1 → 2.15.0

package/lib/commonjs/sksg/Reconciler.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { SkCanvas, Skia } from "../skia/types";
+import { NodeType } from "../dom/types";
+import "./Elements";
+export declare class SkiaSGRoot {
+    Skia: Skia;
+    private root;
+    private container;
+    constructor(Skia: Skia, nativeId?: number);
+    get sg(): {
+        type: NodeType;
+        props: {};
+        children: import("./Node").Node<unknown>[];
+        isDeclaration: boolean;
+    };
+    private updateContainer;
+    render(element: ReactNode): Promise<void>;
+    drawOnCanvas(canvas: SkCanvas): void;
+    getPicture(): import("../skia/types").SkPicture;
+    unmount(): Promise<unknown>;
+}

package/lib/commonjs/sksg/Reconciler.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkiaSGRoot = void 0;
+var _reactReconciler = _interopRequireDefault(require("react-reconciler"));
+var _types = require("../dom/types");
+var _HostConfig = require("./HostConfig");
+var _Container = require("./Container");
+require("./Elements");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const skiaReconciler = (0, _reactReconciler.default)(_HostConfig.sksgHostConfig);
+
+// @ts-expect-error DefinitelyTyped is not up to date
+skiaReconciler.injectIntoDevTools();
+class SkiaSGRoot {
+  constructor(Skia, nativeId = -1) {
+    this.Skia = Skia;
+    _defineProperty(this, "root", void 0);
+    _defineProperty(this, "container", void 0);
+    const strictMode = false;
+    this.container = (0, _Container.createContainer)(Skia, nativeId);
+    this.root = skiaReconciler.createContainer(this.container, 0, null, strictMode, null, "", console.error, null);
+  }
+  get sg() {
+    const children = this.container.root;
+    return {
+      type: _types.NodeType.Group,
+      props: {},
+      children,
+      isDeclaration: false
+    };
+  }
+  updateContainer(element) {
+    return new Promise(resolve => {
+      skiaReconciler.updateContainer(element, this.root, null, () => {
+        resolve(true);
+      });
+    });
+  }
+  async render(element) {
+    this.container.mount();
+    await this.updateContainer(element);
+    this.container.redraw();
+  }
+  drawOnCanvas(canvas) {
+    this.container.drawOnCanvas(canvas);
+  }
+  getPicture() {
+    const recorder = this.Skia.PictureRecorder();
+    const canvas = recorder.beginRecording();
+    this.drawOnCanvas(canvas);
+    const picture = recorder.finishRecordingAsPicture();
+    recorder.dispose();
+    return picture;
+  }
+  unmount() {
+    this.container.unmount();
+    return new Promise(resolve => {
+      skiaReconciler.updateContainer(null, this.root, null, () => {
+        (0, _HostConfig.debug)("unmountContainer");
+        resolve(true);
+      });
+    });
+  }
+}
+exports.SkiaSGRoot = SkiaSGRoot;
+//# sourceMappingURL=Reconciler.js.map

package/lib/commonjs/sksg/Reconciler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactReconciler","_interopRequireDefault","require","_types","_HostConfig","_Container","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","skiaReconciler","ReactReconciler","sksgHostConfig","injectIntoDevTools","SkiaSGRoot","constructor","Skia","nativeId","strictMode","container","createContainer","root","console","error","sg","children","type","NodeType","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","picture","finishRecordingAsPicture","dispose","unmount","debug","exports"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./StaticContainer\";\nimport { createContainer } from \"./Container\";\n\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\n// @ts-expect-error DefinitelyTyped is not up to date\nskiaReconciler.injectIntoDevTools();\n\nexport class SkiaSGRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(\n    public Skia: Skia,\n    nativeId = -1\n  ) {\n    const strictMode = false;\n    this.container = createContainer(Skia, nativeId);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      strictMode,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  get sg() {\n    const children = this.container.root;\n    return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n  }\n\n  private updateContainer(element: ReactNode) {\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(element, this.root, null, () => {\n        resolve(true);\n      });\n    });\n  }\n\n  async render(element: ReactNode) {\n    this.container.mount();\n    await this.updateContainer(element);\n    this.container.redraw();\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    this.container.drawOnCanvas(canvas);\n  }\n\n  getPicture() {\n    const recorder = this.Skia.PictureRecorder();\n    const canvas = recorder.beginRecording();\n    this.drawOnCanvas(canvas);\n    const picture = recorder.finishRecordingAsPicture();\n    recorder.dispose();\n    return picture;\n  }\n\n  unmount() {\n    this.container.unmount();\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(null, this.root, null, () => {\n        debug(\"unmountContainer\");\n        resolve(true);\n      });\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Recorder/Core.d.ts

@@ -0,0 +1,83 @@
+import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, DrawingNodeProps, SkottieProps } from "../../dom/types";
+export declare enum CommandType {
+    Group = 0,
+    SavePaint = 1,
+    RestorePaint = 2,
+    SaveCTM = 3,
+    RestoreCTM = 4,
+    PushColorFilter = 5,
+    PushBlurMaskFilter = 6,
+    PushImageFilter = 7,
+    PushPathEffect = 8,
+    PushShader = 9,
+    ComposeColorFilter = 10,
+    ComposeImageFilter = 11,
+    ComposePathEffect = 12,
+    MaterializePaint = 13,
+    SaveBackdropFilter = 14,
+    SaveLayer = 15,
+    RestorePaintDeclaration = 16,
+    DrawBox = 17,
+    DrawImage = 18,
+    DrawCircle = 19,
+    DrawPaint = 20,
+    DrawPoints = 21,
+    DrawPath = 22,
+    DrawRect = 23,
+    DrawRRect = 24,
+    DrawOval = 25,
+    DrawLine = 26,
+    DrawPatch = 27,
+    DrawVertices = 28,
+    DrawDiffRect = 29,
+    DrawText = 30,
+    DrawTextPath = 31,
+    DrawTextBlob = 32,
+    DrawGlyphs = 33,
+    DrawPicture = 34,
+    DrawImageSVG = 35,
+    DrawParagraph = 36,
+    DrawAtlas = 37,
+    DrawSkottie = 38
+}
+export type Command<T extends CommandType = CommandType> = {
+    type: T;
+    [key: string]: unknown;
+};
+export declare const materializeCommand: (command: any) => any;
+export declare const isCommand: <T extends CommandType>(command: Command, type: T) => command is Command<T>;
+export interface GroupCommand extends Command<CommandType.Group> {
+    props?: Pick<DrawingNodeProps, "zIndex">;
+    children: Command[];
+}
+export declare const isGroup: (command: Command) => command is GroupCommand;
+interface Props {
+    [CommandType.DrawImage]: ImageProps;
+    [CommandType.DrawCircle]: CircleProps;
+    [CommandType.SaveCTM]: CTMProps;
+    [CommandType.SavePaint]: DrawingNodeProps;
+    [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;
+    [CommandType.DrawPoints]: PointsProps;
+    [CommandType.DrawPath]: PathProps;
+    [CommandType.DrawRect]: RectProps;
+    [CommandType.DrawRRect]: RoundedRectProps;
+    [CommandType.DrawOval]: OvalProps;
+    [CommandType.DrawLine]: LineProps;
+    [CommandType.DrawPatch]: PatchProps;
+    [CommandType.DrawVertices]: VerticesProps;
+    [CommandType.DrawDiffRect]: DiffRectProps;
+    [CommandType.DrawText]: TextProps;
+    [CommandType.DrawTextPath]: TextPathProps;
+    [CommandType.DrawTextBlob]: TextBlobProps;
+    [CommandType.DrawGlyphs]: GlyphsProps;
+    [CommandType.DrawPicture]: PictureProps;
+    [CommandType.DrawImageSVG]: ImageSVGProps;
+    [CommandType.DrawParagraph]: ParagraphProps;
+    [CommandType.DrawAtlas]: AtlasProps;
+    [CommandType.DrawSkottie]: SkottieProps;
+}
+interface DrawCommand<T extends CommandType> extends Command<T> {
+    props: T extends keyof Props ? Props[T] : never;
+}
+export declare const isDrawCommand: <T extends keyof Props>(command: Command, type: T) => command is DrawCommand<T>;
+export {};

package/lib/commonjs/sksg/Recorder/Core.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.materializeCommand = exports.isGroup = exports.isDrawCommand = exports.isCommand = exports.CommandType = void 0;
+var _utils = require("../utils");
+let CommandType = exports.CommandType = /*#__PURE__*/function (CommandType) {
+  // Context
+  CommandType[CommandType["Group"] = 0] = "Group";
+  CommandType[CommandType["SavePaint"] = 1] = "SavePaint";
+  CommandType[CommandType["RestorePaint"] = 2] = "RestorePaint";
+  CommandType[CommandType["SaveCTM"] = 3] = "SaveCTM";
+  CommandType[CommandType["RestoreCTM"] = 4] = "RestoreCTM";
+  CommandType[CommandType["PushColorFilter"] = 5] = "PushColorFilter";
+  CommandType[CommandType["PushBlurMaskFilter"] = 6] = "PushBlurMaskFilter";
+  CommandType[CommandType["PushImageFilter"] = 7] = "PushImageFilter";
+  CommandType[CommandType["PushPathEffect"] = 8] = "PushPathEffect";
+  CommandType[CommandType["PushShader"] = 9] = "PushShader";
+  CommandType[CommandType["ComposeColorFilter"] = 10] = "ComposeColorFilter";
+  CommandType[CommandType["ComposeImageFilter"] = 11] = "ComposeImageFilter";
+  CommandType[CommandType["ComposePathEffect"] = 12] = "ComposePathEffect";
+  CommandType[CommandType["MaterializePaint"] = 13] = "MaterializePaint";
+  CommandType[CommandType["SaveBackdropFilter"] = 14] = "SaveBackdropFilter";
+  CommandType[CommandType["SaveLayer"] = 15] = "SaveLayer";
+  CommandType[CommandType["RestorePaintDeclaration"] = 16] = "RestorePaintDeclaration";
+  // Drawing
+  CommandType[CommandType["DrawBox"] = 17] = "DrawBox";
+  CommandType[CommandType["DrawImage"] = 18] = "DrawImage";
+  CommandType[CommandType["DrawCircle"] = 19] = "DrawCircle";
+  CommandType[CommandType["DrawPaint"] = 20] = "DrawPaint";
+  CommandType[CommandType["DrawPoints"] = 21] = "DrawPoints";
+  CommandType[CommandType["DrawPath"] = 22] = "DrawPath";
+  CommandType[CommandType["DrawRect"] = 23] = "DrawRect";
+  CommandType[CommandType["DrawRRect"] = 24] = "DrawRRect";
+  CommandType[CommandType["DrawOval"] = 25] = "DrawOval";
+  CommandType[CommandType["DrawLine"] = 26] = "DrawLine";
+  CommandType[CommandType["DrawPatch"] = 27] = "DrawPatch";
+  CommandType[CommandType["DrawVertices"] = 28] = "DrawVertices";
+  CommandType[CommandType["DrawDiffRect"] = 29] = "DrawDiffRect";
+  CommandType[CommandType["DrawText"] = 30] = "DrawText";
+  CommandType[CommandType["DrawTextPath"] = 31] = "DrawTextPath";
+  CommandType[CommandType["DrawTextBlob"] = 32] = "DrawTextBlob";
+  CommandType[CommandType["DrawGlyphs"] = 33] = "DrawGlyphs";
+  CommandType[CommandType["DrawPicture"] = 34] = "DrawPicture";
+  CommandType[CommandType["DrawImageSVG"] = 35] = "DrawImageSVG";
+  CommandType[CommandType["DrawParagraph"] = 36] = "DrawParagraph";
+  CommandType[CommandType["DrawAtlas"] = 37] = "DrawAtlas";
+  CommandType[CommandType["DrawSkottie"] = 38] = "DrawSkottie";
+  return CommandType;
+}({});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const materializeCommand = command => {
+  "worklet";
+
+  const newProps = {
+    ...command.props
+  };
+  if (command.animatedProps) {
+    for (const key in command.animatedProps) {
+      const entry = command.animatedProps[key];
+      if ((0, _utils.isSharedValueSelector)(entry)) {
+        const group = entry.__sv.value;
+        newProps[key] = group && typeof group === "object" ? group[entry.__key] : undefined;
+      } else {
+        newProps[key] = entry.value;
+      }
+    }
+  }
+  return {
+    ...command,
+    props: newProps
+  };
+};
+exports.materializeCommand = materializeCommand;
+const isCommand = (command, type) => {
+  "worklet";
+
+  return command.type === type;
+};
+exports.isCommand = isCommand;
+const isGroup = command => {
+  "worklet";
+
+  return command.type === CommandType.Group;
+};
+exports.isGroup = isGroup;
+const isDrawCommand = (command, type) => {
+  "worklet";
+
+  return command.type === type;
+};
+exports.isDrawCommand = isDrawCommand;
+//# sourceMappingURL=Core.js.map

package/lib/commonjs/sksg/Recorder/Core.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","CommandType","exports","materializeCommand","command","newProps","props","animatedProps","key","entry","isSharedValueSelector","group","__sv","value","__key","undefined","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\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  DrawingNodeProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport { isSharedValueSelector } from \"../utils\";\n\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n  DrawSkottie,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const materializeCommand = (command: any) => {\n  \"worklet\";\n  const newProps = { ...command.props };\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      const entry = command.animatedProps[key];\n      if (isSharedValueSelector(entry)) {\n        const group = entry.__sv.value;\n        newProps[key] =\n          group && typeof group === \"object\"\n            ? (group as Record<string, unknown>)[entry.__key]\n            : undefined;\n      } else {\n        newProps[key] = entry.value;\n      }\n    }\n  }\n  return { ...command, props: newProps };\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\nexport interface GroupCommand extends Command<CommandType.Group> {\n  props?: Pick<DrawingNodeProps, \"zIndex\">;\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n  [CommandType.DrawSkottie]: SkottieProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Recorder/Debug.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from "./Core";
+export declare const debugTree: (commands: Command[], indent?: number) => string;

package/lib/commonjs/sksg/Recorder/Debug.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.debugTree = void 0;
+var _Core = require("./Core");
+const CommandTypeNames = {
+  [_Core.CommandType.Group]: "Group",
+  [_Core.CommandType.SavePaint]: "SavePaint",
+  [_Core.CommandType.RestorePaint]: "RestorePaint",
+  [_Core.CommandType.SaveCTM]: "SaveCTM",
+  [_Core.CommandType.RestoreCTM]: "RestoreCTM",
+  [_Core.CommandType.PushColorFilter]: "PushColorFilter",
+  [_Core.CommandType.PushBlurMaskFilter]: "PushBlurMaskFilter",
+  [_Core.CommandType.PushImageFilter]: "PushImageFilter",
+  [_Core.CommandType.PushPathEffect]: "PushPathEffect",
+  [_Core.CommandType.PushShader]: "PushShader",
+  [_Core.CommandType.ComposeColorFilter]: "ComposeColorFilter",
+  [_Core.CommandType.ComposeImageFilter]: "ComposeImageFilter",
+  [_Core.CommandType.ComposePathEffect]: "ComposePathEffect",
+  [_Core.CommandType.MaterializePaint]: "MaterializePaint",
+  [_Core.CommandType.SaveBackdropFilter]: "SaveBackdropFilter",
+  [_Core.CommandType.SaveLayer]: "SaveLayer",
+  [_Core.CommandType.RestorePaintDeclaration]: "RestorePaintDeclaration",
+  [_Core.CommandType.DrawBox]: "DrawBox",
+  [_Core.CommandType.DrawImage]: "DrawImage",
+  [_Core.CommandType.DrawCircle]: "DrawCircle",
+  [_Core.CommandType.DrawPaint]: "DrawPaint",
+  [_Core.CommandType.DrawPoints]: "DrawPoints",
+  [_Core.CommandType.DrawPath]: "DrawPath",
+  [_Core.CommandType.DrawRect]: "DrawRect",
+  [_Core.CommandType.DrawRRect]: "DrawRRect",
+  [_Core.CommandType.DrawOval]: "DrawOval",
+  [_Core.CommandType.DrawLine]: "DrawLine",
+  [_Core.CommandType.DrawPatch]: "DrawPatch",
+  [_Core.CommandType.DrawVertices]: "DrawVertices",
+  [_Core.CommandType.DrawDiffRect]: "DrawDiffRect",
+  [_Core.CommandType.DrawText]: "DrawText",
+  [_Core.CommandType.DrawTextPath]: "DrawTextPath",
+  [_Core.CommandType.DrawTextBlob]: "DrawTextBlob",
+  [_Core.CommandType.DrawGlyphs]: "DrawGlyphs",
+  [_Core.CommandType.DrawPicture]: "DrawPicture",
+  [_Core.CommandType.DrawImageSVG]: "DrawImageSVG",
+  [_Core.CommandType.DrawParagraph]: "DrawParagraph",
+  [_Core.CommandType.DrawAtlas]: "DrawAtlas",
+  [_Core.CommandType.DrawSkottie]: "DrawSkottie"
+};
+const serializeProps = props => {
+  try {
+    return JSON.stringify(props, (key, value) => {
+      if (key === "children") {
+        return undefined;
+      }
+      if (typeof value === "bigint") {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch (e) {
+    return `"Error serializing props: ${e}"`;
+  }
+};
+const debugTree = (commands, indent = 0) => {
+  let result = "[\n";
+  const prefix = " ".repeat(indent + 2);
+  commands.forEach((cmd, index) => {
+    const type = CommandTypeNames[cmd.type] || "Unknown";
+    result += `${prefix}{ "type": "${type}"`;
+    if ("props" in cmd) {
+      result += `, "props": ${serializeProps(cmd.props)}`;
+    }
+    if ((0, _Core.isGroup)(cmd)) {
+      result += `, "children": ${debugTree(cmd.children, indent + 2)}`;
+    }
+    result += " }";
+    if (index < commands.length - 1) {
+      result += ",";
+    }
+    result += "\n";
+  });
+  result += " ".repeat(indent) + "]";
+  return result;
+};
+exports.debugTree = debugTree;
+//# sourceMappingURL=Debug.js.map

package/lib/commonjs/sksg/Recorder/Debug.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Core","require","CommandTypeNames","CommandType","Group","SavePaint","RestorePaint","SaveCTM","RestoreCTM","PushColorFilter","PushBlurMaskFilter","PushImageFilter","PushPathEffect","PushShader","ComposeColorFilter","ComposeImageFilter","ComposePathEffect","MaterializePaint","SaveBackdropFilter","SaveLayer","RestorePaintDeclaration","DrawBox","DrawImage","DrawCircle","DrawPaint","DrawPoints","DrawPath","DrawRect","DrawRRect","DrawOval","DrawLine","DrawPatch","DrawVertices","DrawDiffRect","DrawText","DrawTextPath","DrawTextBlob","DrawGlyphs","DrawPicture","DrawImageSVG","DrawParagraph","DrawAtlas","DrawSkottie","serializeProps","props","JSON","stringify","key","value","undefined","toString","e","debugTree","commands","indent","result","prefix","repeat","forEach","cmd","index","type","isGroup","children","length","exports"],"sources":["Debug.ts"],"sourcesContent":["import { CommandType, isGroup } from \"./Core\";\nimport type { Command } from \"./Core\";\n\nconst CommandTypeNames: Record<CommandType, string> = {\n  [CommandType.Group]: \"Group\",\n  [CommandType.SavePaint]: \"SavePaint\",\n  [CommandType.RestorePaint]: \"RestorePaint\",\n  [CommandType.SaveCTM]: \"SaveCTM\",\n  [CommandType.RestoreCTM]: \"RestoreCTM\",\n  [CommandType.PushColorFilter]: \"PushColorFilter\",\n  [CommandType.PushBlurMaskFilter]: \"PushBlurMaskFilter\",\n  [CommandType.PushImageFilter]: \"PushImageFilter\",\n  [CommandType.PushPathEffect]: \"PushPathEffect\",\n  [CommandType.PushShader]: \"PushShader\",\n  [CommandType.ComposeColorFilter]: \"ComposeColorFilter\",\n  [CommandType.ComposeImageFilter]: \"ComposeImageFilter\",\n  [CommandType.ComposePathEffect]: \"ComposePathEffect\",\n  [CommandType.MaterializePaint]: \"MaterializePaint\",\n  [CommandType.SaveBackdropFilter]: \"SaveBackdropFilter\",\n  [CommandType.SaveLayer]: \"SaveLayer\",\n  [CommandType.RestorePaintDeclaration]: \"RestorePaintDeclaration\",\n  [CommandType.DrawBox]: \"DrawBox\",\n  [CommandType.DrawImage]: \"DrawImage\",\n  [CommandType.DrawCircle]: \"DrawCircle\",\n  [CommandType.DrawPaint]: \"DrawPaint\",\n  [CommandType.DrawPoints]: \"DrawPoints\",\n  [CommandType.DrawPath]: \"DrawPath\",\n  [CommandType.DrawRect]: \"DrawRect\",\n  [CommandType.DrawRRect]: \"DrawRRect\",\n  [CommandType.DrawOval]: \"DrawOval\",\n  [CommandType.DrawLine]: \"DrawLine\",\n  [CommandType.DrawPatch]: \"DrawPatch\",\n  [CommandType.DrawVertices]: \"DrawVertices\",\n  [CommandType.DrawDiffRect]: \"DrawDiffRect\",\n  [CommandType.DrawText]: \"DrawText\",\n  [CommandType.DrawTextPath]: \"DrawTextPath\",\n  [CommandType.DrawTextBlob]: \"DrawTextBlob\",\n  [CommandType.DrawGlyphs]: \"DrawGlyphs\",\n  [CommandType.DrawPicture]: \"DrawPicture\",\n  [CommandType.DrawImageSVG]: \"DrawImageSVG\",\n  [CommandType.DrawParagraph]: \"DrawParagraph\",\n  [CommandType.DrawAtlas]: \"DrawAtlas\",\n  [CommandType.DrawSkottie]: \"DrawSkottie\",\n};\n\nconst serializeProps = (props: unknown): string => {\n  try {\n    return JSON.stringify(props, (key, value) => {\n      if (key === \"children\") {\n        return undefined;\n      }\n      if (typeof value === \"bigint\") {\n        return value.toString();\n      }\n      return value;\n    });\n  } catch (e) {\n    return `\"Error serializing props: ${e}\"`;\n  }\n};\n\nexport const debugTree = (commands: Command[], indent = 0): string => {\n  let result = \"[\\n\";\n  const prefix = \" \".repeat(indent + 2);\n\n  commands.forEach((cmd, index) => {\n    const type = CommandTypeNames[cmd.type] || \"Unknown\";\n    result += `${prefix}{ \"type\": \"${type}\"`;\n\n    if (\"props\" in cmd) {\n      result += `, \"props\": ${serializeProps(cmd.props)}`;\n    }\n\n    if (isGroup(cmd)) {\n      result += `, \"children\": ${debugTree(cmd.children, indent + 2)}`;\n    }\n\n    result += \" }\";\n    if (index < commands.length - 1) {\n      result += \",\";\n    }\n    result += \"\\n\";\n  });\n\n  result += \" \".repeat(indent) + \"]\";\n  return result;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Recorder/DrawingContext.d.ts

@@ -0,0 +1,23 @@
+import type { Skia, SkCanvas, SkColorFilter, SkPaint, SkShader, SkImageFilter, SkPathEffect } from "../../skia/types";
+export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], canvas: SkCanvas) => {
+    Skia: Skia;
+    canvas: SkCanvas;
+    track: <T>(value: T) => T;
+    dispose: () => void;
+    paints: SkPaint[];
+    colorFilters: SkColorFilter[];
+    shaders: SkShader[];
+    imageFilters: SkImageFilter[];
+    pathEffects: SkPathEffect[];
+    paintDeclarations: SkPaint[];
+    paintPool: SkPaint[];
+    savePaint: () => void;
+    pushPaint: (paint: SkPaint) => void;
+    saveBackdropFilter: () => void;
+    readonly paint: SkPaint;
+    restorePaint: () => SkPaint | undefined;
+    materializePaint: () => void;
+    getOpacity: () => number;
+    setOpacity: (newOpacity: number) => void;
+};
+export type DrawingContext = ReturnType<typeof createDrawingContext>;

package/lib/commonjs/sksg/Recorder/DrawingContext.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDrawingContext = void 0;
+var _FrameScope = require("./FrameScope");
+const createDrawingContext = (Skia, paintPool, canvas) => {
+  "worklet";
+
+  // Everything the renderer creates through frameSkia is frame-scoped and
+  // deleted by dispose() once the frame has been recorded. The paint pool is
+  // recording-scoped and deliberately allocated with the raw Skia instance.
+  const {
+    Skia: frameSkia,
+    track,
+    dispose
+  } = (0, _FrameScope.createFrameScope)(Skia);
+
+  // State (formerly class fields)
+  const paints = [];
+  const colorFilters = [];
+  const shaders = [];
+  const imageFilters = [];
+  const pathEffects = [];
+  const paintDeclarations = [];
+  const opacities = [];
+  let nextPaintIndex = 1;
+
+  // Initialize first paint and opacity
+  if (paintPool.length === 0) {
+    paintPool.push(Skia.Paint());
+  } else {
+    // reset() produces an anti-alias false paint, unlike the Skia.Paint()
+    // factory: restore the default so reused pools render like the first frame.
+    paintPool[0].reset();
+    paintPool[0].setAntiAlias(true);
+  }
+  paints.push(paintPool[0]);
+  opacities.push(1);
+
+  // Methods (formerly class methods)
+  const savePaint = () => {
+    // Get next available paint from pool or create new one if needed
+    if (nextPaintIndex >= paintPool.length) {
+      paintPool.push(Skia.Paint());
+    }
+    const nextPaint = paintPool[nextPaintIndex];
+    nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties
+    paints.push(nextPaint);
+    opacities.push(opacities[opacities.length - 1]);
+    nextPaintIndex++;
+  };
+
+  // Pushes an externally owned paint (the `paint` prop) onto the stack. It
+  // pushes a frame-scoped copy, like the C++ DrawingCtx: materializePaint()
+  // mutates the top of the stack, and those mutations must not leak into the
+  // user-owned paint. It must also push an opacity alongside it: restorePaint()
+  // pops both, so pushing only the paint would underflow the opacity stack and
+  // leak the enclosing group's opacity onto everything drawn afterwards.
+  const pushPaint = paint => {
+    paints.push(track(paint.copy()));
+    opacities.push(opacities[opacities.length - 1]);
+  };
+  const getOpacity = () => {
+    return opacities[opacities.length - 1];
+  };
+  const setOpacity = newOpacity => {
+    opacities[opacities.length - 1] = Math.max(0, Math.min(1, newOpacity));
+  };
+  const saveBackdropFilter = () => {
+    let imageFilter = null;
+    const imgf = imageFilters.pop();
+    if (imgf) {
+      imageFilter = imgf;
+    } else {
+      const cf = colorFilters.pop();
+      if (cf) {
+        imageFilter = frameSkia.ImageFilter.MakeColorFilter(cf, null);
+      }
+    }
+    canvas.saveLayer(undefined, null, imageFilter);
+    canvas.restore();
+  };
+
+  // Equivalent to the `get paint()` getter in the original class
+  const getCurrentPaint = () => {
+    return paints[paints.length - 1];
+  };
+  const restorePaint = () => {
+    opacities.pop();
+    return paints.pop();
+  };
+  const materializePaint = () => {
+    // Color Filters
+    if (colorFilters.length > 0) {
+      getCurrentPaint().setColorFilter(colorFilters.reduceRight((inner, outer) => inner ? frameSkia.ColorFilter.MakeCompose(outer, inner) : outer));
+    }
+    // Shaders
+    if (shaders.length > 0) {
+      getCurrentPaint().setShader(shaders[shaders.length - 1]);
+    }
+    // Image Filters
+    if (imageFilters.length > 0) {
+      getCurrentPaint().setImageFilter(imageFilters.reduceRight((inner, outer) => inner ? frameSkia.ImageFilter.MakeCompose(outer, inner) : outer));
+    }
+
+    // Path Effects
+    if (pathEffects.length > 0) {
+      getCurrentPaint().setPathEffect(pathEffects.reduceRight((inner, outer) => inner ? frameSkia.PathEffect.MakeCompose(outer, inner) : outer));
+    }
+
+    // Clear arrays
+    colorFilters.length = 0;
+    shaders.length = 0;
+    imageFilters.length = 0;
+    pathEffects.length = 0;
+  };
+
+  // Return an object containing the Skia reference, the canvas, and the methods
+  return {
+    // Public fields
+    Skia: frameSkia,
+    canvas,
+    track,
+    dispose,
+    paints,
+    colorFilters,
+    shaders,
+    imageFilters,
+    pathEffects,
+    paintDeclarations,
+    paintPool,
+    // Public methods
+    savePaint,
+    pushPaint,
+    saveBackdropFilter,
+    get paint() {
+      return paints[paints.length - 1];
+    },
+    // the "getter" for the current paint
+    restorePaint,
+    materializePaint,
+    getOpacity,
+    setOpacity
+  };
+};
+exports.createDrawingContext = createDrawingContext;
+//# sourceMappingURL=DrawingContext.js.map

package/lib/commonjs/sksg/Recorder/DrawingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_FrameScope","require","createDrawingContext","Skia","paintPool","canvas","frameSkia","track","dispose","createFrameScope","paints","colorFilters","shaders","imageFilters","pathEffects","paintDeclarations","opacities","nextPaintIndex","length","push","Paint","reset","setAntiAlias","savePaint","nextPaint","assign","getCurrentPaint","pushPaint","paint","copy","getOpacity","setOpacity","newOpacity","Math","max","min","saveBackdropFilter","imageFilter","imgf","pop","cf","ImageFilter","MakeColorFilter","saveLayer","undefined","restore","restorePaint","materializePaint","setColorFilter","reduceRight","inner","outer","ColorFilter","MakeCompose","setShader","setImageFilter","setPathEffect","PathEffect","exports"],"sources":["DrawingContext.ts"],"sourcesContent":["import type {\n  Skia,\n  SkCanvas,\n  SkColorFilter,\n  SkPaint,\n  SkShader,\n  SkImageFilter,\n  SkPathEffect,\n} from \"../../skia/types\";\n\nimport { createFrameScope } from \"./FrameScope\";\n\nexport const createDrawingContext = (\n  Skia: Skia,\n  paintPool: SkPaint[],\n  canvas: SkCanvas\n) => {\n  \"worklet\";\n\n  // Everything the renderer creates through frameSkia is frame-scoped and\n  // deleted by dispose() once the frame has been recorded. The paint pool is\n  // recording-scoped and deliberately allocated with the raw Skia instance.\n  const { Skia: frameSkia, track, dispose } = createFrameScope(Skia);\n\n  // State (formerly class fields)\n  const paints: SkPaint[] = [];\n  const colorFilters: SkColorFilter[] = [];\n  const shaders: SkShader[] = [];\n  const imageFilters: SkImageFilter[] = [];\n  const pathEffects: SkPathEffect[] = [];\n  const paintDeclarations: SkPaint[] = [];\n  const opacities: number[] = [];\n\n  let nextPaintIndex = 1;\n\n  // Initialize first paint and opacity\n  if (paintPool.length === 0) {\n    paintPool.push(Skia.Paint());\n  } else {\n    // reset() produces an anti-alias false paint, unlike the Skia.Paint()\n    // factory: restore the default so reused pools render like the first frame.\n    paintPool[0].reset();\n    paintPool[0].setAntiAlias(true);\n  }\n  paints.push(paintPool[0]);\n  opacities.push(1);\n\n  // Methods (formerly class methods)\n  const savePaint = () => {\n    // Get next available paint from pool or create new one if needed\n    if (nextPaintIndex >= paintPool.length) {\n      paintPool.push(Skia.Paint());\n    }\n\n    const nextPaint = paintPool[nextPaintIndex];\n    nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties\n    paints.push(nextPaint);\n    opacities.push(opacities[opacities.length - 1]);\n    nextPaintIndex++;\n  };\n\n  // Pushes an externally owned paint (the `paint` prop) onto the stack. It\n  // pushes a frame-scoped copy, like the C++ DrawingCtx: materializePaint()\n  // mutates the top of the stack, and those mutations must not leak into the\n  // user-owned paint. It must also push an opacity alongside it: restorePaint()\n  // pops both, so pushing only the paint would underflow the opacity stack and\n  // leak the enclosing group's opacity onto everything drawn afterwards.\n  const pushPaint = (paint: SkPaint) => {\n    paints.push(track(paint.copy()));\n    opacities.push(opacities[opacities.length - 1]);\n  };\n\n  const getOpacity = () => {\n    return opacities[opacities.length - 1];\n  };\n\n  const setOpacity = (newOpacity: number) => {\n    opacities[opacities.length - 1] = Math.max(0, Math.min(1, newOpacity));\n  };\n\n  const saveBackdropFilter = () => {\n    let imageFilter: SkImageFilter | null = null;\n    const imgf = imageFilters.pop();\n    if (imgf) {\n      imageFilter = imgf;\n    } else {\n      const cf = colorFilters.pop();\n      if (cf) {\n        imageFilter = frameSkia.ImageFilter.MakeColorFilter(cf, null);\n      }\n    }\n    canvas.saveLayer(undefined, null, imageFilter);\n    canvas.restore();\n  };\n\n  // Equivalent to the `get paint()` getter in the original class\n  const getCurrentPaint = () => {\n    return paints[paints.length - 1];\n  };\n\n  const restorePaint = () => {\n    opacities.pop();\n    return paints.pop();\n  };\n\n  const materializePaint = () => {\n    // Color Filters\n    if (colorFilters.length > 0) {\n      getCurrentPaint().setColorFilter(\n        colorFilters.reduceRight((inner, outer) =>\n          inner ? frameSkia.ColorFilter.MakeCompose(outer, inner) : outer\n        )\n      );\n    }\n    // Shaders\n    if (shaders.length > 0) {\n      getCurrentPaint().setShader(shaders[shaders.length - 1]);\n    }\n    // Image Filters\n    if (imageFilters.length > 0) {\n      getCurrentPaint().setImageFilter(\n        imageFilters.reduceRight((inner, outer) =>\n          inner ? frameSkia.ImageFilter.MakeCompose(outer, inner) : outer\n        )\n      );\n    }\n\n    // Path Effects\n    if (pathEffects.length > 0) {\n      getCurrentPaint().setPathEffect(\n        pathEffects.reduceRight((inner, outer) =>\n          inner ? frameSkia.PathEffect.MakeCompose(outer, inner) : outer\n        )\n      );\n    }\n\n    // Clear arrays\n    colorFilters.length = 0;\n    shaders.length = 0;\n    imageFilters.length = 0;\n    pathEffects.length = 0;\n  };\n\n  // Return an object containing the Skia reference, the canvas, and the methods\n  return {\n    // Public fields\n    Skia: frameSkia,\n    canvas,\n    track,\n    dispose,\n    paints,\n    colorFilters,\n    shaders,\n    imageFilters,\n    pathEffects,\n    paintDeclarations,\n    paintPool,\n\n    // Public methods\n    savePaint,\n    pushPaint,\n    saveBackdropFilter,\n    get paint() {\n      return paints[paints.length - 1];\n    }, // the \"getter\" for the current paint\n    restorePaint,\n    materializePaint,\n    getOpacity,\n    setOpacity,\n  };\n};\n\nexport type DrawingContext = ReturnType<typeof createDrawingContext>;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Recorder/FrameScope.d.ts

@@ -0,0 +1,18 @@
+import type { Skia } from "../../skia/types";
+export interface FrameScope {
+    Skia: Skia;
+    track: <T>(value: T) => T;
+    dispose: () => void;
+}
+/**
+ * Wraps a Skia instance so that every object created through its factories is
+ * collected and deleted when the scope is disposed. The renderer only keeps
+ * the objects it creates alive for the duration of a frame: once the frame
+ * has been recorded they can be deleted. This is required on Web where
+ * CanvasKit objects live in WASM memory that the JS garbage collector does
+ * not perceive, so it (almost) never reclaims them on its own.
+ *
+ * Objects passed in via props are user-owned: they are not created through
+ * this facade and are therefore never tracked nor disposed.
+ */
+export declare const createFrameScope: (Skia: Skia) => FrameScope;