@perses-dev/plugin-system 0.54.0-beta.1 → 0.54.0-beta.3

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

@@ -25,6 +25,7 @@ const _react = require("react");
 const _runtime = require("../../runtime");
 const _utils = require("../../utils");
 const _pluginindexes = require("./plugin-indexes");
+const _getPluginSearchHelper = require("./getPluginSearchHelper");
 function PluginRegistry(props) {
     const { pluginLoader: { getInstalledPlugins, importPluginModule }, children, defaultPluginKinds } = props;
     const getPluginIndexes = (0, _pluginindexes.usePluginIndexes)(getInstalledPlugins);
@@ -42,23 +43,18 @@ function PluginRegistry(props) {
         }
         return request;
     });
-    const getPlugin = (0, _react.useCallback)(async (kind, name)=>{
-        // Get the indexes of the installed plugins
+    const getPlugin = (0, _react.useCallback)(async (compoundKeyObj)=>{
         const pluginIndexes = await getPluginIndexes();
-        // Figure out what module the plugin is in by looking in the index
-        const typeAndKindKey = (0, _pluginindexes.getTypeAndKindKey)(kind, name);
-        const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);
-        if (resource === undefined) {
-            throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
+        const { kind, name } = compoundKeyObj;
+        const candidateKeys = (0, _getPluginSearchHelper.resolvePluginKeys)(pluginIndexes.pluginResourcesByNameKindRegistryVersion.keys(), compoundKeyObj);
+        for (const resourceKey of candidateKeys){
+            const resource = pluginIndexes.pluginResourcesByNameKindRegistryVersion.get(resourceKey);
+            if (!resource) continue;
+            const pluginModule = await loadPluginModule(resource);
+            const plugin = pluginModule?.[resourceKey];
+            if (plugin) return plugin;
         }
-        // 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[name];
-        if (plugin === undefined) {
-            throw new Error(`The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`);
-        }
-        return plugin;
+        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
     }, [
         getPluginIndexes,
         loadPluginModule

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

@@ -0,0 +1,92 @@
+// Copyright 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "resolvePluginKeys", {
+    enumerable: true,
+    get: function() {
+        return resolvePluginKeys;
+    }
+});
+const _semver = require("semver");
+const _model = require("../../model");
+const PLUGIN_LOOKUP_PRECEDENCE_LOGIC = {
+    registryOverVersion: false
+};
+const resolvePluginKeys = (allKeys, query, precedenceLogic = PLUGIN_LOOKUP_PRECEDENCE_LOGIC)=>{
+    const { kind, name, version, registry } = query;
+    const candidates = [];
+    // Exact match first when version or registry is specified
+    if (version || registry) {
+        candidates.push((0, _model.getPluginModuleCompoundKey)({
+            kind,
+            name,
+            registry,
+            version
+        }));
+    }
+    const latestWithRegistry = {
+        key: '',
+        version: ''
+    };
+    const latestWithoutRegistry = {
+        key: '',
+        version: ''
+    };
+    const prefix = `${kind}:${name}:`;
+    for (const key of allKeys){
+        if (!key.startsWith(prefix)) continue;
+        const split = key.split(':');
+        if (split.length !== 4) {
+            console.warn(`An invalid Plugin Resource key detected during default plugin lookup: ${key}`);
+            continue;
+        }
+        const [, , reg, ver] = split;
+        if (!ver) {
+            console.warn(`An invalid Plugin Resource key detected during default plugin lookup: ${key}`);
+            continue;
+        }
+        if (reg) {
+            if (!latestWithRegistry.key || (0, _semver.gt)(ver, latestWithRegistry.version)) {
+                latestWithRegistry.key = key;
+                latestWithRegistry.version = ver;
+            }
+        } else {
+            if (!latestWithoutRegistry.key || (0, _semver.gt)(ver, latestWithoutRegistry.version)) {
+                latestWithoutRegistry.key = key;
+                latestWithoutRegistry.version = ver;
+            }
+        }
+    }
+    // Determine the best fallback key from the two buckets
+    let fallbackKey;
+    if (latestWithRegistry.key && latestWithoutRegistry.key) {
+        const { registryOverVersion } = precedenceLogic;
+        if ((0, _semver.gt)(latestWithRegistry.version, latestWithoutRegistry.version)) {
+            fallbackKey = latestWithRegistry.key;
+        } else if ((0, _semver.gt)(latestWithoutRegistry.version, latestWithRegistry.version)) {
+            fallbackKey = latestWithoutRegistry.key;
+        } else {
+            // Versions are equal — use the tie-breaker
+            fallbackKey = registryOverVersion ? latestWithRegistry.key : latestWithoutRegistry.key;
+        }
+    } else {
+        fallbackKey = latestWithRegistry.key || latestWithoutRegistry.key || undefined;
+    }
+    if (fallbackKey && !candidates.includes(fallbackKey)) {
+        candidates.push(fallbackKey);
+    }
+    return candidates;
+};

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

@@ -21,14 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get getTypeAndKindKey () {
-        return getTypeAndKindKey;
+    get getPluginModuleCompoundKey () {
+        return _model.getPluginModuleCompoundKey;
     },
     get usePluginIndexes () {
         return usePluginIndexes;
     }
 });
 const _react = require("react");
+const _model = require("../../model");
 const _utils = require("../../utils");
 function usePluginIndexes(getInstalledPlugins) {
     // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop
@@ -36,17 +37,22 @@ function usePluginIndexes(getInstalledPlugins) {
     const createPluginIndexes = (0, _utils.useEvent)(async ()=>{
         const installedPlugins = await getInstalledPlugins();
         // Create the two indexes from the installed plugins
-        const pluginResourcesByNameAndKind = new Map();
+        const pluginResourcesByNameKindRegistryVersion = new Map();
         const pluginMetadataByKind = new Map();
         for (const resource of installedPlugins){
+            const { metadata: { version, registry } } = resource;
             for (const pluginMetadata of resource.spec.plugins){
                 const { kind, spec: { name } } = pluginMetadata;
-                // Index the plugin by type and kind to point at the module that contains it
-                const key = getTypeAndKindKey(kind, name);
-                if (pluginResourcesByNameAndKind.has(key)) {
-                    console.warn(`Got more than one ${kind} plugin for kind ${name}`);
+                const key = (0, _model.getPluginModuleCompoundKey)({
+                    kind,
+                    name,
+                    registry,
+                    version
+                });
+                if (pluginResourcesByNameKindRegistryVersion.has(key)) {
+                    console.warn(`Got more than one ${kind} plugin for kind ${name}, registry '${registry || 'undefined'}', and version '${version || 'undefined'}'`);
                 }
-                pluginResourcesByNameAndKind.set(key, resource);
+                pluginResourcesByNameKindRegistryVersion.set(key, resource);
                 // Index the metadata by plugin type
                 let list = pluginMetadataByKind.get(kind);
                 if (list === undefined) {
@@ -60,7 +66,7 @@ function usePluginIndexes(getInstalledPlugins) {
             }
         }
         return {
-            pluginResourcesByNameAndKind,
+            pluginResourcesByNameKindRegistryVersion,
             pluginMetadataByKind
         };
     });
@@ -72,7 +78,7 @@ function usePluginIndexes(getInstalledPlugins) {
             request = createPluginIndexes();
             pluginIndexesCache.current = request;
             // Remove failed requests from the cache so they can potentially be retried
-            request.catch(()=>pluginIndexesCache.current === undefined);
+            request.catch(()=>pluginIndexesCache.current = undefined);
         }
         return request;
     }, [
@@ -80,6 +86,3 @@ function usePluginIndexes(getInstalledPlugins) {
     ]);
     return getPluginIndexes;
 }
-function getTypeAndKindKey(kind, name) {
-    return `${kind}:${name}`;
-}

package/dist/cjs/components/Variables/variable-model.js

@@ -32,9 +32,13 @@ _export(exports, {
     },
     get useListVariablePluginValues () {
         return useListVariablePluginValues;
+    },
+    get useResolveListVariableValues () {
+        return useResolveListVariableValues;
     }
 });
 const _reactquery = require("@tanstack/react-query");
+const _react = require("react");
 const _runtime = require("../../runtime");
 function filterVariableList(data, capturedRegexp) {
     const result = [];
@@ -61,54 +65,136 @@ function filterVariableList(data, capturedRegexp) {
     }
     return result;
 }
-function useListVariablePluginValues(definition) {
-    const { data: variablePlugin } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
+function useVariablePluginContext() {
     const datasourceStore = (0, _runtime.useDatasourceStore)();
     const allVariables = (0, _runtime.useAllVariableValues)();
     const { absoluteTimeRange: timeRange } = (0, _runtime.useTimeRange)();
-    const variablePluginCtx = {
+    return {
         timeRange,
         datasourceStore,
         variables: allVariables
     };
-    const spec = definition.spec.plugin.spec;
+}
+const getVariableQueryConfig = (definition, variablePluginCtx, variablePlugin, enabled, onFetched)=>{
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
-    let dependsOnVariables = Object.keys(allVariables); // Default to all variables
-    if (variablePlugin?.dependsOn) {
-        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
-        dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;
-    }
-    // Exclude self variable to avoid circular dependency
-    dependsOnVariables = dependsOnVariables.filter((v)=>v !== definition.spec.name);
-    const variables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
-    let waitToLoad = false;
-    if (dependsOnVariables) {
-        waitToLoad = dependsOnVariables.some((v)=>variables[v]?.loading);
-    }
-    const variablesValueKey = getVariableValuesKey(variables);
-    return (0, _reactquery.useQuery)({
+    const variablesValueKey = getVariableValuesKey(variablePluginCtx.variables);
+    return {
         queryKey: [
             'variable',
             definition,
-            timeRange,
+            variablePluginCtx.timeRange,
             variablesValueKey
         ],
         queryFn: async ({ signal })=>{
-            const resp = await variablePlugin?.getVariableOptions(spec, {
-                datasourceStore,
-                variables,
-                timeRange
-            }, signal);
+            const resp = await variablePlugin?.getVariableOptions(definition.spec.plugin.spec, variablePluginCtx, signal);
             if (!resp?.data?.length) {
+                onFetched?.(definition.spec.name, [], definition);
                 return [];
             }
-            if (!capturingRegexp) {
-                return resp.data;
-            }
-            return filterVariableList(resp.data, capturingRegexp);
+            const options = capturingRegexp ? filterVariableList(resp.data, capturingRegexp) : resp.data;
+            onFetched?.(definition.spec.name, options, definition);
+            return options;
         },
-        enabled: !!variablePlugin || waitToLoad
+        enabled
+    };
+};
+function resolveDependsOnVariables(variablePlugin, variablePluginCtx, definition) {
+    if (variablePlugin?.dependsOn) {
+        const dependencies = variablePlugin.dependsOn(definition.spec.plugin.spec, variablePluginCtx);
+        return dependencies.variables ? dependencies.variables.filter((v)=>v !== definition.spec.name) : []; // Exclude self variable to avoid circular dependency and default to empty array to avoid deadlock
+    }
+    return [];
+}
+function useListVariablePluginValues(definition) {
+    const { data: variablePlugin } = (0, _runtime.usePlugin)('Variable', definition.spec.plugin.kind);
+    const variablePluginCtx = useVariablePluginContext();
+    const dependsOnVariables = resolveDependsOnVariables(variablePlugin, variablePluginCtx, definition);
+    const dependentVariables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
+    const waitToLoad = dependsOnVariables.some((v)=>dependentVariables[v]?.loading);
+    const ctx = {
+        ...variablePluginCtx,
+        variables: dependentVariables
+    };
+    return (0, _reactquery.useQuery)(getVariableQueryConfig(definition, ctx, variablePlugin, !!variablePlugin && !waitToLoad));
+}
+function resolveDefaultValue(definition, options) {
+    const { defaultValue, allowMultiple } = definition.spec;
+    if (defaultValue !== undefined && defaultValue !== null) {
+        return defaultValue;
+    }
+    if (options[0]?.value) {
+        const first = options[0].value;
+        return allowMultiple ? [
+            first
+        ] : first;
+    }
+    return allowMultiple ? [] : '';
+}
+function useResolveListVariableValues(variableDefinitions) {
+    const { timeRange, datasourceStore, variables: outerVariableValues } = useVariablePluginContext();
+    const listVariables = (0, _react.useMemo)(()=>variableDefinitions.filter((v)=>v.kind === 'ListVariable'), [
+        variableDefinitions
+    ]);
+    const pluginResults = (0, _runtime.usePlugins)('Variable', listVariables.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
+    // Resolved variable state. Updated by onFetched when queries resolve.
+    // Needed because of dependencies between variables that require multiple rounds of fetching.
+    const [resolvedVariables, setResolvedVariables] = (0, _react.useState)({});
+    const allVariables = (0, _react.useMemo)(()=>{
+        return {
+            ...outerVariableValues,
+            ...resolvedVariables
+        };
+    }, [
+        outerVariableValues,
+        resolvedVariables
+    ]);
+    const onFetched = (0, _react.useCallback)((name, options, definition)=>{
+        setResolvedVariables((prev)=>({
+                ...prev,
+                [name]: {
+                    value: resolveDefaultValue(definition, options),
+                    loading: false,
+                    options
+                }
+            }));
+    }, []);
+    const queryResults = (0, _reactquery.useQueries)({
+        queries: listVariables.map((definition, index)=>{
+            const plugin = pluginResults[index]?.data;
+            const isPluginLoading = pluginResults[index]?.isLoading ?? true;
+            const dependsOn = resolveDependsOnVariables(plugin, {
+                timeRange,
+                datasourceStore,
+                variables: allVariables
+            }, definition);
+            const hasPendingDeps = dependsOn.some((v)=>resolvedVariables[v] === undefined && listVariables.some((lv)=>lv.spec.name === v) || allVariables[v]?.loading);
+            const dependentVariables = {};
+            for (const v of dependsOn){
+                const state = allVariables[v];
+                if (state) {
+                    dependentVariables[v] = state;
+                }
+            }
+            const ctx = {
+                timeRange,
+                datasourceStore,
+                variables: dependentVariables
+            };
+            return getVariableQueryConfig(definition, ctx, plugin, !hasPendingDeps && !isPluginLoading, onFetched);
+        })
     });
+    const initialVariableValues = (0, _react.useMemo)(()=>Object.fromEntries(Object.entries(allVariables).filter(([, state])=>state?.value !== undefined).map(([name, state])=>[
+                name,
+                state.value
+            ])), [
+        allVariables
+    ]);
+    return {
+        initialVariableValues,
+        isLoading: queryResults.some((r)=>r.isLoading)
+    };
 }
 function getVariableValuesKey(v) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');

package/dist/cjs/context/ValidationProvider.js

@@ -34,7 +34,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _spec = require("@perses-dev/spec");
-const _core = require("@perses-dev/core");
+const _client = require("@perses-dev/client");
 const ValidationSchemasContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useValidationSchemas() {
     const ctx = (0, _react.useContext)(ValidationSchemasContext);
@@ -44,11 +44,11 @@ function useValidationSchemas() {
     return ctx;
 }
 function ValidationProvider({ children }) {
-    const [datasourceEditorSchema, setDatasourceEditorSchema] = (0, _react.useState)(_core.datasourceDefinitionSchema);
+    const [datasourceEditorSchema, setDatasourceEditorSchema] = (0, _react.useState)(_client.datasourceDefinitionSchema);
     const [panelEditorSchema, setPanelEditorSchema] = (0, _react.useState)(_spec.panelEditorSchema); // TODO I don't get why this does not compile
     const [variableEditorSchema, setVariableEditorSchema] = (0, _react.useState)(_spec.variableDefinitionSchema);
     function setDatasourceEditorSchemaPlugin(pluginSchema) {
-        setDatasourceEditorSchema((0, _core.buildDatasourceDefinitionSchema)(pluginSchema));
+        setDatasourceEditorSchema((0, _client.buildDatasourceDefinitionSchema)(pluginSchema));
     }
     function setPanelEditorSchemaPlugin(pluginSchema) {
         setPanelEditorSchema((0, _spec.buildPanelEditorSchema)(pluginSchema));

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

@@ -0,0 +1,16 @@
+// Copyright 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/model/index.js

@@ -27,6 +27,8 @@ _export_star(require("./trace-queries"), exports);
 _export_star(require("./profile-queries"), exports);
 _export_star(require("./variables"), exports);
 _export_star(require("./calculations"), exports);
+_export_star(require("./alerts-queries"), exports);
+_export_star(require("./silences-queries"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/log-volume-utils.js

@@ -1,3 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "calculateVolumeInterval", {
+    enumerable: true,
+    get: function() {
+        return calculateVolumeInterval;
+    }
+});
 // Copyright 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.
@@ -11,16 +21,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 // Target number of bars for log volume histogram
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "calculateVolumeInterval", {
-    enumerable: true,
-    get: function() {
-        return calculateVolumeInterval;
-    }
-});
 const TARGET_HISTOGRAM_BARS = 40;
 // Standard intervals for histogram calculations (in milliseconds)
 const STANDARD_INTERVALS = [

package/dist/cjs/model/plugin-loading.js

@@ -20,21 +20,37 @@ Object.defineProperty(exports, "dynamicImportPluginLoader", {
         return dynamicImportPluginLoader;
     }
 });
+const _plugins = require("./plugins");
 function dynamicImportPluginLoader(plugins) {
-    const importMap = new Map(plugins.map((plugin)=>[
-            plugin.resource,
-            plugin.importPlugin
-        ]));
+    const importMap = new Map();
+    for (const p of plugins){
+        const { resource, resource: { kind, metadata: { name, registry, version } }, importPlugin } = p;
+        importMap.set((0, _plugins.getPluginModuleCompoundKey)({
+            kind,
+            name,
+            registry,
+            version
+        }), {
+            resource,
+            importPlugin
+        });
+    }
     return {
         async getInstalledPlugins () {
-            return Promise.resolve(Array.from(importMap.keys()));
+            return Promise.resolve(Array.from(importMap.values()).map((v)=>v.resource));
         },
         importPluginModule (resource) {
-            const importFn = importMap.get(resource);
-            if (importFn === undefined) {
+            const { kind, metadata: { name, version, registry } } = resource;
+            const { importPlugin } = importMap.get((0, _plugins.getPluginModuleCompoundKey)({
+                kind,
+                name,
+                registry,
+                version
+            })) || {};
+            if (importPlugin === undefined) {
                 throw new Error('Plugin not found');
             }
-            return importFn();
+            return importPlugin();
         }
     };
 }

package/dist/cjs/model/plugins.js

@@ -14,3 +14,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "getPluginModuleCompoundKey", {
+    enumerable: true,
+    get: function() {
+        return getPluginModuleCompoundKey;
+    }
+});
+function getPluginModuleCompoundKey(compoundKey) {
+    const { kind, name, registry, version } = compoundKey;
+    return `${kind}:${name}:${registry ?? ''}:${version ?? ''}`;
+}

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

@@ -0,0 +1,16 @@
+// Copyright 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/remote/PluginRuntime.js

@@ -156,6 +156,14 @@ const getPluginRuntime = ()=>{
                         requiredVersion: '^0.53.1'
                     }
                 },
+                '@perses-dev/client': {
+                    version: '0.54.0-beta.1',
+                    lib: ()=>require('@perses-dev/client'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.54.0-beta.1'
+                    }
+                },
                 '@perses-dev/components': {
                     version: '0.53.1',
                     lib: ()=>require('@perses-dev/components'),
@@ -268,28 +276,49 @@ const getPluginRuntime = ()=>{
     }
     return instance;
 };
-const registerRemote = (name, baseURL)=>{
+function getModuleFederationRemoteName(name, registry, version) {
+    return `${name}:${registry ?? ''}:${version ?? ''}`;
+}
+const registerRemote = (name, registry, version, baseURL)=>{
     const pluginRuntime = getPluginRuntime();
-    const existingRemote = pluginRuntime.options.remotes.find((remote)=>remote.name === name);
+    const registryName = getModuleFederationRemoteName(name, registry, version);
+    const existingRemote = pluginRuntime.options.remotes.find((remote)=>remote.name === registryName);
     if (!existingRemote) {
-        const remoteEntryURL = baseURL ? `${baseURL}/${name}/mf-manifest.json` : `/plugins/${name}/mf-manifest.json`;
+        const nameVersionRegistry = [
+            name,
+            version,
+            registry
+        ].filter(Boolean).join('~');
+        const prefix = baseURL || '/plugins';
+        const remoteEntryURL = `${prefix}/${nameVersionRegistry}/mf-manifest.json`;
         pluginRuntime.registerRemotes([
             {
-                name,
+                name: registryName,
                 entry: remoteEntryURL,
-                alias: name
+                alias: registryName
             }
         ]);
     }
 };
-const loadPlugin = async (moduleName, pluginName, baseURL)=>{
-    registerRemote(moduleName, baseURL);
+const loadPlugin = async (target)=>{
+    const { moduleName, pluginName, registry, version, baseURL } = target;
+    registerRemote(moduleName, registry, version, baseURL);
     const pluginRuntime = getPluginRuntime();
-    return pluginRuntime.loadRemote(`${moduleName}/${pluginName}`);
+    const registryName = getModuleFederationRemoteName(moduleName, registry, version);
+    return pluginRuntime.loadRemote(`${registryName}/${pluginName}`);
 };
 function usePluginRuntime({ plugin }) {
     return {
         pluginRuntime: getPluginRuntime(),
-        loadPlugin: ()=>loadPlugin(plugin.moduleName, plugin.name, plugin.baseURL)
+        loadPlugin: ()=>{
+            const { moduleName, name: pluginName, registry, version, baseURL } = plugin;
+            return loadPlugin({
+                moduleName,
+                pluginName,
+                registry,
+                version,
+                baseURL
+            });
+        }
     };
 }