@perses-dev/plugin-system 0.3.0 → 0.3.1

package/dist/cjs/components/PluginBoundary.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@perses-dev/components");
+const PluginLoadingBoundary_1 = require("./PluginLoadingBoundary");
+/**
+ * Combination ErrorBoundary and PluginLoadingBoundary.
+ */
+function PluginBoundary(props) {
+    const { ErrorFallbackComponent, loadingFallback, children } = props;
+    return ((0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: ErrorFallbackComponent, children: (0, jsx_runtime_1.jsx)(PluginLoadingBoundary_1.PluginLoadingBoundary, { fallback: loadingFallback, children: children }) }));
+}
+exports.PluginBoundary = PluginBoundary;

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

@@ -0,0 +1,39 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginLoader = void 0;
+const react_query_1 = require("react-query");
+const PluginRegistry_1 = require("../PluginRegistry");
+/**
+ * Uses the PluginRegistry to load the specified plugin and throws any errors
+ * encountered while loading.
+ */
+function PluginLoader(props) {
+    const { pluginType, kind } = props;
+    // Load the plugin and throw any loading/not found errors
+    const { loadPlugin } = (0, PluginRegistry_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
+        if (loadPlugin === undefined) {
+            throw new Error('PluginRegistry loadPlugin not available');
+        }
+        return loadPlugin(pluginType, kind);
+    }, { enabled: loadPlugin !== undefined });
+    if (error !== undefined && error !== null) {
+        throw error;
+    }
+    return null;
+}
+exports.PluginLoader = PluginLoader;

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlugin = exports.usePluginLoadingBoundary = exports.PluginLoadingBoundary = void 0;
+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 PluginLoader_1 = require("./PluginLoader");
+/**
+ * Plugin dependencies are registered here by children. This takes care of loading
+ * those dependencies on demand and acts similar to React's Suspense in that it
+ * will show a loading fallback while those plugins are being loaded.
+ */
+function PluginLoadingBoundary(props) {
+    const { fallback, children } = props;
+    const { plugins } = (0, PluginRegistry_1.usePluginRegistry)();
+    // Keep track of all plugin dependencies registered by child components
+    const [dependencies, setDependencies] = (0, use_immer_1.useImmer)(() => {
+        const deps = {};
+        for (const pluginType of model_1.ALL_PLUGIN_TYPES) {
+            deps[pluginType] = {};
+        }
+        return deps;
+    });
+    // When children are rendered, they can register a dependency here to tell us
+    // what plugins they need so we can load them if necessary
+    const registerPluginDependency = (0, react_1.useCallback)((pluginType, kind) => {
+        setDependencies((draft) => {
+            draft[pluginType][kind] = true;
+        });
+    }, [setDependencies]);
+    const context = (0, react_1.useMemo)(() => ({ registerPluginDependency }), [registerPluginDependency]);
+    const { loaders, fragmentKey } = (0, react_1.useMemo)(() => {
+        let fragmentKey = '';
+        const loaders = [];
+        for (const pluginType of model_1.ALL_PLUGIN_TYPES) {
+            // Build an overall key for the dependencies by combining pluginType and
+            // kind of all dependencies
+            fragmentKey += `_${pluginType}:`;
+            const kinds = dependencies[pluginType];
+            for (const kind in kinds) {
+                fragmentKey += kind;
+                // Is this plugin already loaded?
+                const plugin = plugins[pluginType][kind];
+                if (plugin !== undefined)
+                    continue;
+                // Nope, add it to the loaders list
+                loaders.push((0, jsx_runtime_1.jsx)(PluginLoader_1.PluginLoader, { pluginType: pluginType, kind: kind }, `${pluginType}:${kind}`));
+            }
+        }
+        return { loaders, fragmentKey };
+    }, [plugins, dependencies]);
+    // All dependencies are loaded once we don't have any loaders to render
+    const isLoaded = loaders.length === 0;
+    return ((0, jsx_runtime_1.jsxs)(PluginLoadingBoundaryContext.Provider, { value: context, children: [loaders, isLoaded && (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children }, fragmentKey), isLoaded === false && fallback] }));
+}
+exports.PluginLoadingBoundary = PluginLoadingBoundary;
+const PluginLoadingBoundaryContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the PluginLoadingBoundary context and throws if the Provider is missing.
+ */
+function usePluginLoadingBoundary() {
+    const ctx = (0, react_1.useContext)(PluginLoadingBoundaryContext);
+    if (ctx === undefined) {
+        throw new Error(`PluginLoadingBoundary context not found. Did you forget a Provider?`);
+    }
+    return ctx;
+}
+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) {
+    // Tell the loading boundary about the dependency
+    const { registerPluginDependency } = usePluginLoadingBoundary();
+    (0, react_1.useEffect)(() => {
+        registerPluginDependency(pluginType, definition.kind);
+    }, [pluginType, definition.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];
+}
+exports.usePlugin = usePlugin;

package/dist/cjs/components/PluginLoadingBoundary/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("./PluginLoadingBoundary"), exports);

package/dist/cjs/components/PluginRegistry/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(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/create-plugin.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvalidPluginDefinitionError = exports.createGraphQueryPlugin = exports.createPanelPlugin = exports.createVariablePlugin = 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");
+/**
+ * Take a Variable plugin and wrap it so it works with AnyVariableDefinition,
+ * doing runtime checking of the definition before delegating to the plugin.
+ */
+function createVariablePlugin(config) {
+    // Create runtime validation function
+    const useRuntimeValidation = createValidationHook(config);
+    // Wrap hook with validation (TODO: Can this wrapper become generic for all
+    // plugin hooks?)
+    function useVariableOptions(definition) {
+        const { isValid, errorRef } = useRuntimeValidation();
+        if (isValid(definition)) {
+            return config.plugin.useVariableOptions(definition);
+        }
+        throw errorRef.current;
+    }
+    return {
+        useVariableOptions,
+    };
+}
+exports.createVariablePlugin = createVariablePlugin;
+/**
+ * Take a Panel plugin and wraps it so it works with AnyPanelDefinition, doing
+ * runtime checking of the definition before delegating to the plugin.
+ */
+function createPanelPlugin(config) {
+    const useRuntimeValidation = createValidationHook(config);
+    // Wrap PanelComponent from config with validation (TODO: Can this wrapper
+    // become generic for all Plugin components?)
+    function PanelComponent(props) {
+        const { definition, ...others } = props;
+        const { isValid, errorRef } = useRuntimeValidation();
+        if (isValid(definition)) {
+            const { PanelComponent } = config.plugin;
+            return (0, jsx_runtime_1.jsx)(PanelComponent, { definition: definition, ...others });
+        }
+        throw errorRef.current;
+    }
+    return {
+        PanelComponent,
+    };
+}
+exports.createPanelPlugin = createPanelPlugin;
+/**
+ * Take a GraphQuery plugin and wrap it so it works with AnyChartQueryDefinition,
+ * doing runtime validation of the definition before delegating to the plugin.
+ */
+function createGraphQueryPlugin(config) {
+    // Create runtime validation function
+    const useRuntimeValidation = createValidationHook(config);
+    // Wrap hook with validation (TODO: Can this wrapper become generic for all
+    // plugin hooks?)
+    function useGraphQuery(definition) {
+        const { isValid, errorRef } = useRuntimeValidation();
+        if (isValid(definition)) {
+            return config.plugin.useGraphQuery(definition);
+        }
+        throw errorRef.current;
+    }
+    return {
+        useGraphQuery,
+    };
+}
+exports.createGraphQueryPlugin = createGraphQueryPlugin;
+// Create a hook for doing runtime validation of a plugin definition, given the
+// plugin's config
+function createValidationHook(config) {
+    const useRuntimeValidation = () => {
+        // Ref for storing any validation errors as a side-effect of calling isValid
+        const errorRef = (0, react_1.useRef)(undefined);
+        // Type guard that validates the generic runtime plugin definition data
+        // is correct for Kind/Options
+        const isValid = (definition) => {
+            var _a, _b;
+            // If they don't give us a validate function in the plugin config, not
+            // much we can do so just assume we're OK
+            const validateErrors = (_b = (_a = config.validate) === null || _a === void 0 ? void 0 : _a.call(config, definition)) !== null && _b !== void 0 ? _b : [];
+            if (validateErrors.length === 0)
+                return true;
+            errorRef.current = new InvalidPluginDefinitionError(config.pluginType, config.kind, validateErrors);
+            return false;
+        };
+        return {
+            isValid,
+            errorRef,
+        };
+    };
+    return useRuntimeValidation;
+}
+/**
+ * Thrown when ConfigData fails the runtime validation check for a plugin.
+ */
+class InvalidPluginDefinitionError extends Error {
+    constructor(pluginType, kind, validateErrors) {
+        super(`Invalid ${pluginType} plugin definition for kind ${kind}`);
+        this.pluginType = pluginType;
+        this.kind = kind;
+        this.validateErrors = validateErrors;
+    }
+}
+exports.InvalidPluginDefinitionError = InvalidPluginDefinitionError;

package/dist/cjs/components/PluginRegistry/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

@@ -0,0 +1,97 @@
+"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.
+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");
+/**
+ * Hook for setting up plugin registry state. Returns the state, plus a function
+ * for registering plugins with that state.
+ */
+function useRegistryState(installedPlugins) {
+    // Go through all installed plugins and bundled plugins and build an index of
+    // those resources by type and kind
+    const loadablePlugins = (0, react_1.useMemo)(() => {
+        const loadableProps = {};
+        for (const pluginType of model_1.ALL_PLUGIN_TYPES) {
+            loadableProps[pluginType] = {};
+        }
+        // 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;
+                const map = loadableProps[pluginType];
+                if (map[kind] !== undefined) {
+                    console.warn(`Got multiple ${pluginType} plugin definitions for kind ${kind}`);
+                    continue;
+                }
+                map[kind] = resource;
+            }
+        };
+        for (const resource of installedPlugins) {
+            addToLoadable(resource);
+        }
+        return loadableProps;
+    }, [installedPlugins]);
+    const [plugins, setPlugins] = (0, use_immer_1.useImmer)(() => {
+        const loadedPlugins = {};
+        for (const pluginType of model_1.ALL_PLUGIN_TYPES) {
+            loadedPlugins[pluginType] = {};
+        }
+        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) => {
+        // 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);
+        registeredModules.current.add(pluginModule);
+    }, [registerPlugin]);
+    return { loadablePlugins, plugins, register };
+}
+exports.useRegistryState = useRegistryState;

package/dist/cjs/components/index.js

@@ -0,0 +1,31 @@
+"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("./PluginBoundary"), exports);
+__exportStar(require("./PluginLoadingBoundary"), exports);
+__exportStar(require("./PluginRegistry"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,31 @@
+"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("./components"), exports);
+__exportStar(require("./model"), exports);
+__exportStar(require("./runtime"), exports);

package/dist/cjs/model/graph-queries.js

@@ -0,0 +1,28 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraphQuery = void 0;
+const PluginLoadingBoundary_1 = require("../components/PluginLoadingBoundary");
+/**
+ * Use a Graph Query's results from a graph query plugin at runtime.
+ */
+const useGraphQuery = (definition) => {
+    const plugin = (0, PluginLoadingBoundary_1.usePlugin)('GraphQuery', definition);
+    if (plugin === undefined) {
+        // Provide default values while the plugin is being loaded
+        return { loading: true };
+    }
+    return plugin.useGraphQuery(definition);
+};
+exports.useGraphQuery = useGraphQuery;

package/dist/cjs/model/index.js

@@ -0,0 +1,32 @@
+"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("./graph-queries"), exports);
+__exportStar(require("./panels"), exports);
+__exportStar(require("./plugins"), exports);
+__exportStar(require("./variables"), exports);

package/dist/cjs/model/panels.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PluginLoadingBoundary_1 = require("../components/PluginLoadingBoundary");
+/**
+ * Renders a PanelComponent from a panel plugin at runtime.
+ */
+const PanelComponent = (props) => {
+    const plugin = (0, PluginLoadingBoundary_1.usePlugin)('Panel', props.definition);
+    if (plugin === undefined) {
+        return null;
+    }
+    const { PanelComponent: PluginComponent } = plugin;
+    return (0, jsx_runtime_1.jsx)(PluginComponent, { ...props });
+};
+exports.PanelComponent = PanelComponent;

package/dist/cjs/model/plugins.js

@@ -0,0 +1,19 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ALL_PLUGIN_TYPES = void 0;
+/**
+ * All supported plugin type values as an array for use at runtime.
+ */
+exports.ALL_PLUGIN_TYPES = ['Variable', 'Panel', 'GraphQuery'];

package/dist/cjs/model/variables.js

@@ -0,0 +1,28 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVariableOptions = void 0;
+const PluginLoadingBoundary_1 = require("../components/PluginLoadingBoundary");
+/**
+ * Use the variable options from a variable plugin at runtime.
+ */
+const useVariableOptions = (definition) => {
+    const plugin = (0, PluginLoadingBoundary_1.usePlugin)('Variable', definition);
+    if (plugin === undefined) {
+        // Provide default values while the plugin is being loaded
+        return { data: [], loading: true };
+    }
+    return plugin.useVariableOptions(definition);
+};
+exports.useVariableOptions = useVariableOptions;

package/dist/cjs/runtime/datasources.js

@@ -0,0 +1,28 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatasources = exports.DatasourcesContext = void 0;
+const react_1 = require("react");
+exports.DatasourcesContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the Datasources at runtime.
+ */
+function useDatasources() {
+    const ctx = (0, react_1.useContext)(exports.DatasourcesContext);
+    if (ctx === undefined) {
+        throw new Error('No DatasourcesContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useDatasources = useDatasources;

package/dist/cjs/runtime/index.js

@@ -0,0 +1,31 @@
+"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("./datasources"), exports);
+__exportStar(require("./template-variables"), exports);
+__exportStar(require("./time-range"), exports);

package/dist/cjs/runtime/template-variables.js

@@ -0,0 +1,28 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTemplateVariables = exports.TemplateVariablesContext = void 0;
+const react_1 = require("react");
+exports.TemplateVariablesContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets TemplateVariables at runtime.
+ */
+function useTemplateVariables() {
+    const ctx = (0, react_1.useContext)(exports.TemplateVariablesContext);
+    if (ctx === undefined) {
+        throw new Error('No TemplateVariablesContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useTemplateVariables = useTemplateVariables;

package/dist/cjs/runtime/time-range.js

@@ -0,0 +1,28 @@
+"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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeRange = exports.TimeRangeContext = void 0;
+const react_1 = require("react");
+exports.TimeRangeContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the current TimeRange at runtime.
+ */
+function useTimeRange() {
+    const ctx = (0, react_1.useContext)(exports.TimeRangeContext);
+    if (ctx === undefined) {
+        throw new Error('No TimeRangeContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useTimeRange = useTimeRange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/plugin-system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "The plugin feature in Pereses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -12,17 +12,19 @@
     "url": "https://github.com/perses/perses/issues"
   },
   "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "tsc",
+    "build": "tsc --build",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "test": "echo 'no test to run' && exit 0",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.3.0",
-    "@perses-dev/core": "^0.3.0",
+    "@perses-dev/components": "^0.3.1",
+    "@perses-dev/core": "^0.3.1",
     "immer": "^9.0.12",
     "use-immer": "^0.6.0"
   },