@perses-dev/plugin-system 0.7.1 → 0.8.0

package/dist/cjs/components/PluginLoadingBoundary/PluginLoader.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginLoader = void 0;
 const react_query_1 = require("react-query");
-const PluginRegistry_1 = require("../PluginRegistry");
+const legacy_1 = require("../PluginRegistry/legacy");
 /**
  * Uses the PluginRegistry to load the specified plugin and throws any errors
  * encountered while loading.
@@ -22,7 +22,7 @@ const PluginRegistry_1 = require("../PluginRegistry");
 function PluginLoader(props) {
     const { pluginType, kind } = props;
     // Load the plugin and throw any loading/not found errors
-    const { loadPlugin } = (0, PluginRegistry_1.usePluginRegistry)();
+    const { loadPlugin } = (0, legacy_1.usePluginRegistry)();
     const { error } = (0, react_query_1.useQuery)(`PluginLoader:${pluginType}_${kind}`, () => {
         // The enabled option below should prevent this from being run until loadPlugin is available, but check here to
         // make Typescript happy

package/dist/cjs/components/PluginLoadingBoundary/PluginLoadingBoundary.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_immer_1 = require("use-immer");
 const model_1 = require("../../model");
-const PluginRegistry_1 = require("../PluginRegistry");
+const legacy_1 = require("../PluginRegistry/legacy");
 const PluginLoader_1 = require("./PluginLoader");
 /**
  * Plugin dependencies are registered here by children. This takes care of loading
@@ -14,7 +14,7 @@ const PluginLoader_1 = require("./PluginLoader");
  */
 function PluginLoadingBoundary(props) {
     const { fallback, children } = props;
-    const { plugins } = (0, PluginRegistry_1.usePluginRegistry)();
+    const { plugins } = (0, legacy_1.usePluginRegistry)();
     // Keep track of all plugin dependencies registered by child components
     const [dependencies, setDependencies] = (0, use_immer_1.useImmer)(() => {
         const deps = {};
@@ -72,14 +72,14 @@ exports.usePluginLoadingBoundary = usePluginLoadingBoundary;
  * Generic usePlugin that will register the dependency with the nearest LoadingBoundary and get the plugin if it's
  * already loaded
  */
-function usePlugin(pluginType, definition) {
+function usePlugin(pluginType, kind) {
     // Tell the loading boundary about the dependency
     const { registerPluginDependency } = usePluginLoadingBoundary();
     (0, react_1.useEffect)(() => {
-        registerPluginDependency(pluginType, definition.kind);
-    }, [pluginType, definition.kind, registerPluginDependency]);
+        registerPluginDependency(pluginType, kind);
+    }, [pluginType, kind, registerPluginDependency]);
     // Get the plugin, which could be undefined if it hasn't loaded yet
-    const { plugins } = (0, PluginRegistry_1.usePluginRegistry)();
-    return plugins[pluginType][definition.kind];
+    const { plugins } = (0, legacy_1.usePluginRegistry)();
+    return plugins[pluginType][kind];
 }
 exports.usePlugin = usePlugin;

package/dist/cjs/components/PluginRegistry/PluginRegistry.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePluginRegistry = exports.PluginRegistry = void 0;
+exports.PluginRegistry = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,44 +14,57 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+const core_1 = require("@perses-dev/core");
 const react_1 = require("react");
-const react_query_1 = require("react-query");
-const registry_state_1 = require("./registry-state");
+const cache_keys_1 = require("../../utils/cache-keys");
+const plugin_indexes_1 = require("./plugin-indexes");
+const plugin_registry_model_1 = require("./plugin-registry-model");
 /**
- * PluginRegistryContext provider that keeps track of all available plugins and
- * their implementations once they've been loaded.
+ * PluginRegistryContext provider that keeps track of all available plugins and provides an API for getting them or
+ * querying the metadata about them.
  */
 function PluginRegistry(props) {
-    const { children, getInstalledPlugins, importPluginModule } = props;
-    const installedPlugins = (0, react_query_1.useQuery)('installed-plugins', getInstalledPlugins);
-    const { loadablePlugins, plugins, register } = (0, registry_state_1.useRegistryState)(installedPlugins.data);
-    const loadPlugin = (0, react_1.useCallback)(async (pluginType, kind) => {
-        // Is it already loaded?
-        const plugin = plugins[pluginType][kind];
-        if (plugin !== undefined)
-            return;
-        // Is it a valid plugin we know about?
-        const resource = loadablePlugins[pluginType][kind];
+    const { getInstalledPlugins, importPluginModule, children } = props;
+    const getPluginIndexes = (0, plugin_indexes_1.usePluginIndexes)(getInstalledPlugins);
+    // De-dupe calls to import plugin modules
+    const importCache = (0, react_1.useRef)(new Map());
+    // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the
+    // callback below
+    const loadPluginModule = (0, core_1.useEvent)((resource) => {
+        let request = importCache.current.get(resource);
+        if (request === undefined) {
+            request = importPluginModule(resource);
+            importCache.current.set(resource, request);
+            // Remove failed requests from the cache so they can potentially be retried
+            request.catch(() => importCache.current.delete(resource));
+        }
+        return request;
+    });
+    const getPlugin = (0, react_1.useCallback)(async (pluginType, kind) => {
+        // Get the indexes of the installed plugins
+        const pluginIndexes = await getPluginIndexes();
+        // Figure out what module the plugin is in by looking in the index
+        const typeAndKindKey = (0, cache_keys_1.getTypeAndKindKey)(pluginType, kind);
+        const resource = pluginIndexes.pluginResourcesByTypeAndKind.get(typeAndKindKey);
         if (resource === undefined) {
-            throw new Error(`No ${pluginType} plugin is available for kind ${kind}`);
+            throw new Error(`A ${pluginType} plugin for kind '${kind}' is not installed`);
+        }
+        // Treat the plugin module as a bunch of named exports that have plugins
+        const pluginModule = (await loadPluginModule(resource));
+        // We currently assume that plugin modules will have named exports that match the kinds they handle
+        const plugin = pluginModule[kind];
+        if (plugin === undefined) {
+            throw new Error(`The ${pluginType} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`);
         }
-        // Load and register the resource
-        const pluginModule = await importPluginModule(resource);
-        register(pluginModule);
-    }, [plugins, loadablePlugins, importPluginModule, register]);
-    const registry = (0, react_1.useMemo)(() => ({ plugins, loadPlugin: installedPlugins.isLoading ? undefined : loadPlugin }), [installedPlugins.isLoading, plugins, loadPlugin]);
-    return (0, jsx_runtime_1.jsx)(PluginRegistryContext.Provider, { value: registry, children: children });
+        return plugin;
+    }, [getPluginIndexes, loadPluginModule]);
+    const listPluginMetadata = (0, react_1.useCallback)(async (pluginType) => {
+        var _a;
+        const pluginIndexes = await getPluginIndexes();
+        return (_a = pluginIndexes.pluginMetadataByType.get(pluginType)) !== null && _a !== void 0 ? _a : [];
+    }, [getPluginIndexes]);
+    // Create the registry's context value and render
+    const context = (0, react_1.useMemo)(() => ({ getPlugin, listPluginMetadata }), [getPlugin, listPluginMetadata]);
+    return (0, jsx_runtime_1.jsx)(plugin_registry_model_1.PluginRegistryContext.Provider, { value: context, children: children });
 }
 exports.PluginRegistry = PluginRegistry;
-const PluginRegistryContext = (0, react_1.createContext)(undefined);
-/**
- * Gets the PluginRegistryContext, throwing if the provider is missing.
- */
-function usePluginRegistry() {
-    const ctx = (0, react_1.useContext)(PluginRegistryContext);
-    if (ctx === undefined) {
-        throw new Error('No PluginRegistry context found. Did you forget a Provider?');
-    }
-    return ctx;
-}
-exports.usePluginRegistry = usePluginRegistry;

package/dist/cjs/components/PluginRegistry/PluginRegistry.test.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const plugins_1 = require("../../runtime/plugins");
+const render_1 = require("../../test/render");
+const PluginRegistry_1 = require("./PluginRegistry");
+const test_plugins_1 = require("./test-plugins");
+describe('PluginRegistry', () => {
+    const renderPluginRegistry = (children) => {
+        (0, render_1.renderWithContext)((0, jsx_runtime_1.jsx)(PluginRegistry_1.PluginRegistry, { ...test_plugins_1.testRegistryProps, children: children }));
+    };
+    it('can load a plugin that exists', async () => {
+        renderPluginRegistry((0, jsx_runtime_1.jsx)(PluginConsumer, { pluginType: "Variable", kind: "ErnieVariable" }));
+        const hasPlugin = await react_1.screen.findByText('Has plugin: true', undefined, { timeout: 3000 });
+        expect(hasPlugin).toBeInTheDocument();
+    });
+    it('errors when plugin is not installed', async () => {
+        // This plugin is not in the test metadata at all
+        renderPluginRegistry((0, jsx_runtime_1.jsx)(PluginConsumer, { pluginType: "GraphQuery", kind: "NotInstalled" }));
+        const error = await react_1.screen.findByText(/error:/i);
+        expect(error).toBeInTheDocument();
+        expect(error).toHaveTextContent(/not installed/i);
+    });
+    it('errors when plugin is missing from the module', async () => {
+        // This plugin is in the test metadata, but the code is missing from the module
+        renderPluginRegistry((0, jsx_runtime_1.jsx)(PluginConsumer, { pluginType: "Variable", kind: "MissingErnieVariable" }));
+        const error = await react_1.screen.findByText(/error:/i);
+        expect(error).toBeInTheDocument();
+        expect(error).toHaveTextContent(/missing/i);
+    });
+    it('lists metadata for plugin metadata that exists', async () => {
+        // There should be 3 variable plugins across both test modules
+        renderPluginRegistry((0, jsx_runtime_1.jsx)(MetadataConsumer, { pluginType: "Variable" }));
+        const table = await react_1.screen.findByRole('table');
+        expect(table).toBeInTheDocument();
+        const rows = react_1.screen.getAllByRole('row');
+        expect(rows).toHaveLength(3);
+    });
+    it('lists metadata for plugin types with no plugins available', async () => {
+        // There are no GraphQuery plugins in any of the test modules
+        renderPluginRegistry((0, jsx_runtime_1.jsx)(MetadataConsumer, { pluginType: "GraphQuery" }));
+        const table = await react_1.screen.findByRole('table');
+        expect(table).toBeInTheDocument();
+        const rows = react_1.screen.queryAllByRole('row');
+        expect(rows).toHaveLength(0);
+    });
+});
+// A helper component for testing the PluginRegistry by calling usePlugin to load a plugin
+const PluginConsumer = (props) => {
+    const { plugin, isLoading, error } = (0, plugins_1.usePlugin)(props.pluginType, props.kind);
+    if (error) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Error: ", error.message] });
+    }
+    if (isLoading) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Loading" });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { children: ["Has plugin: ", (plugin !== undefined).toString()] });
+};
+// A helper component for testing the PluginRegistry metadata APIs by calling useListPluginMetadata
+const MetadataConsumer = (props) => {
+    const { pluginMetadata, isLoading, error } = (0, plugins_1.useListPluginMetadata)(props.pluginType);
+    if (error) {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Error: ", error.message] });
+    }
+    if (isLoading) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Loading" });
+    }
+    if (pluginMetadata === undefined) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("table", { children: (0, jsx_runtime_1.jsx)("tbody", { children: pluginMetadata.map((item) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: item.pluginType }), (0, jsx_runtime_1.jsx)("td", { children: item.kind }), (0, jsx_runtime_1.jsx)("td", { children: item.display.name }), (0, jsx_runtime_1.jsx)("td", { children: item.display.description })] }, item.kind))) }) }));
+};

package/dist/cjs/components/PluginRegistry/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -26,4 +26,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./plugin-registry-model"), exports);
 __exportStar(require("./PluginRegistry"), exports);

package/dist/cjs/components/PluginRegistry/legacy/PluginRegistry.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePluginRegistry = exports.PluginRegistry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const react_query_1 = require("react-query");
+const registry_state_1 = require("./registry-state");
+/**
+ * PluginRegistryContext provider that keeps track of all available plugins and
+ * their implementations once they've been loaded.
+ */
+function PluginRegistry(props) {
+    const { children, getInstalledPlugins, importPluginModule } = props;
+    const installedPlugins = (0, react_query_1.useQuery)('installed-plugins', getInstalledPlugins);
+    const { loadablePlugins, plugins, register } = (0, registry_state_1.useRegistryState)(installedPlugins.data);
+    const loadPlugin = (0, react_1.useCallback)(async (pluginType, kind) => {
+        // Is it already loaded?
+        const plugin = plugins[pluginType][kind];
+        if (plugin !== undefined)
+            return;
+        // Is it a valid plugin we know about?
+        const resource = loadablePlugins[pluginType][kind];
+        if (resource === undefined) {
+            throw new Error(`No ${pluginType} plugin is available for kind ${kind}`);
+        }
+        // Load and register the resource
+        const pluginModule = await importPluginModule(resource);
+        register(resource, pluginModule);
+    }, [plugins, loadablePlugins, importPluginModule, register]);
+    const registry = (0, react_1.useMemo)(() => ({ plugins, loadPlugin: installedPlugins.isLoading ? undefined : loadPlugin }), [installedPlugins.isLoading, plugins, loadPlugin]);
+    return (0, jsx_runtime_1.jsx)(PluginRegistryContext.Provider, { value: registry, children: children });
+}
+exports.PluginRegistry = PluginRegistry;
+const PluginRegistryContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the PluginRegistryContext, throwing if the provider is missing.
+ */
+function usePluginRegistry() {
+    const ctx = (0, react_1.useContext)(PluginRegistryContext);
+    if (ctx === undefined) {
+        throw new Error('No PluginRegistry context found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.usePluginRegistry = usePluginRegistry;

package/dist/cjs/components/PluginRegistry/legacy/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PluginRegistry"), exports);

package/dist/cjs/components/PluginRegistry/{registry-state.js → legacy/registry-state.js}

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -15,8 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRegistryState = void 0;
 const react_1 = require("react");
 const use_immer_1 = require("use-immer");
-const model_1 = require("../../model");
-const create_plugin_1 = require("./create-plugin");
+const model_1 = require("../../../model");
 /**
  * Hook for setting up plugin registry state. Returns the state, plus a function
  * for registering plugins with that state.
@@ -32,12 +31,9 @@ function useRegistryState(installedPlugins) {
         // If no plugins installed or waiting on that data, nothing else to do
         if (installedPlugins === undefined)
             return loadableProps;
-        const addToLoadable = (resource) => {
-            const supportedKinds = resource.spec.supported_kinds;
-            for (const kind in supportedKinds) {
-                const pluginType = supportedKinds[kind];
-                if (pluginType === undefined)
-                    continue;
+        for (const resource of installedPlugins) {
+            for (const plugin of resource.spec.plugins) {
+                const { pluginType, kind } = plugin;
                 const map = loadableProps[pluginType];
                 if (map[kind] !== undefined) {
                     console.warn(`Got multiple ${pluginType} plugin definitions for kind ${kind}`);
@@ -45,9 +41,6 @@ function useRegistryState(installedPlugins) {
                 }
                 map[kind] = resource;
             }
-        };
-        for (const resource of installedPlugins) {
-            addToLoadable(resource);
         }
         return loadableProps;
     }, [installedPlugins]);
@@ -58,40 +51,47 @@ function useRegistryState(installedPlugins) {
         }
         return loadedPlugins;
     });
-    // Create the register callback to pass to the module's setup function
-    const registerPlugin = (0, react_1.useCallback)((config) => {
-        switch (config.pluginType) {
-            case 'Variable':
-                setPlugins((draft) => {
-                    draft.Variable[config.kind] = (0, create_plugin_1.createVariablePlugin)(config);
-                });
-                return;
-            case 'Panel':
-                setPlugins((draft) => {
-                    draft.Panel[config.kind] = (0, create_plugin_1.createPanelPlugin)(config);
-                });
-                return;
-            case 'GraphQuery':
-                setPlugins((draft) => {
-                    draft.GraphQuery[config.kind] = (0, create_plugin_1.createGraphQueryPlugin)(config);
-                });
-                return;
-            default:
-                const exhaustive = config;
-                throw new Error(`Unhandled plugin config: ${exhaustive}`);
-        }
-    }, [setPlugins]);
     const registeredModules = (0, react_1.useRef)(new Set());
-    const register = (0, react_1.useCallback)((pluginModule) => {
+    const register = (0, react_1.useCallback)((resource, pluginModule) => {
         // De-dupe register calls in case multiple plugin loading boundaries
         // are waiting for the same module in parallel
         if (registeredModules.current.has(pluginModule)) {
             return;
         }
-        // Call the setup function and remember it's been registered
-        pluginModule.setup(registerPlugin);
+        // Treat plugin module as JS module with named exports that are each a Plugin
+        const plugins = pluginModule;
+        setPlugins((draft) => {
+            // Look for all the plugins specified in the metadata
+            for (const pluginMetadata of resource.spec.plugins) {
+                // Assume that plugins will be exported under the same named export as the kind they handle
+                // TODO: Do we need to allow for different named exports and an option in the metadata to tell us the name?
+                const { pluginType, kind } = pluginMetadata;
+                const plugin = plugins[kind];
+                if (plugin === undefined) {
+                    // TODO: How to handle missing plugins?
+                    console.warn(`Could not find ${pluginType} plugin for kind '${kind}' in ${resource.metadata.name}`);
+                    continue;
+                }
+                // Add to registry state
+                switch (pluginType) {
+                    case 'Variable':
+                        draft.Variable[kind] = plugin;
+                        break;
+                    case 'Panel':
+                        draft.Panel[kind] = plugin;
+                        break;
+                    case 'GraphQuery':
+                        draft.GraphQuery[kind] = plugin;
+                        break;
+                    default:
+                        const exhaustive = pluginType;
+                        throw new Error(`Unhandled plugin config: ${exhaustive}`);
+                }
+            }
+        });
+        // Remember this module has been registered
         registeredModules.current.add(pluginModule);
-    }, [registerPlugin]);
+    }, [setPlugins]);
     return { loadablePlugins, plugins, register };
 }
 exports.useRegistryState = useRegistryState;

package/dist/cjs/components/PluginRegistry/plugin-indexes.js

@@ -0,0 +1,67 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePluginIndexes = void 0;
+const core_1 = require("@perses-dev/core");
+const react_1 = require("react");
+const cache_keys_1 = require("../../utils/cache-keys");
+/**
+ * Returns an async callback for getting indexes of the installed plugin data.
+ */
+function usePluginIndexes(getInstalledPlugins) {
+    // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop
+    // and we want a stable reference for the callback below)
+    const createPluginIndexes = (0, core_1.useEvent)(async () => {
+        const installedPlugins = await getInstalledPlugins();
+        // Create the two indexes from the installed plugins
+        const pluginResourcesByTypeAndKind = new Map();
+        const pluginMetadataByType = new Map();
+        for (const resource of installedPlugins) {
+            for (const pluginMetadata of resource.spec.plugins) {
+                const { pluginType, kind } = pluginMetadata;
+                // Index the plugin by type and kind to point at the module that contains it
+                const key = (0, cache_keys_1.getTypeAndKindKey)(pluginType, kind);
+                if (pluginResourcesByTypeAndKind.has(key)) {
+                    console.warn(`Got more than one ${pluginType} plugin for kind ${kind}`);
+                }
+                pluginResourcesByTypeAndKind.set(key, resource);
+                // Index the metadata by plugin type
+                let list = pluginMetadataByType.get(pluginType);
+                if (list === undefined) {
+                    list = [];
+                    pluginMetadataByType.set(pluginType, list);
+                }
+                list.push(pluginMetadata);
+            }
+        }
+        return {
+            pluginResourcesByTypeAndKind,
+            pluginMetadataByType,
+        };
+    });
+    // De-dupe creating plugin indexes (i.e. requests to get installed plugins)
+    const pluginIndexesCache = (0, react_1.useRef)(undefined);
+    const getPluginIndexes = (0, react_1.useCallback)(() => {
+        let request = pluginIndexesCache.current;
+        if (request === undefined) {
+            request = createPluginIndexes();
+            pluginIndexesCache.current = request;
+            // Remove failed requests from the cache so they can potentially be retried
+            request.catch(() => pluginIndexesCache.current === undefined);
+        }
+        return request;
+    }, [createPluginIndexes]);
+    return getPluginIndexes;
+}
+exports.usePluginIndexes = usePluginIndexes;

package/dist/cjs/components/PluginRegistry/plugin-registry-model.js

@@ -0,0 +1,25 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePluginRegistry = exports.PluginRegistryContext = void 0;
+const react_1 = require("react");
+exports.PluginRegistryContext = (0, react_1.createContext)(undefined);
+function usePluginRegistry() {
+    const ctx = (0, react_1.useContext)(exports.PluginRegistryContext);
+    if (ctx === undefined) {
+        throw new Error('PluginRegistryContext not found. Did you forget a provider?');
+    }
+    return ctx;
+}
+exports.usePluginRegistry = usePluginRegistry;

package/dist/cjs/components/PluginRegistry/test-plugins/bert/index.js

@@ -0,0 +1,26 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BertPanel2 = exports.BertPanel1 = void 0;
+// Dummy plugins to test loading
+exports.BertPanel1 = {
+    PanelComponent: () => null,
+    OptionsEditorComponent: () => null,
+    createInitialOptions: () => ({}),
+};
+exports.BertPanel2 = {
+    PanelComponent: () => null,
+    OptionsEditorComponent: () => null,
+    createInitialOptions: () => ({}),
+};

package/dist/cjs/components/PluginRegistry/test-plugins/bert/plugin.json

@@ -0,0 +1,32 @@
+{
+    "kind": "PluginModule",
+    "metadata": { "name": "Bert" },
+    "spec": {
+        "plugins": [
+            {
+                "pluginType": "Panel",
+                "kind": "BertPanel1",
+                "display": {
+                    "name": "Bert Panel 1",
+                    "description": ""
+                }
+            },
+            {
+                "pluginType": "Panel",
+                "kind": "BertPanel2",
+                "display": {
+                    "name": "Bert Panel 2",
+                    "description": ""
+                }
+            },
+            {
+                "pluginType": "Variable",
+                "kind": "BertVariable",
+                "display": {
+                    "name": "Bert Variable",
+                    "description": ""
+                }
+            }
+        ]
+    }
+}

package/dist/cjs/components/PluginRegistry/test-plugins/ernie/index.js

@@ -0,0 +1,23 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErnieVariable = void 0;
+const data = [
+    { label: 'Grover', value: 'Grover' },
+    { label: 'Snuffleupagus', value: 'Snuffleupagus' },
+];
+// Dummy plugin to test loading
+exports.ErnieVariable = {
+    useVariableOptions: () => ({ loading: false, error: undefined, data }),
+};