Layout Plugin support for swift (#295)

Summary:
Changed the podspec file to expose only those header files in public which are necessary. The exposed public header files have no c++ in it, thus due to this layout plugin now works for swift too.

Fixes #174

![ezgif com-video-to-gif](https://user-images.githubusercontent.com/3865908/46979109-9c5a4b80-d0c8-11e8-8f86-639dfba51efe.gif)
Pull Request resolved: https://github.com/facebook/flipper/pull/295

Reviewed By: passy

Differential Revision: D10389202

Pulled By: priteshrnandgaonkar

fbshipit-source-id: 0ecc428f8008dd3aac48a675a8b97bb610f8e9eb

docs/getting-started.md

@@ -146,7 +146,6 @@ and install the dependencies by running `pod install`. When you open the Xcode w
 - We haven't released the dependency to CocoaPods yet, here is the [issue](https://github.com/facebook/flipper/issues/132) by which you can track.
 - If you do not use CocoaPods as a dependency management tool then currently there is no way to integrate FlipperKit other than manually including all the dependencies and building it.
 - For Android, Flipper works with both emulators and physical devices connected through USB. However on iOS, we don't yet support physical devices.
-- The Flipper layout plugin isn't supported in Swift projects since they include C++ dependencies. We're working on supporting it for Swift apps. You can join the discussion on the [issues page](https://github.com/facebook/flipper/issues).
 
 </div>
 

docs/layout-plugin.md

@@ -63,6 +63,8 @@ dependencies {
 
 ### iOS
 
+In Objective-C you can add it as follows:
+
 ```objective-c
 #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
 #import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
@@ -71,6 +73,18 @@ SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
 [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]
 ```
 
+Whereas in swift you can add it as follows:
+
+```swift
+import FlipperKit
+
+let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
+// If you want to debug componentkit view in swift, otherwise you can ignore the next line
+FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
+
+client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
+```
+
 ## Quick edits
 
 The Layout Inspector not only allows you to view the hierarchy and inspect each item's properties, but it also allows you to edit things such as layout attributes, background colors, props, and state. Most things actually. This allows you to quickly tweak paddings, margins, and colors until you are happy with them, all without re-compiling. This can save you many hours implementing a new design.

iOS/FlipperKit.podspec

@@ -64,6 +64,11 @@ Pod::Spec.new do |spec|
                              'iOS/Plugins/FlipperKitNetworkPlugin/FlipperKitNetworkPlugin/SKResponseInfo.h',
                              'iOS/Plugins/FlipperKitNetworkPlugin/FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h',
                              'iOS/Plugins/FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h',
+                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h',
+                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKTapListener.h',
+                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKInvalidation.h',
+                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKDescriptorMapper.h',
+                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h',
                              'iOS/FBDefines/FBMacros.h',
                              'iOS/FlipperKit/**/{FlipperStateUpdateListener,FlipperClient,FlipperPlugin,FlipperConnection,FlipperResponder,SKMacros}.h'
     header_search_paths = "\"$(PODS_ROOT)/FlipperKit/iOS/FlipperKit\" \"$(PODS_ROOT)\"/Headers/Private/FlipperKit/** \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/PeerTalkSonar\""
@@ -79,12 +84,12 @@ Pod::Spec.new do |spec|
     ss.dependency             'YogaKit', yogakit_version
     ss.compiler_flags       = folly_compiler_flags
     ss.public_header_files  = 'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h',
-                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKTouch.h',
-                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKDescriptorMapper.h',
-                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKNodeDescriptor.h',
-                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKInvalidation.h',
-                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKNamed.h',
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKTapListener.h',
+                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKInvalidation.h',
+                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKDescriptorMapper.h'
+    ss.private_header_files = 'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKTouch.h',
+                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKNodeDescriptor.h',
+                              'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKNamed.h',
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKObject.h',
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/SKHighlightOverlay.h',
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/UIColor+SKSonarValueCoder.h',
@@ -92,6 +97,7 @@ Pod::Spec.new do |spec|
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/utils/SKSwizzle.h',
                               'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/utils/SKYogaKitHelper.h'
     ss.source_files         = 'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/**/*.{h,cpp,m,mm}'
+    ss.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)\"/Headers/Private/FlipperKit/**" }
   end
 
   spec.subspec "FlipperKitLayoutComponentKitSupport" do |ss|
@@ -102,12 +108,9 @@ Pod::Spec.new do |spec|
     ss.dependency             'FlipperKit/FlipperKitLayoutPlugin'
     ss.compiler_flags       = folly_compiler_flags
     ss.dependency             'FlipperKit/FlipperKitLayoutPlugin'
-    ss.public_header_files = 'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h',
+    ss.public_header_files = 'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h'
-                             'iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/SKComponentLayoutWrapper.h'
-
     ss.source_files         = "iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutComponentKitSupport/**/*.{h,cpp,m,mm}"
-    ss.pod_target_xcconfig = { "USE_HEADERMAP" => "NO",
+    ss.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)\"/Headers/Private/FlipperKit/**" }
-                                "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)\"/Headers/Private/FlipperKit/**" }
   end
 
   spec.subspec "FlipperKitNetworkPlugin" do |ss|

iOS/SampleSwift/Podfile

@@ -10,7 +10,7 @@ target 'SampleSwift' do
   pod 'FlipperKit/SKIOSNetworkPlugin', :path => '../../FlipperKit.podspec'
   pod 'FlipperKit/FlipperKitUserDefaultsPlugin', :path => '../../FlipperKit.podspec'
   # Layout and network plugins are not yet supported for swift projects
-  #pod 'SonarKit/FlipperKitLayoutComponentKitSupport', :path => '../../SonarKit.podspec'
+  pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', :path => '../../FlipperKit.podspec'
 
   post_install do |installer|
         installer.pods_project.targets.each do |target|

iOS/SampleSwift/Podfile.lock

@@ -2,29 +2,40 @@ PODS:
   - boost-for-react-native (1.63.0)
   - CocoaAsyncSocket (7.6.3)
   - CocoaLibEvent (1.0.0)
+  - ComponentKit (0.24):
+    - Yoga (~> 1.6)
   - DoubleConversion (1.1.5)
-  - Flipper (0.8.1):
+  - Flipper (0.9.0):
     - Folly (~> 1.1)
     - RSocket (~> 0.10)
-  - FlipperKit (0.8.1):
+  - FlipperKit (0.9.0):
-    - FlipperKit/Core (= 0.8.1)
+    - FlipperKit/Core (= 0.9.0)
-  - FlipperKit/Core (0.8.1):
+  - FlipperKit/Core (0.9.0):
     - CocoaAsyncSocket (~> 7.6)
-    - Flipper (~> 0.8.1)
+    - Flipper (~> 0.9.0)
     - FlipperKit/CppBridge
     - FlipperKit/FBCxxUtils
     - FlipperKit/FBDefines
     - Folly (~> 1.1)
     - OpenSSL-Static (= 1.0.2.c1)
     - PeerTalk (~> 0.0.2)
-  - FlipperKit/CppBridge (0.8.1)
+  - FlipperKit/CppBridge (0.9.0)
-  - FlipperKit/FBCxxUtils (0.8.1)
+  - FlipperKit/FBCxxUtils (0.9.0)
-  - FlipperKit/FBDefines (0.8.1)
+  - FlipperKit/FBDefines (0.9.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.8.1):
+  - FlipperKit/FlipperKitLayoutComponentKitSupport (0.9.0):
+    - ComponentKit
     - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.8.1):
+    - FlipperKit/FlipperKitLayoutPlugin
+    - Yoga (~> 1.9)
+  - FlipperKit/FlipperKitLayoutPlugin (0.9.0):
     - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.8.1):
+    - Yoga (~> 1.9)
+    - YogaKit (~> 1.8)
+  - FlipperKit/FlipperKitNetworkPlugin (0.9.0):
+    - FlipperKit/Core
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.9.0):
+    - FlipperKit/Core
+  - FlipperKit/SKIOSNetworkPlugin (0.9.0):
     - FlipperKit/Core
     - FlipperKit/FlipperKitNetworkPlugin
   - Folly (1.1.0):
@@ -38,10 +49,14 @@ PODS:
   - PeerTalk (0.0.2)
   - RSocket (0.10.0):
     - Folly
+  - Yoga (1.9.0)
+  - YogaKit (1.9.0):
+    - Yoga (~> 1.9)
 
 DEPENDENCIES:
   - Flipper (from `../../Flipper.podspec`)
   - FlipperKit (from `../../FlipperKit.podspec`)
+  - FlipperKit/FlipperKitLayoutComponentKitSupport (from `../../FlipperKit.podspec`)
   - FlipperKit/FlipperKitUserDefaultsPlugin (from `../../FlipperKit.podspec`)
   - FlipperKit/SKIOSNetworkPlugin (from `../../FlipperKit.podspec`)
 
@@ -50,10 +65,13 @@ SPEC REPOS:
     - boost-for-react-native
     - CocoaAsyncSocket
     - CocoaLibEvent
+    - ComponentKit
     - DoubleConversion
     - glog
     - OpenSSL-Static
-  https://github.com/facebook/Sonar:
+    - Yoga
+    - YogaKit
+  https://github.com/facebook/Sonar.git:
     - Folly
     - PeerTalk
     - RSocket
@@ -68,15 +86,18 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: eafaa68a7e0ec99ead0a7b35015e0bf25d2c8987
   CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
+  ComponentKit: d6efb627aa2b4592cbe029d1e9e604226d39b5d9
   DoubleConversion: e22e0762848812a87afd67ffda3998d9ef29170c
-  Flipper: 847a9ba40de727f6bb02a1b365674538f051ecf2
+  Flipper: f911af1131a04bb1e46e2f4eef5e497150e35431
-  FlipperKit: 93c4d1c38f10ef2900f646ddb65c29bdf4975cfd
+  FlipperKit: 427b587c2442bc0be7e9aa7354a2139637ca8696
   Folly: dd92f69322d8535b9df98d7c91e442b0fce2fff2
   glog: 1de0bb937dccdc981596d3b5825ebfb765017ded
   OpenSSL-Static: bd17e34564a8591ad76b740318683a6caa19a13e
   PeerTalk: 77481b0a8136f226b90ccf828d6061f70139ffde
   RSocket: 4fdb7e562db30a2d4fceddefdc601749ffc9ebe2
+  Yoga: aaae8abea68951f60bee05f6277d3eed90bb91bb
+  YogaKit: d447a9bb808718e6f58e52a2255a8050081a3ead
 
-PODFILE CHECKSUM: 3eeb7fcb7e93b388b33cfa6730390259dd6292f7
+PODFILE CHECKSUM: da7617cff68c2e61650a9bdd0ca5a588030fd325
 
 COCOAPODS: 1.5.3

iOS/SampleSwift/SampleSwift/AppDelegate.swift

@@ -13,10 +13,10 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     window = UIWindow()
 
     let client = FlipperClient.shared()
-    // Layout and network plugins are currently not supported for Swift apps.
+    let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
-//    let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
+    // If you want to debug componentkit view in swift, otherwise you can ignore the next line
-//    FlipperKitLayoutComponentKitSupport.setUp(descriptorMapper: layoutDescriptorMapper)
+    FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
-//    client.addPlugin(FlipperKitLayoutPlugin(rootNode: application, descriptorMapper: layoutDescriptorMapper))
+    client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
 
     client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
     client?.add(FKUserDefaultsPlugin.init(suiteName: nil))