@shopify/react-native-skia 0.1.172 → 0.1.173

package/cpp/rnskia/dom/nodes/JsiShaderNodes.h

@@ -23,84 +23,48 @@
 
 namespace RNSkia {
 
-class JsiBaseShaderNode
-    : public JsiDomDeclarationNode<JsiBaseShaderNode, sk_sp<SkShader>> {
-public:
-  JsiBaseShaderNode(std::shared_ptr<RNSkPlatformContext> context,
-                    const char *type)
-      : JsiDomDeclarationNode<JsiBaseShaderNode, sk_sp<SkShader>>(context,
-                                                                  type) {}
-
-protected:
-  sk_sp<SkShader> resolve(std::shared_ptr<JsiDomNode> child) override {
-    auto ptr = std::dynamic_pointer_cast<JsiBaseShaderNode>(child);
-    if (ptr) {
-      return ptr->getCurrent();
-    }
-    return nullptr;
-  }
-
-  void setShader(DrawingContext *context, sk_sp<SkShader> f) {
-    set(context, f);
-  }
-
-  void set(DrawingContext *context, sk_sp<SkShader> shader) override {
-    auto paint = context->getMutablePaint();
-    paint->setShader(shader);
-    setCurrent(shader);
-  }
-};
-
-class JsiShaderNode : public JsiBaseShaderNode,
+class JsiShaderNode : public JsiDomDeclarationNode,
                       public JsiDomNodeCtor<JsiShaderNode> {
 public:
   explicit JsiShaderNode(std::shared_ptr<RNSkPlatformContext> context)
-      : JsiBaseShaderNode(context, "skShader") {}
-
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      auto source = _sourceProp->value().getAs<JsiSkRuntimeEffect>();
-      if (source == nullptr) {
-        throw std::runtime_error("Expected runtime effect when reading source "
-                                 "property of RuntimeEffectImageFilter.");
-      }
-      auto uniforms =
-          _uniformsProp->isSet() ? _uniformsProp->getDerivedValue() : nullptr;
-
-      SkMatrix lm;
-      auto tm =
-          _transformProp->isSet() ? _transformProp->getDerivedValue() : nullptr;
-
-      if (tm != nullptr) {
-        if (_originProp->isSet()) {
-          auto tr = _originProp->getDerivedValue();
-          lm.preTranslate(tr->x(), tr->y());
-          lm.preConcat(*tm);
-          lm.preTranslate(-tr->x(), -tr->y());
-        } else {
-          lm.preConcat(*tm);
-        }
+      : JsiDomDeclarationNode(context, "skShader", DeclarationType::Shader) {}
+
+  void decorate(DeclarationContext *context) override {
+    decorateChildren(context);
+    auto source = _sourceProp->value().getAs<JsiSkRuntimeEffect>();
+    if (source == nullptr) {
+      throw std::runtime_error("Expected runtime effect when reading source "
+                               "property of RuntimeEffectImageFilter.");
+    }
+    auto uniforms =
+        _uniformsProp->isSet() ? _uniformsProp->getDerivedValue() : nullptr;
+
+    SkMatrix lm;
+    auto tm =
+        _transformProp->isSet() ? _transformProp->getDerivedValue() : nullptr;
+
+    if (tm != nullptr) {
+      if (_originProp->isSet()) {
+        auto tr = _originProp->getDerivedValue();
+        lm.preTranslate(tr->x(), tr->y());
+        lm.preConcat(*tm);
+        lm.preTranslate(-tr->x(), -tr->y());
+      } else {
+        lm.preConcat(*tm);
       }
+    }
 
-      // get all children that are shader nodes
-      std::vector<sk_sp<SkShader>> children;
-      children.reserve(getChildren().size());
-      for (auto &child : getChildren()) {
-        auto ptr = std::dynamic_pointer_cast<JsiBaseShaderNode>(child);
-        if (ptr != nullptr) {
-          children.push_back(ptr->getCurrent());
-        }
-      }
+    // get all children that are shader nodes
+    auto children = context->getShaders()->popAll();
 
-      // Update shader
-      setShader(context, source->getObject()->makeShader(
-                             uniforms, children.data(), children.size(), &lm));
-    }
+    // Update shader
+    context->getShaders()->push(source->getObject()->makeShader(
+        uniforms, children.data(), children.size(), &lm));
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
-    JsiBaseDomDeclarationNode::defineProperties(container);
+    JsiDomDeclarationNode::defineProperties(container);
     _sourceProp = container->defineProperty<NodeProp>("source");
     _uniformsProp =
         container->defineProperty<UniformsProp>("uniforms", _sourceProp);
@@ -117,55 +81,52 @@ private:
   PointProp *_originProp;
 };
 
-class JsiImageShaderNode : public JsiBaseShaderNode,
+class JsiImageShaderNode : public JsiDomDeclarationNode,
                            public JsiDomNodeCtor<JsiImageShaderNode> {
 public:
   explicit JsiImageShaderNode(std::shared_ptr<RNSkPlatformContext> context)
-      : JsiBaseShaderNode(context, "skImageShader") {}
-
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      auto image = _imageProps->getImage();
-      auto rect = _imageProps->getRect();
-      auto lm =
-          _transformProp->isSet() ? _transformProp->getDerivedValue() : nullptr;
-
-      if (rect != nullptr && lm != nullptr) {
-        auto rc = _imageProps->getDerivedValue();
-        auto m3 = _imageProps->rect2rect(rc->src, rc->dst);
-        if (_transformProp->isChanged()) {
-          // To modify the matrix we need to copy it since we're not allowed to
-          // modify values contained in properties - this would have caused the
-          // matrix to be translated and scaled more and more for each render
-          // even thought the matrix prop did not change.
-          _matrix.reset();
-          _matrix.preConcat(m3);
-          if (_originProp->isSet()) {
-            auto tr = _originProp->getDerivedValue();
-            _matrix.preTranslate(tr->x(), tr->y());
-            _matrix.preConcat(*lm);
-            _matrix.preTranslate(-tr->x(), -tr->y());
-          } else {
-            _matrix.preConcat(*lm);
-          }
+      : JsiDomDeclarationNode(context, "skImageShader",
+                              DeclarationType::Shader) {}
+
+  void decorate(DeclarationContext *context) override {
+
+    auto image = _imageProps->getImage();
+    auto rect = _imageProps->getRect();
+    auto lm =
+        _transformProp->isSet() ? _transformProp->getDerivedValue() : nullptr;
+
+    if (rect != nullptr && lm != nullptr) {
+      auto rc = _imageProps->getDerivedValue();
+      auto m3 = _imageProps->rect2rect(rc->src, rc->dst);
+      if (_transformProp->isChanged()) {
+        // To modify the matrix we need to copy it since we're not allowed to
+        // modify values contained in properties - this would have caused the
+        // matrix to be translated and scaled more and more for each render
+        // even thought the matrix prop did not change.
+        _matrix.reset();
+        _matrix.preConcat(m3);
+        if (_originProp->isSet()) {
+          auto tr = _originProp->getDerivedValue();
+          _matrix.preTranslate(tr->x(), tr->y());
+          _matrix.preConcat(*lm);
+          _matrix.preTranslate(-tr->x(), -tr->y());
+        } else {
+          _matrix.preConcat(*lm);
         }
       }
-
-      setShader(
-          context,
-          image->makeShader(
-              *_txProp->getDerivedValue(), *_tyProp->getDerivedValue(),
-              SkSamplingOptions(getFilterModeFromString(
-                                    _filterModeProp->value().getAsString()),
-                                getMipmapModeFromString(
-                                    _mipmapModeProp->value().getAsString())),
-              &_matrix));
     }
+
+    context->getShaders()->push(image->makeShader(
+        *_txProp->getDerivedValue(), *_tyProp->getDerivedValue(),
+        SkSamplingOptions(
+            getFilterModeFromString(_filterModeProp->value().getAsString()),
+            getMipmapModeFromString(_mipmapModeProp->value().getAsString())),
+        &_matrix));
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
-    JsiBaseDomDeclarationNode::defineProperties(container);
+    JsiDomDeclarationNode::defineProperties(container);
     _txProp = container->defineProperty<TileModeProp>("tx");
     _tyProp = container->defineProperty<TileModeProp>("ty");
     _filterModeProp = container->defineProperty<NodeProp>("fm");
@@ -224,25 +185,23 @@ private:
   PointProp *_originProp;
 };
 
-class JsiColorShaderNode : public JsiBaseShaderNode,
+class JsiColorShaderNode : public JsiDomDeclarationNode,
                            public JsiDomNodeCtor<JsiColorShaderNode> {
 public:
   explicit JsiColorShaderNode(std::shared_ptr<RNSkPlatformContext> context)
-      : JsiBaseShaderNode(context, "skColorShader") {}
+      : JsiDomDeclarationNode(context, "skColorShader",
+                              DeclarationType::Shader) {}
 
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      if (_colorProp->isSet()) {
-        setShader(context, SkShaders::Color(*_colorProp->getDerivedValue()));
-      } else {
-        setShader(context, nullptr);
-      }
+  void decorate(DeclarationContext *context) override {
+    if (_colorProp->isSet()) {
+      context->getShaders()->push(
+          SkShaders::Color(*_colorProp->getDerivedValue()));
     }
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
-    JsiBaseDomDeclarationNode::defineProperties(container);
+    JsiDomDeclarationNode::defineProperties(container);
     _colorProp = container->defineProperty<ColorProp>("color");
     _colorProp->require();
   }
@@ -251,15 +210,14 @@ private:
   ColorProp *_colorProp;
 };
 
-class JsiBasePerlinNoiseNode : public JsiBaseShaderNode {
+class JsiBasePerlinNoiseNode : public JsiDomDeclarationNode {
 public:
   JsiBasePerlinNoiseNode(std::shared_ptr<RNSkPlatformContext> context,
                          PropId type)
-      : JsiBaseShaderNode(context, type) {}
+      : JsiDomDeclarationNode(context, type, DeclarationType::Shader) {}
 
-protected:
   void defineProperties(NodePropsContainer *container) override {
-    JsiBaseDomDeclarationNode::defineProperties(container);
+    JsiDomDeclarationNode::defineProperties(container);
     _freqXProp = container->defineProperty<NodeProp>("freqX");
     _freqYProp = container->defineProperty<NodeProp>("freqY");
     _octavesProp = container->defineProperty<NodeProp>("octaves");
@@ -289,18 +247,15 @@ public:
   explicit JsiTurbulenceNode(std::shared_ptr<RNSkPlatformContext> context)
       : JsiBasePerlinNoiseNode(context, "skTurbulence") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      SkISize size = SkISize::Make(_tileWidthProp->value().getAsNumber(),
-                                   _tileHeightProp->value().getAsNumber());
-
-      setShader(context, SkPerlinNoiseShader::MakeTurbulence(
-                             _freqXProp->value().getAsNumber(),
-                             _freqYProp->value().getAsNumber(),
-                             _octavesProp->value().getAsNumber(),
-                             _seedProp->value().getAsNumber(), &size));
-    }
+  void decorate(DeclarationContext *context) override {
+
+    SkISize size = SkISize::Make(_tileWidthProp->value().getAsNumber(),
+                                 _tileHeightProp->value().getAsNumber());
+
+    context->getShaders()->push(SkPerlinNoiseShader::MakeTurbulence(
+        _freqXProp->value().getAsNumber(), _freqYProp->value().getAsNumber(),
+        _octavesProp->value().getAsNumber(), _seedProp->value().getAsNumber(),
+        &size));
   }
 };
 
@@ -310,28 +265,41 @@ public:
   explicit JsiFractalNoiseNode(std::shared_ptr<RNSkPlatformContext> context)
       : JsiBasePerlinNoiseNode(context, "skFractalNoise") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      SkISize size = SkISize::Make(_tileWidthProp->value().getAsNumber(),
-                                   _tileHeightProp->value().getAsNumber());
-
-      setShader(context, SkPerlinNoiseShader::MakeFractalNoise(
-                             _freqXProp->value().getAsNumber(),
-                             _freqYProp->value().getAsNumber(),
-                             _octavesProp->value().getAsNumber(),
-                             _seedProp->value().getAsNumber(), &size));
-    }
+  void decorate(DeclarationContext *context) override {
+
+    SkISize size = SkISize::Make(_tileWidthProp->value().getAsNumber(),
+                                 _tileHeightProp->value().getAsNumber());
+
+    context->getShaders()->push(SkPerlinNoiseShader::MakeFractalNoise(
+        _freqXProp->value().getAsNumber(), _freqYProp->value().getAsNumber(),
+        _octavesProp->value().getAsNumber(), _seedProp->value().getAsNumber(),
+        &size));
   }
 };
 
-class JsiBaseGradientNode : public JsiBaseShaderNode {
+class JsiBaseGradientNode : public JsiDomDeclarationNode {
 public:
   JsiBaseGradientNode(std::shared_ptr<RNSkPlatformContext> context, PropId type)
-      : JsiBaseShaderNode(context, type) {}
+      : JsiDomDeclarationNode(context, type, DeclarationType::Shader) {}
+
+  void decorate(DeclarationContext *context) override {
+
+    _colors = _colorsProp->getDerivedValue()->data();
+    _colorCount = static_cast<int>(_colorsProp->getDerivedValue()->size());
+    _flags = _flagsProp->isSet() ? _flagsProp->value().getAsNumber() : 0;
+    _mode =
+        _modeProp->isSet() ? *_modeProp->getDerivedValue() : SkTileMode::kClamp;
+    _positions = _positionsProp->isSet()
+                     ? _positionsProp->getDerivedValue()->data()
+                     : nullptr;
+    _matrix = _transformsProps->isSet()
+                  ? _transformsProps->getDerivedValue().get()
+                  : nullptr;
+  }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
-    JsiBaseDomDeclarationNode::defineProperties(container);
+    JsiDomDeclarationNode::defineProperties(container);
     _transformsProps = container->defineProperty<TransformsProps>();
 
     _colorsProp = container->defineProperty<ColorsProp>("colors");
@@ -342,23 +310,6 @@ public:
     _colorsProp->require();
   }
 
-protected:
-  void decorate(DrawingContext *context) override {
-    if (isChanged(context)) {
-      _colors = _colorsProp->getDerivedValue()->data();
-      _colorCount = static_cast<int>(_colorsProp->getDerivedValue()->size());
-      _flags = _flagsProp->isSet() ? _flagsProp->value().getAsNumber() : 0;
-      _mode = _modeProp->isSet() ? *_modeProp->getDerivedValue()
-                                 : SkTileMode::kClamp;
-      _positions = _positionsProp->isSet()
-                       ? _positionsProp->getDerivedValue()->data()
-                       : nullptr;
-      _matrix = _transformsProps->isSet()
-                    ? _transformsProps->getDerivedValue().get()
-                    : nullptr;
-    }
-  }
-
   const SkColor *_colors;
   double _flags;
   int _colorCount;
@@ -380,19 +331,17 @@ public:
   explicit JsiLinearGradientNode(std::shared_ptr<RNSkPlatformContext> context)
       : JsiBaseGradientNode(context, "skLinearGradient") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
+  void decorate(DeclarationContext *context) override {
     JsiBaseGradientNode::decorate(context);
 
-    if (isChanged(context)) {
-      SkPoint pts[] = {*_startProp->getDerivedValue(),
-                       *_endProp->getDerivedValue()};
-      setShader(context, SkGradientShader::MakeLinear(pts, _colors, _positions,
-                                                      _colorCount, _mode,
-                                                      _flags, _matrix));
-    }
+    SkPoint pts[] = {*_startProp->getDerivedValue(),
+                     *_endProp->getDerivedValue()};
+    auto shader = SkGradientShader::MakeLinear(
+        pts, _colors, _positions, _colorCount, _mode, _flags, _matrix);
+    context->getShaders()->push(shader);
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
     _startProp = container->defineProperty<PointProp>("start");
@@ -413,19 +362,17 @@ public:
   explicit JsiRadialGradientNode(std::shared_ptr<RNSkPlatformContext> context)
       : JsiBaseGradientNode(context, "skRadialGradient") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
+  void decorate(DeclarationContext *context) override {
     JsiBaseGradientNode::decorate(context);
 
-    if (isChanged(context)) {
-      auto c = _centerProp->getDerivedValue();
-      auto r = _radiusProp->value().getAsNumber();
-      setShader(context, SkGradientShader::MakeRadial(*c, r, _colors,
-                                                      _positions, _colorCount,
-                                                      _mode, _flags, _matrix));
-    }
+    auto c = _centerProp->getDerivedValue();
+    auto r = _radiusProp->value().getAsNumber();
+    auto shader = SkGradientShader::MakeRadial(
+        *c, r, _colors, _positions, _colorCount, _mode, _flags, _matrix);
+    context->getShaders()->push(shader);
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
     _centerProp = container->defineProperty<PointProp>("c");
@@ -446,21 +393,19 @@ public:
   explicit JsiSweepGradientNode(std::shared_ptr<RNSkPlatformContext> context)
       : JsiBaseGradientNode(context, "skSweepGradient") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
+  void decorate(DeclarationContext *context) override {
     JsiBaseGradientNode::decorate(context);
 
-    if (isChanged(context)) {
-      auto start = _startProp->isSet() ? _startProp->value().getAsNumber() : 0;
-      auto end = _endProp->isSet() ? _endProp->value().getAsNumber() : 360;
-      auto c = _centerProp->getDerivedValue();
+    auto start = _startProp->isSet() ? _startProp->value().getAsNumber() : 0;
+    auto end = _endProp->isSet() ? _endProp->value().getAsNumber() : 360;
+    auto c = _centerProp->getDerivedValue();
 
-      setShader(context, SkGradientShader::MakeSweep(
-                             c->x(), c->y(), _colors, _positions, _colorCount,
-                             _mode, start, end, _flags, _matrix));
-    }
+    context->getShaders()->push(SkGradientShader::MakeSweep(
+        c->x(), c->y(), _colors, _positions, _colorCount, _mode, start, end,
+        _flags, _matrix));
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
     _startProp = container->defineProperty<NodeProp>("start");
@@ -482,22 +427,20 @@ public:
       std::shared_ptr<RNSkPlatformContext> context)
       : JsiBaseGradientNode(context, "skTwoPointConicalGradient") {}
 
-protected:
-  void decorate(DrawingContext *context) override {
+  void decorate(DeclarationContext *context) override {
     JsiBaseGradientNode::decorate(context);
 
-    if (isChanged(context)) {
-      auto start = _startProp->getDerivedValue();
-      auto end = _endProp->getDerivedValue();
-      auto startR = _startRProp->value().getAsNumber();
-      auto endR = _endRProp->value().getAsNumber();
+    auto start = _startProp->getDerivedValue();
+    auto end = _endProp->getDerivedValue();
+    auto startR = _startRProp->value().getAsNumber();
+    auto endR = _endRProp->value().getAsNumber();
 
-      setShader(context, SkGradientShader::MakeTwoPointConical(
-                             *start, startR, *end, endR, _colors, _positions,
-                             _colorCount, _mode, _flags, _matrix));
-    }
+    context->getShaders()->push(SkGradientShader::MakeTwoPointConical(
+        *start, startR, *end, endR, _colors, _positions, _colorCount, _mode,
+        _flags, _matrix));
   }
 
+protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
     _startProp = container->defineProperty<PointProp>("start");

package/cpp/rnskia/dom/props/BezierProps.h

@@ -12,8 +12,10 @@ namespace RNSkia {
 
 class BezierProp : public DerivedProp<std::vector<SkPoint>> {
 public:
-  explicit BezierProp(PropId name) : DerivedProp<std::vector<SkPoint>>() {
-    _bezierProp = addProperty(std::make_shared<NodeProp>(name));
+  explicit BezierProp(PropId name,
+                      const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<std::vector<SkPoint>>(onChange) {
+    _bezierProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/BlendModeProp.h

@@ -18,8 +18,10 @@ namespace RNSkia {
 
 class BlendModeProp : public DerivedProp<SkBlendMode> {
 public:
-  explicit BlendModeProp(PropId name) : DerivedProp<SkBlendMode>() {
-    _blendMode = addProperty(std::make_shared<NodeProp>(name));
+  explicit BlendModeProp(PropId name,
+                         const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<SkBlendMode>(onChange) {
+    _blendMode = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/BoxShadowProps.h

@@ -9,16 +9,14 @@ namespace RNSkia {
 
 class BoxShadowProps : public DerivedProp<SkPaint> {
 public:
-  BoxShadowProps() : DerivedProp<SkPaint>() {
-    _dxProp = addProperty(std::make_shared<NodeProp>(JsiPropId::get("dx")));
-    _dyProp = addProperty(std::make_shared<NodeProp>(JsiPropId::get("dy")));
-    _spreadProp =
-        addProperty(std::make_shared<NodeProp>(JsiPropId::get("spread")));
-    _blurProp = addProperty(std::make_shared<NodeProp>(JsiPropId::get("blur")));
-    _colorProp =
-        addProperty(std::make_shared<ColorProp>(JsiPropId::get("color")));
-    _innerProp =
-        addProperty(std::make_shared<NodeProp>(JsiPropId::get("inner")));
+  explicit BoxShadowProps(const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<SkPaint>(onChange) {
+    _dxProp = defineProperty<NodeProp>("dx");
+    _dyProp = defineProperty<NodeProp>("dy");
+    _spreadProp = defineProperty<NodeProp>("spread");
+    _blurProp = defineProperty<NodeProp>("blur");
+    _colorProp = defineProperty<ColorProp>("color");
+    _innerProp = defineProperty<NodeProp>("inner");
 
     _blurProp->require();
   }

package/cpp/rnskia/dom/props/CircleProp.h

@@ -20,10 +20,11 @@ static PropId PropNameC = JsiPropId::get("c");
 
 class CircleProp : public DerivedProp<SkPoint> {
 public:
-  CircleProp() : DerivedProp<SkPoint>() {
-    _c = addProperty(std::make_shared<PointProp>(PropNameC));
-    _cx = addProperty(std::make_shared<NodeProp>(PropNameCx));
-    _cy = addProperty(std::make_shared<NodeProp>(PropNameCy));
+  explicit CircleProp(const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<SkPoint>(onChange) {
+    _c = defineProperty<PointProp>("c");
+    _cx = defineProperty<NodeProp>("cx");
+    _cy = defineProperty<NodeProp>("cy");
   }
 
   void updateDerivedValue() override {
@@ -33,7 +34,7 @@ public:
       setDerivedValue(SkPoint::Make(_cx->value().getAsNumber(),
                                     _cy->value().getAsNumber()));
     } else if (_c->isSet()) {
-      setDerivedValue(_c->getDerivedValue());
+      setDerivedValue(_c->getUnsafeDerivedValue());
     } else {
       setDerivedValue(SkPoint::Make(0.0, 0.0));
     }

package/cpp/rnskia/dom/props/ClipProp.h

@@ -19,10 +19,12 @@ namespace RNSkia {
 
 class ClipProp : public BaseDerivedProp {
 public:
-  explicit ClipProp(PropId name) : BaseDerivedProp() {
-    _pathProp = addProperty(std::make_shared<PathProp>(name));
-    _rectProp = addProperty(std::make_shared<RectProp>(name));
-    _rrectProp = addProperty(std::make_shared<RRectProp>(name));
+  explicit ClipProp(PropId name,
+                    const std::function<void(BaseNodeProp *)> &onChange)
+      : BaseDerivedProp(onChange) {
+    _pathProp = defineProperty<PathProp>(name);
+    _rectProp = defineProperty<RectProp>(name);
+    _rrectProp = defineProperty<RRectProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/ColorProp.h

@@ -16,8 +16,10 @@ static PropId PropName3 = JsiPropId::get("3");
 
 class ColorProp : public DerivedProp<SkColor> {
 public:
-  explicit ColorProp(PropId name) : DerivedProp<SkColor>() {
-    _colorProp = addProperty(std::make_shared<NodeProp>(name));
+  explicit ColorProp(PropId name,
+                     const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<SkColor>(onChange) {
+    _colorProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {
@@ -59,8 +61,10 @@ private:
 
 class ColorsProp : public DerivedProp<std::vector<SkColor>> {
 public:
-  explicit ColorsProp(PropId name) : DerivedProp<std::vector<SkColor>>() {
-    _colorsProp = addProperty(std::make_shared<NodeProp>(name));
+  explicit ColorsProp(PropId name,
+                      const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<std::vector<SkColor>>(onChange) {
+    _colorsProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/DrawingProp.h

@@ -13,9 +13,11 @@ using NotifyNeedRenderCallback =
 
 class DrawingProp : public DerivedSkProp<SkPicture> {
 public:
-  DrawingProp(PropId name, NotifyNeedRenderCallback notifyPictureNeeded)
-      : _notifyPictureNeeded(notifyPictureNeeded), DerivedSkProp<SkPicture>() {
-    _drawingProp = addProperty(std::make_shared<NodeProp>(name));
+  DrawingProp(PropId name, NotifyNeedRenderCallback notifyPictureNeeded,
+              const std::function<void(BaseNodeProp *)> &onChange)
+      : _notifyPictureNeeded(notifyPictureNeeded), DerivedSkProp<SkPicture>(
+                                                       onChange) {
+    _drawingProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/FontProp.h

@@ -10,8 +10,10 @@ namespace RNSkia {
 
 class FontProp : public DerivedProp<SkFont> {
 public:
-  explicit FontProp(PropId name) : DerivedProp<SkFont>() {
-    _fontProp = addProperty(std::make_shared<NodeProp>(name));
+  explicit FontProp(PropId name,
+                    const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<SkFont>(onChange) {
+    _fontProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {

package/cpp/rnskia/dom/props/GlyphsProp.h

@@ -19,8 +19,10 @@ struct GlyphInfo {
 
 class GlyphsProp : public DerivedProp<GlyphInfo> {
 public:
-  explicit GlyphsProp(PropId name) : DerivedProp<GlyphInfo>() {
-    _glyphsProp = addProperty(std::make_shared<NodeProp>(name));
+  explicit GlyphsProp(PropId name,
+                      const std::function<void(BaseNodeProp *)> &onChange)
+      : DerivedProp<GlyphInfo>(onChange) {
+    _glyphsProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {