@multiplayer-app/session-recorder-react-native 0.0.1-beta.10 → 0.0.1-beta.12

package/copy-react-native-dist.sh

@@ -27,6 +27,9 @@ fi
 echo "🔄 Copying dist folder..."
 cp -r "$SOURCE_DIR" "$TARGET_DIR/"
 
+# Copy the package.json file
+cp "$SOURCE_DIR/package.json" "$TARGET_DIR/"
+
 echo "✅ Successfully copied dist folder to sample Expo app!"
 echo "📍 Source: $SOURCE_DIR"
 echo "📍 Target: $TARGET_DIR/dist"

package/docs/AUTO_METADATA_DETECTION.md

@@ -0,0 +1,108 @@
+# Automatic App Metadata Detection
+
+The session recorder automatically detects app metadata from your project configuration files **without requiring any developer intervention**.
+
+## How It Works
+
+The library automatically extracts app information from common configuration files in this priority order:
+
+1. **`app.json`** - Expo/React Native app configuration
+2. **`app.config.js`** - Dynamic Expo configuration
+3. **`package.json`** - Node.js package configuration (fallback)
+
+## Supported Configuration Files
+
+### app.json
+
+```json
+{
+  "name": "My Awesome App",
+  "version": "1.2.3",
+  "displayName": "My App",
+  "ios": {
+    "bundleIdentifier": "com.mycompany.myapp",
+    "buildNumber": "123"
+  },
+  "android": {
+    "package": "com.mycompany.myapp",
+    "versionCode": 123
+  }
+}
+```
+
+### app.config.js
+
+```javascript
+export default {
+  name: 'My Awesome App',
+  version: '1.2.3',
+  displayName: 'My App',
+  ios: {
+    bundleIdentifier: 'com.mycompany.myapp',
+    buildNumber: '123'
+  },
+  android: {
+    package: 'com.mycompany.myapp',
+    versionCode: 123
+  }
+}
+```
+
+### package.json (fallback)
+
+```json
+{
+  "name": "my-awesome-app",
+  "version": "1.2.3"
+}
+```
+
+## Detected Metadata
+
+The following information is automatically extracted:
+
+- **App Name** - From `name` or `displayName`
+- **App Version** - From `version`
+- **Bundle ID** - From `ios.bundleIdentifier` or `android.package`
+- **Build Number** - From `ios.buildNumber` or `android.versionCode`
+
+## Build Process
+
+The metadata detection happens automatically during the build process:
+
+1. The build script scans your project root for configuration files
+2. Extracts relevant metadata from the first found configuration
+3. Generates a TypeScript file with the detected metadata
+4. The session recorder uses this metadata in all recordings
+
+## No Developer Action Required
+
+✅ **Zero configuration** - Works out of the box
+✅ **Automatic detection** - Scans common config files
+✅ **Build-time generation** - No runtime file reading
+✅ **Fallback support** - Graceful degradation
+
+## Manual Override (Optional)
+
+If you need to override the auto-detected metadata, you can still use the manual configuration:
+
+```typescript
+import { configureAppMetadata } from '@multiplayer-app/session-recorder-react-native'
+
+configureAppMetadata({
+  name: 'Custom App Name',
+  version: '2.0.0',
+  bundleId: 'com.custom.app'
+})
+```
+
+## Priority Order
+
+The metadata detection follows this priority:
+
+1. **Expo Config** (if using Expo)
+2. **Manual Configuration** (if `configureAppMetadata` was called)
+3. **Auto-detected Metadata** (from config files)
+4. **Fallback Values** (defaults)
+
+This ensures maximum compatibility across different React Native setups while providing rich metadata for debugging sessions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.10",
+  "version": "0.0.1-beta.12",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -20,8 +20,7 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.js"
-    },
-    "./app.plugin.js": "./app.plugin.js"
+    }
   },
   "engines": {
     "node": ">=18",
@@ -41,7 +40,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "prepublishOnly": "npm run build",
-    "build": "tsc && babel ./dist --out-dir dist --extensions '.js' && ./copy-react-native-dist.sh",
+    "build": "tsc && babel ./dist --out-dir dist --extensions '.js'",
     "generate-metadata": "node scripts/generate-app-metadata.js"
   },
   "devDependencies": {
@@ -82,13 +81,27 @@
     "socket.io-client": "4.7.5"
   },
   "peerDependencies": {
-    "@opentelemetry/api": "^1.9.0",
-    "react": ">=18.0.0 <20.0.0",
-    "react-native": ">=0.72.0 <0.82.0",
-    "react-native-svg": "^15.13.0"
+    "@opentelemetry/api": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "peerDependenciesMeta": {
+    "@opentelemetry/api": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
   },
   "optionalDependencies": {
-    "expo-constants": "^15.0.0"
+    "expo-constants": "*"
   },
   "react-native": {
     "ios": {
@@ -108,4 +121,4 @@
       "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
     }
   }
-}
+}

package/app.plugin.js

@@ -1,42 +0,0 @@
-const { withDangerousMod } = require('@expo/config-plugins')
-const fs = require('fs')
-const path = require('path')
-
-const withSessionRecorder = (config) => {
-  return withDangerousMod(config, [
-    'ios',
-    async (config) => {
-      const projectRoot = config.modRequest.projectRoot
-      const platformRoot = config.modRequest.platformProjectRoot
-
-      // Ensure the Podfile includes our native module
-      const podfilePath = path.join(platformRoot, 'Podfile')
-
-      if (fs.existsSync(podfilePath)) {
-        let podfileContent = fs.readFileSync(podfilePath, 'utf8')
-
-        // Check if our pod is already included
-        if (!podfileContent.includes('SessionRecorderNative')) {
-          // Add our pod to the Podfile
-          const podEntry = `  pod 'SessionRecorderNative', :path => '../node_modules/@multiplayer-app/session-recorder-react-native/ios'\n`
-
-          // Find the target section and add our pod
-          const targetRegex = /(target ['"][^'"]+['"] do)/
-          if (targetRegex.test(podfileContent)) {
-            podfileContent = podfileContent.replace(targetRegex, `$1\n${podEntry}`)
-          } else {
-            // If no target found, add at the end before the end statement
-            podfileContent = podfileContent.replace(/(end\s*$)/, `${podEntry}$1`)
-          }
-
-          fs.writeFileSync(podfilePath, podfileContent)
-          console.log('✅ Added SessionRecorderNative to Podfile')
-        }
-      }
-
-      return config
-    }
-  ])
-}
-
-module.exports = withSessionRecorder

package/docs/NATIVE_MODULE_SETUP.md

@@ -1,177 +0,0 @@
-# Native Module Setup Guide
-
-This guide explains how to properly set up the Session Recorder React Native library with native modules in both React Native and Expo projects.
-
-## Issues Fixed
-
-### 1. Missing iOS Native Files in NPM Package
-
-**Problem**: The iOS native implementation files (`SessionRecorderNative.m` and `SessionRecorderNative.swift`) were not being included in the published npm package.
-
-**Solution**: Updated `.npmignore` to exclude source files but include the compiled native modules.
-
-### 2. Auto-linking Configuration
-
-**Problem**: The library wasn't properly configured for auto-linking in Expo projects.
-
-**Solution**:
-
-- Added `expo` configuration section to `package.json`
-- Created an Expo plugin for automatic Podfile configuration
-- Updated podspec with proper Expo compatibility settings
-
-### 3. Podspec Configuration
-
-**Problem**: The podspec wasn't optimized for Expo compatibility.
-
-**Solution**: Added proper header search paths and Expo-specific configurations.
-
-## Setup Instructions
-
-### For Expo Projects
-
-1. **Install the package**:
-
-   ```bash
-   npm install @multiplayer-app/session-recorder-react-native
-   ```
-
-2. **Add to app.json/app.config.js**:
-
-   ```json
-   {
-     "expo": {
-       "plugins": ["@multiplayer-app/session-recorder-react-native"]
-     }
-   }
-   ```
-
-   The plugin will automatically be detected via the `app.plugin.js` file in the package root.
-
-3. **Run prebuild** (if using development build):
-
-   ```bash
-   npx expo prebuild --clean
-   ```
-
-4. **Install iOS dependencies**:
-   ```bash
-   cd ios && pod install && cd ..
-   ```
-
-### For React Native CLI Projects
-
-1. **Install the package**:
-
-   ```bash
-   npm install @multiplayer-app/session-recorder-react-native
-   ```
-
-2. **iOS Setup**:
-
-   ```bash
-   cd ios && pod install && cd ..
-   ```
-
-3. **Android Setup**: No additional steps required (auto-linking handles it)
-
-## Troubleshooting
-
-### "Pod SessionRecorderNative files are missing"
-
-This error occurs when the iOS native files aren't properly included in the package or auto-linking fails.
-
-**Solutions**:
-
-1. **Check package installation**:
-
-   ```bash
-   ls node_modules/@multiplayer-app/session-recorder-react-native/ios/
-   ```
-
-   Should show: `SessionRecorderNative.m`, `SessionRecorderNative.podspec`, `SessionRecorderNative.swift`
-
-2. **Clear and reinstall**:
-
-   ```bash
-   rm -rf node_modules
-   npm install
-   cd ios && pod install --repo-update && cd ..
-   ```
-
-3. **For Expo projects, ensure plugin is configured**:
-   ```json
-   {
-     "expo": {
-       "plugins": ["@multiplayer-app/session-recorder-react-native"]
-     }
-   }
-   ```
-
-### Auto-linking Issues
-
-If auto-linking doesn't work:
-
-1. **Check react-native.config.js** (should be automatically created):
-
-   ```javascript
-   module.exports = {
-     dependencies: {
-       '@multiplayer-app/session-recorder-react-native': {
-         platforms: {
-           android: {
-             sourceDir: '../android',
-             packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
-           },
-           ios: {
-             podspecPath: '../ios/SessionRecorderNative.podspec'
-           }
-         }
-       }
-     }
-   }
-   ```
-
-2. **Manual linking** (if auto-linking fails):
-   - iOS: Add to Podfile manually
-   - Android: Add to MainApplication.java manually
-
-## File Structure
-
-The package includes these native files:
-
-```
-ios/
-├── SessionRecorderNative.m          # Objective-C bridge
-├── SessionRecorderNative.podspec    # CocoaPods specification
-└── SessionRecorderNative.swift      # Swift implementation
-
-android/
-├── build.gradle                     # Android build configuration
-└── src/main/java/com/multiplayer/sessionrecorder/
-    ├── SessionRecorderModule.kt      # Main Android module
-    ├── SessionRecorderPackage.kt    # Package registration
-    ├── ScreenMaskingModule.kt        # Screen masking module
-    └── ScreenMaskingPackage.kt      # Screen masking package
-```
-
-## Verification
-
-To verify the setup is working:
-
-1. **Check iOS**:
-
-   ```bash
-   cd ios && pod list | grep SessionRecorderNative
-   ```
-
-2. **Check Android**: Look for the package in `android/app/src/main/java/`
-
-3. **Test in code**:
-
-   ```javascript
-   import { SessionRecorderNative } from '@multiplayer-app/session-recorder-react-native'
-
-   // This should not throw an error
-   console.log('Native module loaded:', SessionRecorderNative)
-   ```

package/plugin/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@multiplayer-app/session-recorder-react-native-plugin",
-  "version": "0.0.1-beta.10",
-  "description": "Expo plugin for Session Recorder React Native",
-  "main": "src/index.js",
-  "keywords": [
-    "expo",
-    "plugin",
-    "session-recorder",
-    "react-native"
-  ],
-  "author": "Multiplayer Software, Inc.",
-  "license": "MIT",
-  "dependencies": {
-    "@expo/config-plugins": "^7.0.0"
-  },
-  "peerDependencies": {
-    "expo": ">=49.0.0"
-  }
-}

package/plugin/src/index.js

@@ -1,42 +0,0 @@
-const { withDangerousMod } = require('@expo/config-plugins')
-const fs = require('fs')
-const path = require('path')
-
-const withSessionRecorder = (config) => {
-  return withDangerousMod(config, [
-    'ios',
-    async (config) => {
-      const projectRoot = config.modRequest.projectRoot
-      const platformRoot = config.modRequest.platformProjectRoot
-
-      // Ensure the Podfile includes our native module
-      const podfilePath = path.join(platformRoot, 'Podfile')
-
-      if (fs.existsSync(podfilePath)) {
-        let podfileContent = fs.readFileSync(podfilePath, 'utf8')
-
-        // Check if our pod is already included
-        if (!podfileContent.includes('SessionRecorderNative')) {
-          // Add our pod to the Podfile
-          const podEntry = `  pod 'SessionRecorderNative', :path => '../node_modules/@multiplayer-app/session-recorder-react-native/ios'\n`
-
-          // Find the target section and add our pod
-          const targetRegex = /(target ['"][^'"]+['"] do)/
-          if (targetRegex.test(podfileContent)) {
-            podfileContent = podfileContent.replace(targetRegex, `$1\n${podEntry}`)
-          } else {
-            // If no target found, add at the end before the end statement
-            podfileContent = podfileContent.replace(/(end\s*$)/, `${podEntry}$1`)
-          }
-
-          fs.writeFileSync(podfilePath, podfileContent)
-          console.log('✅ Added SessionRecorderNative to Podfile')
-        }
-      }
-
-      return config
-    }
-  ])
-}
-
-module.exports = withSessionRecorder