feat(reactotron-app): Each client now has an explicit list of plugins.

Developers can now toggle interface features based on what plugins the user has installed and active within their ecosystem.

Part of this was updating each library to have a `name` property. See example in the sidebar component for conditionally showing the Apollo sidebar button.

Author: markrickert

apps/reactotron-app/package.json

@@ -64,6 +64,7 @@
     "react-motion": "0.5.2",
     "react-router-dom": "^6.22.0",
     "react-tooltip": "4.5.1",
+    "react-transition-group": "^4.4.5",
     "reactotron-core-contract": "workspace:*",
     "reactotron-core-server": "workspace:*",
     "reactotron-core-ui": "workspace:*",

apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx

@@ -15,6 +15,12 @@ import styled from "styled-components"
 import SideBarButton from "../SideBarButton"
 import { reactotronLogo } from "../../images"
 import { ServerStatus } from "../../contexts/Standalone/useStandalone"
+import {
+  Transition,
+  CSSTransition,
+  SwitchTransition,
+  TransitionGroup,
+} from "react-transition-group"
 
 interface SideBarContainerProps {
   $isOpen: boolean
@@ -34,7 +40,20 @@ const Spacer = styled.div`
   flex: 1;
 `
 
-function SideBar({ isOpen, serverStatus }: { isOpen: boolean; serverStatus: ServerStatus }) {
+const transitionStyles = {
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 1 },
+  exited: { opacity: 0 },
+}
+
+interface SideBarProps {
+  isOpen: boolean
+  serverStatus: ServerStatus
+  plugins: string[]
+}
+
+function SideBar({ isOpen, serverStatus, plugins }: SideBarProps) {
   let serverIcon = MdMobiledataOff
   let iconColor
   let serverText = "Stopped"
@@ -55,6 +74,11 @@ function SideBar({ isOpen, serverStatus }: { isOpen: boolean; serverStatus: Serv
     }
   }
 
+  const hasApolloClient = React.useMemo(
+    () => plugins.find((plugin) => plugin === "apollo-client"),
+    [plugins]
+  )
+
   return (
     <SideBarContainer $isOpen={isOpen}>
       <SideBarButton image={reactotronLogo} path="/" text="Home" hideTopBar />
@@ -73,12 +97,24 @@ function SideBar({ isOpen, serverStatus }: { isOpen: boolean; serverStatus: Serv
       />
       <SideBarButton icon={FaMagic} path="/customCommands" text="Custom Commands" iconSize={25} />
 
-      <SideBarButton
-        icon={SiApollographql}
-        path="/apolloClient/cache"
-        matchPath="/apolloClient"
-        text="Apollo Client"
-      />
+      <Transition in={hasApolloClient} timeout={300}>
+        {(state) => (
+          <div
+            style={{
+              transition: `opacity 300ms ease-in-out`,
+              opacity: 0,
+              ...transitionStyles[state],
+            }}
+          >
+            <SideBarButton
+              icon={SiApollographql}
+              path="/apolloClient/queries"
+              matchPath="/apolloClient"
+              text="Apollo Client"
+            />
+          </div>
+        )}
+      </Transition>
 
       <Spacer />
 

apps/reactotron-app/src/renderer/components/SideBar/index.tsx

@@ -6,9 +6,17 @@ import SidebarStateless from "./Sidebar"
 
 function SideBar() {
   const { isSideBarOpen } = useContext(LayoutContext)
-  const { serverStatus } = useContext(StandaloneContext)
 
-  return <SidebarStateless isOpen={isSideBarOpen} serverStatus={serverStatus} />
+  const standaloneContext = useContext(StandaloneContext)
+  const { serverStatus, selectedConnection } = standaloneContext
+
+  return (
+    <SidebarStateless
+      isOpen={isSideBarOpen}
+      serverStatus={serverStatus}
+      plugins={selectedConnection?.plugins || []}
+    />
+  )
 }
 
 export default SideBar

apps/reactotron-app/src/renderer/contexts/Standalone/useStandalone.ts

@@ -26,6 +26,7 @@ export interface ReactotronConnection {
   platformVersion?: string
   osRelease?: string
   userAgent?: string
+  plugins: string[]
 }
 
 export interface Connection extends ReactotronConnection {

lib/reactotron-apollo-client/src/reactotron-apollo-client.ts

@@ -304,6 +304,7 @@ export const apolloPlugin =
     // --- Reactotron plugin interface ---------------------------------
 
     return {
+      name: "apollo-client",
       // Fires when we receive a command from the Reactotron app.
       onCommand,
 

lib/reactotron-core-client/src/plugins/api-response.ts

@@ -5,6 +5,7 @@ import type { ReactotronCore, Plugin } from "../reactotron-core-client"
  */
 const apiResponse = () => (reactotron: ReactotronCore) => {
   return {
+    name: "api-response",
     features: {
       apiResponse: (request: { status: number }, response: any, duration: number) => {
         const ok =

lib/reactotron-core-client/src/plugins/benchmark.ts

@@ -23,6 +23,7 @@ const benchmark = () => (reactotron: ReactotronCore) => {
   }
 
   return {
+    name: "benchmark",
     features: { benchmark },
   } satisfies Plugin<ReactotronCore>
 }

lib/reactotron-core-client/src/plugins/clear.ts

@@ -5,6 +5,7 @@ import type { ReactotronCore, Plugin } from "../reactotron-core-client"
  */
 const clear = () => (reactotron: ReactotronCore) => {
   return {
+    name: "clear",
     features: {
       clear: () => reactotron.send("clear"),
     },

lib/reactotron-core-client/src/plugins/image.ts

@@ -14,6 +14,7 @@ export interface ImagePayload {
  */
 const image = () => (reactotron: ReactotronCore) => {
   return {
+    name: "image",
     features: {
       // expanded just to show the specs
       image: (payload: ImagePayload) => {

lib/reactotron-core-client/src/plugins/logger.ts

@@ -5,6 +5,7 @@ import type { ReactotronCore, Plugin, InferFeatures } from "../reactotron-core-c
  */
 const logger = () => (reactotron: ReactotronCore) => {
   return {
+    name: "logger",
     features: {
       log: (...args) => {
         const content = args && args.length === 1 ? args[0] : args