feat: Add CachedProp.hpp

packages/nitrogen/src/views/ViewComponentShadowNode.ts

@@ -53,7 +53,7 @@ export function createViewComponentShadowNodeFiles(
   const namespace = NitroConfig.getCxxNamespace('c++', 'views')
 
   const properties = spec.properties.map(
-    (p) => `${p.type.getCode('c++')} ${escapeCppName(p.name)};`
+    (p) => `CachedProp<${p.type.getCode('c++')}> ${escapeCppName(p.name)};`
   )
   const cases = spec.properties.map(
     (p) => `case hashString("${p.name}"): return true;`
@@ -74,6 +74,7 @@ ${createFileMetadataString(`${component}.hpp`)}
 #include <optional>
 #include <NitroModules/NitroDefines.hpp>
 #include <NitroModules/NitroHash.hpp>
+#include <NitroModules/CachedProp.hpp>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
@@ -157,13 +158,14 @@ namespace ${namespace} {
   ]
   const propCopyInitializers = ['react::ViewProps()']
   for (const prop of spec.properties) {
+    const type = prop.type.getCode('c++')
     propInitializers.push(
       `
-/* ${prop.name} */ ${escapeCppName(prop.name)}([&]() -> ${prop.type.getCode('c++')} {
+${escapeCppName(prop.name)}([&]() -> CachedProp<${type}> {
   const react::RawValue* rawValue = rawProps.at("${prop.name}", nullptr, nullptr);
-  if (rawValue == nullptr) { return {}; }
+  if (rawValue == nullptr) return {};
   const auto& [runtime, value] = (std::pair<jsi::Runtime*, const jsi::Value&>)*rawValue;
-  return JSIConverter<${prop.type.getCode('c++')}>::fromJSI(*runtime, value);
+  return CachedProp<${type}>::fromRawValue(*runtime, value, sourceProps.${escapeCppName(prop.name)});
 }())`.trim()
     )
     propCopyInitializers.push(
@@ -185,12 +187,10 @@ namespace ${namespace} {
   ${propsClassName}::${propsClassName}(const react::PropsParserContext& context,
   ${ctorIndent}   const ${propsClassName}& sourceProps,
   ${ctorIndent}   const react::RawProps& rawProps):
-    ${indent(propInitializers.join(',\n'), '    ')} {
-    // TODO: Instead of eagerly converting each prop, only convert the ones that changed on demand.
-  }
+    ${indent(propInitializers.join(',\n'), '    ')} { }
 
   ${propsClassName}::${propsClassName}(const ${propsClassName}& other):
-    ${indent(propCopyInitializers.join(',\n'), '    ')} {}
+    ${indent(propCopyInitializers.join(',\n'), '    ')} { }
 
   bool ${propsClassName}::filterObjectKeys(const std::string& propName) {
     switch (hashString(propName)) {

packages/nitrogen/src/views/swift/SwiftHybridViewManager.ts

@@ -33,10 +33,14 @@ export function createSwiftHybridViewManager(
     )
   }
 
-  const propAssignments = spec.properties.map(
-    (p) =>
-      `swiftPart.${p.cppSetterName}(newViewProps.${escapeCppName(p.name)});`
-  )
+  const propAssignments = spec.properties.map((p) => {
+    const name = escapeCppName(p.name)
+    return `
+if (newViewProps.${name}.isDirty) {
+  swiftPart.${p.cppSetterName}(newViewProps.${name}.value);
+}
+`.trim()
+  })
 
   const mmFile = `
 ${createFileMetadataString(`${component}.mm`)}

packages/react-native-nitro-image/nitrogen/generated/ios/c++/views/HybridTestViewComponent.mm

@@ -66,8 +66,12 @@ - (void) updateProps:(const react::Props::Shared&)props
   const auto& newViewProps = *std::static_pointer_cast<HybridTestViewProps const>(props);
   NitroImage::HybridTestViewSpec_cxx& swiftPart = _hybridView->getSwiftPart();
   // 2. Update each prop
-  swiftPart.setSomeProp(newViewProps.someProp);
-  swiftPart.setSomeCallback(newViewProps.someCallback);
+  if (newViewProps.someProp.isDirty) {
+    swiftPart.setSomeProp(newViewProps.someProp.value);
+  }
+  if (newViewProps.someCallback.isDirty) {
+    swiftPart.setSomeCallback(newViewProps.someCallback.value);
+  }
   // 3. Continue in base class
   [super updateProps:props oldProps:oldProps];
 }

packages/react-native-nitro-image/nitrogen/generated/shared/c++/views/HybridTestViewComponent.cpp

@@ -16,25 +16,23 @@ namespace margelo::nitro::image::views {
                                            const HybridTestViewProps& sourceProps,
                                            const react::RawProps& rawProps):
     react::ViewProps(context, sourceProps, rawProps, filterObjectKeys),
-    /* someProp */ someProp([&]() -> bool {
+    someProp([&]() -> CachedProp<bool> {
       const react::RawValue* rawValue = rawProps.at("someProp", nullptr, nullptr);
-      if (rawValue == nullptr) { return {}; }
+      if (rawValue == nullptr) return {};
       const auto& [runtime, value] = (std::pair<jsi::Runtime*, const jsi::Value&>)*rawValue;
-      return JSIConverter<bool>::fromJSI(*runtime, value);
+      return CachedProp<bool>::fromRawValue(*runtime, value, sourceProps.someProp);
     }()),
-    /* someCallback */ someCallback([&]() -> std::function<void(double /* someParam */)> {
+    someCallback([&]() -> CachedProp<std::function<void(double /* someParam */)>> {
       const react::RawValue* rawValue = rawProps.at("someCallback", nullptr, nullptr);
-      if (rawValue == nullptr) { return {}; }
+      if (rawValue == nullptr) return {};
       const auto& [runtime, value] = (std::pair<jsi::Runtime*, const jsi::Value&>)*rawValue;
-      return JSIConverter<std::function<void(double /* someParam */)>>::fromJSI(*runtime, value);
-    }()) {
-    // TODO: Instead of eagerly converting each prop, only convert the ones that changed on demand.
-  }
+      return CachedProp<std::function<void(double /* someParam */)>>::fromRawValue(*runtime, value, sourceProps.someCallback);
+    }()) { }
 
   HybridTestViewProps::HybridTestViewProps(const HybridTestViewProps& other):
     react::ViewProps(),
     someProp(other.someProp),
-    someCallback(other.someCallback) {}
+    someCallback(other.someCallback) { }
 
   bool HybridTestViewProps::filterObjectKeys(const std::string& propName) {
     switch (hashString(propName)) {

packages/react-native-nitro-image/nitrogen/generated/shared/c++/views/HybridTestViewComponent.hpp

@@ -12,6 +12,7 @@
 #include <optional>
 #include <NitroModules/NitroDefines.hpp>
 #include <NitroModules/NitroHash.hpp>
+#include <NitroModules/CachedProp.hpp>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
@@ -40,8 +41,8 @@ namespace margelo::nitro::image::views {
                         const react::RawProps& rawProps);
 
   public:
-    bool someProp;
-    std::function<void(double /* someParam */)> someCallback;
+    CachedProp<bool> someProp;
+    CachedProp<std::function<void(double /* someParam */)>> someCallback;
 
   private:
     static bool filterObjectKeys(const std::string& propName);

packages/react-native-nitro-modules/NitroModules.podspec

@@ -44,6 +44,7 @@ Pod::Spec.new do |s|
     "cpp/threading/Dispatcher.hpp",
     "cpp/utils/NitroHash.hpp",
     "cpp/utils/NitroDefines.hpp",
+    "cpp/views/CachedProp.hpp",
     # Public iOS-specific headers that will be exposed in modulemap (for Swift)
     "ios/core/ArrayBufferHolder.hpp",
     "ios/core/AnyMapHolder.hpp",

packages/react-native-nitro-modules/cpp/jsi/JSICache.cpp

@@ -28,6 +28,7 @@ JSICache::~JSICache() {
   Logger::log(LogLevel::Info, TAG, "Destroying JSICache...");
   std::unique_lock lock(_mutex);
 
+  destroyReferences(_valueCache);
   destroyReferences(_objectCache);
   destroyReferences(_functionCache);
   destroyReferences(_weakObjectCache);

packages/react-native-nitro-modules/cpp/jsi/JSICache.hpp

@@ -59,6 +59,7 @@ class JSICache final : public jsi::NativeState {
 
 private:
   std::mutex _mutex;
+  std::vector<BorrowingReference<jsi::Value>> _valueCache;
   std::vector<BorrowingReference<jsi::Object>> _objectCache;
   std::vector<BorrowingReference<jsi::Function>> _functionCache;
   std::vector<BorrowingReference<jsi::WeakObject>> _weakObjectCache;
@@ -82,6 +83,11 @@ class JSICacheReference final {
   }
 
 public:
+  OwningReference<jsi::Value> makeShared(jsi::Value&& value) {
+    OwningReference<jsi::Value> owning(new jsi::Value(std::move(value)));
+    _strongCache->_valueCache.push_back(owning.weak());
+    return owning;
+  }
   OwningReference<jsi::Object> makeShared(jsi::Object&& value) {
     OwningReference<jsi::Object> owning(new jsi::Object(std::move(value)));
     _strongCache->_objectCache.push_back(owning.weak());

packages/react-native-nitro-modules/cpp/views/CachedProp.hpp

@@ -0,0 +1,42 @@
+//
+// Created by Marc Rousavy on 30.07.24.
+//
+
+#pragma once
+
+#include "NitroDefines.hpp"
+#include <jsi/jsi.h>
+#include "OwningReference.hpp"
+#include "JSIConverter.hpp"
+
+namespace margelo::nitro {
+
+  using namespace facebook;
+
+  template <typename T>
+  struct CachedProp {
+  public:
+    T value;
+    OwningReference<jsi::Value> jsiValue;
+    bool isDirty;
+
+  public:
+    bool equals(jsi::Runtime& runtime, const jsi::Value& other) const {
+      if (!jsiValue) return false;
+      return jsi::Value::strictEquals(runtime, *jsiValue, other);
+    }
+
+  public:
+    static CachedProp<T> fromRawValue(jsi::Runtime& runtime, const jsi::Value& value, const CachedProp<T>& oldProp) {
+      if (oldProp.equals(runtime, value)) {
+        // jsi::Value hasn't changed - no need to convert it again!
+        return oldProp;
+      }
+      T converted = JSIConverter<T>::fromJSI(runtime, value);
+      auto cache = JSICache::getOrCreateCache(runtime);
+      auto cached = cache.makeShared(jsi::Value(runtime, value));
+      return CachedProp<T>(std::move(converted), cached, /* isDirty */ true);
+    }
+  };
+
+} // namespace margelo::nitro