clintplay-react-native 0.1.0 → 0.2.1

package/ios/ClintplayRN.mm

@@ -11,6 +11,11 @@
 #import <React/RCTBridgeModule.h>
 #import <UIKit/UIKit.h>
 
+@interface UIView (ClintplayNativeID)
+- (NSString *)nativeID;
+- (NSString *)nativeId;
+@end
+
 static UIWindow *FindKeyWindow(void) {
   if (@available(iOS 13.0, *)) {
     for (UIScene *scene in [UIApplication sharedApplication].connectedScenes) {
@@ -121,6 +126,73 @@ static NSString *HexColorStringFromUIColor(UIColor *color) {
   return nil;
 }
 
+// The React Native <Text> is not a UILabel: it is RCTParagraphComponentView on the New
+// Architecture and RCTTextView on the legacy one. Both keep the rendered string with its
+// attributes; reading it here gives the replay the visible text plus size, weight, colour
+// and alignment (accessibilityLabel carries only the string, and an app-provided label
+// replaces it).
+static NSAttributedString *ReactNativeAttributedText(UIView *view) {
+  NSString *className = NSStringFromClass([view class]);
+  id value = nil;
+  @try {
+    if ([className isEqualToString:@"RCTParagraphComponentView"] &&
+        [view respondsToSelector:@selector(attributedText)]) {
+      value = [(id)view attributedText];
+    } else if ([className isEqualToString:@"RCTTextView"]) {
+      // Legacy architecture: no public getter, the storage lives in the `_textStorage` ivar.
+      value = [view valueForKey:@"textStorage"];
+    }
+  } @catch (NSException *e) {
+    value = nil;
+  }
+  return [value isKindOfClass:[NSAttributedString class]] ? (NSAttributedString *)value : nil;
+}
+
+// CSS-style weight (100-900) from the font's UIFontWeightTrait (-1.0 to 1.0).
+static NSInteger CSSFontWeight(UIFont *font) {
+  NSDictionary *traits = [font.fontDescriptor objectForKey:UIFontDescriptorTraitsAttribute];
+  NSNumber *weight = [traits isKindOfClass:[NSDictionary class]] ? traits[UIFontWeightTrait] : nil;
+  if (![weight isKindOfClass:[NSNumber class]]) {
+    return (font.fontDescriptor.symbolicTraits & UIFontDescriptorTraitBold) ? 700 : 400;
+  }
+  CGFloat w = weight.doubleValue;
+  if (w <= UIFontWeightLight) return 300;
+  if (w < UIFontWeightMedium) return 400;
+  if (w < UIFontWeightSemibold) return 500;
+  if (w < UIFontWeightBold) return 600;
+  return 700;
+}
+
+static void PutTextStyle(NSMutableDictionary *nodeDict, UIFont *font, UIColor *color, NSTextAlignment alignment) {
+  @try {
+    if ([font isKindOfClass:[UIFont class]] && font.pointSize > 0) {
+      nodeDict[@"fontSize"] = @(round(font.pointSize * 10.0) / 10.0);
+      nodeDict[@"fontWeight"] = @(CSSFontWeight(font));
+    }
+    NSString *hex = [color isKindOfClass:[UIColor class]] ? HexColorStringFromUIColor(color) : nil;
+    if (hex) {
+      nodeDict[@"color"] = hex;
+    }
+    if (alignment == NSTextAlignmentCenter) {
+      nodeDict[@"textAlign"] = @"center";
+    } else if (alignment == NSTextAlignmentRight) {
+      nodeDict[@"textAlign"] = @"right";
+    } else {
+      nodeDict[@"textAlign"] = @"left";
+    }
+  } @catch (NSException *e) {
+    // Style is best effort: the text alone still makes the replay readable.
+  }
+}
+
+static void PutAttributedTextStyle(NSMutableDictionary *nodeDict, NSAttributedString *text) {
+  if (text.length == 0) return;
+  NSDictionary *attrs = [text attributesAtIndex:0 effectiveRange:NULL];
+  NSParagraphStyle *paragraph = attrs[NSParagraphStyleAttributeName];
+  NSTextAlignment alignment = [paragraph isKindOfClass:[NSParagraphStyle class]] ? paragraph.alignment : NSTextAlignmentNatural;
+  PutTextStyle(nodeDict, attrs[NSFontAttributeName], attrs[NSForegroundColorAttributeName], alignment);
+}
+
 static NSDictionary *SerializeView(UIView *view, NSInteger *nodeCounter, NSInteger depth) {
   if (depth > 64) {
     return nil;
@@ -218,21 +290,42 @@ static NSDictionary *SerializeView(UIView *view, NSInteger *nodeCounter, NSInteg
   if (identifier.length > 0) {
     nodeDict[@"accessibilityIdentifier"] = identifier;
   }
-  if (view.accessibilityLabel.length > 0) {
-    nodeDict[@"accessibilityLabel"] = isMasked ? @"***" : view.accessibilityLabel;
+  // Reuse the label read above: on RCTParagraphComponentView every read rebuilds the
+  // string from the shadow tree state.
+  if (accLabel.length > 0) {
+    nodeDict[@"accessibilityLabel"] = isMasked ? @"***" : accLabel;
   }
 
-  // Text extraction from UILabel, UITextField, UITextView, UIButton
+  // Text extraction from the React Native <Text>, UILabel, UITextField, UITextView, UIButton.
+  // Style is read later, only for unmasked nodes with text: reading a UIButton's titleLabel
+  // creates one on image-only buttons, and a passive recorder must not change the host UI.
   NSString *extractedText = nil;
-  if ([view isKindOfClass:[UILabel class]]) {
+  void (^putStyle)(void) = nil;
+  NSAttributedString *reactNativeText = ReactNativeAttributedText(view);
+  if (reactNativeText) {
+    // Copy: on the legacy architecture this is the live backing store of the NSTextStorage.
+    extractedText = [reactNativeText.string copy];
+    putStyle = ^{
+      PutAttributedTextStyle(nodeDict, reactNativeText);
+    };
+  } else if ([view isKindOfClass:[UILabel class]]) {
     UILabel *label = (UILabel *)view;
     extractedText = label.text ?: (label.attributedText ? label.attributedText.string : nil);
+    putStyle = ^{
+      PutTextStyle(nodeDict, label.font, label.textColor, label.textAlignment);
+    };
   } else if ([view isKindOfClass:[UITextField class]]) {
     UITextField *textField = (UITextField *)view;
     extractedText = textField.text ?: (textField.attributedText ? textField.attributedText.string : nil);
+    putStyle = ^{
+      PutTextStyle(nodeDict, textField.font, textField.textColor, textField.textAlignment);
+    };
   } else if ([view isKindOfClass:[UITextView class]]) {
     UITextView *textView = (UITextView *)view;
     extractedText = textView.text ?: (textView.attributedText ? textView.attributedText.string : nil);
+    putStyle = ^{
+      PutTextStyle(nodeDict, textView.font, textView.textColor, textView.textAlignment);
+    };
   } else if ([view isKindOfClass:[UIButton class]]) {
     UIButton *button = (UIButton *)view;
     if (@available(iOS 15.0, *)) {
@@ -243,10 +336,21 @@ static NSDictionary *SerializeView(UIView *view, NSInteger *nodeCounter, NSInteg
     if (!extractedText) {
       extractedText = [button titleForState:UIControlStateNormal] ?: (button.currentTitle ?: (button.currentAttributedTitle ? button.currentAttributedTitle.string : nil));
     }
+    putStyle = ^{
+      PutTextStyle(nodeDict, button.titleLabel.font, button.currentTitleColor, NSTextAlignmentCenter);
+    };
   }
 
   if (extractedText) {
     nodeDict[@"text"] = isMasked ? @"***" : extractedText;
+    if (!isMasked && extractedText.length > 0 && putStyle) {
+      putStyle();
+    }
+    // The text view's accessibilityLabel defaults to its own string: sending both doubles
+    // the payload of every <Text> for nothing.
+    if (!isMasked && [nodeDict[@"accessibilityLabel"] isEqual:extractedText]) {
+      [nodeDict removeObjectForKey:@"accessibilityLabel"];
+    }
   }
 
   if (isMasked) {
@@ -278,7 +382,7 @@ static NSDictionary *SerializeView(UIView *view, NSInteger *nodeCounter, NSInteg
 RCT_EXPORT_MODULE(ClintplayRN)
 
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getVersion) {
-  return @"0.1.0";
+  return @"0.2.1";
 }
 
 - (NSDictionary *)extractHierarchyDictionaryOnMainThread {
@@ -314,7 +418,9 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getVersion) {
       return @"{\"version\":1,\"nodes\":[]}";
     }
     NSError *error = nil;
-    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:payload options:0 error:&error];
+    // Sorted keys keep an unchanged screen byte-identical between captures, which is what
+    // lets the JS recorder skip re-sending it.
+    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:payload options:NSJSONWritingSortedKeys error:&error];
     if (error || !jsonData) {
       return @"{\"version\":1,\"nodes\":[]}";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clintplay-react-native",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Clintplay React Native SDK — session capture for iOS and Android apps. Companion to clintplay-sdk (web).",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",