Rename SonarKitLayoutComponentkitsupport

Summary: Rename SonarKitLayoutComponentkitsupport Reviewed By: passy Differential Revision: D10029301 fbshipit-source-id: c87717d431ce2603e31bf3c25add40f90eb76609
2018-09-25 13:27:36 -07:00
parent 706ef2a1c8
commit 588d61efc6
25 changed files with 13 additions and 13 deletions
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKComponent+Sonar.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKComponent+Sonar.h
@@ -0,0 +1,21 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <ComponentKit/CKComponent.h>
+#import <FlipperKit/SKMacros.h>
+#import <FlipperKitLayoutPlugin/SKNamed.h>
+#import <FlipperKitLayoutPlugin/SKNodeDescriptor.h>
+
+FB_LINK_REQUIRE(CKComponent_Sonar)
+@interface CKComponent (Sonar)
+
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)sonar_getData;
+- (NSDictionary<NSString *, SKNodeUpdateData> *)sonar_getDataMutations;
+- (NSString *)sonar_getName;
+- (NSString *)sonar_getDecoration;
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKComponent+Sonar.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKComponent+Sonar.mm
@@ -0,0 +1,177 @@
+/*
+ *  Copyright (c) 2004-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "CKComponent+Sonar.h"
+
+#import <ComponentKit/CKComponentAccessibility.h>
+#import <ComponentKit/CKComponentController.h>
+#import <ComponentKit/CKComponentInternal.h>
+#import <ComponentKit/CKComponentSubclass.h>
+#import <ComponentKit/CKComponentViewConfiguration.h>
+#import <FlipperKitLayoutPlugin/SKNamed.h>
+#import <FlipperKitLayoutPlugin/SKObject.h>
+
+#import "CKStatelessComponent+Sonar.h"
+
+/** This protocol isn't actually adopted anywhere, it just lets us use the SEL below */
+@protocol SonarKitLayoutComponentKitOverrideInformalProtocol
+- (NSString *)sonar_componentNameOverride;
+- (NSString *)sonar_componentDecorationOverride;
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)sonar_additionalDataOverride;
+@end
+
+static BOOL AccessibilityContextIsDefault(CKComponentAccessibilityContext accessibilityContext) {
+  return accessibilityContext == CKComponentAccessibilityContext();
+}
+
+static NSDictionary<NSString *, NSObject *> *AccessibilityContextDict(CKComponentAccessibilityContext accessibilityContext) {
+  NSMutableDictionary<NSString *, NSObject *> *accessibilityDict = [NSMutableDictionary new];
+  if (accessibilityContext.isAccessibilityElement != nil) {
+    accessibilityDict[@"isAccessibilityElement"] = SKObject(@([accessibilityContext.isAccessibilityElement boolValue]));
+  }
+  if (accessibilityContext.accessibilityLabel.hasText()) {
+    accessibilityDict[@"accessibilityLabel"] = SKObject(accessibilityContext.accessibilityLabel.value());
+  }
+  if (accessibilityContext.accessibilityHint.hasText()) {
+    accessibilityDict[@"accessibilityHint"] = SKObject(accessibilityContext.accessibilityHint.value());
+  }
+  if (accessibilityContext.accessibilityValue.hasText()) {
+    accessibilityDict[@"accessibilityValue"] = SKObject(accessibilityContext.accessibilityValue.value());
+  }
+  if (accessibilityContext.accessibilityTraits != nil) {
+    accessibilityDict[@"accessibilityTraits"] = SKObject(@([accessibilityContext.accessibilityTraits integerValue]));
+  }
+  if (accessibilityContext.accessibilityComponentAction) {
+    accessibilityDict[@"accessibilityComponentAction.identifier"] = SKObject(@(accessibilityContext.accessibilityComponentAction.identifier().c_str()));
+  }
+  return accessibilityDict;
+}
+
+FB_LINKABLE(CKComponent_Sonar)
+@implementation CKComponent (Sonar)
+
+- (NSString *)sonar_getName
+{
+  if ([self respondsToSelector:@selector(sonar_componentNameOverride)]) {
+    return [(id)self sonar_componentNameOverride];
+  }
+  return NSStringFromClass([self class]);
+}
+
+- (NSString *)sonar_getDecoration
+{
+  if ([self respondsToSelector:@selector(sonar_componentDecorationOverride)]) {
+    return [(id)self sonar_componentDecorationOverride];
+  }
+  return @"componentkit";
+}
+
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)sonar_getData
+{
+  static NSDictionary<NSNumber *, NSString *> *UIControlEventsEnumMap = @{
+                                                                          @(UIControlEventTouchDown): @"UIControlEventTouchDown",
+                                                                          @(UIControlEventTouchDownRepeat): @"UIControlEventTouchDownRepeat",
+                                                                          @(UIControlEventTouchDragInside): @"UIControlEventTouchDragInside",
+                                                                          @(UIControlEventTouchDragOutside): @"UIControlEventTouchDragOutside",
+                                                                          @(UIControlEventTouchDragEnter): @"UIControlEventTouchDragEnter",
+                                                                          @(UIControlEventTouchDragExit): @"UIControlEventTouchDragExit",
+                                                                          @(UIControlEventTouchUpInside): @"UIControlEventTouchUpInside",
+                                                                          @(UIControlEventTouchUpOutside): @"UIControlEventTouchUpOutside",
+                                                                          @(UIControlEventTouchCancel): @"UIControlEventTouchTouchCancel",
+
+                                                                          @(UIControlEventValueChanged): @"UIControlEventValueChanged",
+                                                                          @(UIControlEventPrimaryActionTriggered): @"UIControlEventPrimaryActionTriggered",
+
+                                                                          @(UIControlEventEditingDidBegin): @"UIControlEventEditingDidBegin",
+                                                                          @(UIControlEventEditingChanged): @"UIControlEventEditingChanged",
+                                                                          @(UIControlEventEditingDidEnd): @"UIControlEventEditingDidEnd",
+                                                                          @(UIControlEventEditingDidEndOnExit): @"UIControlEventEditingDidEndOnExit",
+                                                                          };
+
+
+  NSMutableArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *data = [NSMutableArray new];
+
+  [data addObject: [SKNamed newWithName: @"CKComponent"
+                                         withValue: @{
+                                                      @"frame": SKObject(self.viewContext.frame),
+                                                      @"controller": SKObject(NSStringFromClass([self.controller class])),
+                                                      }]];
+
+  if (self.viewContext.view) {
+    auto _actions = _CKComponentDebugControlActionsForComponent(self);
+    if (_actions.size() > 0) {
+      NSMutableDictionary<NSString *, NSObject *> *actions = [NSMutableDictionary new];
+
+      for (NSNumber *controlEvent : [UIControlEventsEnumMap allKeys]) {
+        NSMutableArray<NSDictionary<NSString *, NSObject *> *> *responders = [NSMutableArray new];
+
+        for (const auto action : _actions) {
+          if ((action.first & [controlEvent integerValue]) == 0) {
+            continue;
+          }
+
+          for (auto responder : action.second) {
+            auto debugTarget = _CKTypedComponentDebugInitialTarget(responder);
+            if (debugTarget.isBlockBaseAction()) {
+              [responders addObject: @{
+                                       @"identifier": SKObject(@(responder.identifier().c_str())),
+                                       @"selector": SKObject(NSStringFromSelector(responder.selector())),
+                                       }];
+
+            } else {
+              id initialTarget = debugTarget.get(self);
+              const CKActionInfo actionInfo = CKActionFind(responder.selector(), initialTarget);
+              [responders addObject: @{
+                                       @"initialTarget": SKObject(NSStringFromClass([initialTarget class])),
+                                       @"identifier": SKObject(@(responder.identifier().c_str())),
+                                       @"handler": SKObject(NSStringFromClass([actionInfo.responder class])),
+                                       @"selector": SKObject(NSStringFromSelector(responder.selector())),
+                                       }];
+            }
+          }
+        }
+
+        if (responders.count > 0) {
+          actions[UIControlEventsEnumMap[controlEvent]] = responders;
+        }
+      }
+
+      [data addObject: [SKNamed newWithName: @"Actions" withValue: actions]];
+    }
+  }
+
+  // Only add accessibility panel if accessibilityContext is not default
+  CKComponentAccessibilityContext accessibilityContext = [self viewConfiguration].accessibilityContext();
+  if (!AccessibilityContextIsDefault(accessibilityContext)) {
+    [data addObject:
+     [SKNamed newWithName: @"Accessibility"
+                withValue: @{
+                             @"accessibilityContext": AccessibilityContextDict(accessibilityContext),
+                             @"accessibilityEnabled": SKMutableObject(@(CK::Component::Accessibility::IsAccessibilityEnabled())),
+                             }]];
+  }
+
+  if ([self respondsToSelector:@selector(sonar_additionalDataOverride)]) {
+    [data addObjectsFromArray:[(id)self sonar_additionalDataOverride]];
+  }
+
+  return data;
+}
+
+- (NSDictionary<NSString *, SKNodeUpdateData> *)sonar_getDataMutations {
+  return @{
+           @"CKComponentAccessibility.accessibilityEnabled": ^(NSNumber *value) {
+             CK::Component::Accessibility::SetForceAccessibilityEnabled([value boolValue]);
+           }
+           };
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.h
@@ -0,0 +1,14 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <ComponentKit/CKFlexboxComponent.h>
+#import <FlipperKit/SKMacros.h>
+
+FB_LINK_REQUIRE(CKFlexboxComponent_Sonar)
+@interface CKFlexboxComponent (Sonar)
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKFlexboxComponent+Sonar.mm
@@ -0,0 +1,80 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "CKFlexboxComponent+Sonar.h"
+
+#import <FlipperKitLayoutPlugin/SKNamed.h>
+#import <FlipperKitLayoutPlugin/SKObject.h>
+
+#import "CKComponent+Sonar.h"
+#import "Utils.h"
+
+FB_LINKABLE(CKFlexboxComponent_Sonar)
+@implementation CKFlexboxComponent (Sonar)
+
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)sonar_additionalDataOverride
+{
+  static NSDictionary<NSNumber *, NSString *> *CKFlexboxDirectionEnumMap = @{
+                                @(CKFlexboxDirectionColumn): @"vertical",
+                                @(CKFlexboxDirectionRow): @"horizontal",
+                                @(CKFlexboxDirectionColumnReverse): @"vertical-reverse",
+                                @(CKFlexboxDirectionRowReverse): @"horizontal-reverse",
+                                };
+
+  static NSDictionary<NSNumber *, NSString *> *CKFlexboxJustifyContentEnumMap = @{
+                                     @(CKFlexboxJustifyContentStart): @"start",
+                                     @(CKFlexboxJustifyContentCenter): @"center",
+                                     @(CKFlexboxJustifyContentEnd): @"end",
+                                     @(CKFlexboxJustifyContentSpaceBetween): @"space-between",
+                                     @(CKFlexboxJustifyContentSpaceAround): @"space-around",
+                                     };
+
+  static NSDictionary<NSNumber *, NSString *> *CKFlexboxAlignItemsEnumMap = @{
+                                 @(CKFlexboxAlignItemsStart): @"start",
+                                 @(CKFlexboxAlignItemsEnd): @"end",
+                                 @(CKFlexboxAlignItemsCenter): @"center",
+                                 @(CKFlexboxAlignItemsBaseline): @"baseline",
+                                 @(CKFlexboxAlignItemsStretch): @"stretch",
+                                 };
+
+  static NSDictionary<NSNumber *, NSString *> *CKFlexboxAlignContentEnumMap = @{
+                                   @(CKFlexboxAlignContentStart): @"start",
+                                   @(CKFlexboxAlignContentEnd): @"end",
+                                   @(CKFlexboxAlignContentCenter): @"center",
+                                   @(CKFlexboxAlignContentSpaceBetween): @"space-between",
+                                   @(CKFlexboxAlignContentSpaceAround): @"space-around",
+                                   @(CKFlexboxAlignContentStretch): @"stretch",
+                                   };
+
+  static NSDictionary<NSNumber *, NSString *> *CKFlexboxWrapEnumMap = @{
+                           @(CKFlexboxWrapWrap): @"wrap",
+                           @(CKFlexboxWrapNoWrap): @"no-wrap",
+                           @(CKFlexboxWrapWrapReverse): @"wrap-reverse",
+                           };
+
+  CKFlexboxComponentStyle style;
+  [[self valueForKey: @"_style"] getValue: &style];
+
+  return @[[SKNamed
+            newWithName:@"CKFlexboxComponent"
+            withValue:@{
+              @"spacing": SKObject(@(style.spacing)),
+              @"direction": SKObject(CKFlexboxDirectionEnumMap[@(style.direction)]),
+              @"justifyContent": SKObject(CKFlexboxJustifyContentEnumMap[@(style.justifyContent)]),
+              @"alignItems": SKObject(CKFlexboxAlignItemsEnumMap[@(style.alignItems)]),
+              @"alignContent": SKObject(CKFlexboxAlignContentEnumMap[@(style.alignContent)]),
+              @"wrap": SKObject(CKFlexboxWrapEnumMap[@(style.wrap)]),
+              @"margin": SKObject(flexboxRect(style.margin)),
+              @"padding": SKObject(flexboxRect(style.padding)),
+            }]];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKInsetComponent+Sonar.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKInsetComponent+Sonar.h
@@ -0,0 +1,14 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <ComponentKit/CKInsetComponent.h>
+#import <FlipperKit/SKMacros.h>
+
+FB_LINK_REQUIRE(CKInsetComponent_Sonar)
+@interface CKInsetComponent (Sonar)
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKInsetComponent+Sonar.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKInsetComponent+Sonar.mm
@@ -0,0 +1,27 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "CKInsetComponent+Sonar.h"
+
+#import <FlipperKitLayoutPlugin/SKNamed.h>
+#import <FlipperKitLayoutPlugin/SKObject.h>
+
+#import "CKComponent+Sonar.h"
+
+FB_LINKABLE(CKInsetComponent_Sonar)
+@implementation CKInsetComponent (Sonar)
+
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)sonar_additionalDataOverride
+{
+  return @[[SKNamed newWithName:@"CKInsetComponent" withValue:@{@"insets": SKObject([[self valueForKey: @"_insets"] UIEdgeInsetsValue])}]];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKStatelessComponent+Sonar.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKStatelessComponent+Sonar.h
@@ -0,0 +1,16 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <ComponentKit/CKStatelessComponent.h>
+#import <FlipperKit/SKMacros.h>
+
+FB_LINK_REQUIRE(CKStatelessComponent_Sonar)
+@interface CKStatelessComponent (Sonar)
+
+- (NSString *)sonar_componentNameOverride;
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKStatelessComponent+Sonar.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/CKStatelessComponent+Sonar.mm
@@ -0,0 +1,27 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "CKStatelessComponent+Sonar.h"
+
+#import <FlipperKitLayoutPlugin/SKNamed.h>
+#import <FlipperKitLayoutPlugin/SKObject.h>
+
+#import "CKComponent+Sonar.h"
+
+FB_LINKABLE(CKStatelessComponent_Sonar)
+@implementation CKStatelessComponent (Sonar)
+
+- (NSString *)sonar_componentNameOverride
+{
+  return [self description];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h
@@ -0,0 +1,16 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <Foundation/Foundation.h>
+
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+
+@interface FlipperKitLayoutComponentKitSupport : NSObject
+
+ (void)setUpWithDescriptorMapper:(SKDescriptorMapper *)mapper;
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.mm
@@ -0,0 +1,37 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "FlipperKitLayoutComponentKitSupport.h"
+
+#import <ComponentKit/CKComponentRootView.h>
+#import <ComponentKit/CKComponentHostingView.h>
+
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+
+#import "SKComponentHostingViewDescriptor.h"
+#import "SKComponentRootViewDescriptor.h"
+#import "SKComponentLayoutDescriptor.h"
+#import "SKComponentLayoutWrapper.h"
+
+@implementation FlipperKitLayoutComponentKitSupport
+
+ (void)setUpWithDescriptorMapper:(SKDescriptorMapper *)mapper {
+  // What we really want here is "forProtocol:@protocol(CKInspectableView)" but no such luck.
+  [mapper registerDescriptor: [[SKComponentHostingViewDescriptor alloc] initWithDescriptorMapper: mapper]
+                    forClass: [CKComponentHostingView class]];
+  [mapper registerDescriptor: [[SKComponentRootViewDescriptor alloc] initWithDescriptorMapper: mapper]
+                    forClass: [CKComponentRootView class]];
+  [mapper registerDescriptor: [[SKComponentLayoutDescriptor alloc] initWithDescriptorMapper: mapper]
+                    forClass: [SKComponentLayoutWrapper class]];
+}
+
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentHostingViewDescriptor.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentHostingViewDescriptor.h
@@ -0,0 +1,14 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <FlipperKitLayoutPlugin/SKNodeDescriptor.h>
+
+@class CKComponentHostingView;
+
+@interface SKComponentHostingViewDescriptor : SKNodeDescriptor<CKComponentHostingView *>
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentHostingViewDescriptor.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentHostingViewDescriptor.mm
@@ -0,0 +1,48 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "SKComponentHostingViewDescriptor.h"
+
+#import <ComponentKit/CKComponentDataSourceAttachController.h>
+#import <ComponentKit/CKComponentDataSourceAttachControllerInternal.h>
+#import <ComponentKit/CKComponentHostingView.h>
+#import <ComponentKit/CKComponentHostingViewInternal.h>
+#import <ComponentKit/CKComponentLayout.h>
+#import <ComponentKit/CKComponentHostingViewInternal.h>
+
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+
+#import "SKComponentLayoutWrapper.h"
+
+@implementation SKComponentHostingViewDescriptor
+
+- (NSString *)identifierForNode:(CKComponentHostingView *)node {
+  return [NSString stringWithFormat: @"%p", node];
+}
+
+- (NSUInteger)childCountForNode:(CKComponentHostingView *)node {
+  return node.mountedLayout.component ? 1 : 0;
+}
+
+- (id)childForNode:(CKComponentHostingView *)node atIndex:(NSUInteger)index {
+  return [SKComponentLayoutWrapper newFromRoot:node];
+}
+
+- (void)setHighlighted:(BOOL)highlighted forNode:(CKComponentHostingView *)node {
+  SKNodeDescriptor *viewDescriptor = [self descriptorForClass: [UIView class]];
+  [viewDescriptor setHighlighted: highlighted forNode: node];
+}
+
+- (void)hitTest:(SKTouch *)touch forNode:(CKComponentHostingView *)node {
+  [touch continueWithChildIndex: 0 withOffset: (CGPoint){ 0, 0 }];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutDescriptor.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutDescriptor.h
@@ -0,0 +1,14 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <FlipperKitLayoutPlugin/SKNodeDescriptor.h>
+
+@class SKComponentLayoutWrapper;
+
+@interface SKComponentLayoutDescriptor: SKNodeDescriptor<SKComponentLayoutWrapper *>
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutDescriptor.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutDescriptor.mm
@@ -0,0 +1,178 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "SKComponentLayoutDescriptor.h"
+
+#import <ComponentKit/CKComponent.h>
+#import <ComponentKit/CKComponentInternal.h>
+#import <ComponentKit/CKComponentActionInternal.h>
+#import <ComponentKit/CKComponentLayout.h>
+#import <ComponentKit/CKComponentRootView.h>
+#import <ComponentKit/CKComponentViewConfiguration.h>
+#import <ComponentKit/CKComponentAccessibility.h>
+#import <ComponentKit/CKComponentDebugController.h>
+#import <ComponentKit/CKInsetComponent.h>
+#import <ComponentKit/CKFlexboxComponent.h>
+
+#import <FlipperKitLayoutPlugin/SKHighlightOverlay.h>
+#import <FlipperKitLayoutPlugin/SKObject.h>
+
+#import "SKComponentLayoutWrapper.h"
+#import "CKComponent+Sonar.h"
+#import "Utils.h"
+
+@implementation SKComponentLayoutDescriptor
+{
+  NSDictionary<NSNumber *, NSString *> *CKFlexboxAlignSelfEnumMap;
+  NSDictionary<NSNumber *, NSString *> *CKFlexboxPositionTypeEnumMap;
+}
+
+- (void)setUp {
+  [super setUp];
+
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    [self initEnumMaps];
+  });
+}
+
+- (void)initEnumMaps {
+  CKFlexboxAlignSelfEnumMap = @{
+                                @(CKFlexboxAlignSelfAuto): @"auto",
+                                @(CKFlexboxAlignSelfStart): @"start",
+                                @(CKFlexboxAlignSelfEnd): @"end",
+                                @(CKFlexboxAlignSelfCenter): @"center",
+                                @(CKFlexboxAlignSelfBaseline): @"baseline",
+                                @(CKFlexboxAlignSelfStretch): @"stretch",
+                                };
+
+  CKFlexboxPositionTypeEnumMap = @{
+                                   @(CKFlexboxPositionTypeRelative): @"relative",
+                                   @(CKFlexboxPositionTypeAbsolute): @"absolute",
+                                   };
+}
+
+- (NSString *)identifierForNode:(SKComponentLayoutWrapper *)node {
+  return node.identifier;
+}
+
+- (NSString *)nameForNode:(SKComponentLayoutWrapper *)node {
+  return [node.component sonar_getName];
+}
+
+- (NSString *)decorationForNode:(SKComponentLayoutWrapper *)node {
+  return [node.component sonar_getDecoration];
+}
+
+- (NSUInteger)childCountForNode:(SKComponentLayoutWrapper *)node {
+  NSUInteger count = node.children.size();
+  if (count == 0) {
+    count = node.component.viewContext.view ? 1 : 0;
+  }
+  return count;
+}
+
+- (id)childForNode:(SKComponentLayoutWrapper *)node atIndex:(NSUInteger)index {
+    if (node.children.size() == 0) {
+      return node.component.viewContext.view;
+    }
+    return node.children[index];
+}
+
+- (NSArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *)dataForNode:(SKComponentLayoutWrapper *)node {
+  NSMutableArray<SKNamed<NSDictionary<NSString *, NSObject *> *> *> *data = [NSMutableArray new];
+
+  if (node.isFlexboxChild) {
+    [data addObject: [SKNamed newWithName:@"Layout" withValue:[self propsForFlexboxChild:node.flexboxChild]]];
+  }
+
+  [data addObjectsFromArray:[node.component sonar_getData]];
+
+  return data;
+}
+
+- (NSDictionary<NSString *, NSObject *> *)propsForFlexboxChild:(CKFlexboxComponentChild)child {
+  return @{
+           @"spacingBefore": SKObject(@(child.spacingBefore)),
+           @"spacingAfter": SKObject(@(child.spacingAfter)),
+           @"flexGrow": SKObject(@(child.flexGrow)),
+           @"flexShrink": SKObject(@(child.flexShrink)),
+           @"zIndex": SKObject(@(child.zIndex)),
+           @"useTextRounding": SKObject(@(child.useTextRounding)),
+           @"margin": flexboxRect(child.margin),
+           @"flexBasis": relativeDimension(child.flexBasis),
+           @"padding": flexboxRect(child.padding),
+           @"alignSelf": CKFlexboxAlignSelfEnumMap[@(child.alignSelf)],
+           @"position": @{
+               @"type": CKFlexboxPositionTypeEnumMap[@(child.position.type)],
+               @"start": relativeDimension(child.position.start),
+               @"top": relativeDimension(child.position.top),
+               @"end": relativeDimension(child.position.end),
+               @"bottom": relativeDimension(child.position.bottom),
+               @"left": relativeDimension(child.position.left),
+               @"right": relativeDimension(child.position.right),
+               },
+           @"aspectRatio": @(child.aspectRatio.aspectRatio()),
+           };
+}
+
+- (NSDictionary<NSString *, SKNodeUpdateData> *)dataMutationsForNode:(SKComponentLayoutWrapper *)node {
+  return [node.component sonar_getDataMutations];
+}
+
+- (NSArray<SKNamed<NSString *> *> *)attributesForNode:(SKComponentLayoutWrapper *)node {
+  return @[
+           [SKNamed newWithName: @"responder"
+                      withValue: SKObject(NSStringFromClass([node.component.nextResponder class]))]
+           ];
+}
+
+- (void)setHighlighted:(BOOL)highlighted forNode:(SKComponentLayoutWrapper *)node {
+  SKHighlightOverlay *overlay = [SKHighlightOverlay sharedInstance];
+  if (highlighted) {
+    CKComponentViewContext viewContext = node.component.viewContext;
+    [overlay mountInView: viewContext.view
+               withFrame: viewContext.frame];
+  } else {
+    [overlay unmount];
+  }
+}
+
+- (void)hitTest:(SKTouch *)touch forNode:(SKComponentLayoutWrapper *)node {
+  if (node.children.size() == 0) {
+    UIView *componentView = node.component.viewContext.view;
+    if (componentView != nil) {
+      if ([touch containedIn: componentView.bounds]) {
+        [touch continueWithChildIndex: 0 withOffset: componentView.bounds.origin];
+        return;
+      }
+    }
+  }
+
+  NSInteger index = 0;
+  for (index = node.children.size() - 1; index >= 0; index--) {
+    const auto child = node.children[index];
+
+    CGRect frame = {
+      .origin = child.position,
+      .size = child.size
+    };
+
+    if ([touch containedIn: frame]) {
+      [touch continueWithChildIndex: index withOffset: child.position];
+      return;
+    }
+  }
+
+  [touch finish];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutWrapper.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutWrapper.h
@@ -0,0 +1,29 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <Foundation/Foundation.h>
+
+#import <ComponentKit/CKComponentLayout.h>
+#import <ComponentKit/CKFlexboxComponent.h>
+
+@protocol CKInspectableView;
+
+@interface SKComponentLayoutWrapper : NSObject
+
+@property (nonatomic, weak, readonly) CKComponent *component;
+@property (nonatomic, readonly) NSString *identifier;
+@property (nonatomic, readonly) CGSize size;
+@property (nonatomic, readonly) CGPoint position;
+@property (nonatomic, readonly) std::vector<SKComponentLayoutWrapper *> children;
+
+// Null for layouts which are not direct children of a CKFlexboxComponent
+@property (nonatomic, readonly) BOOL isFlexboxChild;
+@property (nonatomic, readonly) CKFlexboxComponentChild flexboxChild;
+
+ (instancetype)newFromRoot:(id<CKInspectableView>)root;
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutWrapper.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutWrapper.mm
@@ -0,0 +1,81 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "SKComponentLayoutWrapper.h"
+
+#import <ComponentKit/CKComponent.h>
+#import <ComponentKit/CKComponentRootView.h>
+#import <ComponentKit/CKComponentDataSourceAttachController.h>
+#import <ComponentKit/CKComponentDataSourceAttachControllerInternal.h>
+#import <ComponentKit/CKInspectableView.h>
+
+static char const kLayoutWrapperKey = ' ';
+
+static CKFlexboxComponentChild findFlexboxLayoutParams(CKComponent *parent, CKComponent *child) {
+  if ([parent isKindOfClass:[CKFlexboxComponent class]]) {
+    static Ivar ivar = class_getInstanceVariable([CKFlexboxComponent class], "_children");
+    static ptrdiff_t offset = ivar_getOffset(ivar);
+
+    unsigned char *pComponent = (unsigned char*)(__bridge void*)parent;
+    auto children = (std::vector<CKFlexboxComponentChild> *)(pComponent + offset);
+
+    if (children) {
+      for (auto it = children->begin(); it != children->end(); it++) {
+        if (it->component == child) {
+          return *it;
+        }
+      }
+    }
+  }
+
+  return {};
+}
+
+@implementation SKComponentLayoutWrapper
+
+ (instancetype)newFromRoot:(id<CKInspectableView>)root {
+  const CKComponentLayout layout = [root mountedLayout];
+  SKComponentLayoutWrapper *const wrapper =
+  [[SKComponentLayoutWrapper alloc] initWithLayout:layout
+                                          position:CGPointMake(0, 0)
+                                         parentKey:[NSString stringWithFormat: @"%p.", layout.component]];
+  if (layout.component)
+    objc_setAssociatedObject(layout.component, &kLayoutWrapperKey, wrapper, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+  return wrapper;
+}
+
+- (instancetype)initWithLayout:(const CKComponentLayout &)layout position:(CGPoint)position parentKey:(NSString *)parentKey {
+  if (self = [super init]) {
+    _component = layout.component;
+    _size = layout.size;
+    _position = position;
+    _identifier = [parentKey stringByAppendingString:layout.component ? NSStringFromClass([layout.component class]) : @"(null)"];
+
+    if (layout.children != nullptr) {
+      int index = 0;
+      for (const auto &child : *layout.children) {
+        if (child.layout.component == nil) {
+          continue; // nil children are allowed, ignore them
+        }
+        SKComponentLayoutWrapper *childWrapper = [[SKComponentLayoutWrapper alloc] initWithLayout:child.layout
+                                                                                         position:child.position
+                                                                                        parentKey:[_identifier stringByAppendingFormat:@"[%d].", index++]];
+        childWrapper->_isFlexboxChild = [_component isKindOfClass:[CKFlexboxComponent class]];
+        childWrapper->_flexboxChild = findFlexboxLayoutParams(_component, child.layout.component);
+        _children.push_back(childWrapper);
+      }
+    }
+  }
+
+  return self;
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentRootViewDescriptor.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentRootViewDescriptor.h
@@ -0,0 +1,14 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <FlipperKitLayoutPlugin/SKNodeDescriptor.h>
+
+@class CKComponentRootView;
+
+@interface SKComponentRootViewDescriptor : SKNodeDescriptor<CKComponentRootView *>
+
+@end
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentRootViewDescriptor.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentRootViewDescriptor.mm
@@ -0,0 +1,52 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#import "SKComponentRootViewDescriptor.h"
+
+#import <ComponentKit/CKComponentDataSourceAttachController.h>
+#import <ComponentKit/CKComponentDataSourceAttachControllerInternal.h>
+#import <ComponentKit/CKComponentHostingView.h>
+#import <ComponentKit/CKComponentHostingViewInternal.h>
+#import <ComponentKit/CKComponentLayout.h>
+#import <ComponentKit/CKComponentRootViewInternal.h>
+
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+
+#import "SKComponentLayoutWrapper.h"
+
+@implementation SKComponentRootViewDescriptor
+
+- (NSString *)identifierForNode:(CKComponentRootView *)node {
+  return [NSString stringWithFormat: @"%p", node];
+}
+
+- (NSUInteger)childCountForNode:(CKComponentRootView *)node {
+  if ([node respondsToSelector:@selector(ck_attachState)]) {
+    CKComponentDataSourceAttachState *state = [node ck_attachState];
+    return state == nil ? 0 : 1;
+  }
+  return 0;
+}
+
+- (id)childForNode:(CKComponentRootView *)node atIndex:(NSUInteger)index {
+  return [SKComponentLayoutWrapper newFromRoot:node];
+}
+
+- (void)setHighlighted:(BOOL)highlighted forNode:(CKComponentRootView *)node {
+  SKNodeDescriptor *viewDescriptor = [self descriptorForClass: [UIView class]];
+  [viewDescriptor setHighlighted: highlighted forNode: node];
+}
+
+- (void)hitTest:(SKTouch *)touch forNode:(CKComponentRootView *)node {
+  [touch continueWithChildIndex: 0 withOffset: (CGPoint){ 0, 0 }];
+}
+
+@end
+
+#endif
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.h
@@ -0,0 +1,12 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#import <ComponentKit/CKComponent.h>
+#import <ComponentKit/CKFlexboxComponent.h>
+
+NSString *relativeDimension(CKRelativeDimension dimension);
+NSDictionary<NSString *, NSString *> *flexboxRect(CKFlexboxSpacing spacing);
--- a/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm
+++ b/iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/Utils.mm
@@ -0,0 +1,32 @@
+/*
+ *  Copyright (c) 2018-present, Facebook, Inc.
+ *
+ *  This source code is licensed under the MIT license found in the LICENSE
+ *  file in the root directory of this source tree.
+ *
+ */
+#if FB_SONARKIT_ENABLED
+
+#include "Utils.h"
+
+NSString *relativeDimension(CKRelativeDimension dimension) {
+  switch(dimension.type()) {
+    case CKRelativeDimension::Type::PERCENT:
+      return [NSString stringWithFormat: @"%@%%", @(dimension.value())];
+    case CKRelativeDimension::Type::POINTS:
+      return [NSString stringWithFormat: @"%@pt", @(dimension.value())];
+    default:
+      return @"auto";
+  }
+}
+
+NSDictionary<NSString *, NSString *> *flexboxRect(CKFlexboxSpacing spacing) {
+  return @{
+    @"top": relativeDimension(spacing.top.dimension()),
+    @"bottom": relativeDimension(spacing.bottom.dimension()),
+    @"start": relativeDimension(spacing.start.dimension()),
+    @"end": relativeDimension(spacing.end.dimension())
+  };
+}
+
+#endif