Exclude fbjni transitive deps

MODULE.bazel

@@ -107,8 +107,8 @@ bazel_dep(name = "rules_jvm_external", version = "6.8")
 # Override for AAR publishing support
 git_override(
     module_name = "rules_jvm_external",
-    # branch = "maven-export-aar-6.8",
-    commit = "0dc1a97c0403de02e0bf9a03244212a15dae3333",
+    # branch = "maven-export-aar-6.10",
+    commit = "6982dfaef224a948c6d9df8f1f68330f46d71e47",
     remote = "https://github.com/sugarmanz/rules_jvm_external.git",
 )
 
@@ -130,7 +130,8 @@ maven.amend_artifact(
     coordinates = "com.facebook.flipper:flipper",
     exclusions = [
         # TODO: Try to override
-        "com.android.ndk.thirdparty:openssl",
+        # "com.android.ndk.thirdparty:openssl",
+        "com.facebook.fbjni:fbjni"
     ],
 )
 maven.install(

Package.swift

@@ -132,7 +132,7 @@ let package = Package(
     products: allTargets.map { .library(name: $0.name, targets: [$0.name]) },
     dependencies: [
         .package(url: "https://github.com/player-ui/playerui-swift-package.git", from: "0.11.2"),
-        .package(url: "https://github.com/chiragramani/SwiftFlipper.git", from: "0.1.0"),
+        .package(url: "https://github.com/player-ui/SwiftFlipper.git", exact: "0.3.0"),
     ],
     targets: allTargets
 )

devtools/plugin/react/src/WrapperComponent.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useMemo } from "react";
+import { Messenger } from "@player-devtools/messenger";
+import { type DevtoolsPlugin, type PluginStore } from "@player-devtools/plugin";
+import type {
+  MessengerOptions,
+  ExtensionSupportedEvents,
+} from "@player-devtools/types";
+import type { ReactPlayer } from "@player-ui/react";
+import { useCommunicationLayer } from "./useCommunicationLayer";
+
+export type WrapperComponentProps = {
+  Component: React.ComponentType;
+  playerID: string;
+  store: PluginStore;
+  corePlugin: DevtoolsPlugin;
+  reactPlayer: ReactPlayer;
+};
+
+export const WrapperComponent = ({
+  Component,
+  playerID,
+  store,
+  corePlugin,
+  reactPlayer,
+}: WrapperComponentProps): React.JSX.Element => {
+  const { sendMessage, addListener, removeListener } = useCommunicationLayer();
+
+  const messenger = useMemo(() => {
+    const options: MessengerOptions<ExtensionSupportedEvents> = {
+      id: playerID,
+      context: "player",
+      messageCallback: (message) =>
+        store.dispatch(message as Parameters<typeof store.dispatch>[0]),
+      sendMessage,
+      addListener,
+      removeListener,
+      logger: { log: reactPlayer.player.logger.info },
+    };
+
+    return new Messenger(options);
+  }, [addListener, removeListener, sendMessage]);
+
+  useEffect(() => {
+    const unsubscribe = corePlugin.registerMessenger(messenger);
+    return () => {
+      unsubscribe();
+      messenger.destroy();
+    };
+  }, [messenger]);
+
+  return <Component />;
+};

devtools/plugin/react/src/index.ts

@@ -1,5 +1,6 @@
 export {
   genDataChangeTransaction,
   type DevtoolsPluginOptions,
+  type PluginStore,
 } from "@player-devtools/plugin";
 export { ReactDevtoolsPlugin } from "./plugin";

devtools/plugin/react/src/plugin.tsx

@@ -1,17 +1,12 @@
-import React, { useEffect, useMemo } from "react";
-import { Messenger } from "@player-devtools/messenger";
+import React from "react";
 import {
   DevtoolsPlugin,
   type DevtoolsHandler,
   type PluginStore,
 } from "@player-devtools/plugin";
-import type {
-  MessengerOptions,
-  ExtensionSupportedEvents,
-  DevtoolsPluginInteractionEvent,
-} from "@player-devtools/types";
+import type { DevtoolsPluginInteractionEvent } from "@player-devtools/types";
 import type { ReactPlayerPlugin, ReactPlayer } from "@player-ui/react";
-import { useCommunicationLayer } from "./useCommunicationLayer";
+import { WrapperComponent } from "./WrapperComponent";
 
 /** Entrypoint for devtools plugins with [ReactPlayer]-specific components */
 export abstract class ReactDevtoolsPlugin<T extends DevtoolsPlugin>
@@ -38,44 +33,18 @@ export abstract class ReactDevtoolsPlugin<T extends DevtoolsPlugin>
   applyReact(reactPlayer: ReactPlayer): void {
     if (!this.checkIfDevtoolsIsActive()) return;
 
+    this.corePlugin.apply(reactPlayer.player);
     reactPlayer.hooks.webComponent.tap(this.name, (Component) => {
-      const DevtoolsWrapper = () => {
-        const { sendMessage, addListener, removeListener } =
-          useCommunicationLayer();
-
-        const messenger = useMemo(() => {
-          const options: MessengerOptions<ExtensionSupportedEvents> = {
-            id: this.playerID,
-            context: "player",
-            messageCallback: (message) =>
-              this.store.dispatch(
-                message as Parameters<typeof this.store.dispatch>[0],
-              ),
-            sendMessage,
-            addListener,
-            removeListener,
-            logger: { log: reactPlayer.player.logger.info },
-          };
-
-          return new Messenger(options);
-        }, [addListener, removeListener, sendMessage]);
-
-        useEffect(() => {
-          const unsubscribe = this.corePlugin.registerMessenger(messenger);
-          return () => {
-            unsubscribe();
-            messenger.destroy();
-          };
-        }, [messenger]);
-
-        return (
-          <>
-            <Component />
-          </>
-        );
-      };
-
-      return DevtoolsWrapper;
+      const ReactDevtoolsComponent = () => (
+        <WrapperComponent
+          Component={Component}
+          playerID={this.playerID}
+          store={this.store}
+          corePlugin={this.corePlugin}
+          reactPlayer={reactPlayer}
+        />
+      );
+      return ReactDevtoolsComponent;
     });
   }
 }

devtools/plugins/basic/core/src/plugin.ts

@@ -58,11 +58,6 @@ export class BasicDevtoolsPlugin extends DevtoolsPlugin {
 
     if (!this.checkIfDevtoolsIsActive()) return;
 
-    this.options.pluginData.flow.data!.playerConfig = {
-      version: player.getVersion(),
-      plugins: player.getPlugins().map((plugin) => plugin.name),
-    };
-
     super.apply(player);
 
     // Config

devtools/plugins/basic/react/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@player-devtools/basic-plugin-react",
   "version": "0.0.0-PLACEHOLDER",
-  "main": "src/index.tsx",
+  "main": "src/index.ts",
   "dependencies": {
     "@player-devtools/basic-plugin": "workspace:*",
     "@player-devtools/plugin-react": "workspace:*",
     "@player-devtools/types": "workspace:*"
   }
-}
+}

devtools/plugins/basic/react/src/DefaultBasicDevtoolsWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import type { DevtoolsWrapperProps } from "./types";
+
+export const DefaultBasicDevtoolsWrapper = ({
+  state,
+  playerID,
+  children,
+}: DevtoolsWrapperProps): React.JSX.Element => {
+  const [highlight, setHighlight] = useState(false);
+  useEffect(() => {
+    if (playerID === state.currentPlayer) {
+      setHighlight(true);
+      const timer = setTimeout(() => {
+        setHighlight(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [playerID, state.currentPlayer]);
+
+  return (
+    <div id={playerID} style={highlight ? { border: "2px solid blue" } : {}}>
+      {children}
+    </div>
+  );
+};

devtools/plugins/basic/react/src/WrapperComponent.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import type { PluginStore } from "@player-devtools/plugin-react";
+import { DevtoolsWrapperProps } from "./types";
+
+export type WrapperComponentProps = {
+  Component: React.ComponentType;
+  Wrapper: React.ComponentType<DevtoolsWrapperProps>;
+  store: PluginStore;
+  playerID: string;
+};
+
+export const WrapperComponent = ({
+  Component,
+  Wrapper,
+  store,
+  playerID,
+}: WrapperComponentProps): React.JSX.Element => {
+  const [state, setState] = useState(store.getState());
+  useEffect(() => store.subscribe(setState), [store]);
+  return (
+    <Wrapper state={state} playerID={playerID}>
+      <Component />
+    </Wrapper>
+  );
+};

devtools/plugins/basic/react/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./plugin";