feat: starting framework for JS rerenders

Author: marklawlor

README.md

@@ -2,14 +2,25 @@
 
 `rect-native-css` ported to C++ for performance. This is a prototype and not production ready. Ideally this eventually be `react-native-css@4.0.0`
 
+## Description
+
+This library is a port of `react-native-css` to C++ for performance. It will eventually be a drop in replacement for `react-native-css` and they will share the same compiler.
+
+Unlike `react-native-css`, the majority of the processing is done off thread in C++. When styles are updated they are directly applied to the Shadow Tree nodes.
+
+There are two exceptions where styles are applied via a React re-render:
+
+- A non-style prop is changed (e.g `caretColor`)
+- The component is animated (the component has a transition or animation style)
+
 ## Progress
 
 These are the features that are "done". Only basic testing as been performed.
 
 - [x] Dynamic styles - shadow tree
-- [ ] Dynamic styles - JS rerender
+- [x] Dynamic styles - JS rerender
 - [x] Style hot reload - shadow tree
-- [ ] Style hot reload- JS rerender
+- [x] Style hot reload- JS rerender
 - [x] Web
 - [x] Multiple style rules
 - [x] Specificity sorting
@@ -30,7 +41,7 @@ These are the features that are "done". Only basic testing as been performed.
 - [x] Upgrading elements
 - [ ] Upgrading elements warning
 - [ ] Animations
-- [ ] Transitions
+- [x] Transitions
 - [ ] Important styles
 - [ ] Important props
 - [ ] Shorthand runtime styles

cpp/HybridStyleRegistry.cpp

@@ -174,6 +174,7 @@ namespace margelo::nitro::cssnitro {
         // Build computed Styled via factory
         auto computed = ::margelo::nitro::cssnitro::makeStyledComputed(styleRuleMap_, classNames,
                                                                        componentId,
+                                                                       rerender,
                                                                        *shadowUpdates_,
                                                                        variableScope,
                                                                        containerScope);

cpp/ShadowTreeUpdateManager.cpp

@@ -106,6 +106,11 @@ namespace margelo::nitro::cssnitro {
         if (it != component_links_.end()) component_links_.erase(it);
     }
 
+    bool ShadowTreeUpdateManager::hasComponent(const std::string &componentId) {
+        auto it = component_links_.find(componentId);
+        return (it == component_links_.end());
+    }
+
     void ShadowTreeUpdateManager::addUpdates(
             const std::string &componentId,
             const std::shared_ptr<::margelo::nitro::AnyMap> &styleMap) {

cpp/ShadowTreeUpdateManager.hpp

@@ -39,6 +39,8 @@ namespace margelo::nitro::cssnitro {
                            const std::string &componentId,
                            facebook::react::Tag tag);
 
+        bool hasComponent(const std::string &componentId);
+
         void unlinkComponent(const std::string &componentId);
 
         void addUpdates(const std::string &componentId,

cpp/StyledComputedFactory.cpp

@@ -22,11 +22,12 @@ namespace margelo::nitro::cssnitro {
             const std::unordered_map<std::string, std::shared_ptr<reactnativecss::Observable<std::vector<HybridStyleRule>>>> &styleRuleMap,
             const std::string &classNames,
             const std::string &componentId,
+            const std::function<void()> &rerender,
             ShadowTreeUpdateManager &shadowUpdates,
             const std::string &variableScope,
             const std::string &containerScope) {
         auto computed = reactnativecss::Computed<Styled>::create(
-                [&styleRuleMap, classNames, componentId, &shadowUpdates, variableScope, containerScope](
+                [&styleRuleMap, classNames, componentId, &rerender, &shadowUpdates, variableScope, containerScope](
                         const Styled &prev,
                         typename reactnativecss::Effect::GetProxy &get) {
                     (void) prev;
@@ -158,8 +159,12 @@ namespace margelo::nitro::cssnitro {
                         next.style = anyMap;
                     }
 
-                    // Notify ShadowTreeUpdateManager with the resolved style
+                    if (shouldRerender(next)) {
+                        (void) rerender();
+                    }
+
                     if (next.style.has_value()) {
+                        // Notify ShadowTreeUpdateManager with the resolved style
                         shadowUpdates.addUpdates(componentId, next.style.value());
                     }
 
@@ -170,4 +175,9 @@ namespace margelo::nitro::cssnitro {
         return computed;
     }
 
+    bool shouldRerender(const Styled &styled) {
+        // Check if props has a value - if it does, we should rerender
+        return styled.props.has_value();
+    }
+
 } // namespace margelo::nitro::cssnitro

cpp/StyledComputedFactory.hpp

@@ -6,21 +6,25 @@
 
 #include "Styled.hpp"
 #include "HybridStyleRule.hpp"
+#include "ShadowTreeUpdateManager.hpp"
 #include "Observable.hpp"
 #include "Computed.hpp"
 
 namespace margelo::nitro::cssnitro {
 
-    class ShadowTreeUpdateManager;
+    class StyledComputedFactory;
 
 // Build a Computed<Styled> that resolves styles from classNames against the styleRuleMap
 // and notifies ShadowTreeUpdateManager with the value of next.style for the given componentId.
     std::shared_ptr<reactnativecss::Computed<Styled>> makeStyledComputed(
             const std::unordered_map<std::string, std::shared_ptr<reactnativecss::Observable<std::vector<HybridStyleRule>>>> &styleRuleMap,
             const std::string &classNames,
             const std::string &componentId,
+            const std::function<void()> &rerender,
             ShadowTreeUpdateManager &shadowUpdates,
             const std::string &variableScope,
             const std::string &containerScope);
 
+    bool shouldRerender(const Styled &styled);
+
 } // namespace margelo::nitro::cssnitro

src/components/View/View.native.tsx

@@ -12,8 +12,8 @@ export const View = copyComponentProperties(
   (originalProps: ViewProps) => {
     let p = originalProps as Record<string, any>;
     const componentId = useId();
-    const ref = useRef(componentId, p.ref);
     const next = useStyledProps(componentId, p.className, p);
+    const ref = useRef(componentId, p.ref);
 
     if (p.style) {
       StyleRegistry.updateComponentInlineStyleKeys(