Extract usePlugins for additive plugins.

Author: cbeer

src/components/AttributionPanel.jsx

@@ -73,7 +73,7 @@ export function AttributionPanel({
       </CompanionWindowSection>
       )}
 
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="AttributionPanel" {...pluginProps} />
     </CompanionWindow>
   );
 }

src/components/BackgroundPluginArea.jsx

@@ -5,7 +5,7 @@ import { PluginHook } from './PluginHook';
 /** invisible area where background plugins can add to */
 export const BackgroundPluginArea = ({ PluginComponents = [], ...props }) => (
   <div className={ns('background-plugin-area')} style={{ display: 'none' }}>
-    <PluginHook PluginComponents={PluginComponents} {...props} />
+    <PluginHook targetName="BackgroundPluginArea" PluginComponents={PluginComponents} {...props} />
   </div>
 );
 

src/components/CanvasInfo.jsx

@@ -49,7 +49,7 @@ export function CanvasInfo({
       {canvasMetadata && canvasMetadata.length > 0 && (
         <LabelValueMetadata labelValuePairs={canvasMetadata} />
       )}
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="CanvasInfo" {...pluginProps} />
     </CollapsibleSection>
   );
 }

src/components/ErrorContent.jsx

@@ -51,7 +51,7 @@ export function ErrorContent({
           </AccordionDetails>
         </InlineAccordion>
       )}
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="ErrorContent" {...pluginProps} />
     </Alert>
   );
 }

src/components/ManifestInfo.jsx

@@ -52,7 +52,7 @@ export function ManifestInfo({
         <LabelValueMetadata labelValuePairs={manifestMetadata} />
       )}
 
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="ManifestInfo" {...pluginProps} />
     </CollapsibleSection>
   );
 }

src/components/ManifestRelatedLinks.jsx

@@ -123,7 +123,7 @@ export function ManifestRelatedLinks({
           </>
         )}
       </StyledDl>
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="ManifestRelatedLinks" {...pluginProps} />
     </CollapsibleSection>
   );
 }

src/components/OpenSeadragonViewer.jsx

@@ -137,7 +137,7 @@ export function OpenSeadragonViewer({
       { drawAnnotations
           && <AnnotationsOverlay viewer={viewer} windowId={windowId} /> }
       { enhancedChildren }
-      <PluginHook viewer={viewer} {...pluginProps} />
+      <PluginHook targetName="OpenSeadragonViewer" viewer={viewer} {...pluginProps} />
     </OpenSeadragonComponent>
   );
 }

src/components/PluginHook.jsx

@@ -1,9 +1,11 @@
 import { forwardRef, isValidElement, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { usePlugins } from '../extend/usePlugins';
 
 /** Renders plugins */
-export const PluginHook = forwardRef((props, ref) => {
-  const { PluginComponents } = props; // eslint-disable-line react/prop-types
-  const { classes, ...otherProps } = props; // eslint-disable-line react/prop-types
+export const PluginHook = forwardRef(({ classes = {}, targetName, ...otherProps }, ref) => {
+  const { PluginComponents } = usePlugins(targetName);
+
   return PluginComponents ? (
     PluginComponents.map((PluginComponent, index) => ( // eslint-disable-line react/prop-types
       isValidElement(PluginComponent)
@@ -20,3 +22,8 @@ export const PluginHook = forwardRef((props, ref) => {
 });
 
 PluginHook.displayName = 'PluginHook';
+
+PluginHook.propTypes = {
+  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types, react/require-default-props
+  targetName: PropTypes.string.isRequired,
+};

src/components/Window.jsx

@@ -127,7 +127,7 @@ export function Window({
           </StyledCompanionAreaRight>
         </ContentRow>
         <CompanionArea windowId={windowId} position="far-bottom" />
-        <PluginHook {...ownerState} />
+        <PluginHook targetName="Window" {...ownerState} />
       </Root>
     </ErrorBoundary>
   );

src/components/WindowAuthenticationBar.jsx

@@ -71,7 +71,7 @@ export function WindowAuthenticationBar({
           <Typography component="h3" variant="body1" color="inherit">
             { ruleSet ? <SanitizedHtml htmlString={label} ruleSet={ruleSet} /> : label }
           </Typography>
-          <PluginHook {...pluginProps} />
+          <PluginHook targetName="WindowAuthenticationBar" {...pluginProps} />
           { button }
         </StyledTopBar>
       </Paper>
@@ -106,7 +106,7 @@ export function WindowAuthenticationBar({
         <Typography sx={{ paddingBlockEnd: 1, paddingBlockStart: 1 }} component="h3" variant="body1" color="inherit">
           { ruleSet ? <SanitizedHtml htmlString={label} ruleSet={ruleSet} /> : label }
         </Typography>
-        <PluginHook {...pluginProps} />
+        <PluginHook targetName="WindowAuthenticationBar" {...pluginProps} />
         <StyledFauxButton>
           { !open && (
             <Typography variant="button" color="inherit">

src/components/WindowCanvasNavigationControls.jsx

@@ -70,7 +70,7 @@ export const WindowCanvasNavigationControls = forwardRef(({
       </Stack>
       <ViewerInfo windowId={windowId} />
 
-      <PluginHook {...pluginProps} />
+      <PluginHook targetName="WindowCanvasNavigationControls" {...pluginProps} />
     </Root>
   );
 });

src/components/WindowTopBarPluginArea.jsx

@@ -5,6 +5,6 @@ import { PluginHook } from './PluginHook';
  */
 export function WindowTopBarPluginArea(props) {
   return (
-    <PluginHook {...props} />
+    <PluginHook targetName="WindowTopBarPluginArea" {...props} />
   );
 }

src/components/WindowTopBarPluginMenu.jsx

@@ -61,7 +61,7 @@ export function WindowTopBarPluginMenu({
         open={open}
         onClose={handleMenuClose}
       >
-        <PluginHook handleClose={handleMenuClose} {...pluginProps} />
+        <PluginHook targetName="WindowTopBarPluginMenu" handleClose={handleMenuClose} {...pluginProps} />
       </Menu>
     </>
   );

src/components/WindowTopMenu.jsx

@@ -2,22 +2,29 @@ import { useContext } from 'react';
 import ListSubheader from '@mui/material/ListSubheader';
 import Popover from '@mui/material/Popover';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
 import WindowViewSettings from '../containers/WindowViewSettings';
 import { PluginHook } from './PluginHook';
 import WorkspaceContext from '../contexts/WorkspaceContext';
+import { usePlugins } from '../extend/usePlugins';
 
 /** Renders plugins */
-function PluginHookWithHeader(props) {
-  const { PluginComponents, t } = props; // eslint-disable-line react/prop-types
+function PluginHookWithHeader({ targetName, ...props }) {
+  const PluginComponents = usePlugins(targetName);
+  const { t } = useTranslation();
   return PluginComponents ? (
     <>
       <ListSubheader role="presentation" disableSticky tabIndex={-1}>{t('windowPluginButtons')}</ListSubheader>
-      <PluginHook {...props} />
+      <PluginHook targetName={targetName} {...props} />
     </>
   ) : null;
 }
 
+PluginHookWithHeader.propTypes = {
+  targetName: PropTypes.string.isRequired,
+};
+
 /**
  */
 export function WindowTopMenu({
@@ -51,7 +58,7 @@ export function WindowTopMenu({
       <WindowViewSettings windowId={windowId} handleClose={handleClose} />
       {showThumbnailNavigationSettings
         && <WindowThumbnailSettings windowId={windowId} handleClose={handleClose} />}
-      <PluginHookWithHeader {...pluginProps} />
+      <PluginHookWithHeader targetName="WindowTopMenu" {...pluginProps} />
     </Popover>
   );
 }

src/components/WorkspaceAdd.jsx

@@ -129,7 +129,7 @@ export function WorkspaceAdd({
         ) : (
           <Paper sx={{ margin: 2 }}>
             <Typography style={visuallyHidden} component="h1">{t('miradorResources')}</Typography>
-            <PluginHook {...pluginProps} />
+            <PluginHook targetName="WorkspaceAdd" {...pluginProps} />
             <List disablePadding>
               {manifestList}
             </List>

src/components/WorkspaceControlPanelButtons.jsx

@@ -14,7 +14,7 @@ export function WorkspaceControlPanelButtons({ ...rest }) {
       <WorkspaceMenuButton />
       <WorkspaceOptionsButton />
       <FullScreenButton />
-      <PluginHook {...rest} />
+      <PluginHook targetName="WorkspaceControlPanelButtons" {...rest} />
     </>
   );
 }

src/components/WorkspaceMenu.jsx

@@ -85,7 +85,7 @@ export function WorkspaceMenu({
             <Typography variant="body1">{t('changeTheme')}</Typography>
           </MenuItem>
         )}
-        <PluginHook {...pluginProps} />
+        <PluginHook targetName="WorkspaceMenu" {...pluginProps} />
       </Menu>
       {selectedOption === 'changeTheme' && (
         <ChangeThemeDialog

src/components/WorkspaceOptionsMenu.jsx

@@ -76,7 +76,7 @@ export function WorkspaceOptionsMenu({
           </ListItemIcon>
           <Typography variant="body1">{t('importWorkspace')}</Typography>
         </MenuItem>
-        <PluginHook {...pluginProps} />
+        <PluginHook targetName="WorkspaceOptionsMenu" {...pluginProps} />
       </Menu>
       {selectedOption === 'exportWorkspace' && (
         <WorkspaceExport

src/extend/usePlugins.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import PluginContext from './PluginContext';
+
+/** withPlugins should be the innermost HOC */
+export function usePlugins(targetName) {
+  const pluginMap = useContext(PluginContext);
+
+  const plugins = (pluginMap || {})[targetName];
+
+  const PluginComponents = (plugins?.add || []).map(plugin => plugin.component);
+
+  return { PluginComponents };
+}

src/extend/withPlugins.jsx

@@ -16,17 +16,10 @@ function _withPlugins(targetName, TargetComponent) { // eslint-disable-line no-u
 
     const plugins = (pluginMap || {})[targetName];
 
-    if (isEmpty(plugins) || (isEmpty(plugins.wrap) && isEmpty(plugins.add))) {
+    if (isEmpty(plugins) || isEmpty(plugins.wrap)) {
       return <TargetComponent {...passDownProps} />;
     }
 
-    const PluginComponents = (plugins.add || []).map(plugin => plugin.component);
-    const targetComponent = (
-      <TargetComponent {...passDownProps} PluginComponents={PluginComponents} />
-    );
-
-    if (isEmpty(plugins.wrap)) return targetComponent;
-
     /** */
     const pluginWrapper = (children, plugin) => {
       const WrapPluginComponent = plugin.component;
@@ -35,7 +28,6 @@ function _withPlugins(targetName, TargetComponent) { // eslint-disable-line no-u
         <WrapPluginComponent
           targetProps={passDownProps}
           {...passDownProps}
-          PluginComponents={PluginComponents}
           TargetComponent={TargetComponent}
         >
           {children}