@shopify/react-native-skia 2.2.6 → 2.2.8

package/cpp/api/recorder/DrawingCtx.h

@@ -119,6 +119,21 @@ public:
     return result;
   }
 
+  std::vector<sk_sp<SkShader>> popShaders(int count) {
+    std::vector<sk_sp<SkShader>> result;
+    int actualCount = std::min(count, static_cast<int>(shaders.size()));
+    
+    if (actualCount > 0) {
+      // Get the last 'actualCount' shaders
+      auto start = shaders.end() - actualCount;
+      result.assign(start, shaders.end());
+      // Remove them from the original vector
+      shaders.erase(start, shaders.end());
+    }
+    
+    return result;
+  }
+
   void composeImageFilter() {
     if (imageFilters.size() >= 2) {
       auto outer = imageFilters.back();

package/cpp/api/recorder/JsiRecorder.h

@@ -121,7 +121,8 @@ public:
   JSI_HOST_FUNCTION(pushShader) {
     getObject()->pushShader(runtime,
                             arguments[0].asString(runtime).utf8(runtime),
-                            arguments[1].asObject(runtime));
+                            arguments[1].asObject(runtime),
+                            arguments[2].asNumber());
     return jsi::Value::undefined();
   }
 

package/cpp/api/recorder/RNRecorder.h

@@ -35,10 +35,10 @@ public:
   }
 
   void pushShader(jsi::Runtime &runtime, const std::string &nodeType,
-                  const jsi::Object &props) {
+                  const jsi::Object &props, int children) {
     if (nodeType == "skShader") {
       commands.push_back(
-          std::make_unique<PushShaderCmd>(runtime, props, variables));
+          std::make_unique<PushShaderCmd>(runtime, props, variables, children));
     } else if (nodeType == "skImageShader") {
       commands.push_back(
           std::make_unique<PushImageShaderCmd>(runtime, props, variables));

package/cpp/api/recorder/Shaders.h

@@ -21,11 +21,12 @@ struct PushShaderProps : TransformProps {
 class PushShaderCmd : public Command {
 private:
   PushShaderProps props;
+  int children;
 
 public:
   PushShaderCmd(jsi::Runtime &runtime, const jsi::Object &object,
-                Variables &variables)
-      : Command(CommandType::PushShader, "skShader") {
+                Variables &variables, int children)
+      : Command(CommandType::PushShader, "skShader"), children(children) {
     convertProperty(runtime, object, "transform", props.transform, variables);
     convertProperty(runtime, object, "origin", props.origin, variables);
     convertProperty(runtime, object, "matrix", props.matrix, variables);
@@ -39,9 +40,9 @@ public:
     auto m3 = processTransform(props.matrix, props.transform, props.origin);
     auto uniformsData = processUniforms(source, props.uniforms);
 
-    std::vector<sk_sp<SkShader>> children = ctx->popAllShaders();
-    auto shader = source->makeShader(std::move(uniformsData), children.data(),
-                                     children.size(), &m3);
+    std::vector<sk_sp<SkShader>> childrenShaders = ctx->popShaders(children);
+    auto shader = source->makeShader(std::move(uniformsData), childrenShaders.data(),
+                                     childrenShaders.size(), &m3);
 
     ctx->shaders.push_back(shader);
   }

package/lib/commonjs/skia/types/Recorder.d.ts

@@ -12,7 +12,7 @@ export interface BaseRecorder {
     pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
     pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
     pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
-    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>, children: number): void;
     pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
     composePathEffect(): void;
     composeColorFilter(): void;

package/lib/commonjs/skia/types/Recorder.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Recorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  TextProps,\n  AtlasProps,\n  BlurMaskFilterProps,\n  BoxProps,\n  BoxShadowProps,\n  CircleProps,\n  CTMProps,\n  DiffRectProps,\n  GlyphsProps,\n  ImageProps,\n  ImageSVGProps,\n  LineProps,\n  NodeType,\n  OvalProps,\n  PaintProps,\n  ParagraphProps,\n  PatchProps,\n  PathProps,\n  PictureProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextBlobProps,\n  TextPathProps,\n  VerticesProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer/processors/Animations/Animations\";\n\nimport type { SkPicture } from \"./Picture\";\n\nexport interface BaseRecorder {\n  saveGroup(): void;\n  restoreGroup(): void;\n  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;\n  restorePaint(): void;\n  restorePaintDeclaration(): void;\n  materializePaint(): void;\n  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;\n  pushImageFilter(\n    imageFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushColorFilter(\n    colorFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;\n  composePathEffect(): void;\n  composeColorFilter(): void;\n  composeImageFilter(): void;\n  saveCTM(props: AnimatedProps<CTMProps>): void;\n  restoreCTM(): void;\n  drawPaint(): void;\n  saveLayer(): void;\n  saveBackdropFilter(): void;\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n      animatedProps?: Record<string, SharedValue<unknown>>;\n    }[]\n  ): void;\n  drawImage(props: AnimatedProps<ImageProps>): void;\n  drawCircle(props: AnimatedProps<CircleProps>): void;\n  drawPoints(props: AnimatedProps<PointsProps>): void;\n  drawPath(props: AnimatedProps<PathProps>): void;\n  drawRect(props: AnimatedProps<RectProps>): void;\n  drawRRect(props: AnimatedProps<RoundedRectProps>): void;\n  drawOval(props: AnimatedProps<OvalProps>): void;\n  drawLine(props: AnimatedProps<LineProps>): void;\n  drawPatch(props: AnimatedProps<PatchProps>): void;\n  drawVertices(props: AnimatedProps<VerticesProps>): void;\n  drawDiffRect(props: AnimatedProps<DiffRectProps>): void;\n  drawText(props: AnimatedProps<TextProps>): void;\n  drawTextPath(props: AnimatedProps<TextPathProps>): void;\n  drawTextBlob(props: AnimatedProps<TextBlobProps>): void;\n  drawGlyphs(props: AnimatedProps<GlyphsProps>): void;\n  drawPicture(props: AnimatedProps<PictureProps>): void;\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;\n  drawParagraph(props: AnimatedProps<ParagraphProps>): void;\n  drawSkottie(props: AnimatedProps<SkottieProps>): void;\n  drawAtlas(props: AnimatedProps<AtlasProps>): void;\n}\n\nexport interface JsiRecorder extends BaseRecorder {\n  play(): SkPicture;\n  applyUpdates(variables: SharedValue<unknown>[]): void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Recorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  TextProps,\n  AtlasProps,\n  BlurMaskFilterProps,\n  BoxProps,\n  BoxShadowProps,\n  CircleProps,\n  CTMProps,\n  DiffRectProps,\n  GlyphsProps,\n  ImageProps,\n  ImageSVGProps,\n  LineProps,\n  NodeType,\n  OvalProps,\n  PaintProps,\n  ParagraphProps,\n  PatchProps,\n  PathProps,\n  PictureProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextBlobProps,\n  TextPathProps,\n  VerticesProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer/processors/Animations/Animations\";\n\nimport type { SkPicture } from \"./Picture\";\n\nexport interface BaseRecorder {\n  saveGroup(): void;\n  restoreGroup(): void;\n  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;\n  restorePaint(): void;\n  restorePaintDeclaration(): void;\n  materializePaint(): void;\n  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;\n  pushImageFilter(\n    imageFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushColorFilter(\n    colorFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushShader(\n    shaderType: NodeType,\n    props: AnimatedProps<unknown>,\n    children: number\n  ): void;\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;\n  composePathEffect(): void;\n  composeColorFilter(): void;\n  composeImageFilter(): void;\n  saveCTM(props: AnimatedProps<CTMProps>): void;\n  restoreCTM(): void;\n  drawPaint(): void;\n  saveLayer(): void;\n  saveBackdropFilter(): void;\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n      animatedProps?: Record<string, SharedValue<unknown>>;\n    }[]\n  ): void;\n  drawImage(props: AnimatedProps<ImageProps>): void;\n  drawCircle(props: AnimatedProps<CircleProps>): void;\n  drawPoints(props: AnimatedProps<PointsProps>): void;\n  drawPath(props: AnimatedProps<PathProps>): void;\n  drawRect(props: AnimatedProps<RectProps>): void;\n  drawRRect(props: AnimatedProps<RoundedRectProps>): void;\n  drawOval(props: AnimatedProps<OvalProps>): void;\n  drawLine(props: AnimatedProps<LineProps>): void;\n  drawPatch(props: AnimatedProps<PatchProps>): void;\n  drawVertices(props: AnimatedProps<VerticesProps>): void;\n  drawDiffRect(props: AnimatedProps<DiffRectProps>): void;\n  drawText(props: AnimatedProps<TextProps>): void;\n  drawTextPath(props: AnimatedProps<TextPathProps>): void;\n  drawTextBlob(props: AnimatedProps<TextBlobProps>): void;\n  drawGlyphs(props: AnimatedProps<GlyphsProps>): void;\n  drawPicture(props: AnimatedProps<PictureProps>): void;\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;\n  drawParagraph(props: AnimatedProps<ParagraphProps>): void;\n  drawSkottie(props: AnimatedProps<SkottieProps>): void;\n  drawAtlas(props: AnimatedProps<AtlasProps>): void;\n}\n\nexport interface JsiRecorder extends BaseRecorder {\n  play(): SkPicture;\n  applyUpdates(variables: SharedValue<unknown>[]): void;\n}\n"],"mappings":"","ignoreList":[]}

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

@@ -1,40 +1,4 @@
 import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
-import type { Node } from "./Node";
-import type { Recording } from "./Recorder/Recorder";
-import "../views/api";
-export declare abstract class Container {
-    protected Skia: Skia;
-    private _root;
-    protected recording: Recording | null;
-    protected unmounted: boolean;
-    constructor(Skia: Skia);
-    get root(): Node[];
-    set root(value: Node[]);
-    mount(): void;
-    unmount(): void;
-    drawOnCanvas(canvas: SkCanvas): void;
-    abstract redraw(): void;
-}
-declare class StaticContainer extends Container {
-    private nativeId;
-    private onSize?;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-declare class ReanimatedContainer extends Container {
-    private nativeId;
-    private onSize?;
-    private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-declare class NativeReanimatedContainer extends Container {
-    private nativeId;
-    private onSize?;
-    private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
-export {};
+import type { Skia, SkSize } from "../skia/types";
+import { StaticContainer } from "./StaticContainer";
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer;

package/lib/commonjs/sksg/Container.js

@@ -3,202 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createContainer = exports.Container = void 0;
-var _ReanimatedProxy = _interopRequireDefault(require("../external/reanimated/ReanimatedProxy"));
-var _renderHelpers = require("../external/reanimated/renderHelpers");
-var _Recorder = require("./Recorder/Recorder");
-var _Visitor = require("./Recorder/Visitor");
-var _Player = require("./Recorder/Player");
-var _DrawingContext = require("./Recorder/DrawingContext");
-var _ReanimatedRecorder = require("./Recorder/ReanimatedRecorder");
-require("../views/api");
-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 drawOnscreen = (Skia, nativeId, recording, onSize) => {
-  "worklet";
-
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
-      onSize.value = size;
-    }
-  }
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
-  //const start = performance.now();
-
-  const ctx = (0, _DrawingContext.createDrawingContext)(Skia, recording.paintPool, canvas);
-  (0, _Player.replay)(ctx, recording.commands);
-  const picture = rec.finishRecordingAsPicture();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-const nativeDrawOnscreen = (nativeId, recorder, onSize) => {
-  "worklet";
-
-  //const start = performance.now();
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
-      onSize.value = size;
-    }
-  }
-  const picture = recorder.play();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-class Container {
-  constructor(Skia) {
-    this.Skia = Skia;
-    _defineProperty(this, "_root", []);
-    _defineProperty(this, "recording", null);
-    _defineProperty(this, "unmounted", false);
-  }
-  get root() {
-    return this._root;
-  }
-  set root(value) {
-    this._root = value;
-  }
-  mount() {
-    this.unmounted = false;
-  }
-  unmount() {
-    this.unmounted = true;
-  }
-  drawOnCanvas(canvas) {
-    if (!this.recording) {
-      throw new Error("No recording to draw");
-    }
-    const ctx = (0, _DrawingContext.createDrawingContext)(this.Skia, this.recording.paintPool, canvas);
-    (0, _Player.replay)(ctx, this.recording.commands);
-  }
-}
-exports.Container = Container;
-class StaticContainer extends Container {
-  constructor(Skia, nativeId, onSize) {
-    super(Skia);
-    this.nativeId = nativeId;
-    this.onSize = onSize;
-  }
-  redraw() {
-    const recorder = new _Recorder.Recorder();
-    (0, _Visitor.visit)(recorder, this.root);
-    this.recording = recorder.getRecording();
-    const isOnScreen = this.nativeId !== -1;
-    if (isOnScreen) {
-      if (this.onSize) {
-        const size = SkiaViewApi.size(this.nativeId);
-        if (size.width !== this.onSize.value.width || size.height !== this.onSize.value.height) {
-          this.onSize.value = size;
-        }
-      }
-      const rec = this.Skia.PictureRecorder();
-      const canvas = rec.beginRecording();
-      this.drawOnCanvas(canvas);
-      const picture = rec.finishRecordingAsPicture();
-      SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
-    }
-  }
-}
-class ReanimatedContainer extends Container {
-  constructor(Skia, nativeId, onSize) {
-    super(Skia);
-    this.nativeId = nativeId;
-    this.onSize = onSize;
-    _defineProperty(this, "mapperId", null);
-  }
-  redraw() {
-    if (this.mapperId !== null) {
-      _ReanimatedProxy.default.stopMapper(this.mapperId);
-    }
-    if (this.unmounted) {
-      return;
-    }
-    const recorder = new _Recorder.Recorder();
-    (0, _Visitor.visit)(recorder, this.root);
-    const record = recorder.getRecording();
-    const {
-      animationValues
-    } = record;
-    this.recording = {
-      commands: record.commands,
-      paintPool: record.paintPool
-    };
-    const {
-      nativeId,
-      Skia,
-      recording
-    } = this;
-    if (animationValues.size > 0) {
-      this.mapperId = _ReanimatedProxy.default.startMapper(() => {
-        "worklet";
-
-        drawOnscreen(Skia, nativeId, recording);
-      }, Array.from(animationValues));
-    }
-    _ReanimatedProxy.default.runOnUI(onSize => {
-      "worklet";
-
-      drawOnscreen(Skia, nativeId, recording, onSize);
-    })(this.onSize);
-  }
-}
-class NativeReanimatedContainer extends Container {
-  constructor(Skia, nativeId, onSize) {
-    super(Skia);
-    this.nativeId = nativeId;
-    this.onSize = onSize;
-    _defineProperty(this, "mapperId", null);
-  }
-  redraw() {
-    if (this.mapperId !== null) {
-      _ReanimatedProxy.default.stopMapper(this.mapperId);
-    }
-    if (this.unmounted) {
-      return;
-    }
-    const {
-      nativeId,
-      Skia
-    } = this;
-    const recorder = new _ReanimatedRecorder.ReanimatedRecorder(Skia);
-    (0, _Visitor.visit)(recorder, this.root);
-    const sharedValues = recorder.getSharedValues();
-    const sharedRecorder = recorder.getRecorder();
-    _ReanimatedProxy.default.runOnUI(onSize => {
-      "worklet";
-
-      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
-    })(this.onSize);
-    if (sharedValues.length > 0) {
-      const {
-        onSize
-      } = this;
-      this.mapperId = _ReanimatedProxy.default.startMapper(() => {
-        "worklet";
-
-        sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
-      }, sharedValues);
-    }
-  }
-}
+exports.createContainer = void 0;
+var _StaticContainer = require("./StaticContainer");
 const createContainer = (Skia, nativeId, onSize) => {
-  const web = global.SkiaViewApi && global.SkiaViewApi.web;
-  if (_renderHelpers.HAS_REANIMATED_3 && nativeId !== -1) {
-    if (!web) {
-      return new NativeReanimatedContainer(Skia, nativeId, onSize);
-    } else {
-      return new ReanimatedContainer(Skia, nativeId, onSize);
-    }
-  } else {
-    return new StaticContainer(Skia, nativeId);
-  }
+  return new _StaticContainer.StaticContainer(Skia, nativeId, onSize);
 };
 exports.createContainer = createContainer;
 //# sourceMappingURL=Container.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_ReanimatedRecorder","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","height","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","root","_root","mount","unmounted","unmount","drawOnCanvas","Error","exports","StaticContainer","redraw","Recorder","visit","getRecording","isOnScreen","ReanimatedContainer","mapperId","Rea","stopMapper","record","animationValues","startMapper","Array","from","runOnUI","NativeReanimatedContainer","ReanimatedRecorder","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global","HAS_REANIMATED_3"],"sources":["Container.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nimport \"../views/api\";\n\nconst drawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recording: Recording,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      if (this.onSize) {\n        const size = SkiaViewApi.size(this.nativeId);\n        if (\n          size.width !== this.onSize.value.width ||\n          size.height !== this.onSize.value.height\n        ) {\n          this.onSize.value = size;\n        }\n      }\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, onSize);\n    })(this.onSize);\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n    })(this.onSize);\n    if (sharedValues.length > 0) {\n      const { onSize } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  const web = global.SkiaViewApi && global.SkiaViewApi.web;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (!web) {\n      return new NativeReanimatedContainer(Skia, nativeId, onSize);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId, onSize);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_StaticContainer","require","createContainer","Skia","nativeId","onSize","StaticContainer","exports"],"sources":["Container.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Skia, SkSize } from \"../skia/types\";\n\nimport { StaticContainer } from \"./StaticContainer\";\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  return new StaticContainer(Skia, nativeId, onSize);\n};\n"],"mappings":";;;;;;AAIA,IAAAA,gBAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAGA,CAC7BC,IAAU,EACVC,QAAgB,EAChBC,MAA4B,KACzB;EACH,OAAO,IAAIC,gCAAe,CAACH,IAAI,EAAEC,QAAQ,EAAEC,MAAM,CAAC;AACpD,CAAC;AAACE,OAAA,CAAAL,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/commonjs/sksg/Container.native.d.ts

@@ -0,0 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
+import "../skia/NativeSetup";
+import "../views/api";
+declare class NativeReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | NativeReanimatedContainer;
+export {};

package/lib/commonjs/sksg/Container.native.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createContainer = void 0;
+var _ReanimatedProxy = _interopRequireDefault(require("../external/reanimated/ReanimatedProxy"));
+var _renderHelpers = require("../external/reanimated/renderHelpers");
+var _ReanimatedRecorder = require("./Recorder/ReanimatedRecorder");
+var _StaticContainer = require("./StaticContainer");
+var _Visitor = require("./Recorder/Visitor");
+require("../skia/NativeSetup");
+require("../views/api");
+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 nativeDrawOnscreen = (nativeId, recorder, onSize) => {
+  "worklet";
+
+  //const start = performance.now();
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
+      onSize.value = size;
+    }
+  }
+  const picture = recorder.play();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+class NativeReanimatedContainer extends _StaticContainer.Container {
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
+    _defineProperty(this, "mapperId", null);
+  }
+  redraw() {
+    if (this.mapperId !== null) {
+      _ReanimatedProxy.default.stopMapper(this.mapperId);
+    }
+    if (this.unmounted) {
+      return;
+    }
+    const {
+      nativeId,
+      Skia
+    } = this;
+    const recorder = new _ReanimatedRecorder.ReanimatedRecorder(Skia);
+    (0, _Visitor.visit)(recorder, this.root);
+    const sharedValues = recorder.getSharedValues();
+    const sharedRecorder = recorder.getRecorder();
+    _ReanimatedProxy.default.runOnUI(onSize => {
+      "worklet";
+
+      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+    })(this.onSize);
+    if (sharedValues.length > 0) {
+      const {
+        onSize
+      } = this;
+      this.mapperId = _ReanimatedProxy.default.startMapper(() => {
+        "worklet";
+
+        sharedRecorder.applyUpdates(sharedValues);
+        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+      }, sharedValues);
+    }
+  }
+}
+const createContainer = (Skia, nativeId, onSize) => {
+  if (_renderHelpers.HAS_REANIMATED_3 && nativeId !== -1) {
+    return new NativeReanimatedContainer(Skia, nativeId, onSize);
+  } else {
+    return new _StaticContainer.StaticContainer(Skia, nativeId);
+  }
+};
+exports.createContainer = createContainer;
+//# sourceMappingURL=Container.native.js.map

package/lib/commonjs/sksg/Container.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_ReanimatedRecorder","_StaticContainer","_Visitor","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","nativeDrawOnscreen","nativeId","recorder","onSize","size","SkiaViewApi","width","height","picture","play","setJsiProperty","NativeReanimatedContainer","Container","constructor","Skia","redraw","mapperId","Rea","stopMapper","unmounted","ReanimatedRecorder","visit","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.native.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n    })(this.onSize);\n    if (sharedValues.length > 0) {\n      const { onSize } = this;\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId, onSize);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/Container.web.d.ts

@@ -0,0 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
+import "../skia/NativeSetup";
+import "../views/api";
+declare class ReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
+export {};

package/lib/commonjs/sksg/Container.web.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createContainer = void 0;
+var _ReanimatedProxy = _interopRequireDefault(require("../external/reanimated/ReanimatedProxy"));
+var _renderHelpers = require("../external/reanimated/renderHelpers");
+var _Recorder = require("./Recorder/Recorder");
+var _Visitor = require("./Recorder/Visitor");
+var _Player = require("./Recorder/Player");
+var _DrawingContext = require("./Recorder/DrawingContext");
+var _StaticContainer = require("./StaticContainer");
+require("../skia/NativeSetup");
+require("../views/api");
+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 drawOnscreen = (Skia, nativeId, recording, onSize) => {
+  "worklet";
+
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (size.width !== onSize.value.width || size.height !== onSize.value.height) {
+      onSize.value = size;
+    }
+  }
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  //const start = performance.now();
+
+  const ctx = (0, _DrawingContext.createDrawingContext)(Skia, recording.paintPool, canvas);
+  (0, _Player.replay)(ctx, recording.commands);
+  const picture = rec.finishRecordingAsPicture();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+class ReanimatedContainer extends _StaticContainer.Container {
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
+    _defineProperty(this, "mapperId", null);
+  }
+  redraw() {
+    if (this.mapperId !== null) {
+      _ReanimatedProxy.default.stopMapper(this.mapperId);
+    }
+    if (this.unmounted) {
+      return;
+    }
+    const recorder = new _Recorder.Recorder();
+    (0, _Visitor.visit)(recorder, this.root);
+    const record = recorder.getRecording();
+    const {
+      animationValues
+    } = record;
+    this.recording = {
+      commands: record.commands,
+      paintPool: record.paintPool
+    };
+    const {
+      nativeId,
+      Skia,
+      recording
+    } = this;
+    if (animationValues.size > 0) {
+      this.mapperId = _ReanimatedProxy.default.startMapper(() => {
+        "worklet";
+
+        drawOnscreen(Skia, nativeId, recording);
+      }, Array.from(animationValues));
+    }
+    _ReanimatedProxy.default.runOnUI(onSize => {
+      "worklet";
+
+      drawOnscreen(Skia, nativeId, recording, onSize);
+    })(this.onSize);
+  }
+}
+const createContainer = (Skia, nativeId, onSize) => {
+  if (_renderHelpers.HAS_REANIMATED_3 && nativeId !== -1) {
+    return new ReanimatedContainer(Skia, nativeId, onSize);
+  } else {
+    return new _StaticContainer.StaticContainer(Skia, nativeId);
+  }
+};
+exports.createContainer = createContainer;
+//# sourceMappingURL=Container.web.js.map

package/lib/commonjs/sksg/Container.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_StaticContainer","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","onSize","size","SkiaViewApi","width","height","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","setJsiProperty","ReanimatedContainer","Container","constructor","redraw","mapperId","Rea","stopMapper","unmounted","recorder","Recorder","visit","root","record","getRecording","animationValues","startMapper","Array","from","runOnUI","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.web.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkSize } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\n\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst drawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recording: Recording,\n  onSize?: SharedValue<SkSize>\n) => {\n  \"worklet\";\n  if (onSize) {\n    const size = SkiaViewApi.size(nativeId);\n    if (\n      size.width !== onSize.value.width ||\n      size.height !== onSize.value.height\n    ) {\n      onSize.value = size;\n    }\n  }\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!, onSize);\n    })(this.onSize);\n  }\n}\n\nexport const createContainer = (\n  Skia: Skia,\n  nativeId: number,\n  onSize?: SharedValue<SkSize>\n) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new ReanimatedContainer(Skia, nativeId, onSize);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import type { HostConfig } from "react-reconciler";
 import type { NodeType } from "../dom/types";
 import type { Node } from "./Node";
-import type { Container } from "./Container";
+import type { Container } from "./StaticContainer";
 export declare const debug: (...args: Parameters<typeof console.log>) => void;
 type Instance = Node;
 type Props = object;