feat: basic animation support

marklawlor · marklawlor · commit 3b1cd57833fb · 2025-10-20T20:27:14.000+10:00
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ These are the features that are "done", in that they pass basic testing. More co
 - [x] Important styles
 - [x] Important props
 - [ ] Safe area units
-- [ ] Em & `currentColor`
+- [x] Em & `currentColor`
 - [ ] CSS functions (min, max, platform functions, etc)
 - [ ] Metro
 - [ ] Update compiler to new syntax (switch tuples to objects)
diff --git a/cpp/Animations.cpp b/cpp/Animations.cpp
@@ -0,0 +1,136 @@
+#include "Animations.hpp"
+#include "StyleResolver.hpp"
+#include <unordered_map>
+#include <mutex>
+
+namespace reactnativecss::animations {
+
+    using AnyMap = ::margelo::nitro::AnyMap;
+    using AnyValue = ::margelo::nitro::AnyValue;
+    using AnyObject = ::margelo::nitro::AnyObject;
+
+    // Map to store the shared keyframes observables (one per keyframe name)
+    static std::unordered_map<std::string, std::shared_ptr<reactnativecss::Observable<std::shared_ptr<AnyMap>>>> keyframesObservables;
+
+    // Map to store scope-specific computeds: Map<variableScope, Map<name, Computed<AnyMap>>>
+    static std::unordered_map<std::string, std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<std::shared_ptr<AnyMap>>>>> scopedComputeds;
+
+    static std::mutex keyframesMutex;
+
+    void setKeyframes(const std::string &name, const std::shared_ptr<AnyMap> &keyframes) {
+        std::lock_guard<std::mutex> lock(keyframesMutex);
+
+        // Find or create the observable for this keyframe name
+        auto it = keyframesObservables.find(name);
+
+        if (it != keyframesObservables.end()) {
+            // Update existing observable
+            it->second->set(keyframes);
+        } else {
+            // Create new observable
+            keyframesObservables[name] = reactnativecss::Observable<std::shared_ptr<AnyMap>>::create(
+                    keyframes);
+        }
+    }
+
+    std::shared_ptr<AnyMap> getKeyframes(const std::string &name, const std::string &variableScope,
+                                         reactnativecss::Effect::GetProxy &get) {
+        std::lock_guard<std::mutex> lock(keyframesMutex);
+
+        // First, ensure the Observable exists for this keyframe name
+        auto obsIt = keyframesObservables.find(name);
+        if (obsIt == keyframesObservables.end()) {
+            // Create a new observable with an empty AnyMap
+            keyframesObservables[name] = reactnativecss::Observable<std::shared_ptr<AnyMap>>::create(
+                    AnyMap::make());
+            obsIt = keyframesObservables.find(name);
+        }
+
+        // Get the observable for this keyframe name
+        auto observable = obsIt->second;
+
+        // Now check if a Computed exists within the variableScope for this name
+        auto scopeIt = scopedComputeds.find(variableScope);
+        if (scopeIt == scopedComputeds.end()) {
+            // Create the scope map if it doesn't exist
+            scopedComputeds[variableScope] = std::unordered_map<std::string, std::shared_ptr<reactnativecss::Computed<std::shared_ptr<AnyMap>>>>();
+            scopeIt = scopedComputeds.find(variableScope);
+        }
+
+        auto &scopeMap = scopeIt->second;
+        auto computedIt = scopeMap.find(name);
+
+        if (computedIt == scopeMap.end()) {
+            // Create a new Computed that gets the AnyMap from the observable and processes it
+            auto computed = reactnativecss::Computed<std::shared_ptr<AnyMap>>::create(
+                    [observable, variableScope](const std::shared_ptr<AnyMap> &prev,
+                                                reactnativecss::Effect::GetProxy &get) {
+                        // Get the raw keyframes from the observable
+                        auto rawKeyframes = get(*observable);
+
+                        // Create a new AnyMap to hold the resolved keyframes
+                        auto resolvedKeyframes = AnyMap::make(rawKeyframes->getMap().size());
+
+                        // Loop over the entries of the rawKeyframes
+                        for (const auto &entry: rawKeyframes->getMap()) {
+                            const std::string &key = entry.first;
+                            const AnyValue &value = entry.second;
+
+                            // Each value should be an AnyObject, if not skip that entry
+                            if (!std::holds_alternative<AnyObject>(value)) {
+                                continue;
+                            }
+
+                            const auto &frameMap = std::get<AnyObject>(value);
+
+                            // Create a temporary map to hold resolved frame values
+                            std::unordered_map<std::string, AnyValue> resolvedFrameMap;
+                            resolvedFrameMap.reserve(frameMap.size());
+
+                            // Loop over each entry of the frame and resolve values
+                            for (const auto &frameEntry: frameMap) {
+                                const std::string &frameKey = frameEntry.first;
+                                const AnyValue &frameValue = frameEntry.second;
+
+                                // Resolve the value using StyleResolver
+                                AnyValue resolvedValue = margelo::nitro::cssnitro::StyleResolver::resolveStyle(
+                                        frameValue, variableScope, get
+                                );
+
+                                resolvedFrameMap[frameKey] = resolvedValue;
+                            }
+
+                            // Apply style mapping to the resolved frame
+                            auto transformedFrame = margelo::nitro::cssnitro::StyleResolver::applyStyleMapping(
+                                    resolvedFrameMap, variableScope, get
+                            );
+
+                            // Convert the transformed frame back to an AnyObject
+                            AnyObject finalFrame;
+                            for (const auto &transformedEntry: transformedFrame->getMap()) {
+                                finalFrame[transformedEntry.first] = transformedEntry.second;
+                            }
+
+                            // Set the resolved and transformed frame in the result
+                            resolvedKeyframes->setObject(key, finalFrame);
+                        }
+
+                        return resolvedKeyframes;
+                    },
+                    AnyMap::make()
+            );
+
+            scopeMap[name] = computed;
+            computedIt = scopeMap.find(name);
+        }
+
+        // Return get(computed) to subscribe to it
+        return get(*computedIt->second);
+    }
+
+    void deleteScope(const std::string &name) {
+        std::lock_guard<std::mutex> lock(keyframesMutex);
+        scopedComputeds.erase(name);
+    }
+
+} // namespace reactnativecss::animations
diff --git a/cpp/Animations.hpp b/cpp/Animations.hpp
@@ -0,0 +1,16 @@
+#include "Observable.hpp"
+#include "Computed.hpp"
+#include <NitroModules/AnyMap.hpp>
+#include <string>
+#include <memory>
+
+namespace reactnativecss::animations {
+    void
+    setKeyframes(const std::string &name, const std::shared_ptr<margelo::nitro::AnyMap> &keyframes);
+
+    std::shared_ptr<margelo::nitro::AnyMap>
+    getKeyframes(const std::string &name, const std::string &variableScope,
+                 reactnativecss::Effect::GetProxy &get);
+
+    void deleteScope(const std::string &variableScope);
+} // namespace reactnativecss::animations
diff --git a/cpp/Environment.cpp b/cpp/Environment.cpp
@@ -1,4 +1,3 @@
-// filepath: /Users/mark/Developer/react-native-css-nitro/cpp/Environment.cpp
 #include "Environment.hpp"
 
 namespace reactnativecss {
diff --git a/cpp/HybridStyleRegistry.cpp b/cpp/HybridStyleRegistry.cpp
@@ -8,6 +8,7 @@
 #include "VariableContext.hpp"
 #include "PseudoClasses.hpp"
 #include "JSLogger.hpp"
+#include "Animations.hpp"
 
 #include <regex>
 #include <string>
@@ -16,12 +17,8 @@
 #include <optional>
 #include <unordered_map>
 #include <mutex>
-
-// New: dynamic payloads (now handled by ShadowTreeUpdateManager)
 #include <folly/dynamic.h>
-
-// React Tag
-#include <react/renderer/core/ReactPrimitives.h> // facebook::react::Tag
+#include <react/renderer/core/ReactPrimitives.h>
 
 
 namespace margelo::nitro::cssnitro {
@@ -345,4 +342,9 @@ namespace margelo::nitro::cssnitro {
         // TODO: Integrate with style computation/ShadowTreeUpdateManager if needed.
     }
 
+    void HybridStyleRegistry::setKeyframes(const std::string &name,
+                                           const std::shared_ptr<AnyMap> &keyframes) {
+        reactnativecss::animations::setKeyframes(name, keyframes);
+    }
+
 } // namespace margelo::nitro::cssnitro
diff --git a/cpp/HybridStyleRegistry.hpp b/cpp/HybridStyleRegistry.hpp
@@ -32,12 +32,10 @@ namespace margelo::nitro::cssnitro {
 
         ~HybridStyleRegistry() override;
 
-        // Shorthand aliases
         using PropValue = std::variant<std::string, double, bool>;
         using PropPath = std::vector<std::string>;
         using SelectorAndArgs = std::tuple<std::string, std::vector<std::string>>;
 
-        // ----- public API forwarded to Impl -----
         void setClassname(const std::string &className,
                           const std::vector<HybridStyleRule> &styleRule) override;
 
@@ -73,6 +71,9 @@ namespace margelo::nitro::cssnitro {
         void
         setWindowDimensions(double width, double height, double scale, double fontScale) override;
 
+        void
+        setKeyframes(const std::string &name, const std::shared_ptr<AnyMap> &keyframes) override;
+
     protected:
         void loadHybridMethods() override;
 
diff --git a/cpp/StyleResolver.cpp b/cpp/StyleResolver.cpp
@@ -4,10 +4,14 @@
 
 #include "StyleResolver.hpp"
 #include "StyleFunction.hpp"
+#include "Animations.hpp"
 #include <variant>
+#include <unordered_set>
 
 namespace margelo::nitro::cssnitro {
 
+    using AnyObject = ::margelo::nitro::AnyObject;
+
     AnyValue StyleResolver::resolveStyle(
             const AnyValue &value,
             const std::string &variableScope,
@@ -31,5 +35,95 @@ namespace margelo::nitro::cssnitro {
         return value;
     }
 
-} // namespace margelo::nitro::cssnitro
+    std::shared_ptr<AnyMap> StyleResolver::applyStyleMapping(
+            const std::unordered_map<std::string, AnyValue> &inputMap,
+            const std::string &variableScope,
+            typename reactnativecss::Effect::GetProxy &get
+    ) {
+        static const std::unordered_set<std::string> transformProps = {
+                "translateX", "translateY", "translateZ",
+                "rotate", "rotateX", "rotateY", "rotateZ",
+                "scaleX", "scaleY", "scaleZ",
+                "skewX", "skewY",
+                "perspective"
+        };
+
+        auto anyMap = AnyMap::make(inputMap.size());
+
+        for (const auto &kv: inputMap) {
+            // Handle animationName property
+            if (kv.first == "animationName") {
+                // animationName can be a string or a vector of strings
+                if (std::holds_alternative<std::string>(kv.second)) {
+                    // Single animation name
+                    const std::string &animName = std::get<std::string>(kv.second);
+                    auto keyframes = reactnativecss::animations::getKeyframes(animName,
+                                                                              variableScope, get);
+
+                    // Set animationName to the resolved keyframes object
+                    anyMap->setObject("animationName", keyframes->getMap());
+                } else if (std::holds_alternative<AnyArray>(kv.second)) {
+                    // Array of animation names
+                    const AnyArray &animNames = std::get<AnyArray>(kv.second);
+                    AnyArray keyframesArray;
+
+                    for (const auto &animNameValue: animNames) {
+                        if (std::holds_alternative<std::string>(animNameValue)) {
+                            const std::string &animName = std::get<std::string>(animNameValue);
+                            auto keyframes = reactnativecss::animations::getKeyframes(animName,
+                                                                                      variableScope,
+                                                                                      get);
+                            keyframesArray.push_back(keyframes->getMap());
+                        }
+                    }
+
+                    // Set animationName to the array of resolved keyframes
+                    anyMap->setArray("animationName", keyframesArray);
+                } else {
+                    // Invalid type, don't set anything
+                }
+                continue;
+            }
 
+            // Handle transform properties
+            if (transformProps.count(kv.first) > 0) {
+                AnyArray transformArray;
+
+                // Get existing transform array if it exists
+                if (anyMap->contains("transform")) {
+                    transformArray = anyMap->getArray("transform");
+                }
+
+                // Find the value in the array with the key matching kv.first and set it to kv.second
+                bool foundTransform = false;
+                for (size_t i = 0; i < transformArray.size(); i++) {
+                    if (std::holds_alternative<AnyObject>(transformArray[i])) {
+                        auto obj = std::get<AnyObject>(transformArray[i]);
+                        if (obj.count(kv.first) > 0) {
+                            obj[kv.first] = kv.second;
+                            transformArray[i] = obj;
+                            foundTransform = true;
+                            break;
+                        }
+                    }
+                }
+
+                // If transform property not found in array, add a new transform object
+                if (!foundTransform) {
+                    AnyObject transformObj;
+                    transformObj[kv.first] = kv.second;
+                    transformArray.emplace_back(transformObj);
+                }
+
+                anyMap->setArray("transform", transformArray);
+                continue;
+            }
+
+            // For all other properties, just pass through as-is
+            anyMap->setAny(kv.first, kv.second);
+        }
+
+        return anyMap;
+    }
+
+} // namespace margelo::nitro::cssnitro
diff --git a/cpp/StyleResolver.hpp b/cpp/StyleResolver.hpp
@@ -7,6 +7,7 @@
 #include <string>
 #include "Effect.hpp"
 #include <NitroModules/AnyMap.hpp>
+#include <unordered_map>
 
 namespace margelo::nitro {
     struct AnyValue;
@@ -17,6 +18,7 @@ namespace margelo::nitro::cssnitro {
 
     using AnyValue = ::margelo::nitro::AnyValue;
     using AnyArray = ::margelo::nitro::AnyArray;
+    using AnyMap = ::margelo::nitro::AnyMap;
 
     class StyleResolver {
     public:
@@ -33,7 +35,22 @@ namespace margelo::nitro::cssnitro {
                 const std::string &variableScope,
                 typename reactnativecss::Effect::GetProxy &get
         );
+
+        /**
+         * Apply style mapping to a map of styles, converting individual transform
+         * properties (like scaleX, rotateZ, translateY) into a transform array.
+         * Also handles animationName by fetching keyframes.
+         *
+         * @param inputMap The map of style properties to process
+         * @param variableScope The variable scope context for resolving animations
+         * @param get The Effect::GetProxy for reactive dependencies
+         * @return A new AnyMap with transform properties mapped into a transform array
+         */
+        static std::shared_ptr<AnyMap> applyStyleMapping(
+                const std::unordered_map<std::string, AnyValue> &inputMap,
+                const std::string &variableScope,
+                typename reactnativecss::Effect::GetProxy &get
+        );
     };
 
 } // namespace margelo::nitro::cssnitro
-
diff --git a/cpp/StyledComputedFactory.cpp b/cpp/StyledComputedFactory.cpp
diff --git a/cpp/StyledComputedFactory.hpp b/cpp/StyledComputedFactory.hpp
diff --git a/example/src/App.tsx b/example/src/App.tsx
diff --git a/src/specs/StyleRegistry/HybridStyleRegistry.nitro.ts b/src/specs/StyleRegistry/HybridStyleRegistry.nitro.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// filepath: /Users/mark/Developer/react-native-css-nitro/cpp/Environment.cpp`
`2`	`1`	`#include "Environment.hpp"`
`3`	`2`
`4`	`3`	`namespace reactnativecss {`