react-native-unistyles 2.10.0 → 3.0.0-alpha.1

package/cxx/parser/Parser.h

@@ -0,0 +1,55 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <folly/dynamic.h>
+#include "Unistyle.h"
+#include "Dimensions.hpp"
+#include "Constants.h"
+#include "Helpers.h"
+#include "MediaQueries.h"
+#include "HybridUnistylesRuntime.h"
+#include "StyleSheet.h"
+#include "ShadowLeafUpdate.h"
+
+namespace margelo::nitro::unistyles::parser {
+
+using namespace facebook;
+using namespace margelo::nitro::unistyles::core;
+
+using Variants = std::vector<std::pair<std::string, std::string>>;
+using DependencyMap = std::unordered_map<
+    std::shared_ptr<core::StyleSheet>,
+    std::unordered_map<const ShadowNodeFamily*, std::vector<core::Unistyle::Shared>>
+>;
+
+struct Parser {
+    Parser(std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime): _unistylesRuntime{unistylesRuntime} {}
+
+    void buildUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
+    void parseUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
+    Variants variantsToPairs(jsi::Runtime& rt, jsi::Object&& variants);
+    void rebuildUnistylesWithVariants(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
+    void rebuildUnistylesInDependencyMap(jsi::Runtime& rt, DependencyMap& dependencyMap);
+    shadow::ShadowLeafUpdates dependencyMapToShadowLeafUpdates(DependencyMap& dependencyMap);
+
+private:
+    void rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Unistyle::Shared unistyle);
+    jsi::Object unwrapStyleSheet(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
+    jsi::Object parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, Variants& variants);
+    jsi::Value parseSecondLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Value& nestedObject);
+    jsi::Function createDynamicFunctionProxy(jsi::Runtime& rt, Unistyle::Shared unistyle, Variants& variants);
+    std::vector<folly::dynamic> parseDynamicFunctionArguments(jsi::Runtime& rt, size_t count, const jsi::Value* arguments);
+    std::vector<UnistyleDependency> parseDependencies(jsi::Runtime &rt, jsi::Object&& dependencies);
+    jsi::Value parseTransforms(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
+    jsi::Value getValueFromBreakpoints(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
+    jsi::Object parseVariants(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj, Variants& variants);
+    jsi::Value getStylesForVariant(jsi::Runtime& rt, jsi::Object&& groupValue, std::optional<std::string> selectedVariant);
+    jsi::Object parseCompoundVariants(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj, Variants& variants);
+    bool shouldApplyCompoundVariants(jsi::Runtime& rt, const Variants& variants, jsi::Object& compoundVariant);
+    RawProps parseStylesToShadowTreeStyles(jsi::Runtime& rt, jsi::Object& parsedStyles);
+    bool isColor(const std::string& propertyName);
+
+    std::shared_ptr<HybridUnistylesRuntime> _unistylesRuntime;
+};
+
+}

package/cxx/shadowTree/ShadowLeafUpdate.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/uimanager/UIManager.h>
+
+namespace margelo::nitro::unistyles::shadow {
+
+using namespace facebook;
+using namespace facebook::react;
+
+using ShadowLeafUpdates = std::unordered_map<const ShadowNodeFamily*, std::vector<RawProps>>;
+
+}

package/cxx/shadowTree/ShadowTreeManager.cpp

@@ -0,0 +1,124 @@
+#include "ShadowTreeManager.h"
+
+using namespace margelo::nitro::unistyles;
+using namespace facebook::react;
+using namespace facebook;
+
+using AffectedNodes = std::unordered_map<const ShadowNodeFamily*, std::unordered_set<int>>;
+
+void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, shadow::ShadowLeafUpdates& updates) {
+    auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
+    const auto &shadowTreeRegistry = uiManager.getShadowTreeRegistry();
+
+    shadowTreeRegistry.enumerate([&updates, &rt](const ShadowTree& shadowTree, bool& stop){
+        // we could iterate via updates and create multiple commits
+        // but it can cause performance issues for hundreds of nodes
+        // so let's mutate Shadow Tree in single transaction
+        auto transaction = [&](const RootShadowNode& oldRootShadowNode) {
+            auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(oldRootShadowNode, updates);
+            auto newRootNode = std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
+                rt,
+                oldRootShadowNode,
+                updates,
+                affectedNodes
+            ));
+            
+            // set unistyles commit trait
+            auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootNode);
+            
+            unistylesRootNode->addUnistylesCommitTrait();
+
+            return newRootNode;
+        };
+
+        // commit once!
+        // CommitOptions:
+        // enableStateReconciliation: https://reactnative.dev/architecture/render-pipeline#react-native-renderer-state-updates
+        // mountSynchronously: must be true as this is update from C++ not React
+        shadowTree.commit(transaction, {false, true});
+        
+
+        // for now we're assuming single surface, can be improved in the future
+        // stop = true means stop enumerating next shadow tree
+        // so in other words first shadow tree is our desired tree
+        stop = true;
+    });
+}
+
+// based on Reanimated algorithm
+// For each affected family we're gathering affected nodes (their indexes)
+// Example:
+//      A
+//    /   \
+//   B     C
+//  / \
+// D   E*
+//    / \
+//   F   G
+//
+// For ShadowFamily E* we will get:
+//[
+//  0 - because B is a first children of A,
+//  1 - because E is a second children of B
+//]
+// A, B and E are affected now
+AffectedNodes shadow::ShadowTreeManager::findAffectedNodes(const RootShadowNode& rootNode, ShadowLeafUpdates& updates) {
+    AffectedNodes affectedNodes;
+
+    // compute affected nodes (sub tree)
+    std::for_each(updates.begin(), updates.end(), [&](const auto& pair) {
+        const auto& [family, _] = pair;
+        const auto familyAncestors = family->getAncestors(rootNode);
+
+        for (const auto& [parentNode, index] : std::ranges::reverse_view(familyAncestors)) {
+            const auto parentFamily = &parentNode.get().getFamily();
+            std::unordered_set<int>& affectedNode = affectedNodes[parentFamily];
+
+            affectedNode.insert(index);
+        }
+    });
+
+    return affectedNodes;
+}
+
+// based on Reanimated algorithm
+// clone affected nodes recursively, inject props and commit tree
+ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(jsi::Runtime& rt, const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes) {
+    const auto family = &shadowNode.getFamily();
+    const auto rawPropsIt = updates.find(family);
+    const auto childrenIt = affectedNodes.find(family);
+    auto children = shadowNode.getChildren();
+
+    // for each affected node
+    if (childrenIt != affectedNodes.end()) {
+        // get all indexes of children and clone it recursively
+        for (const auto index : childrenIt->second) {
+            children[index] = cloneShadowTree(rt, *children[index], updates, affectedNodes);
+        }
+    }
+
+    Props::Shared updatedProps = nullptr;
+
+    // clone props for our target shadow node and place fresh RawProps
+    if (rawPropsIt != updates.end()) {
+        PropsParserContext propsParserContext{
+            shadowNode.getSurfaceId(),
+            *shadowNode.getContextContainer()
+        };
+
+        updatedProps = shadowNode.getProps();
+
+        // we may have multiple Unistyles for single node, so we must apply them all
+        for (const auto& props: rawPropsIt->second) {
+            updatedProps = shadowNode
+                .getComponentDescriptor()
+                .cloneProps(propsParserContext, updatedProps, RawProps(props));
+        }
+    }
+
+    return shadowNode.clone({
+        updatedProps ? updatedProps : ShadowNodeFragment::propsPlaceholder(),
+        std::make_shared<ShadowNode::ListOfShared>(children),
+        shadowNode.getState()
+    });
+}

package/cxx/shadowTree/ShadowTreeManager.h

@@ -0,0 +1,23 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/uimanager/UIManagerBinding.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <ranges>
+#include "ShadowLeafUpdate.h"
+#include "UnistylesCommitShadowNode.h"
+
+namespace margelo::nitro::unistyles::shadow {
+
+using namespace facebook::react;
+using namespace facebook;
+
+using AffectedNodes = std::unordered_map<const ShadowNodeFamily *, std::unordered_set<int>>;
+
+struct ShadowTreeManager {
+    static void updateShadowTree(jsi::Runtime& rt, shadow::ShadowLeafUpdates& updates);
+    static AffectedNodes findAffectedNodes(const RootShadowNode& rootNode, ShadowLeafUpdates& updates);
+    static ShadowNode::Unshared cloneShadowTree(jsi::Runtime& rt, const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes);
+};
+
+}

package/ios/Equatable.swift

@@ -0,0 +1,64 @@
+import Foundation
+
+extension Dimensions: Equatable {
+    public static func == (lhs: Dimensions, rhs: Dimensions) -> Bool {
+        return lhs.width == rhs.width && lhs.height == rhs.height
+    }
+}
+
+extension Insets: Equatable {
+    public static func == (lhs: Insets, rhs: Insets) -> Bool {
+        if (lhs.top != rhs.top || lhs.bottom != rhs.bottom) {
+            return false
+        }
+
+        if (lhs.left != rhs.left || lhs.right != rhs.right) {
+            return false
+        }
+
+        return lhs.ime == rhs.ime
+    }
+}
+
+extension UnistylesNativeMiniRuntime {
+    static func diff(lhs: UnistylesNativeMiniRuntime, rhs: UnistylesNativeMiniRuntime) -> Array<UnistyleDependency> {
+        var dependencies: Array<UnistyleDependency> = []
+
+        if (lhs.colorScheme != rhs.colorScheme) {
+            dependencies.append(UnistyleDependency.colorscheme)
+        }
+
+        if (lhs.screen != rhs.screen) {
+            dependencies.append(UnistyleDependency.dimensions)
+        }
+
+        if (lhs.screen.width != rhs.screen.width) {
+            dependencies.append(UnistyleDependency.breakpoints)
+        }
+
+        if (lhs.orientation != rhs.orientation) {
+            dependencies.append(UnistyleDependency.orientation)
+        }
+
+        if (lhs.contentSizeCategory != rhs.contentSizeCategory) {
+            dependencies.append(UnistyleDependency.contentsizecategory)
+        }
+
+        if (lhs.insets != rhs.insets) {
+            dependencies.append(UnistyleDependency.insets)
+        }
+
+        if (lhs.fontScale != rhs.fontScale) {
+            dependencies.append(UnistyleDependency.fontscale)
+        }
+
+        if (lhs.statusBar != rhs.statusBar) {
+            dependencies.append(UnistyleDependency.statusbar)
+        }
+
+        // rtl and pixel ratio are not dynamic
+        // navigation bar is not supported for iOS
+
+        return dependencies
+    }
+}

package/ios/Extensions.swift

@@ -0,0 +1,11 @@
+import Foundation
+
+extension UIColor {
+    public static func fromInt(_ color: Int) -> UIColor {
+        let red = CGFloat((color >> 16) & 0xFF) / 255.0
+        let green = CGFloat((color >> 8) & 0xFF) / 255.0
+        let blue = CGFloat(color & 0xFF) / 255.0
+        
+        return UIColor(red: red, green: green, blue: blue, alpha: 1.0)
+    }
+}

package/ios/NativePlatform+ios.swift

@@ -0,0 +1,291 @@
+#if os(iOS)
+
+import Foundation
+import NitroModules
+
+typealias CxxListener = (Array<UnistyleDependency>) -> Void
+
+class NativeIOSPlatform: HybridNativePlatformSpec {
+    var miniRuntime: UnistylesNativeMiniRuntime?
+
+    var listeners: Array<CxxListener> = []
+    var hybridContext = margelo.nitro.HybridContext()
+    var memorySize: Int {
+        return getSizeOf(self)
+    }
+
+    init() {
+        self.miniRuntime = self.buildMiniRuntime()
+
+        setupPlatformListeners()
+    }
+
+    deinit {
+        removePlatformListeners()
+    }
+
+    func getMiniRuntime() -> UnistylesNativeMiniRuntime {
+        return self.miniRuntime!
+    }
+
+    func buildMiniRuntime() -> UnistylesNativeMiniRuntime {
+        return UnistylesNativeMiniRuntime(
+            colorScheme: self.getColorScheme(),
+            screen: self.getScreenDimensions(),
+            contentSizeCategory: self.getContentSizeCategory(),
+            insets: self.getInsets(),
+            pixelRatio: self.getPixelRatio(),
+            fontScale: self.getFontScale(),
+            rtl: self.getPrefersRtlDirection(),
+            statusBar: self.getStatusBarDimensions(),
+            navigationBar: self.getNavigationBarDimensions(),
+            orientation: self.getOrientation()
+        )
+    }
+
+    func getColorScheme() -> ColorScheme {
+        let interfaceStyle = UIScreen.main.traitCollection.userInterfaceStyle
+
+        switch (interfaceStyle) {
+        case .dark:
+            return ColorScheme.dark
+        case .light:
+            return ColorScheme.light
+        case .unspecified:
+            return ColorScheme.unspecified
+        default:
+            return ColorScheme.unspecified
+        }
+    }
+
+    func getFontScale() -> Double {
+        func getFontScaleFn() -> Double {
+            let contentSizeCategory = UIApplication.shared.preferredContentSizeCategory
+            let defaultMultiplier: CGFloat = 17.0
+
+            switch contentSizeCategory {
+            case .extraExtraExtraLarge:
+                return 23.0 / defaultMultiplier
+            case .extraExtraLarge:
+                return 21.0 / defaultMultiplier
+            case .extraLarge:
+                return 19.0 / defaultMultiplier
+            case .large:
+                return 17.0 / defaultMultiplier
+            case .medium:
+                return 16.0 / defaultMultiplier
+            case .small:
+                return 15.0 / defaultMultiplier
+            case .extraSmall:
+                return 14.0 / defaultMultiplier
+            case .accessibilityMedium:
+                return 29.0 / defaultMultiplier
+            case .accessibilityLarge:
+                return 33.0 / defaultMultiplier
+            case .accessibilityExtraLarge:
+                return 40.0 / defaultMultiplier
+            case .accessibilityExtraExtraLarge:
+                return 47.0 / defaultMultiplier
+            case .accessibilityExtraExtraExtraLarge:
+                return 53.0 / defaultMultiplier
+            default:
+                return 1.0
+            }
+        }
+
+        if Thread.isMainThread {
+            return getFontScaleFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getFontScaleFn()
+        }
+    }
+
+    func getScreenDimensions() -> Dimensions {
+        func getScreenDimensionsFn() -> Dimensions {
+            guard let presentedViewController = RCTPresentedViewController(),
+                  let windowFrame = presentedViewController.view.window?.frame else {
+                // this should never happen, but it's better to return zeros
+                return Dimensions(width: 0, height: 0)
+            }
+
+            let width = windowFrame.size.width
+            let height = windowFrame.size.height
+
+            return Dimensions(width: width, height: height)
+        }
+
+        if Thread.isMainThread {
+            return getScreenDimensionsFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getScreenDimensionsFn()
+        }
+    }
+
+    func getOrientation() -> Orientation {
+        let screenDimensions = getScreenDimensions()
+
+        if (screenDimensions.width > screenDimensions.height) {
+            return Orientation.landscape;
+        }
+
+        return Orientation.portrait;
+    }
+
+    func getContentSizeCategory() -> String {
+        func getContentSizeCategoryFn() -> String {
+            let contentSizeCategory = UIApplication.shared.preferredContentSizeCategory
+
+            switch contentSizeCategory {
+            case .extraExtraExtraLarge:
+                return "xxxLarge"
+            case .extraExtraLarge:
+                return "xxLarge"
+            case .extraLarge:
+                return "xLarge"
+            case .large:
+                return "Large"
+            case .medium:
+                return "Medium"
+            case .small:
+                return "Small"
+            case .extraSmall:
+                return "xSmall"
+            case .accessibilityMedium:
+                return "accessibilityMedium"
+            case .accessibilityLarge:
+                return "accessibilityLarge"
+            case .accessibilityExtraLarge:
+                return "accessibilityExtraLarge"
+            case .accessibilityExtraExtraLarge:
+                return "accessibilityExtraExtraLarge"
+            case .accessibilityExtraExtraExtraLarge:
+                return "accessibilityExtraExtraExtraLarge"
+            default:
+                return "unspecified"
+            }
+        }
+
+        if Thread.isMainThread {
+            return getContentSizeCategoryFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getContentSizeCategoryFn()
+        }
+    }
+
+    // todo handle IME animation
+    func getInsets() -> Insets {
+        func getInsetsFn() -> Insets {
+            guard let window = UIApplication.shared.windows.first else {
+                // this should never happen, but it's better to return zeros
+                return Insets(top: 0, bottom: 0, left: 0, right: 0, ime: 0)
+            }
+
+            let safeArea = window.safeAreaInsets
+
+            return Insets(top: safeArea.top, bottom: safeArea.bottom, left: safeArea.left, right: safeArea.right, ime: 0)
+        }
+
+        if Thread.isMainThread {
+            return getInsetsFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getInsetsFn()
+        }
+    }
+
+    func getPrefersRtlDirection() -> Bool {
+        func getPrefersRtlDirectionFn() -> Bool {
+            let hasForcedRtl = UserDefaults.standard.bool(forKey: "RCTI18nUtil_forceRTL")
+            let isRtl = UIApplication.shared.userInterfaceLayoutDirection == .rightToLeft
+
+            return hasForcedRtl || isRtl
+        }
+
+        if Thread.isMainThread {
+            return getPrefersRtlDirectionFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getPrefersRtlDirectionFn()
+        }
+    }
+
+    func getStatusBarDimensions() -> Dimensions {
+        func getStatusBarDimensionsFn() -> Dimensions {
+            guard let window = UIApplication.shared.windows.first,
+                  let statusBarManager = window.windowScene?.statusBarManager else {
+                // this should never happen, but it's better to return defaults
+                return Dimensions(width: 0, height: 0)
+            }
+
+            let statusBarSize = statusBarManager.statusBarFrame.size
+
+            return Dimensions(width: statusBarSize.width, height: statusBarSize.height)
+        }
+
+        if Thread.isMainThread {
+            return getStatusBarDimensionsFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getStatusBarDimensionsFn()
+        }
+    }
+
+    func getPixelRatio() -> Double {
+        func getPixelRatioFn() -> Double {
+            guard let presentedViewController = RCTPresentedViewController(),
+                  let window = presentedViewController.view.window else {
+                // this should never happen, but it's better to return default
+                return 1;
+            }
+
+            return window.screen.scale
+        }
+
+        if Thread.isMainThread {
+            return getPixelRatioFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getPixelRatioFn()
+        }
+    }
+
+    func setRootViewBackgroundColor(color: Double) throws {
+        DispatchQueue.main.async {
+            guard let presentedViewController = RCTPresentedViewController() else {
+                print("🦄 Unistyles: Couldn't set rootView backgroundColor")
+
+                return
+            }
+
+            presentedViewController.view.backgroundColor = UIColor.fromInt(Int(color))
+        }
+    }
+
+    func getNavigationBarDimensions() -> Dimensions {
+        return Dimensions(width: 0, height: 0);
+    }
+    
+    func setStatusBarHidden(isHidden: Bool) throws {
+        self.onWindowChange(Notification(name: NSNotification.Name("RCTWindowFrameDidChangeNotification")))
+    }
+
+    // not implemented for iOS as there are no such APIs
+    func setNavigationBarBackgroundColor(color: Double) throws {}
+    func setNavigationBarHidden(isHidden: Bool) throws {}
+    func setStatusBarBackgroundColor(color: Double) throws {}
+
+    // implemented from JS
+    func setImmersiveMode(isEnabled: Bool) throws {}
+}
+
+#endif

package/ios/NativePlatform.swift

@@ -0,0 +1,17 @@
+import Foundation
+
+enum PlatformError: Error {
+    case UnsupportedPlatform
+}
+
+public class NativePlatform {
+    public static func create() -> HybridNativePlatformSpecCxx {
+        #if os(iOS)
+        let nativePlatform = NativeIOSPlatform()
+        #else
+        throw PlatformError.UnsupportedPlatform
+        #endif
+
+        return HybridNativePlatformSpecCxx(nativePlatform)
+    }
+}

package/ios/NativePlatformListener+ios.swift

@@ -0,0 +1,41 @@
+import Foundation
+
+extension NativeIOSPlatform {
+    func setupPlatformListeners() {
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(onWindowChange(_:)),
+            name: NSNotification.Name("RCTWindowFrameDidChangeNotification"),
+            object: nil
+        )
+    }
+
+    func removePlatformListeners() {
+        NotificationCenter.default.removeObserver(self, name: NSNotification.Name("RCTWindowFrameDidChangeNotification"), object: nil)
+    }
+
+    func registerPlatformListener(callback: @escaping (CxxListener)) throws {
+        listeners.append(callback)
+    }
+
+    func emitCxxEvent(dependencies: Array<UnistyleDependency>) {
+        self.listeners.forEach { $0(dependencies) }
+    }
+
+    @objc func onWindowChange(_ notification: Notification) {
+        // add small delay (10ms) to make sure all values are up ot date
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
+            guard let currentMiniRuntime = self.miniRuntime else {
+                return
+            }
+            
+            let newMiniRuntime = self.buildMiniRuntime()
+            let changedDependencies = UnistylesNativeMiniRuntime.diff(lhs: currentMiniRuntime, rhs: newMiniRuntime)
+  
+            if (changedDependencies.count > 0) {
+                self.miniRuntime = newMiniRuntime
+                self.emitCxxEvent(dependencies: changedDependencies)
+            }
+        }
+    }
+}

package/ios/Unistyles.h

@@ -0,0 +1,3 @@
+#pragma once
+
+#import <React/RCTUtils.h>

package/ios/UnistylesModuleOnLoad.h

@@ -0,0 +1,11 @@
+#pragma once
+
+#import <React/RCTEventEmitter.h>
+#import <ReactCommon/RCTTurboModuleWithJSIBindings.h>
+#import "TurboUnistyles/TurboUnistyles.h"
+
+@interface UnistylesModule: RCTEventEmitter<NativeTurboUnistylesSpec>
+@end
+
+@interface UnistylesModule()<RCTTurboModuleWithJSIBindings>
+@end