fix(example): remove dependency loop (#3353)

* chore(examples/basic): fix eslint config

* chore(examples/basic): change manual linking for react-native-video

* Update examples/basic/package.json

Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>

---------

Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>

examples/basic/.eslintrc.js

@@ -1,11 +1,16 @@
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+module.exports = {
-
+  root: true,
-/**
+  parser: '@typescript-eslint/parser',
- * Metro configuration
+  parserOptions: {
- * https://facebook.github.io/metro/docs/configuration
+    tsconfigRootDir: __dirname,
- *
+    project: ['./tsconfig.json'],
- * @type {import('metro-config').MetroConfig}
+    ecmaFeatures: {
- */
+      jsx: true,
-const config = {};
+    },
-
+    ecmaVersion: 2018,
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+    sourceType: 'module',
+  },
+  ignorePatterns: ['babel.config.js', 'metro.config.js', '.eslintrc.js'],
+  plugins: ['@typescript-eslint'],
+  extends: ['plugin:@typescript-eslint/recommended', '@react-native'],
+};

examples/basic/android/app/build.gradle

@@ -118,6 +118,8 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
+    implementation project(':react-native-video')
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java

@@ -12,6 +12,7 @@ import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;
 import com.videoplayer.newarchitecture.MainApplicationReactNativeHost;
+import com.brentvatne.react.ReactVideoPackage;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
 
@@ -28,6 +29,7 @@ public class MainApplication extends Application implements ReactApplication {
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
+          packages.add(new ReactVideoPackage());
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
           return packages;

examples/basic/android/settings.gradle

@@ -1,4 +1,8 @@
 rootProject.name = 'videoplayer'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+
+include ':react-native-video'
+project (':react-native-video').projectDir = new File(rootProject.projectDir, '../../../android')
+
 includeBuild('../node_modules/@react-native/gradle-plugin')

examples/basic/babel.config.js

@@ -1,14 +1,14 @@
+const path = require('path');
+const pak = require('../../package.json');
+
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     [
       'module-resolver',
       {
-        extensions: ['.js', '.tsx', '.ts'],
-        root: ['./src'],
-
         alias: {
-          src: './src',
+          [pak.name]: path.join(__dirname, '../..', pak.source),
         },
       },
     ],

examples/basic/ios/Podfile

@@ -49,6 +49,8 @@ target 'videoplayer' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+  pod 'react-native-video', path: '../../..'
+
   target 'videoplayerTests' do
     inherit! :complete
     # Pods for testing

examples/basic/ios/Podfile.lock

@@ -16,9 +16,10 @@ PODS:
     - hermes-engine/Pre-built (= 0.72.5)
   - hermes-engine/Pre-built (0.72.5)
   - libevent (2.1.12)
-  - PromisesObjC (2.2.0)
+  - OpenSSL-Universal (1.1.1100)
-  - PromisesSwift (2.2.0):
+  - PromisesObjC (2.3.1)
-    - PromisesObjC (= 2.2.0)
+  - PromisesSwift (2.3.1):
+    - PromisesObjC (= 2.3.1)
   - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
@@ -323,7 +324,6 @@ PODS:
     - React-Core
     - react-native-video/Video (= 6.0.0-alpha.9)
   - react-native-video/Video (6.0.0-alpha.9):
-    - DVAssetLoaderDelegate (~> 0.3.1)
     - PromisesSwift
     - React-Core
     - SPTPersistentCache (~> 1.1.0)
@@ -467,7 +467,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
-  - react-native-video (from `../node_modules/react-native-video`)
+  - react-native-video (from `../../..`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -543,7 +543,7 @@ EXTERNAL SOURCES:
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-video:
-    :path: "../node_modules/react-native-video"
+    :path: "../../.."
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
@@ -593,8 +593,9 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: f6cf92a471053245614d9d8097736f6337d5b86c
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
+  OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  PromisesSwift: cf9eb58666a43bbe007302226e510b16c1e10959
+  PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
+  PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: df81ab637d35fac9e6eb94611cfd20f0feb05455
   RCTTypeSafety: 4636e4a36c7c2df332bda6d59b19b41c443d4287
@@ -610,8 +611,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: ff70a72027dea5cc7d71cfcc6fad7f599f63987a
   React-jsinspector: aef73cbd43b70675f572214d10fa438c89bf11ba
   React-logger: 2e4aee3e11b3ec4fa6cfd8004610bbb3b8d6cca4
-  react-native-video: dccff18cfd50cb55ef1ae38ef356bb0f1b0ee5f1
+  react-native-video: 3f353064d26413114d218fe984fc9c0bc99dd120
-  React-NativeModulesApple: 54adc761c7a6fa5f183ca62ad0cb94f4f1cdce4a
+  React-NativeModulesApple: 797bc6078d566eef3fb3f74127e6e1d2e945a15f
   React-perflogger: cd8886513f68e1c135a1e79d20575c6489641597
   React-RCTActionSheet: 726d2615ca62a77ce3e2c13d87f65379cdc73498
   React-RCTAnimation: 0dcffbaab5acd05334d1d3b157f9275291e3a15b
@@ -633,6 +634,6 @@ SPEC CHECKSUMS:
   SPTPersistentCache: df36ea46762d7cf026502bbb86a8b79d0080dff4
   Yoga: 86fed2e4d425ee4c6eab3813ba1791101ee153c6
 
-PODFILE CHECKSUM: b4ad0158c6631f45dd67f49e7179d58716f9009b
+PODFILE CHECKSUM: a19d530868c606725f43a0e9d467ebe623a4ddd7
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.13.0

examples/basic/metro.config.js

@@ -5,9 +5,15 @@
  * @format
  */
 const path = require('path');
+const escape = require('escape-string-regexp');
+
 const blacklist = require('metro-config/src/defaults/exclusionList');
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
+const pak = require('../../package.json');
+const root = path.resolve(__dirname, '../..');
+const modules = Object.keys({...pak.peerDependencies});
+
 /**
  * Metro configuration
  * https://facebook.github.io/metro/docs/configuration
@@ -15,6 +21,7 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  * @type {import('metro-config').MetroConfig}
  */
 const config = {
+  watchFolders: [root],
   resolver: {
     blacklistRE: blacklist([
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
@@ -24,7 +31,26 @@ const config = {
       // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip
       /.*\.ProjectImports\.zip/,
       /(.*\/react-native-video\/node_modules\/.*)$/,
+
+      // We need to make sure that only one version is loaded for peerDependencies
+      // So we block them at the root, and alias them to the versions in example's node_modules
+      ...modules.map(
+        name =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', name))}\\/.*$`),
+      ),
     ]),
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: true,
+        },
+      }),
+    },
   },
 };
 

examples/basic/package.json

@@ -18,22 +18,20 @@
     "react-native-windows": "0.63.41"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.22.10",
-    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-env": "^7.22.10",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.22.10",
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
     "@tsconfig/react-native": "^3.0.0",
     "@types/react": "^18.0.24",
-    "@types/react-native-video": "^5.0.15",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-module-resolver": "5.0.0",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.76.8",
+    "metro-react-native-babel-preset": "0.77.0",
     "prettier": "^2.4.1",
-    "react-test-renderer": "18.2.0",
     "typescript": "4.8.4"
   },
   "engines": {

examples/basic/tsconfig.json

@@ -1,3 +1,10 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "react-native-video": ["../../src/index"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
 }