chore(app-registry): add useActivate hook to activate plugins without rendering (#5230)

Author: gribnoysup

packages/compass-collection/src/components/collection-tab-provider.tsx

@@ -1,9 +1,16 @@
 import React, { useContext, useRef } from 'react';
 import type { CollectionTabPluginMetadata } from '../modules/collection-tab';
+import type { HadronPluginComponent } from 'hadron-app-registry';
 
 export interface CollectionTabPlugin {
   name: string;
-  component: React.ComponentType<CollectionTabPluginMetadata>;
+  component: React.ComponentType<CollectionTabPluginMetadata> &
+    Partial<
+      Pick<
+        HadronPluginComponent<CollectionTabPluginMetadata, any>,
+        'useActivate'
+      >
+    >;
 }
 
 const CollectionTabsContext = React.createContext<CollectionTabPlugin[]>([]);

packages/compass-collection/src/components/collection-tab.tsx

@@ -58,7 +58,7 @@ const collectionModalContainerStyles = css({
 
 type CollectionTabProps = CollectionTabOptions & {
   currentTab: string;
-  collectionMetadata: CollectionMetadata | null;
+  collectionMetadata: CollectionMetadata;
   renderScopedModals(props: CollectionTabOptions): React.ReactElement[];
   // TODO(COMPASS-7405): Remove usage of `renderTabs` for Query.QueryBar role
   renderTabs(
@@ -67,7 +67,9 @@ type CollectionTabProps = CollectionTabOptions & {
   onTabClick(name: string): void;
 };
 
-const CollectionTab: React.FunctionComponent<CollectionTabProps> = ({
+const CollectionTabWithMetadata: React.FunctionComponent<
+  CollectionTabProps
+> = ({
   namespace,
   currentTab,
   initialAggregation,
@@ -91,11 +93,8 @@ const CollectionTab: React.FunctionComponent<CollectionTabProps> = ({
       });
     }
   }, [currentTab]);
-  const pluginTabs = useCollectionTabPlugins();
 
-  if (collectionMetadata === null) {
-    return null;
-  }
+  const pluginTabs = useCollectionTabPlugins();
 
   const tabsProps = {
     namespace,
@@ -106,20 +105,26 @@ const CollectionTab: React.FunctionComponent<CollectionTabProps> = ({
     editViewName,
   };
   renderTabs(tabsProps); // TODO(COMPASS-7405): Remove usage for Query.QueryBar role
-  const tabs = pluginTabs.map(({ name, component: Component }) => ({
-    name,
-    component: (
-      <Component
-        {...collectionMetadata}
-        namespace={namespace}
-        aggregation={initialAggregation}
-        pipeline={initialPipeline}
-        pipelineText={initialPipelineText}
-        query={initialQuery}
-        editViewName={editViewName}
-      />
-    ),
-  }));
+  const tabs = pluginTabs.map(({ name, component: Component }) => {
+    const pluginProps = {
+      ...collectionMetadata,
+      namespace: namespace,
+      aggregation: initialAggregation,
+      pipeline: initialPipeline,
+      pipelineText: initialPipelineText,
+      query: initialQuery,
+      editViewName: editViewName,
+    };
+
+    // `pluginTabs` never change in runtime so it's safe to call the hook here
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    Component.useActivate?.(pluginProps);
+
+    return {
+      name,
+      component: <Component {...pluginProps} />,
+    };
+  });
   const activeTabIndex = tabs.findIndex((tab) => tab.name === currentTab);
 
   return (
@@ -165,6 +170,24 @@ const CollectionTab: React.FunctionComponent<CollectionTabProps> = ({
   );
 };
 
+const CollectionTab = ({
+  collectionMetadata,
+  ...props
+}: Omit<CollectionTabProps, 'collectionMetadata'> & {
+  collectionMetadata: CollectionMetadata | null;
+}) => {
+  if (!collectionMetadata) {
+    return null;
+  }
+
+  return (
+    <CollectionTabWithMetadata
+      collectionMetadata={collectionMetadata}
+      {...props}
+    ></CollectionTabWithMetadata>
+  );
+};
+
 const ConnectedCollectionTab = connect(
   (state: CollectionState) => {
     return {

packages/hadron-app-registry/src/register-plugin.tsx

@@ -144,11 +144,90 @@ const useMockOption = <T extends keyof MockOptions>(key: T): MockOptions[T] => {
   return useContext(MockOptionsContext)[key];
 };
 
+function useHadronPluginActivate<T, S extends Record<string, () => unknown>>(
+  config: HadronPluginConfig<T, S>,
+  services: S | undefined,
+  props: T
+) {
+  const registryName = `${config.name}.Plugin`;
+  const isMockedEnvironment = useMockOption('mockedEnvironment');
+  const mockServices = useMockOption('mockServices');
+
+  const globalAppRegistry = useGlobalAppRegistry();
+  const localAppRegistry = useLocalAppRegistry();
+
+  const serviceImpls = Object.fromEntries(
+    Object.keys({
+      ...(isMockedEnvironment ? mockServices : {}),
+      ...services,
+    }).map((key) => {
+      try {
+        return [
+          key,
+          isMockedEnvironment && mockServices?.[key]
+            ? mockServices[key]
+            : services?.[key](),
+        ];
+      } catch (err) {
+        if (
+          err &&
+          typeof err === 'object' &&
+          'message' in err &&
+          typeof err.message === 'string'
+        )
+          err.message += ` [locating service '${key}' for '${registryName}']`;
+        throw err;
+      }
+    })
+  ) as Services<S>;
+
+  const [{ store, actions }] = useState(
+    () =>
+      localAppRegistry.getPlugin(registryName) ??
+      (() => {
+        const plugin = config.activate(
+          props,
+          {
+            globalAppRegistry,
+            localAppRegistry,
+            ...serviceImpls,
+          },
+          createActivateHelpers()
+        );
+        localAppRegistry.registerPlugin(registryName, plugin);
+        return plugin;
+      })()
+  );
+
+  return { store, actions };
+}
+
 export type HadronPluginComponent<
   T,
   S extends Record<string, () => unknown>
 > = React.FunctionComponent<T> & {
   displayName: string;
+
+  /**
+   * Hook that will activate plugin in the current rendering scope without
+   * actually rendering it. Useful to set up plugins that are rendered
+   * conditionally and have to subscribe to event listeners earlier than the
+   * first render in their lifecycle
+   *
+   * @example
+   * const Plugin = registerHadronPlugin(...);
+   *
+   * function Component() {
+   *   Plugin.useActivate();
+   *   const [pluginVisible] = useState(false);
+   *
+   *   // This Plugin component will already have its store set up and listening
+   *   // to the events even before rendering
+   *   return (pluginVisible && <Plugin />)
+   * }
+   */
+  useActivate(props: T): void;
+
   /**
    * Convenience method for testing: allows to override services and app
    * registries available in the plugin context
@@ -228,15 +307,10 @@ export function registerHadronPlugin<
   S extends Record<string, () => unknown>
 >(config: HadronPluginConfig<T, S>, services?: S): HadronPluginComponent<T, S> {
   const Component = config.component;
-  const registryName = `${config.name}.Plugin`;
   const Plugin = (props: React.PropsWithChildren<T>) => {
     const isMockedEnvironment = useMockOption('mockedEnvironment');
     const mockedPluginName = useMockOption('pluginName');
     const disableRendering = useMockOption('disableChildPluginRendering');
-    const mockServices = useMockOption('mockServices');
-
-    const globalAppRegistry = useGlobalAppRegistry();
-    const localAppRegistry = useLocalAppRegistry();
 
     // This can only be true in test environment when parent plugin is setup
     // with mock services. We allow parent to render, but any other plugin
@@ -250,52 +324,11 @@ export function registerHadronPlugin<
       return null;
     }
 
-    const serviceImpls = Object.fromEntries(
-      Object.keys({
-        ...(isMockedEnvironment ? mockServices : {}),
-        ...services,
-      }).map((key) => {
-        try {
-          return [
-            key,
-            isMockedEnvironment && mockServices?.[key]
-              ? mockServices[key]
-              : services?.[key](),
-          ];
-        } catch (err) {
-          if (
-            err &&
-            typeof err === 'object' &&
-            'message' in err &&
-            typeof err.message === 'string'
-          )
-            err.message += ` [locating service '${key}' for '${registryName}']`;
-          throw err;
-        }
-      })
-    ) as Services<S>;
-
     // We don't actually use this hook conditionally, even though eslint rule
     // thinks so: values returned by `useMock*` hooks are constant in React
     // runtime
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [{ store, actions }] = useState(
-      () =>
-        localAppRegistry.getPlugin(registryName) ??
-        (() => {
-          const plugin = config.activate(
-            props,
-            {
-              globalAppRegistry,
-              localAppRegistry,
-              ...serviceImpls,
-            },
-            createActivateHelpers()
-          );
-          localAppRegistry.registerPlugin(registryName, plugin);
-          return plugin;
-        })()
-    );
+    const { store, actions } = useHadronPluginActivate(config, services, props);
 
     if (isReduxStore(store)) {
       return (
@@ -313,6 +346,9 @@ export function registerHadronPlugin<
   };
   return Object.assign(Plugin, {
     displayName: config.name,
+    useActivate: (props: T) => {
+      useHadronPluginActivate(config, services, props);
+    },
     withMockServices(
       mocks: Partial<Registries & Services<S>>,
       options?: Partial<Pick<MockOptions, 'disableChildPluginRendering'>>