resolveStyleConditionsInSubtree in commit instead of commit hook

Author: intergalacticspacehighway

packages/react-native/ReactCommon/react/renderer/components/root/RootProps.h

@@ -36,7 +36,7 @@ class RootProps final : public ViewProps {
   /*
    * The interface color scheme conditional (`@media (prefers-color-scheme)`)
    * styles are resolved against. Lives on the root (like `layoutConstraints`)
-   * so the `StyleConditionCommitHook` can read it per surface.
+   * so the `ShadowTree` can read it per surface when committing.
    */
   ColorScheme colorScheme{ColorScheme::Light};
 };

packages/react-native/ReactCommon/react/renderer/core/ShadowNode.h

@@ -256,9 +256,9 @@ class ShadowNode : public Sealable, public DebugStringConvertible, public jsi::N
   /*
    * Recomputes the `HasStyleConditionsInSubtree` trait from this node's own
    * props (non-null `styleConditionData`) and its children's traits. Must run
-   * whenever props or children change so that `StyleConditionCommitHook` can prune
-   * whole subtrees and skip the whole tree at the root when no conditional
-   * styles are present.
+   * whenever props or children change so that `resolveStyleConditionsInSubtree`
+   * can prune whole subtrees and skip the whole tree at the root when no
+   * conditional styles are present.
    */
   void propagateStyleConditionsTrait();
 

packages/react-native/ReactCommon/react/renderer/core/ShadowNodeTraits.h

@@ -94,8 +94,8 @@ class ShadowNodeTraits {
 
     // Indicates that this node or one of its descendants carries conditional
     // (media-query) style values (i.e. non-null `Props::styleConditionData`), so
-    // the `StyleConditionCommitHook` must visit its subtree; a node without this
-    // trait has an entire subtree free of conditional styles and can be
+    // `resolveStyleConditionsInSubtree` must visit its subtree; a node without
+    // this trait has an entire subtree free of conditional styles and can be
     // skipped, including skipping the whole tree at the root. Recomputed from
     // props and children on construction; must not be set directly.
     HasStyleConditionsInSubtree = 1 << 15,

packages/react-native/ReactCommon/react/renderer/core/StyleConditionResolver.cpp

@@ -30,19 +30,18 @@ std::shared_ptr<const ShadowNode> resolveStyleConditionsInSubtree(
     return node;
   }
 
-  std::shared_ptr<std::vector<std::shared_ptr<const ShadowNode>>>
-      newChildrenMutable = nullptr;
+  auto newChildren = std::vector<std::shared_ptr<const ShadowNode>>{};
+  auto areChildrenChanged = false;
   const auto& children = node->getChildren();
   for (size_t i = 0; i < children.size(); i++) {
     auto newChild = resolveStyleConditionsInSubtree(
         children[i], colorScheme, orientation, propsParserContext);
     if (newChild != children[i]) {
-      if (newChildrenMutable == nullptr) {
-        newChildrenMutable =
-            std::make_shared<std::vector<std::shared_ptr<const ShadowNode>>>(
-                children);
+      if (!areChildrenChanged) {
+        newChildren = children;
+        areChildrenChanged = true;
       }
-      (*newChildrenMutable)[i] = std::move(newChild);
+      newChildren[i] = std::move(newChild);
     }
   }
 
@@ -61,18 +60,17 @@ std::shared_ptr<const ShadowNode> resolveStyleConditionsInSubtree(
     }
   }
 
-  if (newChildrenMutable == nullptr && newProps == nullptr) {
+  if (!areChildrenChanged && newProps == nullptr) {
     return node;
   }
 
-  auto newChildren =
-      std::shared_ptr<const std::vector<std::shared_ptr<const ShadowNode>>>(
-          newChildrenMutable);
   return node->clone(ShadowNodeFragment{
       .props = newProps != nullptr ? newProps
                                    : ShadowNodeFragment::propsPlaceholder(),
-      .children = newChildren != nullptr
-          ? newChildren
+      .children = areChildrenChanged
+          ? std::make_shared<
+                const std::vector<std::shared_ptr<const ShadowNode>>>(
+                std::move(newChildren))
           : ShadowNodeFragment::childrenPlaceholder(),
       // Preserve the original state of the node.
       .state = node->getState(),

packages/react-native/ReactCommon/react/renderer/mounting/ShadowTree.cpp

@@ -14,18 +14,32 @@
 #include <react/renderer/components/view/ViewShadowNode.h>
 #include <react/renderer/core/LayoutContext.h>
 #include <react/renderer/core/LayoutPrimitives.h>
+#include <react/renderer/core/StyleConditionResolver.h>
 #include <react/renderer/mounting/ShadowTreeRevision.h>
 #include <react/renderer/mounting/ShadowViewMutation.h>
 #include <react/renderer/telemetry/TransactionTelemetry.h>
 #include "updateMountedFlag.h"
 
 #include "ShadowTreeDelegate.h"
 
+#include <cmath>
+
 namespace facebook::react {
 
 namespace {
 const int MAX_COMMIT_ATTEMPTS_BEFORE_LOCKING = 3;
 
+#ifndef __ANDROID__
+// The orientation for `@media (orientation)` is derived from the
+// surface's own viewport
+Orientation orientationOf(const RootShadowNode& rootShadowNode) {
+  auto size = rootShadowNode.getConcreteProps().layoutConstraints.maximumSize;
+  bool isLandscape = std::isfinite(size.width) && std::isfinite(size.height) &&
+      size.width > size.height;
+  return isLandscape ? Orientation::Landscape : Orientation::Portrait;
+}
+#endif
+
 std::string getShadowTreeCommitSourceName(ShadowTreeCommitSource source) {
   switch (source) {
     case ShadowTreeCommitSource::Unknown:
@@ -230,7 +244,9 @@ ShadowTree::ShadowTree(
     ColorScheme colorScheme,
     const ShadowTreeDelegate& delegate,
     const ContextContainer& contextContainer)
-    : surfaceId_(surfaceId), delegate_(delegate) {
+    : surfaceId_(surfaceId),
+      delegate_(delegate),
+      contextContainer_(contextContainer) {
   static RootComponentDescriptor globalRootComponentDescriptor(
       ComponentDescriptorParameters{
           .eventDispatcher = EventDispatcher::Shared{},
@@ -407,6 +423,24 @@ CommitStatus ShadowTree::tryCommit(
     return CommitStatus::Cancelled;
   }
 
+// Gate it on Android until conditional styles are supported there.
+#ifndef __ANDROID__
+  // Resolve conditional (media-query) styles against the environment carried
+  // by the root (color scheme on `RootProps`, orientation from the viewport)
+  {
+    PropsParserContext propsParserContext{surfaceId_, contextContainer_};
+    auto resolved = resolveStyleConditionsInSubtree(
+        newRootShadowNode,
+        newRootShadowNode->getConcreteProps().colorScheme,
+        orientationOf(*newRootShadowNode),
+        propsParserContext);
+    if (resolved != newRootShadowNode) {
+      newRootShadowNode = std::static_pointer_cast<RootShadowNode>(
+          std::const_pointer_cast<ShadowNode>(resolved));
+    }
+  }
+#endif
+
   // Layout nodes.
   std::vector<const LayoutableShadowNode*> affectedLayoutableNodes{};
   affectedLayoutableNodes.reserve(1024);

packages/react-native/ReactCommon/react/renderer/mounting/ShadowTree.h

@@ -169,6 +169,7 @@ class ShadowTree final {
 
   const SurfaceId surfaceId_;
   const ShadowTreeDelegate &delegate_;
+  const ContextContainer &contextContainer_;
   mutable std::shared_mutex revisionMutex_;
   mutable std::recursive_mutex revisionMutexRecursive_;
   mutable CommitMode commitMode_{CommitMode::Normal}; // Protected by `revisionMutex_`.

packages/react-native/ReactCommon/react/renderer/scheduler/Scheduler.cpp

@@ -17,7 +17,6 @@
 #include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
 #include <react/renderer/core/EventQueueProcessor.h>
 #include <react/renderer/core/LayoutContext.h>
-#include <react/renderer/uimanager/StyleConditionCommitHook.h>
 #include <react/renderer/mounting/MountingOverrideDelegate.h>
 #include <react/renderer/mounting/ShadowViewMutation.h>
 #include <react/renderer/runtimescheduler/RuntimeScheduler.h>
@@ -151,14 +150,6 @@ Scheduler::Scheduler(
   commitHooks_ = schedulerToolbox.commitHooks;
   uiManager_ = uiManager;
 
-#ifndef __ANDROID__
-  // TODO: not registered on Android yet — the serialized-rawProps path can't
-  // revert a resolved value cleanly, needs typed prop diffing (Props 2.0).
-  // Android renders the default value from conditional styles until then.
-  commitHooks_.push_back(
-      std::make_shared<StyleConditionCommitHook>(contextContainer_));
-#endif
-
   for (auto& commitHook : commitHooks_) {
     uiManager->registerCommitHook(*commitHook);
   }

packages/react-native/ReactCommon/react/renderer/scheduler/SurfaceHandler.h

@@ -146,8 +146,7 @@ class SurfaceHandler {
 
   /*
    * Sets the interface color scheme conditional (`@media (prefers-color-scheme)`)
-   * styles are resolved against, committing so the `StyleConditionCommitHook`
-   * re-resolves.
+   * styles are resolved against, committing so the tree re-resolves on commit.
    */
   void setColorScheme(ColorScheme colorScheme) const;