@shopify/react-native-skia 0.1.121 → 0.1.124

package/cpp/rnskia/values/RNSkReadonlyValue.h

@@ -4,9 +4,7 @@
 #include <algorithm>
 #include <functional>
 #include <chrono>
-#include <mutex>
 #include <unordered_map>
-#include <utility>
 #include <memory>
 
 #include <jsi/jsi.h>
@@ -22,16 +20,15 @@ using namespace facebook;
  Implements a readonly Value that is updated every time the screen is redrawn. Its value will be the
  number of milliseconds since the animation value was started.
  */
-class RNSkReadonlyValue : public JsiSkHostObject
+class RNSkReadonlyValue : public JsiSkHostObject,
+                          public std::enable_shared_from_this<RNSkReadonlyValue>
 {
 public:
   RNSkReadonlyValue(std::shared_ptr<RNSkPlatformContext> platformContext)
       : JsiSkHostObject(platformContext),
-    _propNameId(jsi::PropNameID::forUtf8(*platformContext->getJsRuntime(), "value")) {}
+    _propNameId(jsi::PropNameID::forUtf8(*platformContext->getJsRuntime(), "value")) { }
   
-  ~RNSkReadonlyValue() {
-    _invalidated = true;
-  }
+  virtual ~RNSkReadonlyValue() { }
 
   JSI_PROPERTY_GET(__typename__) {
     return jsi::String::createFromUtf8(runtime, "RNSkValue");
@@ -43,8 +40,7 @@ public:
   
   JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkReadonlyValue, __typename__),
                               JSI_EXPORT_PROP_GET(RNSkReadonlyValue, current))
-    
-  
+      
   JSI_HOST_FUNCTION(addListener) {
     if(!arguments[0].isObject() || !arguments[0].asObject(runtime).isFunction(runtime)) {
       jsi::detail::throwJSError(runtime, "Expected function as first parameter.");
@@ -52,8 +48,13 @@ public:
     }
     auto callback = std::make_shared<jsi::Function>(arguments[0].asObject(runtime).asFunction(runtime));
     
-    auto unsubscribe = addListener([this, callback = std::move(callback)](jsi::Runtime& runtime){
-      callback->call(runtime, get_current(runtime));
+    auto unsubscribe = addListener([weakSelf = weak_from_this(),
+                                    callback = std::move(callback)](jsi::Runtime& runtime){
+      auto self = weakSelf.lock();
+      if(self) {
+        auto selfReadonlyValue = std::dynamic_pointer_cast<RNSkReadonlyValue>(self);
+        callback->call(runtime, selfReadonlyValue->get_current(runtime));
+      }
     });
     
     return jsi::Function::createFromHostFunction(runtime,
@@ -76,9 +77,10 @@ public:
     std::lock_guard<std::mutex> lock(_mutex);
     auto listenerId = _listenerId++;
     _listeners.emplace(listenerId, cb);
-    return [this, listenerId]() {
-      if(!_invalidated) {
-        removeListener(listenerId);
+    return [weakSelf = weak_from_this(), listenerId]() {
+      auto self = weakSelf.lock();
+      if(self) {
+        self->removeListener(listenerId);
       }
     };
   }
@@ -104,6 +106,7 @@ public:
   }
   
 protected:
+  
   /**
     Notifies listeners about changes
    @param runtime Current JS Runtime
@@ -128,8 +131,6 @@ protected:
     _listeners.erase(listenerId);
   }
 
-  std::atomic<bool> _invalidated = { false };
-
 private:
   jsi::PropNameID _propNameId;
   std::shared_ptr<jsi::Object> _valueHolder;

package/cpp/rnskia/values/RNSkValue.h

@@ -76,11 +76,16 @@ public:
 
 private:
   void subscribe(std::shared_ptr<RNSkAnimation> animation) {
-    unsubscribe();
     if(animation != nullptr) {
       _animation = animation;
-      auto dispatch = std::bind(&RNSkValue::animationDidUpdate, this, std::placeholders::_1);
-      _unsubscribe = std::make_shared<std::function<void()>>(_animation->addListener(dispatch));
+      _unsubscribe = std::make_shared<std::function<void()>>(
+        _animation->addListener([weakSelf = weak_from_this()](jsi::Runtime &runtime) {
+        auto self = weakSelf.lock();
+        if(self) {
+          auto selfAsThis = std::dynamic_pointer_cast<RNSkValue>(self);
+          selfAsThis->animationDidUpdate(runtime);
+        }
+      }));
       // Start the animation
       _animation->startClock();
     }

package/cpp/utils/RNSkTimingInfo.h

@@ -1,5 +1,6 @@
 #pragma once
 
+#include <RNSkLog.h>
 #include <chrono>
 
 #define NUMBER_OF_DURATION_SAMPLES 10
@@ -12,7 +13,7 @@ using ms = duration<float, std::milli>;
 
 class RNSkTimingInfo {
 public:
-  RNSkTimingInfo() {
+  RNSkTimingInfo(const std::string &name): _name(std::move(name)) {
     reset();
   }
 
@@ -25,6 +26,7 @@ public:
     _prevFpsTimer = -1;
     _frameCount = 0;
     _lastFrameCount = -1;
+    _didSkip = false;
   }
   
   void beginTiming() {
@@ -35,6 +37,14 @@ public:
     time_point<steady_clock> stop = high_resolution_clock::now();
     addLastDuration(duration_cast<milliseconds>(stop - _start).count());
     tick(stop);
+    if(_didSkip) {
+      _didSkip = false;
+      RNSkLogger::logToConsole("%s: Skipped frame. Previous frame time: %lldms", _name.c_str(), _lastDuration);
+    }
+  }
+
+  void markSkipped() {
+    _didSkip = true;
   }
 
   long getAverage() { return static_cast<long>(_average); }
@@ -86,6 +96,8 @@ private:
   long _prevFpsTimer;
   double _frameCount;
   double _lastFrameCount;
+  double _didSkip;
+  std::string _name;
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkDrawViewImpl.h

@@ -21,25 +21,23 @@
 class RNSkDrawViewImpl : public RNSkia::RNSkDrawView {
 public:
   RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+  ~RNSkDrawViewImpl();
   
-  void setSize(int width, int height);
+  CALayer* getLayer() { return _layer; }
   
-  CALayer* getLayer() { return _layer; };
+  void setSize(int width, int height);
 
 protected:
-  int getWidth() override { return _width * _context->getPixelDensity(); };
-  int getHeight() override { return _height * _context->getPixelDensity(); };
-  void onInvalidated() override {
-    setNativeDrawFunc(nullptr);
-  };
+  float getScaledWidth() override { return _width * _context->getPixelDensity(); };
+  float getScaledHeight() override { return _height * _context->getPixelDensity(); };
   
 private:
-  void drawFrame(const sk_sp<SkPicture> picture);
+  void drawPicture(const sk_sp<SkPicture> picture) override;
   bool createSkiaSurface();
 
   int _nativeId;
-  int _width = -1;
-  int _height = -1;
+  float _width = -1;
+  float _height = -1;
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"

package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm

@@ -19,19 +19,34 @@ sk_sp<GrDirectContext> RNSkDrawViewImpl::_skContext = nullptr;
 
 RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
   _context(context), RNSkia::RNSkDrawView(context) {
-    
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
-    _layer = [CAMetalLayer layer];
+  _layer = [CAMetalLayer layer];
 #pragma clang diagnostic pop
     
-    _layer.framebufferOnly = NO;
-    _layer.device = _device;
-    _layer.opaque = false;
-    _layer.contentsScale = _context->getPixelDensity();
-    _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
-    
-    setNativeDrawFunc(std::bind(&RNSkDrawViewImpl::drawFrame, this, std::placeholders::_1));
+  _layer.framebufferOnly = NO;
+  _layer.device = _device;
+  _layer.opaque = false;
+  _layer.contentsScale = _context->getPixelDensity();
+  _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
+}
+
+RNSkDrawViewImpl::~RNSkDrawViewImpl() {
+  if([[NSThread currentThread] isMainThread]) {
+    _layer = NULL;
+  } else {
+    __block auto tempLayer = _layer;
+    dispatch_async(dispatch_get_main_queue(), ^{
+      // By using the tempLayer variable in the block we capture it and it will be
+      // released after the block has finished. This way the CAMetalLayer dealloc will
+      // only be called on the main thread. Problem: this destructor might be called from
+      // releasing the RNSkDrawViewImpl from a thread capture (after dtor has started),
+      // which would cause the CAMetalLayer dealloc to be called on another thread which
+      // causes a crash.
+      // https://github.com/Shopify/react-native-skia/issues/398
+      tempLayer = tempLayer;
+    });
+  }
 }
 
 void RNSkDrawViewImpl::setSize(int width, int height) {
@@ -44,7 +59,7 @@ void RNSkDrawViewImpl::setSize(int width, int height) {
   requestRedraw();
 }
 
-void RNSkDrawViewImpl::drawFrame(const sk_sp<SkPicture> picture) {
+void RNSkDrawViewImpl::drawPicture(const sk_sp<SkPicture> picture) {
   if(_width == -1 && _height == -1) {
     return;
   }

package/ios/RNSkia-iOS/SkiaDrawView.mm

@@ -26,53 +26,58 @@
     _nativeId = 0;
     _debugMode = false;
     _drawingMode = RNSkia::RNSkDrawingMode::Default;
+    
     // Listen to notifications about module invalidation
+    __unsafe_unretained SkiaDrawView *weakSelf = self;
     auto nc = [NSNotificationCenter defaultCenter];
     [nc addObserverForName:RCTBridgeWillInvalidateModulesNotification
                     object:nil
                      queue:nil
                 usingBlock:^(NSNotification *notification){
-      // Remove local variables
-      self->_manager = nullptr;                
+      // Remove local variables when the bridge is teared down.
+      weakSelf->_impl = nullptr;
+      weakSelf->_manager = nullptr;
     }];
   }
   return self;
 }
 
-- (void)dealloc {
-  if(_manager != nullptr) {
-    _manager->unregisterSkiaDrawView(_nativeId);
-  }
-}
-
 #pragma mark Lifecycle
 
-- (void) willMoveToWindow:(UIWindow *)newWindow {
-  [super willMoveToWindow: newWindow];
-  
+- (void) willMoveToSuperview:(UIView *)newWindow {
   if (newWindow == NULL) {
     // Remove implementation view when the parent view is not set
     if(_impl != nullptr) {
+      [_impl->getLayer() removeFromSuperlayer];
+      
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaDrawView(_nativeId, nullptr);
       }
-      [_impl->getLayer() removeFromSuperlayer];
+      
       _impl = nullptr;
     }
   } else {
     // Create implementation view when the parent view is set
     if(_impl == nullptr && _manager != nullptr) {
       _impl = std::make_shared<RNSkDrawViewImpl>(_manager->getPlatformContext());
-      [self.layer addSublayer:_impl->getLayer()];
+      [self.layer addSublayer: _impl->getLayer()];
       if(_nativeId != 0) {
-        _manager->setSkiaDrawView(_nativeId, _impl.get());
+        _manager->setSkiaDrawView(_nativeId, _impl);
       }
       _impl->setDrawingMode(_drawingMode);
-      _impl->setShowDebugOverlays(_debugMode);      
+      _impl->setShowDebugOverlays(_debugMode);
     }
   }
 }
 
+- (void) dealloc {
+  auto nc = [NSNotificationCenter defaultCenter];
+  [nc removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
+  if(_manager != nullptr && _nativeId != 0) {
+    _manager->unregisterSkiaDrawView(_nativeId);
+  }
+}
+
 #pragma mark Layout
 
 - (void) layoutSubviews {
@@ -103,7 +108,7 @@
   _nativeId = nativeId;
   
   if(_impl != nullptr) {
-    _manager->registerSkiaDrawView(nativeId, _impl.get());
+    _manager->registerSkiaDrawView(nativeId, _impl);
   }
 }
 

package/lib/commonjs/renderer/Canvas.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCanvasSize = exports.useCanvasRef = exports.skiaReconciler = exports.Canvas = void 0;
+exports.useCanvasSize = exports.useCanvasRef = exports.useCanvas = exports.skiaReconciler = exports.Canvas = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,6 +15,8 @@ var _skia = require("../skia");
 
 var _useValue = require("../values/hooks/useValue");
 
+var _Paint = require("../skia/Paint/Paint");
+
 var _HostConfig = require("./HostConfig");
 
 var _processors = require("./processors");
@@ -32,14 +34,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // import { debugTree } from "./nodes";
 const CanvasContext = /*#__PURE__*/_react.default.createContext(null);
 
-const useCanvasSize = () => {
-  const canvas = (0, _react.useContext)(CanvasContext);
+const useCanvas = () => {
+  const size = (0, _react.useContext)(CanvasContext);
 
-  if (!canvas) {
+  if (!size) {
     throw new Error("Canvas context is not available");
   }
 
-  return canvas;
+  return {
+    size
+  };
+};
+
+exports.useCanvas = useCanvas;
+
+const useCanvasSize = () => {
+  console.warn("useCanvasSize is deprecated, use the size member of useCanvas() instead.");
+  return useCanvas().size;
 };
 
 exports.useCanvasSize = useCanvasSize;
@@ -109,9 +120,7 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
       };
     }
 
-    const paint = _skia.Skia.Paint();
-
-    paint.setAntiAlias(true);
+    const paint = (0, _Paint.SkiaPaint)();
     const ctx = {
       width,
       height,

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvasSize","canvas","Error","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","info","timestamp","touches","current","paint","Paint","setAntiAlias","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        paint.setAntiAlias(true);\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvas","size","Error","useCanvasSize","console","warn","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","canvas","info","timestamp","touches","current","paint","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\nimport { SkiaPaint } from \"../skia/Paint/Paint\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvas = () => {\n  const size = useContext(CanvasContext);\n  if (!size) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return { size };\n};\n\nexport const useCanvasSize = () => {\n  console.warn(\n    \"useCanvasSize is deprecated, use the size member of useCanvas() instead.\"\n  );\n  return useCanvas().size;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = SkiaPaint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/commonjs/renderer/components/Paint.js

@@ -23,7 +23,7 @@ const usePaintRef = () => (0, _react.useRef)(null);
 
 exports.usePaintRef = usePaintRef;
 const Paint = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const paint = (0, _react.useMemo)(() => _skia.Skia.Paint(), []);
+  const paint = (0, _react.useMemo)(() => (0, _skia.SkiaPaint)(), []);
   (0, _react.useImperativeHandle)(ref, () => paint, [paint]);
   const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => (0, _processors.processPaint)(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({

package/lib/commonjs/renderer/components/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACJ,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}
+{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAM,sBAAd,EAA2B,EAA3B,CAAd;AACA,kCAAoBD,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAMC,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaJ,KAAb,EAAoBI,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACH,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { SkiaPaint } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => SkiaPaint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}

package/lib/commonjs/renderer/components/colorFilters/Lerp.js

@@ -25,7 +25,7 @@ const onDeclare = (0, _Declaration.createDeclaration)((_ref, children) => {
   } = _ref;
   const [src, dst] = children.filter(_ColorFilter.isColorFilter);
 
-  const cf = _skia.Skia.ColorFilter.MakeLerp(t, dst, src);
+  const cf = _skia.Skia.ColorFilter.MakeLerp(t, src, dst);
 
   return (0, _Compose.composeColorFilter)(cf, children.filter(c => c !== src && c !== dst));
 });

package/lib/commonjs/renderer/components/colorFilters/Lerp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Lerp.tsx"],"names":["onDeclare","children","t","src","dst","filter","isColorFilter","cf","Skia","ColorFilter","MakeLerp","c","Lerp","props"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAEA;;AAEA;;;;;;AAOA,MAAMA,SAAS,GAAG,oCAA6B,OAAQC,QAAR,KAAqB;AAAA,MAApB;AAAEC,IAAAA;AAAF,GAAoB;AAClE,QAAM,CAACC,GAAD,EAAMC,GAAN,IAAaH,QAAQ,CAACI,MAAT,CAAgBC,0BAAhB,CAAnB;;AACA,QAAMC,EAAE,GAAGC,WAAKC,WAAL,CAAiBC,QAAjB,CAA0BR,CAA1B,EAA6BE,GAA7B,EAAkCD,GAAlC,CAAX;;AACA,SAAO,iCACLI,EADK,EAELN,QAAQ,CAACI,MAAT,CAAiBM,CAAD,IAAOA,CAAC,KAAKR,GAAN,IAAaQ,CAAC,KAAKP,GAA1C,CAFK,CAAP;AAID,CAPiB,CAAlB;;AASO,MAAMQ,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAe,IAAA,SAAS,EAAEb;AAA1B,KAAyCa,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport { isColorFilter } from \"../../../skia/ColorFilter/ColorFilter\";\n\nimport { composeColorFilter } from \"./Compose\";\n\nexport interface LerpProps {\n  t: number;\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<LerpProps>(({ t }, children) => {\n  const [src, dst] = children.filter(isColorFilter);\n  const cf = Skia.ColorFilter.MakeLerp(t, dst, src);\n  return composeColorFilter(\n    cf,\n    children.filter((c) => c !== src && c !== dst)\n  );\n});\n\nexport const Lerp = (props: AnimatedProps<LerpProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
+{"version":3,"sources":["Lerp.tsx"],"names":["onDeclare","children","t","src","dst","filter","isColorFilter","cf","Skia","ColorFilter","MakeLerp","c","Lerp","props"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAEA;;AAEA;;;;;;AAOA,MAAMA,SAAS,GAAG,oCAA6B,OAAQC,QAAR,KAAqB;AAAA,MAApB;AAAEC,IAAAA;AAAF,GAAoB;AAClE,QAAM,CAACC,GAAD,EAAMC,GAAN,IAAaH,QAAQ,CAACI,MAAT,CAAgBC,0BAAhB,CAAnB;;AACA,QAAMC,EAAE,GAAGC,WAAKC,WAAL,CAAiBC,QAAjB,CAA0BR,CAA1B,EAA6BC,GAA7B,EAAkCC,GAAlC,CAAX;;AACA,SAAO,iCACLG,EADK,EAELN,QAAQ,CAACI,MAAT,CAAiBM,CAAD,IAAOA,CAAC,KAAKR,GAAN,IAAaQ,CAAC,KAAKP,GAA1C,CAFK,CAAP;AAID,CAPiB,CAAlB;;AASO,MAAMQ,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAe,IAAA,SAAS,EAAEb;AAA1B,KAAyCa,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport { isColorFilter } from \"../../../skia/ColorFilter/ColorFilter\";\n\nimport { composeColorFilter } from \"./Compose\";\n\nexport interface LerpProps {\n  t: number;\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<LerpProps>(({ t }, children) => {\n  const [src, dst] = children.filter(isColorFilter);\n  const cf = Skia.ColorFilter.MakeLerp(t, src, dst);\n  return composeColorFilter(\n    cf,\n    children.filter((c) => c !== src && c !== dst)\n  );\n});\n\nexport const Lerp = (props: AnimatedProps<LerpProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/commonjs/renderer/components/shaders/Shader.js

@@ -17,8 +17,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-// We need to use any here because hasOwnProperty doesn't work on JSI instances
-const isVector = obj => // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isVector = obj => // We have an issue to check property existence on JSI backed instances
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 obj.x !== undefined && obj.y !== undefined;
 
 const processValue = value => {

package/lib/commonjs/renderer/components/shaders/Shader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Shader.tsx"],"names":["isVector","obj","x","undefined","y","processValue","value","onDeclare","children","uniforms","source","opaque","transform","processedUniforms","Array","getUniformCount","fill","flatMap","_","i","name","getUniformName","Error","isArray","names","Object","keys","length","usedUniforms","map","unusedUniform","indexOf","filter","n","console","warn","join","makeShaderWithChildren","isShader","Shader","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAGA;;AAGA;;AACA;;;;;;AAEA;AACA,MAAMA,QAAQ,GAAIC,GAAD,IACf;AACCA,GAAD,CAAaC,CAAb,KAAmBC,SAAnB,IAAiCF,GAAD,CAAaG,CAAb,KAAmBD,SAFrD;;AAYA,MAAME,YAAY,GAAIC,KAAD,IAAqD;AACxE,MAAIN,QAAQ,CAACM,KAAD,CAAZ,EAAqB;AACnB,WAAO,CAACA,KAAK,CAACJ,CAAP,EAAUI,KAAK,CAACF,CAAhB,CAAP;AACD;;AACD,SAAOE,KAAP;AACD,CALD;;AAcA,MAAMC,SAAS,GAAG,oCAChB,OAA6CC,QAA7C,KAA0D;AAAA,MAAzD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA,MAApB;AAA4B,OAAGC;AAA/B,GAAyD;AACxD,QAAMC,iBAAiB,GAAG,IAAIC,KAAJ,CAAUJ,MAAM,CAACK,eAAP,EAAV,EACvBC,IADuB,CAClB,CADkB,EAEvBC,OAFuB,CAEf,CAACC,CAAD,EAAIC,CAAJ,KAAU;AACjB,UAAMC,IAAI,GAAGV,MAAM,CAACW,cAAP,CAAsBF,CAAtB,CAAb;AACA,UAAMb,KAAK,GAAGG,QAAQ,CAACW,IAAD,CAAtB;;AACA,QAAId,KAAK,KAAKH,SAAd,EAAyB;AACvB,YAAM,IAAImB,KAAJ,CAAW,kCAAiCF,IAAK,EAAjD,CAAN;AACD;;AACD,QAAIN,KAAK,CAACS,OAAN,CAAcjB,KAAd,CAAJ,EAA0B;AACxB,aAAOA,KAAK,CAACW,OAAN,CAAcZ,YAAd,CAAP;AACD;;AACD,WAAOA,YAAY,CAACC,KAAD,CAAnB;AACD,GAZuB,CAA1B;AAaA,QAAMkB,KAAK,GAAGC,MAAM,CAACC,IAAP,CAAYjB,QAAZ,CAAd;;AACA,MAAIe,KAAK,CAACG,MAAN,GAAejB,MAAM,CAACK,eAAP,EAAnB,EAA6C;AAC3C,UAAMa,YAAY,GAAG,IAAId,KAAJ,CAAUJ,MAAM,CAACK,eAAP,EAAV,EAClBC,IADkB,CACb,CADa,EAElBa,GAFkB,CAEd,CAACX,CAAD,EAAIC,CAAJ,KAAUT,MAAM,CAACW,cAAP,CAAsBF,CAAtB,CAFI,CAArB;AAGA,UAAMW,aAAa,GAAGN,KAAK,CACxBK,GADmB,CACdT,IAAD,IAAU;AACb,UAAIQ,YAAY,CAACG,OAAb,CAAqBX,IAArB,MAA+B,CAAC,CAApC,EAAuC;AACrC,eAAOA,IAAP;AACD;;AACD,aAAO,IAAP;AACD,KANmB,EAOnBY,MAPmB,CAOXC,CAAD,IAAOA,CAAC,KAAK,IAPD,CAAtB;AAQAC,IAAAA,OAAO,CAACC,IAAR,CACE,oCAAoCL,aAAa,CAACM,IAAd,CAAmB,IAAnB,CADtC;AAGD;;AACD,SAAO1B,MAAM,CAAC2B,sBAAP,CACLxB,iBADK,EAELF,MAFK,EAGLH,QAAQ,CAACwB,MAAT,CAAgBM,cAAhB,CAHK,EAIL,6BAAY1B,SAAZ,CAJK,CAAP;AAMD,CAtCe,CAAlB;;AAyCO,MAAM2B,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAe,IAAA,SAAS,EAAEjC;AAA1B,KAAyCiC,KAAzC,EAAP;AACD,CAFM;;;AAIPD,MAAM,CAACE,YAAP,GAAsB;AACpBhC,EAAAA,QAAQ,EAAE;AADU,CAAtB","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { isShader } from \"../../../skia\";\nimport type { IRuntimeEffect } from \"../../../skia\";\nimport type { Vector, AnimatedProps, TransformProps } from \"../../processors\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport { localMatrix } from \"../../processors\";\n\n// We need to use any here because hasOwnProperty doesn't work on JSI instances\nconst isVector = (obj: unknown): obj is Vector =>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (obj as any).x !== undefined && (obj as any).y !== undefined;\n\ntype UniformValue = number | Vector | readonly number[];\n\ntype Uniform = UniformValue | readonly UniformValue[];\n\ninterface Uniforms {\n  [name: string]: Uniform;\n}\n\nconst processValue = (value: UniformValue): number | readonly number[] => {\n  if (isVector(value)) {\n    return [value.x, value.y];\n  }\n  return value;\n};\n\nexport interface ShaderProps extends TransformProps {\n  source: IRuntimeEffect;\n  uniforms: Uniforms;\n  opaque?: boolean;\n  children?: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<ShaderProps>(\n  ({ uniforms, source, opaque, ...transform }, children) => {\n    const processedUniforms = new Array(source.getUniformCount())\n      .fill(0)\n      .flatMap((_, i) => {\n        const name = source.getUniformName(i);\n        const value = uniforms[name];\n        if (value === undefined) {\n          throw new Error(`No value specified for uniform ${name}`);\n        }\n        if (Array.isArray(value)) {\n          return value.flatMap(processValue);\n        }\n        return processValue(value as UniformValue);\n      });\n    const names = Object.keys(uniforms);\n    if (names.length > source.getUniformCount()) {\n      const usedUniforms = new Array(source.getUniformCount())\n        .fill(0)\n        .map((_, i) => source.getUniformName(i));\n      const unusedUniform = names\n        .map((name) => {\n          if (usedUniforms.indexOf(name) === -1) {\n            return name;\n          }\n          return null;\n        })\n        .filter((n) => n !== null);\n      console.warn(\n        \"Unused uniforms were provided: \" + unusedUniform.join(\", \")\n      );\n    }\n    return source.makeShaderWithChildren(\n      processedUniforms,\n      opaque,\n      children.filter(isShader),\n      localMatrix(transform)\n    );\n  }\n);\n\nexport const Shader = (props: AnimatedProps<ShaderProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nShader.defaultProps = {\n  uniforms: [],\n};\n"]}
+{"version":3,"sources":["Shader.tsx"],"names":["isVector","obj","x","undefined","y","processValue","value","onDeclare","children","uniforms","source","opaque","transform","processedUniforms","Array","getUniformCount","fill","flatMap","_","i","name","getUniformName","Error","isArray","names","Object","keys","length","usedUniforms","map","unusedUniform","indexOf","filter","n","console","warn","join","makeShaderWithChildren","isShader","Shader","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAGA;;AAGA;;AACA;;;;;;AAEA,MAAMA,QAAQ,GAAIC,GAAD,IACf;AACA;AACCA,GAAD,CAAaC,CAAb,KAAmBC,SAAnB,IAAiCF,GAAD,CAAaG,CAAb,KAAmBD,SAHrD;;AAaA,MAAME,YAAY,GAAIC,KAAD,IAAqD;AACxE,MAAIN,QAAQ,CAACM,KAAD,CAAZ,EAAqB;AACnB,WAAO,CAACA,KAAK,CAACJ,CAAP,EAAUI,KAAK,CAACF,CAAhB,CAAP;AACD;;AACD,SAAOE,KAAP;AACD,CALD;;AAcA,MAAMC,SAAS,GAAG,oCAChB,OAA6CC,QAA7C,KAA0D;AAAA,MAAzD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAZ;AAAoBC,IAAAA,MAApB;AAA4B,OAAGC;AAA/B,GAAyD;AACxD,QAAMC,iBAAiB,GAAG,IAAIC,KAAJ,CAAUJ,MAAM,CAACK,eAAP,EAAV,EACvBC,IADuB,CAClB,CADkB,EAEvBC,OAFuB,CAEf,CAACC,CAAD,EAAIC,CAAJ,KAAU;AACjB,UAAMC,IAAI,GAAGV,MAAM,CAACW,cAAP,CAAsBF,CAAtB,CAAb;AACA,UAAMb,KAAK,GAAGG,QAAQ,CAACW,IAAD,CAAtB;;AACA,QAAId,KAAK,KAAKH,SAAd,EAAyB;AACvB,YAAM,IAAImB,KAAJ,CAAW,kCAAiCF,IAAK,EAAjD,CAAN;AACD;;AACD,QAAIN,KAAK,CAACS,OAAN,CAAcjB,KAAd,CAAJ,EAA0B;AACxB,aAAOA,KAAK,CAACW,OAAN,CAAcZ,YAAd,CAAP;AACD;;AACD,WAAOA,YAAY,CAACC,KAAD,CAAnB;AACD,GAZuB,CAA1B;AAaA,QAAMkB,KAAK,GAAGC,MAAM,CAACC,IAAP,CAAYjB,QAAZ,CAAd;;AACA,MAAIe,KAAK,CAACG,MAAN,GAAejB,MAAM,CAACK,eAAP,EAAnB,EAA6C;AAC3C,UAAMa,YAAY,GAAG,IAAId,KAAJ,CAAUJ,MAAM,CAACK,eAAP,EAAV,EAClBC,IADkB,CACb,CADa,EAElBa,GAFkB,CAEd,CAACX,CAAD,EAAIC,CAAJ,KAAUT,MAAM,CAACW,cAAP,CAAsBF,CAAtB,CAFI,CAArB;AAGA,UAAMW,aAAa,GAAGN,KAAK,CACxBK,GADmB,CACdT,IAAD,IAAU;AACb,UAAIQ,YAAY,CAACG,OAAb,CAAqBX,IAArB,MAA+B,CAAC,CAApC,EAAuC;AACrC,eAAOA,IAAP;AACD;;AACD,aAAO,IAAP;AACD,KANmB,EAOnBY,MAPmB,CAOXC,CAAD,IAAOA,CAAC,KAAK,IAPD,CAAtB;AAQAC,IAAAA,OAAO,CAACC,IAAR,CACE,oCAAoCL,aAAa,CAACM,IAAd,CAAmB,IAAnB,CADtC;AAGD;;AACD,SAAO1B,MAAM,CAAC2B,sBAAP,CACLxB,iBADK,EAELF,MAFK,EAGLH,QAAQ,CAACwB,MAAT,CAAgBM,cAAhB,CAHK,EAIL,6BAAY1B,SAAZ,CAJK,CAAP;AAMD,CAtCe,CAAlB;;AAyCO,MAAM2B,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAe,IAAA,SAAS,EAAEjC;AAA1B,KAAyCiC,KAAzC,EAAP;AACD,CAFM;;;AAIPD,MAAM,CAACE,YAAP,GAAsB;AACpBhC,EAAAA,QAAQ,EAAE;AADU,CAAtB","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { isShader } from \"../../../skia\";\nimport type { IRuntimeEffect } from \"../../../skia\";\nimport type { Vector, AnimatedProps, TransformProps } from \"../../processors\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport { localMatrix } from \"../../processors\";\n\nconst isVector = (obj: unknown): obj is Vector =>\n  // We have an issue to check property existence on JSI backed instances\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (obj as any).x !== undefined && (obj as any).y !== undefined;\n\ntype UniformValue = number | Vector | readonly number[];\n\ntype Uniform = UniformValue | readonly UniformValue[];\n\ninterface Uniforms {\n  [name: string]: Uniform;\n}\n\nconst processValue = (value: UniformValue): number | readonly number[] => {\n  if (isVector(value)) {\n    return [value.x, value.y];\n  }\n  return value;\n};\n\nexport interface ShaderProps extends TransformProps {\n  source: IRuntimeEffect;\n  uniforms: Uniforms;\n  opaque?: boolean;\n  children?: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<ShaderProps>(\n  ({ uniforms, source, opaque, ...transform }, children) => {\n    const processedUniforms = new Array(source.getUniformCount())\n      .fill(0)\n      .flatMap((_, i) => {\n        const name = source.getUniformName(i);\n        const value = uniforms[name];\n        if (value === undefined) {\n          throw new Error(`No value specified for uniform ${name}`);\n        }\n        if (Array.isArray(value)) {\n          return value.flatMap(processValue);\n        }\n        return processValue(value as UniformValue);\n      });\n    const names = Object.keys(uniforms);\n    if (names.length > source.getUniformCount()) {\n      const usedUniforms = new Array(source.getUniformCount())\n        .fill(0)\n        .map((_, i) => source.getUniformName(i));\n      const unusedUniform = names\n        .map((name) => {\n          if (usedUniforms.indexOf(name) === -1) {\n            return name;\n          }\n          return null;\n        })\n        .filter((n) => n !== null);\n      console.warn(\n        \"Unused uniforms were provided: \" + unusedUniform.join(\", \")\n      );\n    }\n    return source.makeShaderWithChildren(\n      processedUniforms,\n      opaque,\n      children.filter(isShader),\n      localMatrix(transform)\n    );\n  }\n);\n\nexport const Shader = (props: AnimatedProps<ShaderProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nShader.defaultProps = {\n  uniforms: [],\n};\n"]}

package/lib/commonjs/renderer/components/shapes/Path.js

@@ -11,6 +11,8 @@ var _nodes = require("../../nodes");
 
 var _processors = require("../../processors");
 
+var _skia = require("../../../skia");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -24,15 +26,21 @@ const onDraw = (0, _nodes.createDrawing)((_ref, _ref2) => {
     start,
     end,
     stroke,
+    fillType,
     ...pathProps
   } = _ref2;
   const hasStartOffset = start !== 0;
-  const hasEndOffset = start !== 1;
+  const hasEndOffset = end !== 1;
   const hasStrokeOptions = stroke !== undefined;
-  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
+  const hasFillType = !!fillType;
+  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
   const pristinePath = (0, _processors.processPath)(pathProps.path);
   const path = willMutatePath ? pristinePath.copy() : pristinePath;
 
+  if (hasFillType) {
+    path.setFillType(_skia.FillType[(0, _processors.enumKey)(fillType)]);
+  }
+
   if (hasStrokeOptions) {
     path.stroke(stroke);
   }

package/lib/commonjs/renderer/components/shapes/Path.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","willMutatePath","pristinePath","path","copy","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;AAeA,MAAMA,MAAM,GAAG,0BACb,iBAA6D;AAAA,MAA5D;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA4D;AAAA,MAAzC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsB,OAAGC;AAAzB,GAAyC;AAC3D,QAAMC,cAAc,GAAGJ,KAAK,KAAK,CAAjC;AACA,QAAMK,YAAY,GAAGL,KAAK,KAAK,CAA/B;AACA,QAAMM,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;AACA,QAAMC,cAAc,GAAGJ,cAAc,IAAIC,YAAlB,IAAkCC,gBAAzD;AACA,QAAMG,YAAY,GAAG,6BAAYN,SAAS,CAACO,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIH,gBAAJ,EAAsB;AACpBI,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIE,cAAc,IAAIC,YAAtB,EAAoC;AAClCK,IAAAA,IAAI,CAACE,IAAL,CAAUZ,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACe,QAAP,CAAgBH,IAAhB,EAAsBX,KAAtB;AACD,CAfY,CAAf;;AAkBO,MAAMe,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAElB;AAAnB,KAA+BkB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBhB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath } from \"../../processors\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = start !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}
+{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","fillType","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","path","copy","setFillType","FillType","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAQA;;AACA;;AACA;;;;;;AAgBA,MAAMA,MAAM,GAAG,0BACb,iBAAuE;AAAA,MAAtE;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAsE;AAAA,MAAnD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsBC,IAAAA,QAAtB;AAAgC,OAAGC;AAAnC,GAAmD;AACrE,QAAMC,cAAc,GAAGL,KAAK,KAAK,CAAjC;AACA,QAAMM,YAAY,GAAGL,GAAG,KAAK,CAA7B;AACA,QAAMM,gBAAgB,GAAGL,MAAM,KAAKM,SAApC;AACA,QAAMC,WAAW,GAAG,CAAC,CAACN,QAAtB;AACA,QAAMO,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;AAEA,QAAME,YAAY,GAAG,6BAAYP,SAAS,CAACQ,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIF,WAAJ,EAAiB;AACfG,IAAAA,IAAI,CAACE,WAAL,CAAiBC,eAAS,yBAAQZ,QAAR,CAAT,CAAjB;AACD;;AACD,MAAII,gBAAJ,EAAsB;AACpBK,IAAAA,IAAI,CAACV,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIG,cAAc,IAAIC,YAAtB,EAAoC;AAClCM,IAAAA,IAAI,CAACI,IAAL,CAAUhB,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACmB,QAAP,CAAgBL,IAAhB,EAAsBb,KAAtB;AACD,CApBY,CAAf;;AAuBO,MAAMmB,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAEtB;AAAnB,KAA+BsB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBpB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n  SkEnum,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath, enumKey } from \"../../processors\";\nimport { FillType } from \"../../../skia\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const hasFillType = !!fillType;\n    const willMutatePath =\n      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasFillType) {\n      path.setFillType(FillType[enumKey(fillType)]);\n    }\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}

package/lib/commonjs/renderer/nodes/Node.js

@@ -48,7 +48,9 @@ class Node {
   visit(ctx, children) {
     const returnedValues = [];
     (children !== null && children !== void 0 ? children : this.children).forEach(child => {
-      if (!child.memoized) {
+      if (child.memoized && child.memoizable) {
+        returnedValues.push(child.memoized);
+      } else {
         const ret = child.draw(ctx);
 
         if (ret) {
@@ -58,8 +60,6 @@ class Node {
             child.memoized = ret;
           }
         }
-      } else {
-        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/lib/commonjs/renderer/nodes/Node.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","ret","draw","push","memoizable"],"mappings":";;;;;;;;;IAKYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAOL,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAI,CAACA,KAAK,CAACC,QAAX,EAAqB;AACnB,cAAMC,GAAG,GAAGF,KAAK,CAACG,IAAN,CAAWP,GAAX,CAAZ;;AACA,YAAIM,GAAJ,EAAS;AACPJ,UAAAA,cAAc,CAACM,IAAf,CAAoBF,GAApB;;AACA,cAAIF,KAAK,CAACK,UAAV,EAAsB;AACpBL,YAAAA,KAAK,CAACC,QAAN,GAAiBC,GAAjB;AACD;AACF;AACF,OARD,MAQO;AACLJ,QAAAA,cAAc,CAACM,IAAf,CAAoBJ,KAAK,CAACC,QAA1B;AACD;AACF,KAZD;AAaA,WAAOH,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized: DeclarationResult | null = null;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext, children?: Node[]) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    (children ?? this.children).forEach((child) => {\n      if (!child.memoized) {\n        const ret = child.draw(ctx);\n        if (ret) {\n          returnedValues.push(ret);\n          if (child.memoizable) {\n            child.memoized = ret;\n          }\n        }\n      } else {\n        returnedValues.push(child.memoized);\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}
+{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","memoizable","push","ret","draw"],"mappings":";;;;;;;;;IAKYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAOL,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAIA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,UAA5B,EAAwC;AACtCJ,QAAAA,cAAc,CAACK,IAAf,CAAoBH,KAAK,CAACC,QAA1B;AACD,OAFD,MAEO;AACL,cAAMG,GAAG,GAAGJ,KAAK,CAACK,IAAN,CAAWT,GAAX,CAAZ;;AACA,YAAIQ,GAAJ,EAAS;AACPN,UAAAA,cAAc,CAACK,IAAf,CAAoBC,GAApB;;AACA,cAAIJ,KAAK,CAACE,UAAV,EAAsB;AACpBF,YAAAA,KAAK,CAACC,QAAN,GAAiBG,GAAjB;AACD;AACF;AACF;AACF,KAZD;AAaA,WAAON,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized: DeclarationResult | null = null;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext, children?: Node[]) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    (children ?? this.children).forEach((child) => {\n      if (child.memoized && child.memoizable) {\n        returnedValues.push(child.memoized);\n      } else {\n        const ret = child.draw(ctx);\n        if (ret) {\n          returnedValues.push(ret);\n          if (child.memoizable) {\n            child.memoized = ret;\n          }\n        }\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}

package/lib/commonjs/renderer/processors/Circles.js

@@ -7,8 +7,9 @@ exports.processCircle = void 0;
 
 var _Vector = require("./math/Vector");
 
-const isCircleScalarDef = def => // eslint-disable-next-line @typescript-eslint/no-explicit-any
-def.cx;
+const isCircleScalarDef = def => // We have an issue to check property existence on JSI backed instances
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+def.cx !== undefined;
 
 const processCircle = def => {
   if (isCircleScalarDef(def)) {

package/lib/commonjs/renderer/processors/Circles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Circles.ts"],"names":["isCircleScalarDef","def","cx","processCircle","c","cy","r"],"mappings":";;;;;;;AACA;;AAeA,MAAMA,iBAAiB,GAAIC,GAAD,IACxB;AACCA,GAAD,CAAaC,EAFf;;AAGO,MAAMC,aAAa,GAAIF,GAAD,IAAoB;AAC/C,MAAID,iBAAiB,CAACC,GAAD,CAArB,EAA4B;AAC1B,WAAO;AAAEG,MAAAA,CAAC,EAAE,iBAAIH,GAAG,CAACC,EAAR,EAAYD,GAAG,CAACI,EAAhB,CAAL;AAA0BC,MAAAA,CAAC,EAAEL,GAAG,CAACK;AAAjC,KAAP;AACD;;AACD,SAAOL,GAAP;AACD,CALM","sourcesContent":["import type { Vector } from \"./math/Vector\";\nimport { vec } from \"./math/Vector\";\n\ninterface PointCircleDef {\n  c: Vector;\n  r: number;\n}\n\ninterface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nconst isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (def as any).cx;\nexport const processCircle = (def: CircleDef) => {\n  if (isCircleScalarDef(def)) {\n    return { c: vec(def.cx, def.cy), r: def.r };\n  }\n  return def;\n};\n"]}
+{"version":3,"sources":["Circles.ts"],"names":["isCircleScalarDef","def","cx","undefined","processCircle","c","cy","r"],"mappings":";;;;;;;AACA;;AAeA,MAAMA,iBAAiB,GAAIC,GAAD,IACxB;AACA;AACCA,GAAD,CAAaC,EAAb,KAAoBC,SAHtB;;AAIO,MAAMC,aAAa,GAAIH,GAAD,IAAoB;AAC/C,MAAID,iBAAiB,CAACC,GAAD,CAArB,EAA4B;AAC1B,WAAO;AAAEI,MAAAA,CAAC,EAAE,iBAAIJ,GAAG,CAACC,EAAR,EAAYD,GAAG,CAACK,EAAhB,CAAL;AAA0BC,MAAAA,CAAC,EAAEN,GAAG,CAACM;AAAjC,KAAP;AACD;;AACD,SAAON,GAAP;AACD,CALM","sourcesContent":["import type { Vector } from \"./math/Vector\";\nimport { vec } from \"./math/Vector\";\n\ninterface PointCircleDef {\n  c: Vector;\n  r: number;\n}\n\ninterface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nconst isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>\n  // We have an issue to check property existence on JSI backed instances\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (def as any).cx !== undefined;\nexport const processCircle = (def: CircleDef) => {\n  if (isCircleScalarDef(def)) {\n    return { c: vec(def.cx, def.cy), r: def.r };\n  }\n  return def;\n};\n"]}