feat: support id_aliases for PluginSlots

Author: brian-smith-tcril

src/plugins/PluginSlot.jsx

@@ -14,6 +14,7 @@ function BasePluginSlot({
   as = React.Fragment,
   children = null,
   id,
+  id_aliases = [],
   pluginProps = {},
   slotOptions = {},
   slotErrorFallbackComponent,
@@ -23,7 +24,7 @@ function BasePluginSlot({
   for an example of how PluginSlot is populated, and example/src/index.jsx for a dummy JS config that holds all plugins
   */
 
-  const { keepDefault, plugins } = usePluginSlot(id);
+  const { keepDefault, plugins } = usePluginSlot(id, id_aliases);
   const { formatMessage } = useIntl();
 
   const defaultContents = React.useMemo(() => {
@@ -118,6 +119,8 @@ BasePluginSlot.propTypes = {
   children: PropTypes.node,
   /** ID of the PluginSlot configuration */
   id: PropTypes.string.isRequired,
+  /** Aliases (additional IDs for the PluginSlot) */
+  id_aliases: PropTypes.arrayOf(PropTypes.string),
   /** Props that are passed down to each Plugin in the Slot */
   pluginProps: PropTypes.shape(),
   /** Options passed to the PluginSlot */

src/plugins/data/hooks.js

@@ -14,12 +14,37 @@ import { PLUGIN_MOUNTED, PLUGIN_READY, PLUGIN_UNMOUNTED } from './constants';
  * @param {String} id - Name of PluginSlot
  * @returns {Object} - JS configuration for the PluginSlot
  */
-export function usePluginSlot(id) {
-  const configSlots = getConfigSlots()?.[id];
-  if (configSlots) {
-    return configSlots;
+export function usePluginSlot(id, id_aliases = []) {
+  const notFound = { keepDefault: true, plugins: [] };
+
+  const allConfigSlots = getConfigSlots();
+
+  if (!allConfigSlots) {
+    return notFound;
+  }
+
+  // When defining a JS object with multiple entries
+  // that have the same key, only the last one is kept
+  // 
+  // We want to treat all entries in the pluginSlots object
+  // in env.config.jsx that have either "id" or any of the 
+  // "id_aliases" as if they have the same id
+  // 
+  // To do so, we grab the last entry in the object that with 
+  // a key that matches either the "id" or any of the "id_aliases"
+  const allSlotIds = [id].concat(id_aliases);
+  const lastMatchingId = Object.keys(allConfigSlots).reverse().find(slotId => allSlotIds.includes(slotId));
+
+  if (!lastMatchingId) {
+    return notFound;
+  }
+
+  const configSlots = allConfigSlots[lastMatchingId];
+
+  if (!configSlots) {
+    return notFound;
   }
-  return { keepDefault: true, plugins: [] };
+  return configSlots;
 }
 
 /* Listening for events */