fix: infinite rerenders when settings props

Author: marklawlor

cpp/HybridStyleRegistry.cpp

@@ -30,7 +30,7 @@ namespace margelo::nitro::cssnitro {
     // Initialize static members
     std::unique_ptr<ShadowTreeUpdateManager> HybridStyleRegistry::shadowUpdates_ =
             std::make_unique<ShadowTreeUpdateManager>();
-    std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<Styled>>> HybridStyleRegistry::computedMap_;
+    std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<Styled *>>> HybridStyleRegistry::computedMap_;
     std::unordered_map<std::string, std::shared_ptr<reactnativecss::Observable<std::vector<HybridStyleRule>>>> HybridStyleRegistry::styleRuleMap_;
     std::atomic<uint64_t> HybridStyleRegistry::nextStyleRuleId_{1};
 
@@ -206,7 +206,16 @@ namespace margelo::nitro::cssnitro {
 
         computedMap_[componentId] = computed;
 
-        return computed->get();
+        // Get the value from computed - it's a Styled* that may be nullptr
+        Styled *styledPtr = computed->get();
+
+        // If nullptr, return empty Styled{}
+        if (styledPtr == nullptr) {
+            return Styled{};
+        }
+
+        // Otherwise dereference and return the value
+        return *styledPtr;
     }
 
     void HybridStyleRegistry::deregisterComponent(const std::string &componentId) {

cpp/HybridStyleRegistry.hpp

@@ -87,7 +87,7 @@ namespace margelo::nitro::cssnitro {
 
         // Static shared state
         static std::unique_ptr<ShadowTreeUpdateManager> shadowUpdates_;
-        static std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<Styled>>> computedMap_;
+        static std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<Styled *>>> computedMap_;
         static std::unordered_map<std::string, std::shared_ptr<reactnativecss::Observable<std::vector<HybridStyleRule>>>> styleRuleMap_;
         static std::atomic<uint64_t> nextStyleRuleId_;
     };

cpp/StyledComputedFactory.cpp

@@ -12,11 +12,37 @@
 
 namespace margelo::nitro::cssnitro {
 
-    class StyledComputedFactory;
+    class StyledComputedFactory {
+    public:
+        /**
+         * Convert an unordered_map to AnyMap with optional transform property handling.
+         * @param mergedMap The source map to convert
+         * @param applyTransformMapping If true, applies special handling for transform properties
+         * @return The converted AnyMap
+         */
+        static std::shared_ptr<margelo::nitro::AnyMap> convertToAnyMap(
+                const std::unordered_map<std::string, margelo::nitro::AnyValue> &mergedMap,
+                bool applyTransformMapping);
 
-// Build a Computed<Styled> that resolves styles from classNames against the styleRuleMap
+        /**
+         * Process declarations from a style rule and merge them into target maps.
+         * @param declarations The variant containing style/prop declarations
+         * @param targetStyles The map to store style declarations
+         * @param targetProps The map to store prop declarations
+         * @param get The Effect GetProxy for resolving reactive values
+         * @param variableScope The scope for variable resolution
+         */
+        static void processDeclarations(
+                const auto &declarations,
+                std::unordered_map<std::string, margelo::nitro::AnyValue> &targetStyles,
+                std::unordered_map<std::string, margelo::nitro::AnyValue> &targetProps,
+                reactnativecss::Effect::GetProxy &get,
+                const std::string &variableScope);
+    };
+
+// 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(
+    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,

cpp/StyledComputedFactory.hpp

@@ -9,7 +9,15 @@ StyleRegistry.addStyleSheet({
       "text-red-500",
       [
         {
-          s: specificity({ className: 1 }),
+          s: specificity({ className: 1, important: 1 }),
+          d: [
+            {
+              color: "green",
+            },
+          ],
+        },
+        {
+          s: specificity({ className: 2 }),
           d: [
             {
               color: "red",
@@ -40,7 +48,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text className="text-red-500" style={{ fontSize: 30 }} selectable>
-        Multiply: {multiply(3, 7)}
+        Multiply17: {multiply(3, 7)}
       </Text>
     </View>
   );

example/src/App.tsx

@@ -3,11 +3,9 @@ import { Text as RNText } from "react-native";
 
 import { createAnimatedComponent } from "react-native-reanimated";
 
-import { useElement } from "../../native/useElement";
-import { useDualRefs } from "../../native/useRef";
 import { useStyledProps } from "../../native/useStyled";
-import { StyleRegistry } from "../../specs/StyleRegistry";
-import { copyComponentProperties, getDeepKeys } from "../../utils";
+// import { useDualRefs } from "../../native/useRef";
+import { copyComponentProperties } from "../../utils";
 
 const AnimatedText = createAnimatedComponent(RNText);
 
@@ -17,25 +15,28 @@ export const Text = copyComponentProperties(
     const componentId = useId();
     const styled = useStyledProps(componentId, p.className, p);
 
-    const ref = useDualRefs(componentId, p.ref);
-
-    if (p.style) {
-      StyleRegistry.updateComponentInlineStyleKeys(
-        componentId,
-        getDeepKeys(p.style),
-      );
-    }
-
-    return useElement(AnimatedText, styled, {
-      ...styled.props,
-      ...p,
-      ...styled.importantProps,
-      ref,
-      style:
-        styled.style || styled.importantStyle
-          ? [styled.style, p.style, styled.importantStyle]
-          : p.style,
-    });
+    // // const ref = useDualRefs(componentId, p.ref);
+
+    // if (p.style) {
+    //   StyleRegistry.updateComponentInlineStyleKeys(
+    //     componentId,
+    //     getDeepKeys(p.style),
+    //   );
+    // }
+
+    // return useElement(AnimatedText, styled, {
+    //   ...styled.props,
+    //   ...p,
+    //   ...styled.importantProps,
+    //   // ref,
+    //   style:
+    //     styled.style || styled.importantStyle
+    //       ? [styled.style, p.style, styled.importantStyle]
+    //       : p.style,
+    // });
+    console.log("render", styled);
+
+    return <AnimatedText {...p} />;
   },
 );
 

src/components/Text/Text.native.tsx

@@ -1,46 +1,12 @@
-import { useId, type ComponentProps, type Ref } from "react";
-import { Text as RNText } from "react-native";
+import { Text as RNText, type TextProps } from "react-native";
 
-import { createAnimatedComponent } from "react-native-reanimated";
-
-import { useElement } from "../../native/useElement";
-import { useDualRefs } from "../../native/useRef";
-import { useStyledProps } from "../../native/useStyled";
-import { StyleRegistry } from "../../specs/StyleRegistry";
-import { copyComponentProperties, getDeepKeys } from "../../utils";
-
-const AnimatedText = createAnimatedComponent(RNText);
+import { copyComponentProperties } from "../../utils";
+import { useStyled } from "../../web/useStyled";
 
 export const Text = copyComponentProperties(
-  AnimatedText,
-  (
-    p: ComponentProps<typeof AnimatedText> & {
-      className?: string;
-      ref?: Ref<RNText>;
-    },
-  ) => {
-    const componentId = useId();
-    const styled = useStyledProps(componentId, p.className, p);
-    const ref = useDualRefs(componentId, p.ref);
-
-    if (p.style) {
-      StyleRegistry.updateComponentInlineStyleKeys(
-        componentId,
-        getDeepKeys(p.style),
-      );
-    }
-
-    return useElement(AnimatedText, styled, {
-      ...styled.props,
-      ...p,
-      ...styled.importantProps,
-      ref,
-      style:
-        styled.style || styled.importantStyle
-          ? [styled.style, p.style, styled.importantStyle]
-          : p.style,
-    });
+  RNText,
+  ({ className, style, ...props }: TextProps & { className?: string }) => {
+    const nextStyle = useStyled(className, style);
+    return <RNText {...props} style={nextStyle} />;
   },
 );
-
-export default Text;

src/components/Text/Text.tsx

@@ -1,12 +1,12 @@
 import type { SpecificityArray } from "../specs/StyleRegistry/HybridStyleRegistry.nitro";
 
 const Specificity = {
-  order: 0,
-  className: 1,
-  important: 2,
-  inline: 3,
-  pseudoElements: 4,
-  pseudoClass: 1,
+  important: 0,
+  inline: 1,
+  pseudoElements: 2,
+  className: 3,
+  pseudoClass: 3,
+  order: 4,
   // Id: 0, - We don't support ID yet
   // StyleSheet: 0, - We don't support multiple stylesheets
 };

src/native/specificity.ts

@@ -76,7 +76,7 @@ export function useStyledProps(
 
   useEffect(
     () => () => {
-      StyleRegistry.deregisterComponent(componentId);
+      // StyleRegistry.deregisterComponent(componentId);
     },
     [componentId],
   );