@perses-dev/plugin-system 0.55.0-beta.13 → 0.55.0-beta.15

package/dist/remote/PluginLoaderComponent.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "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.
-/* eslint-disable @typescript-eslint/ban-ts-comment */ // Copyright The Perses Authors
+// 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
@@ -23,32 +23,49 @@ import { jsx as _jsx } from "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.
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { usePluginRuntime } from "./PluginRuntime.js";
 function PluginContainer({ pluginFn, props }) {
+    'use no memo'; // Remote plugin functions may call hooks; their invocation must run on every render.
     return pluginFn(props);
 }
 export function PluginLoaderComponent({ plugin, props, field }) {
+    // Reset loading state and plugin hooks together whenever the remote identity changes.
+    const key = JSON.stringify([
+        plugin.moduleName,
+        plugin.name,
+        plugin.registry,
+        plugin.version,
+        plugin.baseURL
+    ]);
+    return /*#__PURE__*/ _jsx(PluginLoaderSession, {
+        plugin: plugin,
+        props: props,
+        field: field
+    }, key);
+}
+function PluginLoaderSession({ plugin, props, field }) {
     const { loadPlugin } = usePluginRuntime({
         plugin
     });
     const [pluginModule, setPluginModule] = useState(null);
     const [error, setError] = useState(null);
-    const name = `${plugin.moduleName}-${plugin.name}`;
-    const previousPluginName = useRef(name);
     useEffect(()=>{
-        previousPluginName.current = name;
-        setError(null);
+        let cancelled = false;
         loadPlugin().then((module)=>{
-            setPluginModule(module);
+            if (!cancelled) setPluginModule(module);
         }).catch((error)=>{
-            setPluginModule(null);
+            if (cancelled) return;
             console.error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}:`, error);
             setError(new Error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}`));
         });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        return ()=>{
+            cancelled = true;
+        };
     }, [
-        name
+        loadPlugin,
+        plugin.name,
+        plugin.moduleName
     ]);
     if (error) {
         throw error;
@@ -66,14 +83,10 @@ export function PluginLoaderComponent({ plugin, props, field }) {
     if (typeof pluginFunction !== 'function') {
         throw new Error(`PluginLoaderComponent: Plugin ${plugin.name} export is not a function`);
     }
-    // make sure to re mount the plugin when changes, to avoid mismatch in hooks ordering when re rendering
-    if (previousPluginName.current !== name) {
-        return null;
-    }
     return /*#__PURE__*/ _jsx(PluginContainer, {
         pluginFn: pluginFunction,
         props: props
-    }, name);
+    });
 }
 
 //# sourceMappingURL=PluginLoaderComponent.js.map

package/dist/remote/PluginLoaderComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/remote/PluginLoaderComponent.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \\\"License\\\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \\\"AS IS\\\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { PersesPlugin, RemotePluginModule } from './PersesPlugin.types';\nimport { usePluginRuntime } from './PluginRuntime';\n\ninterface PluginLoaderProps<P> {\n  plugin: PersesPlugin;\n  props?: P;\n  field?: string;\n}\n\nfunction PluginContainer<P>({\n  pluginFn,\n  props,\n}: {\n  pluginFn: (props: P | undefined) => JSX.Element;\n  props: P | undefined;\n}): JSX.Element {\n  return pluginFn(props);\n}\n\nexport function PluginLoaderComponent<P>({ plugin, props, field }: PluginLoaderProps<P>): JSX.Element | null {\n  const { loadPlugin } = usePluginRuntime({ plugin });\n  const [pluginModule, setPluginModule] = useState<RemotePluginModule | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  const name = `${plugin.moduleName}-${plugin.name}`;\n  const previousPluginName = useRef<string>(name);\n\n  useEffect(() => {\n    previousPluginName.current = name;\n    setError(null);\n\n    loadPlugin()\n      .then((module) => {\n        setPluginModule(module);\n      })\n      .catch((error) => {\n        setPluginModule(null);\n        console.error(\n          `PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}:`,\n          error,\n        );\n        setError(\n          new Error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}`),\n        );\n      });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [name]);\n\n  if (error) {\n    throw error;\n  }\n\n  if (!pluginModule) {\n    return null;\n  }\n\n  let pluginFunction = pluginModule[plugin.name];\n\n  if (field && pluginFunction && typeof pluginFunction === 'object' && field in pluginFunction) {\n    pluginFunction = (pluginFunction as Record<string, unknown>)[field];\n  }\n\n  if (!pluginFunction) {\n    throw new Error(`PluginLoaderComponent: Plugin module ${plugin.moduleName} does not have a ${plugin.name} export`);\n  }\n\n  if (typeof pluginFunction !== 'function') {\n    throw new Error(`PluginLoaderComponent: Plugin ${plugin.name} export is not a function`);\n  }\n\n  // make sure to re mount the plugin when changes, to avoid mismatch in hooks ordering when re rendering\n  if (previousPluginName.current !== name) {\n    return null;\n  }\n\n  return (\n    <PluginContainer key={name} pluginFn={pluginFunction as (props: P | undefined) => JSX.Element} props={props} />\n  );\n}\n"],"names":["useEffect","useRef","useState","usePluginRuntime","PluginContainer","pluginFn","props","PluginLoaderComponent","plugin","field","loadPlugin","pluginModule","setPluginModule","error","setError","name","moduleName","previousPluginName","current","then","module","catch","console","Error","pluginFunction"],"mappings":";AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,oDAAoD,GACpD,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,gBAAgB,QAAQ,qBAAkB;AAQnD,SAASC,gBAAmB,EAC1BC,QAAQ,EACRC,KAAK,EAIN;IACC,OAAOD,SAASC;AAClB;AAEA,OAAO,SAASC,sBAAyB,EAAEC,MAAM,EAAEF,KAAK,EAAEG,KAAK,EAAwB;IACrF,MAAM,EAAEC,UAAU,EAAE,GAAGP,iBAAiB;QAAEK;IAAO;IACjD,MAAM,CAACG,cAAcC,gBAAgB,GAAGV,SAAoC;IAC5E,MAAM,CAACW,OAAOC,SAAS,GAAGZ,SAAuB;IAEjD,MAAMa,OAAO,GAAGP,OAAOQ,UAAU,CAAC,CAAC,EAAER,OAAOO,IAAI,EAAE;IAClD,MAAME,qBAAqBhB,OAAec;IAE1Cf,UAAU;QACRiB,mBAAmBC,OAAO,GAAGH;QAC7BD,SAAS;QAETJ,aACGS,IAAI,CAAC,CAACC;YACLR,gBAAgBQ;QAClB,GACCC,KAAK,CAAC,CAACR;YACND,gBAAgB;YAChBU,QAAQT,KAAK,CACX,CAAC,4CAA4C,EAAEL,OAAOO,IAAI,CAAC,aAAa,EAAEP,OAAOQ,UAAU,CAAC,CAAC,CAAC,EAC9FH;YAEFC,SACE,IAAIS,MAAM,CAAC,4CAA4C,EAAEf,OAAOO,IAAI,CAAC,aAAa,EAAEP,OAAOQ,UAAU,EAAE;QAE3G;IACF,uDAAuD;IACzD,GAAG;QAACD;KAAK;IAET,IAAIF,OAAO;QACT,MAAMA;IACR;IAEA,IAAI,CAACF,cAAc;QACjB,OAAO;IACT;IAEA,IAAIa,iBAAiBb,YAAY,CAACH,OAAOO,IAAI,CAAC;IAE9C,IAAIN,SAASe,kBAAkB,OAAOA,mBAAmB,YAAYf,SAASe,gBAAgB;QAC5FA,iBAAiB,AAACA,cAA0C,CAACf,MAAM;IACrE;IAEA,IAAI,CAACe,gBAAgB;QACnB,MAAM,IAAID,MAAM,CAAC,qCAAqC,EAAEf,OAAOQ,UAAU,CAAC,iBAAiB,EAAER,OAAOO,IAAI,CAAC,OAAO,CAAC;IACnH;IAEA,IAAI,OAAOS,mBAAmB,YAAY;QACxC,MAAM,IAAID,MAAM,CAAC,8BAA8B,EAAEf,OAAOO,IAAI,CAAC,yBAAyB,CAAC;IACzF;IAEA,uGAAuG;IACvG,IAAIE,mBAAmBC,OAAO,KAAKH,MAAM;QACvC,OAAO;IACT;IAEA,qBACE,KAACX;QAA2BC,UAAUmB;QAAyDlB,OAAOA;OAAhFS;AAE1B"}
+{"version":3,"sources":["../../src/remote/PluginLoaderComponent.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \\\"License\\\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \\\"AS IS\\\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\n\nimport type { PersesPlugin, RemotePluginModule } from './PersesPlugin.types';\nimport { usePluginRuntime } from './PluginRuntime';\n\ninterface PluginLoaderProps<P> {\n  plugin: PersesPlugin;\n  props?: P;\n  field?: string;\n}\n\nfunction PluginContainer<P>({\n  pluginFn,\n  props,\n}: {\n  pluginFn: (props: P | undefined) => JSX.Element;\n  props: P | undefined;\n}): JSX.Element {\n  'use no memo'; // Remote plugin functions may call hooks; their invocation must run on every render.\n\n  return pluginFn(props);\n}\n\nexport function PluginLoaderComponent<P>({ plugin, props, field }: PluginLoaderProps<P>): JSX.Element | null {\n  // Reset loading state and plugin hooks together whenever the remote identity changes.\n  const key = JSON.stringify([plugin.moduleName, plugin.name, plugin.registry, plugin.version, plugin.baseURL]);\n  return <PluginLoaderSession key={key} plugin={plugin} props={props} field={field} />;\n}\n\nfunction PluginLoaderSession<P>({ plugin, props, field }: PluginLoaderProps<P>): JSX.Element | null {\n  const { loadPlugin } = usePluginRuntime({ plugin });\n  const [pluginModule, setPluginModule] = useState<RemotePluginModule | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    loadPlugin()\n      .then((module) => {\n        if (!cancelled) setPluginModule(module);\n      })\n      .catch((error) => {\n        if (cancelled) return;\n        console.error(\n          `PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}:`,\n          error,\n        );\n        setError(\n          new Error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}`),\n        );\n      });\n    return (): void => {\n      cancelled = true;\n    };\n  }, [loadPlugin, plugin.name, plugin.moduleName]);\n\n  if (error) {\n    throw error;\n  }\n\n  if (!pluginModule) {\n    return null;\n  }\n\n  let pluginFunction = pluginModule[plugin.name];\n\n  if (field && pluginFunction && typeof pluginFunction === 'object' && field in pluginFunction) {\n    pluginFunction = (pluginFunction as Record<string, unknown>)[field];\n  }\n\n  if (!pluginFunction) {\n    throw new Error(`PluginLoaderComponent: Plugin module ${plugin.moduleName} does not have a ${plugin.name} export`);\n  }\n\n  if (typeof pluginFunction !== 'function') {\n    throw new Error(`PluginLoaderComponent: Plugin ${plugin.name} export is not a function`);\n  }\n\n  return <PluginContainer pluginFn={pluginFunction as (props: P | undefined) => JSX.Element} props={props} />;\n}\n"],"names":["useEffect","useState","usePluginRuntime","PluginContainer","pluginFn","props","PluginLoaderComponent","plugin","field","key","JSON","stringify","moduleName","name","registry","version","baseURL","PluginLoaderSession","loadPlugin","pluginModule","setPluginModule","error","setError","cancelled","then","module","catch","console","Error","pluginFunction"],"mappings":";AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAG5C,SAASC,gBAAgB,QAAQ,qBAAkB;AAQnD,SAASC,gBAAmB,EAC1BC,QAAQ,EACRC,KAAK,EAIN;IACC,eAAe,qFAAqF;IAEpG,OAAOD,SAASC;AAClB;AAEA,OAAO,SAASC,sBAAyB,EAAEC,MAAM,EAAEF,KAAK,EAAEG,KAAK,EAAwB;IACrF,sFAAsF;IACtF,MAAMC,MAAMC,KAAKC,SAAS,CAAC;QAACJ,OAAOK,UAAU;QAAEL,OAAOM,IAAI;QAAEN,OAAOO,QAAQ;QAAEP,OAAOQ,OAAO;QAAER,OAAOS,OAAO;KAAC;IAC5G,qBAAO,KAACC;QAA8BV,QAAQA;QAAQF,OAAOA;QAAOG,OAAOA;OAA1CC;AACnC;AAEA,SAASQ,oBAAuB,EAAEV,MAAM,EAAEF,KAAK,EAAEG,KAAK,EAAwB;IAC5E,MAAM,EAAEU,UAAU,EAAE,GAAGhB,iBAAiB;QAAEK;IAAO;IACjD,MAAM,CAACY,cAAcC,gBAAgB,GAAGnB,SAAoC;IAC5E,MAAM,CAACoB,OAAOC,SAAS,GAAGrB,SAAuB;IAEjDD,UAAU;QACR,IAAIuB,YAAY;QAEhBL,aACGM,IAAI,CAAC,CAACC;YACL,IAAI,CAACF,WAAWH,gBAAgBK;QAClC,GACCC,KAAK,CAAC,CAACL;YACN,IAAIE,WAAW;YACfI,QAAQN,KAAK,CACX,CAAC,4CAA4C,EAAEd,OAAOM,IAAI,CAAC,aAAa,EAAEN,OAAOK,UAAU,CAAC,CAAC,CAAC,EAC9FS;YAEFC,SACE,IAAIM,MAAM,CAAC,4CAA4C,EAAErB,OAAOM,IAAI,CAAC,aAAa,EAAEN,OAAOK,UAAU,EAAE;QAE3G;QACF,OAAO;YACLW,YAAY;QACd;IACF,GAAG;QAACL;QAAYX,OAAOM,IAAI;QAAEN,OAAOK,UAAU;KAAC;IAE/C,IAAIS,OAAO;QACT,MAAMA;IACR;IAEA,IAAI,CAACF,cAAc;QACjB,OAAO;IACT;IAEA,IAAIU,iBAAiBV,YAAY,CAACZ,OAAOM,IAAI,CAAC;IAE9C,IAAIL,SAASqB,kBAAkB,OAAOA,mBAAmB,YAAYrB,SAASqB,gBAAgB;QAC5FA,iBAAiB,AAACA,cAA0C,CAACrB,MAAM;IACrE;IAEA,IAAI,CAACqB,gBAAgB;QACnB,MAAM,IAAID,MAAM,CAAC,qCAAqC,EAAErB,OAAOK,UAAU,CAAC,iBAAiB,EAAEL,OAAOM,IAAI,CAAC,OAAO,CAAC;IACnH;IAEA,IAAI,OAAOgB,mBAAmB,YAAY;QACxC,MAAM,IAAID,MAAM,CAAC,8BAA8B,EAAErB,OAAOM,IAAI,CAAC,yBAAyB,CAAC;IACzF;IAEA,qBAAO,KAACV;QAAgBC,UAAUyB;QAAyDxB,OAAOA;;AACpG"}

package/dist/remote/PluginRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PluginRuntime.d.ts","sourceRoot":"","sources":["../../src/remote/PluginRuntime.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAQ5E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAW7E,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wBAAwB,EAAE,OAAO,CAAC;IAClC,2BAA2B,EAAE,OAAO,CAAC;IACrC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAUD,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAI1E;AA+ND,eAAO,MAAM,UAAU,WAAkB;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAOpC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,GAAG;IACtE,aAAa,EAAE,gBAAgB,CAAC;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CACtD,CAQA"}
+{"version":3,"file":"PluginRuntime.d.ts","sourceRoot":"","sources":["../../src/remote/PluginRuntime.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAQ5E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAa7E,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wBAAwB,EAAE,OAAO,CAAC;IAClC,2BAA2B,EAAE,OAAO,CAAC;IACrC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;CACnC;AAUD,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAI1E;AAiOD,eAAO,MAAM,UAAU,WAAkB;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAOpC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,GAAG;IACtE,aAAa,EAAE,gBAAgB,CAAC;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;CACtD,CAWA"}

package/dist/remote/PluginRuntime.js

@@ -14,11 +14,12 @@ import * as EmotionReact from "@emotion/react";
 import * as EmotionStyled from "@emotion/styled";
 import { createInstance } from "@module-federation/enhanced/runtime";
 import * as ReactQuery from "@tanstack/react-query";
-import React from "react";
+import React, { useCallback } from "react";
 import ReactDOM from "react-dom";
 import * as ReactHookForm from "react-hook-form";
 import * as ReactRouterDOM from "react-router-dom";
 let instance = null;
+const DEFAULT_PLUGINS_ASSETS_BASE_URL = '/plugins';
 function createSharedModuleLoader(loadModule) {
     return async ()=>{
         const module = await loadModule();
@@ -104,51 +105,51 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@perses-dev/spec': {
-                    version: '0.3.0-beta.9',
+                    version: '0.3.0-beta.10',
                     lib: ()=>getHostSharedModule('@perses-dev/spec'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.3.0-beta.9'
+                        requiredVersion: '^0.3.0-beta.10'
                     }
                 },
                 '@perses-dev/client': {
-                    version: '0.55.0-beta.13',
+                    version: '0.55.0-beta.15',
                     lib: ()=>getHostSharedModule('@perses-dev/client'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.55.0-beta.13'
+                        requiredVersion: '^0.55.0-beta.15'
                     }
                 },
                 '@perses-dev/components': {
-                    version: '0.55.0-beta.13',
+                    version: '0.55.0-beta.15',
                     lib: ()=>getHostSharedModule('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.55.0-beta.13'
+                        requiredVersion: '^0.55.0-beta.15'
                     }
                 },
                 '@perses-dev/plugin-system': {
-                    version: '0.55.0-beta.13',
+                    version: '0.55.0-beta.15',
                     lib: ()=>getHostSharedModule('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.55.0-beta.13'
+                        requiredVersion: '^0.55.0-beta.15'
                     }
                 },
                 '@perses-dev/explore': {
-                    version: '0.55.0-beta.13',
+                    version: '0.55.0-beta.15',
                     lib: ()=>getHostSharedModule('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.55.0-beta.13'
+                        requiredVersion: '^0.55.0-beta.15'
                     }
                 },
                 '@perses-dev/dashboards': {
-                    version: '0.55.0-beta.13',
+                    version: '0.55.0-beta.15',
                     lib: ()=>getHostSharedModule('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.55.0-beta.13'
+                        requiredVersion: '^0.55.0-beta.15'
                     }
                 },
                 // Below are the shared modules that are used by the plugins and are loaded asynchronously on demand using get rather than lib.
@@ -203,6 +204,8 @@ const getPluginRuntime = ()=>{
                 },
                 'mdi-material-ui': {
                     version: '7.9.4',
+                    // Federation must register the package root to satisfy existing plugin shared-module requests.
+                    // oxlint-disable-next-line no-restricted-imports
                     get: createSharedModuleLoader(()=>import("mdi-material-ui")),
                     shareConfig: {
                         singleton: true,
@@ -237,7 +240,7 @@ const registerRemote = (name, registry, version, baseURL)=>{
             version,
             registry
         ].filter(Boolean).join('~');
-        const prefix = baseURL || '/plugins';
+        const prefix = baseURL ?? DEFAULT_PLUGINS_ASSETS_BASE_URL;
         const remoteEntryURL = `${prefix}/${nameVersionRegistry}/mf-manifest.json`;
         pluginRuntime.registerRemotes([
             {
@@ -256,18 +259,23 @@ export const loadPlugin = async (target)=>{
     return pluginRuntime.loadRemote(`${registryName}/${pluginName}`);
 };
 export function usePluginRuntime({ plugin }) {
+    const { moduleName, name: pluginName, registry, version, baseURL } = plugin;
+    const load = useCallback(()=>loadPlugin({
+            moduleName,
+            pluginName,
+            registry,
+            version,
+            baseURL
+        }), [
+        moduleName,
+        pluginName,
+        registry,
+        version,
+        baseURL
+    ]);
     return {
         pluginRuntime: getPluginRuntime(),
-        loadPlugin: ()=>{
-            const { moduleName, name: pluginName, registry, version, baseURL } = plugin;
-            return loadPlugin({
-                moduleName,
-                pluginName,
-                registry,
-                version,
-                baseURL
-            });
-        }
+        loadPlugin: load
     };
 }
 

package/dist/remote/PluginRuntime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/remote/PluginRuntime.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport * as EmotionReact from '@emotion/react';\nimport * as EmotionStyled from '@emotion/styled';\nimport type { ModuleFederation } from '@module-federation/enhanced/runtime';\nimport { createInstance } from '@module-federation/enhanced/runtime';\nimport * as ReactQuery from '@tanstack/react-query';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport * as ReactHookForm from 'react-hook-form';\nimport * as ReactRouterDOM from 'react-router-dom';\n\nimport type { PersesPlugin, RemotePluginModule } from './PersesPlugin.types';\n\nlet instance: ModuleFederation | null = null;\n\nfunction createSharedModuleLoader<TModule>(loadModule: () => Promise<TModule>): () => Promise<() => TModule> {\n  return async () => {\n    const module = await loadModule();\n    return () => module;\n  };\n}\n\nexport interface HostSharedModules {\n  '@perses-dev/spec': unknown;\n  '@perses-dev/client': unknown;\n  '@perses-dev/components': unknown;\n  '@perses-dev/plugin-system': unknown;\n  '@perses-dev/explore': unknown;\n  '@perses-dev/dashboards': unknown;\n}\n\ntype HostSharedModuleName = keyof HostSharedModules;\n\nconst hostSharedModules = new Map<HostSharedModuleName, unknown>();\n\n/*\n * Shared singletons must be provided to Module Federation *synchronously* (via `lib`) so the host's\n * copy wins singleton negotiation to avoid loader deadlocks or multiple instances.\n */\nexport function registerHostSharedModules(modules: HostSharedModules): void {\n  for (const [name, module] of Object.entries(modules) as Array<[HostSharedModuleName, unknown]>) {\n    hostSharedModules.set(name, module);\n  }\n}\n\nfunction getHostSharedModule(name: HostSharedModuleName): unknown {\n  const module = hostSharedModules.get(name);\n  if (!module) {\n    throw new Error(\n      `Shared module \"${name}\" was not registered before a plugin tried to consume it. ` +\n        `Call registerHostSharedModules() during app bootstrap.`,\n    );\n  }\n  return module;\n}\n\nconst getPluginRuntime = (): ModuleFederation => {\n  if (instance === null) {\n    const pluginRuntime = createInstance({\n      name: '@perses/perses-ui-host',\n      remotes: [], // all remotes are loaded dynamically\n      shared: {\n        react: {\n          version: React.version,\n          lib: () => React,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: `^${React.version}`,\n          },\n        },\n        'react-dom': {\n          version: '18.3.1',\n          lib: () => ReactDOM,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: `^18.3.1`,\n          },\n        },\n        'react-router-dom': {\n          version: '6.30.4',\n          lib: () => ReactRouterDOM,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^6.26.0',\n          },\n        },\n        '@tanstack/react-query': {\n          version: '4.44.0',\n          lib: () => ReactQuery,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.39.1',\n          },\n        },\n        'react-hook-form': {\n          version: '7.87.0',\n          lib: () => ReactHookForm,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^7.87.0',\n          },\n        },\n        '@emotion/react': {\n          version: '11.14.0',\n          lib: () => EmotionReact,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^11.11.3',\n          },\n        },\n        '@emotion/styled': {\n          version: '11.14.1',\n          lib: () => EmotionStyled,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^11.11.0',\n          },\n        },\n        '@perses-dev/spec': {\n          version: '0.3.0-beta.9',\n          lib: () => getHostSharedModule('@perses-dev/spec'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.3.0-beta.9',\n          },\n        },\n        '@perses-dev/client': {\n          version: '0.55.0-beta.13',\n          lib: () => getHostSharedModule('@perses-dev/client'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.13',\n          },\n        },\n        '@perses-dev/components': {\n          version: '0.55.0-beta.13',\n          lib: () => getHostSharedModule('@perses-dev/components'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.13',\n          },\n        },\n        '@perses-dev/plugin-system': {\n          version: '0.55.0-beta.13',\n          lib: () => getHostSharedModule('@perses-dev/plugin-system'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.13',\n          },\n        },\n        '@perses-dev/explore': {\n          version: '0.55.0-beta.13',\n          lib: () => getHostSharedModule('@perses-dev/explore'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.13',\n          },\n        },\n        '@perses-dev/dashboards': {\n          version: '0.55.0-beta.13',\n          lib: () => getHostSharedModule('@perses-dev/dashboards'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.13',\n          },\n        },\n        // Below are the shared modules that are used by the plugins and are loaded asynchronously on demand using get rather than lib.\n        // This is to avoid loading the modules if they are not used by the plugin.\n        echarts: {\n          version: '5.5.0',\n          get: createSharedModuleLoader(() => import('echarts')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^5.5.0',\n          },\n        },\n        'date-fns': {\n          version: '4.2.1',\n          get: createSharedModuleLoader(() => import('date-fns')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.1.0',\n          },\n        },\n        'date-fns-tz': {\n          version: '3.2.0',\n          get: createSharedModuleLoader(() => import('date-fns-tz')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^3.2.0',\n          },\n        },\n        lodash: {\n          version: '4.18.1',\n          get: createSharedModuleLoader(() => import('lodash')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.17.21',\n          },\n        },\n        '@hookform/resolvers/zod': {\n          version: '5.9.1',\n          get: createSharedModuleLoader(() => import('@hookform/resolvers/zod')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^5.9.1',\n          },\n        },\n        'use-resize-observer': {\n          version: '9.1.0',\n          get: createSharedModuleLoader(() => import('use-resize-observer')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^9.1.0',\n          },\n        },\n        'mdi-material-ui': {\n          version: '7.9.4',\n          get: createSharedModuleLoader(() => import('mdi-material-ui')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^7.4.0',\n          },\n        },\n        immer: {\n          version: '10.2.0',\n          get: createSharedModuleLoader(() => import('immer')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^10.1.1',\n          },\n        },\n      },\n    });\n\n    instance = pluginRuntime;\n\n    return instance;\n  }\n  return instance;\n};\n\nfunction getModuleFederationRemoteName(name: string, registry?: string, version?: string): string {\n  return `${name}:${registry ?? ''}:${version ?? ''}`;\n}\n\nconst registerRemote = (name: string, registry?: string, version?: string, baseURL?: string): void => {\n  const pluginRuntime = getPluginRuntime();\n  const registryName = getModuleFederationRemoteName(name, registry, version);\n\n  const existingRemote = pluginRuntime.options.remotes.find((remote) => remote.name === registryName);\n  if (!existingRemote) {\n    const nameVersionRegistry = [name, version, registry].filter(Boolean).join('~');\n    const prefix = baseURL || '/plugins';\n    const remoteEntryURL = `${prefix}/${nameVersionRegistry}/mf-manifest.json`;\n\n    pluginRuntime.registerRemotes([\n      {\n        name: registryName,\n        entry: remoteEntryURL,\n        alias: registryName,\n      },\n    ]);\n  }\n};\n\nexport const loadPlugin = async (target: {\n  moduleName: string;\n  pluginName: string;\n  registry?: string;\n  version?: string;\n  baseURL?: string;\n}): Promise<RemotePluginModule | null> => {\n  const { moduleName, pluginName, registry, version, baseURL } = target;\n  registerRemote(moduleName, registry, version, baseURL);\n\n  const pluginRuntime = getPluginRuntime();\n  const registryName = getModuleFederationRemoteName(moduleName, registry, version);\n  return pluginRuntime.loadRemote<RemotePluginModule>(`${registryName}/${pluginName}`);\n};\n\nexport function usePluginRuntime({ plugin }: { plugin: PersesPlugin }): {\n  pluginRuntime: ModuleFederation;\n  loadPlugin: () => Promise<RemotePluginModule | null>;\n} {\n  return {\n    pluginRuntime: getPluginRuntime(),\n    loadPlugin: (): Promise<RemotePluginModule | null> => {\n      const { moduleName, name: pluginName, registry, version, baseURL } = plugin;\n      return loadPlugin({ moduleName, pluginName, registry, version, baseURL });\n    },\n  };\n}\n"],"names":["EmotionReact","EmotionStyled","createInstance","ReactQuery","React","ReactDOM","ReactHookForm","ReactRouterDOM","instance","createSharedModuleLoader","loadModule","module","hostSharedModules","Map","registerHostSharedModules","modules","name","Object","entries","set","getHostSharedModule","get","Error","getPluginRuntime","pluginRuntime","remotes","shared","react","version","lib","shareConfig","singleton","requiredVersion","echarts","lodash","immer","getModuleFederationRemoteName","registry","registerRemote","baseURL","registryName","existingRemote","options","find","remote","nameVersionRegistry","filter","Boolean","join","prefix","remoteEntryURL","registerRemotes","entry","alias","loadPlugin","target","moduleName","pluginName","loadRemote","usePluginRuntime","plugin"],"mappings":"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"}
+{"version":3,"sources":["../../src/remote/PluginRuntime.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport * as EmotionReact from '@emotion/react';\nimport * as EmotionStyled from '@emotion/styled';\nimport type { ModuleFederation } from '@module-federation/enhanced/runtime';\nimport { createInstance } from '@module-federation/enhanced/runtime';\nimport * as ReactQuery from '@tanstack/react-query';\nimport React, { useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport * as ReactHookForm from 'react-hook-form';\nimport * as ReactRouterDOM from 'react-router-dom';\n\nimport type { PersesPlugin, RemotePluginModule } from './PersesPlugin.types';\n\nlet instance: ModuleFederation | null = null;\n\nconst DEFAULT_PLUGINS_ASSETS_BASE_URL = '/plugins';\n\nfunction createSharedModuleLoader<TModule>(loadModule: () => Promise<TModule>): () => Promise<() => TModule> {\n  return async () => {\n    const module = await loadModule();\n    return () => module;\n  };\n}\n\nexport interface HostSharedModules {\n  '@perses-dev/spec': unknown;\n  '@perses-dev/client': unknown;\n  '@perses-dev/components': unknown;\n  '@perses-dev/plugin-system': unknown;\n  '@perses-dev/explore': unknown;\n  '@perses-dev/dashboards': unknown;\n}\n\ntype HostSharedModuleName = keyof HostSharedModules;\n\nconst hostSharedModules = new Map<HostSharedModuleName, unknown>();\n\n/*\n * Shared singletons must be provided to Module Federation *synchronously* (via `lib`) so the host's\n * copy wins singleton negotiation to avoid loader deadlocks or multiple instances.\n */\nexport function registerHostSharedModules(modules: HostSharedModules): void {\n  for (const [name, module] of Object.entries(modules) as Array<[HostSharedModuleName, unknown]>) {\n    hostSharedModules.set(name, module);\n  }\n}\n\nfunction getHostSharedModule(name: HostSharedModuleName): unknown {\n  const module = hostSharedModules.get(name);\n  if (!module) {\n    throw new Error(\n      `Shared module \"${name}\" was not registered before a plugin tried to consume it. ` +\n        `Call registerHostSharedModules() during app bootstrap.`,\n    );\n  }\n  return module;\n}\n\nconst getPluginRuntime = (): ModuleFederation => {\n  if (instance === null) {\n    const pluginRuntime = createInstance({\n      name: '@perses/perses-ui-host',\n      remotes: [], // all remotes are loaded dynamically\n      shared: {\n        react: {\n          version: React.version,\n          lib: () => React,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: `^${React.version}`,\n          },\n        },\n        'react-dom': {\n          version: '18.3.1',\n          lib: () => ReactDOM,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: `^18.3.1`,\n          },\n        },\n        'react-router-dom': {\n          version: '6.30.4',\n          lib: () => ReactRouterDOM,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^6.26.0',\n          },\n        },\n        '@tanstack/react-query': {\n          version: '4.44.0',\n          lib: () => ReactQuery,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.39.1',\n          },\n        },\n        'react-hook-form': {\n          version: '7.87.0',\n          lib: () => ReactHookForm,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^7.87.0',\n          },\n        },\n        '@emotion/react': {\n          version: '11.14.0',\n          lib: () => EmotionReact,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^11.11.3',\n          },\n        },\n        '@emotion/styled': {\n          version: '11.14.1',\n          lib: () => EmotionStyled,\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^11.11.0',\n          },\n        },\n        '@perses-dev/spec': {\n          version: '0.3.0-beta.10',\n          lib: () => getHostSharedModule('@perses-dev/spec'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.3.0-beta.10',\n          },\n        },\n        '@perses-dev/client': {\n          version: '0.55.0-beta.15',\n          lib: () => getHostSharedModule('@perses-dev/client'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.15',\n          },\n        },\n        '@perses-dev/components': {\n          version: '0.55.0-beta.15',\n          lib: () => getHostSharedModule('@perses-dev/components'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.15',\n          },\n        },\n        '@perses-dev/plugin-system': {\n          version: '0.55.0-beta.15',\n          lib: () => getHostSharedModule('@perses-dev/plugin-system'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.15',\n          },\n        },\n        '@perses-dev/explore': {\n          version: '0.55.0-beta.15',\n          lib: () => getHostSharedModule('@perses-dev/explore'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.15',\n          },\n        },\n        '@perses-dev/dashboards': {\n          version: '0.55.0-beta.15',\n          lib: () => getHostSharedModule('@perses-dev/dashboards'),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^0.55.0-beta.15',\n          },\n        },\n        // Below are the shared modules that are used by the plugins and are loaded asynchronously on demand using get rather than lib.\n        // This is to avoid loading the modules if they are not used by the plugin.\n        echarts: {\n          version: '5.5.0',\n          get: createSharedModuleLoader(() => import('echarts')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^5.5.0',\n          },\n        },\n        'date-fns': {\n          version: '4.2.1',\n          get: createSharedModuleLoader(() => import('date-fns')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.1.0',\n          },\n        },\n        'date-fns-tz': {\n          version: '3.2.0',\n          get: createSharedModuleLoader(() => import('date-fns-tz')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^3.2.0',\n          },\n        },\n        lodash: {\n          version: '4.18.1',\n          get: createSharedModuleLoader(() => import('lodash')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^4.17.21',\n          },\n        },\n        '@hookform/resolvers/zod': {\n          version: '5.9.1',\n          get: createSharedModuleLoader(() => import('@hookform/resolvers/zod')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^5.9.1',\n          },\n        },\n        'use-resize-observer': {\n          version: '9.1.0',\n          get: createSharedModuleLoader(() => import('use-resize-observer')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^9.1.0',\n          },\n        },\n        'mdi-material-ui': {\n          version: '7.9.4',\n          // Federation must register the package root to satisfy existing plugin shared-module requests.\n          // oxlint-disable-next-line no-restricted-imports\n          get: createSharedModuleLoader(() => import('mdi-material-ui')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^7.4.0',\n          },\n        },\n        immer: {\n          version: '10.2.0',\n          get: createSharedModuleLoader(() => import('immer')),\n          shareConfig: {\n            singleton: true,\n            requiredVersion: '^10.1.1',\n          },\n        },\n      },\n    });\n\n    instance = pluginRuntime;\n\n    return instance;\n  }\n  return instance;\n};\n\nfunction getModuleFederationRemoteName(name: string, registry?: string, version?: string): string {\n  return `${name}:${registry ?? ''}:${version ?? ''}`;\n}\n\nconst registerRemote = (name: string, registry?: string, version?: string, baseURL?: string): void => {\n  const pluginRuntime = getPluginRuntime();\n  const registryName = getModuleFederationRemoteName(name, registry, version);\n\n  const existingRemote = pluginRuntime.options.remotes.find((remote) => remote.name === registryName);\n  if (!existingRemote) {\n    const nameVersionRegistry = [name, version, registry].filter(Boolean).join('~');\n    const prefix = baseURL ?? DEFAULT_PLUGINS_ASSETS_BASE_URL;\n    const remoteEntryURL = `${prefix}/${nameVersionRegistry}/mf-manifest.json`;\n\n    pluginRuntime.registerRemotes([\n      {\n        name: registryName,\n        entry: remoteEntryURL,\n        alias: registryName,\n      },\n    ]);\n  }\n};\n\nexport const loadPlugin = async (target: {\n  moduleName: string;\n  pluginName: string;\n  registry?: string;\n  version?: string;\n  baseURL?: string;\n}): Promise<RemotePluginModule | null> => {\n  const { moduleName, pluginName, registry, version, baseURL } = target;\n  registerRemote(moduleName, registry, version, baseURL);\n\n  const pluginRuntime = getPluginRuntime();\n  const registryName = getModuleFederationRemoteName(moduleName, registry, version);\n  return pluginRuntime.loadRemote<RemotePluginModule>(`${registryName}/${pluginName}`);\n};\n\nexport function usePluginRuntime({ plugin }: { plugin: PersesPlugin }): {\n  pluginRuntime: ModuleFederation;\n  loadPlugin: () => Promise<RemotePluginModule | null>;\n} {\n  const { moduleName, name: pluginName, registry, version, baseURL } = plugin;\n  const load = useCallback(\n    () => loadPlugin({ moduleName, pluginName, registry, version, baseURL }),\n    [moduleName, pluginName, registry, version, baseURL],\n  );\n\n  return {\n    pluginRuntime: getPluginRuntime(),\n    loadPlugin: load,\n  };\n}\n"],"names":["EmotionReact","EmotionStyled","createInstance","ReactQuery","React","useCallback","ReactDOM","ReactHookForm","ReactRouterDOM","instance","DEFAULT_PLUGINS_ASSETS_BASE_URL","createSharedModuleLoader","loadModule","module","hostSharedModules","Map","registerHostSharedModules","modules","name","Object","entries","set","getHostSharedModule","get","Error","getPluginRuntime","pluginRuntime","remotes","shared","react","version","lib","shareConfig","singleton","requiredVersion","echarts","lodash","immer","getModuleFederationRemoteName","registry","registerRemote","baseURL","registryName","existingRemote","options","find","remote","nameVersionRegistry","filter","Boolean","join","prefix","remoteEntryURL","registerRemotes","entry","alias","loadPlugin","target","moduleName","pluginName","loadRemote","usePluginRuntime","plugin","load"],"mappings":"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"}

package/dist/remote/remotePluginLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remotePluginLoader.d.ts","sourceRoot":"","sources":["../../src/remote/remotePluginLoader.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAoD,MAAM,2BAA2B,CAAC;AAgChH,KAAK,yBAAyB,GAAG;IAC/B;;;QAGI;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;QAGI;IACJ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwBF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,yBAAyB,GAAG,YAAY,CA0DpF"}
+{"version":3,"file":"remotePluginLoader.d.ts","sourceRoot":"","sources":["../../src/remote/remotePluginLoader.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAoD,MAAM,2BAA2B,CAAC;AAgChH,KAAK,yBAAyB,GAAG;IAC/B;;;QAGI;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;QAGI;IACJ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwBF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,yBAAyB,GAAG,YAAY,CA2DpF"}

package/dist/remote/remotePluginLoader.js

@@ -40,6 +40,7 @@ const paramToOptions = (options)=>{
     const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);
     const fetchFn = options?.fetchFn ?? defaultFetch;
     return {
+        baseURL: pluginsAssetsPath,
         getInstalledPlugins: async ()=>{
             const pluginsResponse = await fetchFn(pluginsApiPath);
             const plugins = await pluginsResponse.json();

package/dist/remote/remotePluginLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/remote/remotePluginLoader.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { fetch as defaultFetch } from '@perses-dev/client';\nimport type { FetchFn } from '@perses-dev/client';\nimport type { PluginLoader, PluginMetadata, PluginModuleResource, PluginType } from '@perses-dev/plugin-system';\nimport { getPluginModuleCompoundKey } from '@perses-dev/plugin-system';\n\nimport type { RemotePluginModule } from './PersesPlugin.types';\nimport { loadPlugin } from './PluginRuntime';\n\nconst isPluginMetadata = (plugin: unknown): plugin is PluginMetadata => {\n  return (\n    typeof plugin === 'object' &&\n    plugin !== null &&\n    'kind' in plugin &&\n    'spec' in plugin &&\n    typeof plugin.spec === 'object' &&\n    plugin.spec !== null &&\n    'name' in plugin.spec\n  );\n};\n\nconst isPluginModuleResource = (pluginModule: unknown): pluginModule is PluginModuleResource => {\n  return (\n    typeof pluginModule === 'object' &&\n    pluginModule !== null &&\n    'metadata' in pluginModule &&\n    'spec' in pluginModule &&\n    typeof pluginModule.spec === 'object' &&\n    pluginModule.spec !== null &&\n    'plugins' in pluginModule.spec &&\n    Array.isArray(pluginModule.spec.plugins) &&\n    pluginModule.spec.plugins.every(isPluginMetadata)\n  );\n};\n\ntype RemotePluginLoaderOptions = {\n  /**\n   * The API path for fetching available Perses plugins. Used to construct the full URL to the `/api/v1/plugins` endpoint.\n   * @default ''\n   **/\n  apiPrefix?: string;\n  /**\n   * The base URL for loading plugin assets (e.g., JavaScript files). Used to construct the full URL to the `/plugins` directory\n   * @default ''\n   **/\n  baseURL?: string;\n  /**\n   * Optional custom fetch function to use for network requests. If not provided, the default fetch implementation will be used.\n   */\n  fetchFn?: FetchFn;\n};\n\ntype ParsedPluginOptions = {\n  pluginsApiPath: string;\n  pluginsAssetsPath: string;\n};\n\nconst DEFAULT_PLUGINS_API_PATH = '/api/v1/plugins';\nconst DEFAULT_PLUGINS_ASSETS_PATH = '/plugins';\n\nconst paramToOptions = (options?: RemotePluginLoaderOptions): ParsedPluginOptions => {\n  if (options === undefined) {\n    return {\n      pluginsApiPath: DEFAULT_PLUGINS_API_PATH,\n      pluginsAssetsPath: DEFAULT_PLUGINS_ASSETS_PATH,\n    };\n  }\n\n  return {\n    pluginsApiPath: `${options?.apiPrefix ?? ''}${DEFAULT_PLUGINS_API_PATH}`,\n    pluginsAssetsPath: `${options?.baseURL ?? ''}${DEFAULT_PLUGINS_ASSETS_PATH}`,\n  };\n};\n\n/**\n * Get a PluginLoader that fetches the list of installed plugins from a remote server and loads them as needed.\n * @param options - Optional configuration options for the remote plugin loader.\n */\nexport function remotePluginLoader(options?: RemotePluginLoaderOptions): PluginLoader {\n  const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);\n  const fetchFn = options?.fetchFn ?? defaultFetch;\n\n  return {\n    getInstalledPlugins: async (): Promise<PluginModuleResource[]> => {\n      const pluginsResponse = await fetchFn(pluginsApiPath);\n\n      const plugins = await pluginsResponse.json();\n      let pluginModules: PluginModuleResource[] = [];\n\n      if (Array.isArray(plugins)) {\n        pluginModules = plugins.filter(isPluginModuleResource);\n      } else {\n        console.error('RemotePluginLoader: Error loading plugins, response is not an array');\n      }\n\n      if (!pluginModules.length) {\n        console.error('RemotePluginLoader: No valid plugins found');\n      }\n\n      return pluginModules;\n    },\n    importPluginModule: async (resource): Promise<RemotePluginModule> => {\n      const { name: pluginModuleName, version, registry } = resource.metadata;\n\n      const pluginModule: RemotePluginModule = {};\n\n      const loadPromises = resource.spec.plugins.map(async (plugin) => {\n        const remotePluginModule = await loadPlugin({\n          moduleName: pluginModuleName,\n          pluginName: plugin.spec.name,\n          registry,\n          version,\n          baseURL: pluginsAssetsPath,\n        });\n\n        const remotePlugin = remotePluginModule?.[plugin.spec.name];\n        if (remotePlugin) {\n          return { kind: plugin.kind as PluginType, name: plugin.spec.name, remotePlugin };\n        } else {\n          console.error(`RemotePluginLoader: Error loading plugin ${plugin.spec.name}`);\n          return null;\n        }\n      });\n\n      const loadedPlugins = await Promise.all(loadPromises);\n\n      loadedPlugins.forEach((item) => {\n        if (item?.remotePlugin) {\n          pluginModule[getPluginModuleCompoundKey({ kind: item.kind, name: item.name, registry, version })] =\n            item.remotePlugin;\n        }\n      });\n\n      return pluginModule;\n    },\n  };\n}\n"],"names":["fetch","defaultFetch","getPluginModuleCompoundKey","loadPlugin","isPluginMetadata","plugin","spec","isPluginModuleResource","pluginModule","Array","isArray","plugins","every","DEFAULT_PLUGINS_API_PATH","DEFAULT_PLUGINS_ASSETS_PATH","paramToOptions","options","undefined","pluginsApiPath","pluginsAssetsPath","apiPrefix","baseURL","remotePluginLoader","fetchFn","getInstalledPlugins","pluginsResponse","json","pluginModules","filter","console","error","length","importPluginModule","resource","name","pluginModuleName","version","registry","metadata","loadPromises","map","remotePluginModule","moduleName","pluginName","remotePlugin","kind","loadedPlugins","Promise","all","forEach","item"],"mappings":"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"}
+{"version":3,"sources":["../../src/remote/remotePluginLoader.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { fetch as defaultFetch } from '@perses-dev/client';\nimport type { FetchFn } from '@perses-dev/client';\nimport type { PluginLoader, PluginMetadata, PluginModuleResource, PluginType } from '@perses-dev/plugin-system';\nimport { getPluginModuleCompoundKey } from '@perses-dev/plugin-system';\n\nimport type { RemotePluginModule } from './PersesPlugin.types';\nimport { loadPlugin } from './PluginRuntime';\n\nconst isPluginMetadata = (plugin: unknown): plugin is PluginMetadata => {\n  return (\n    typeof plugin === 'object' &&\n    plugin !== null &&\n    'kind' in plugin &&\n    'spec' in plugin &&\n    typeof plugin.spec === 'object' &&\n    plugin.spec !== null &&\n    'name' in plugin.spec\n  );\n};\n\nconst isPluginModuleResource = (pluginModule: unknown): pluginModule is PluginModuleResource => {\n  return (\n    typeof pluginModule === 'object' &&\n    pluginModule !== null &&\n    'metadata' in pluginModule &&\n    'spec' in pluginModule &&\n    typeof pluginModule.spec === 'object' &&\n    pluginModule.spec !== null &&\n    'plugins' in pluginModule.spec &&\n    Array.isArray(pluginModule.spec.plugins) &&\n    pluginModule.spec.plugins.every(isPluginMetadata)\n  );\n};\n\ntype RemotePluginLoaderOptions = {\n  /**\n   * The API path for fetching available Perses plugins. Used to construct the full URL to the `/api/v1/plugins` endpoint.\n   * @default ''\n   **/\n  apiPrefix?: string;\n  /**\n   * The base URL for loading plugin assets (e.g., JavaScript files). Used to construct the full URL to the `/plugins` directory\n   * @default ''\n   **/\n  baseURL?: string;\n  /**\n   * Optional custom fetch function to use for network requests. If not provided, the default fetch implementation will be used.\n   */\n  fetchFn?: FetchFn;\n};\n\ntype ParsedPluginOptions = {\n  pluginsApiPath: string;\n  pluginsAssetsPath: string;\n};\n\nconst DEFAULT_PLUGINS_API_PATH = '/api/v1/plugins';\nconst DEFAULT_PLUGINS_ASSETS_PATH = '/plugins';\n\nconst paramToOptions = (options?: RemotePluginLoaderOptions): ParsedPluginOptions => {\n  if (options === undefined) {\n    return {\n      pluginsApiPath: DEFAULT_PLUGINS_API_PATH,\n      pluginsAssetsPath: DEFAULT_PLUGINS_ASSETS_PATH,\n    };\n  }\n\n  return {\n    pluginsApiPath: `${options?.apiPrefix ?? ''}${DEFAULT_PLUGINS_API_PATH}`,\n    pluginsAssetsPath: `${options?.baseURL ?? ''}${DEFAULT_PLUGINS_ASSETS_PATH}`,\n  };\n};\n\n/**\n * Get a PluginLoader that fetches the list of installed plugins from a remote server and loads them as needed.\n * @param options - Optional configuration options for the remote plugin loader.\n */\nexport function remotePluginLoader(options?: RemotePluginLoaderOptions): PluginLoader {\n  const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);\n  const fetchFn = options?.fetchFn ?? defaultFetch;\n\n  return {\n    baseURL: pluginsAssetsPath,\n    getInstalledPlugins: async (): Promise<PluginModuleResource[]> => {\n      const pluginsResponse = await fetchFn(pluginsApiPath);\n\n      const plugins = await pluginsResponse.json();\n      let pluginModules: PluginModuleResource[] = [];\n\n      if (Array.isArray(plugins)) {\n        pluginModules = plugins.filter(isPluginModuleResource);\n      } else {\n        console.error('RemotePluginLoader: Error loading plugins, response is not an array');\n      }\n\n      if (!pluginModules.length) {\n        console.error('RemotePluginLoader: No valid plugins found');\n      }\n\n      return pluginModules;\n    },\n    importPluginModule: async (resource): Promise<RemotePluginModule> => {\n      const { name: pluginModuleName, version, registry } = resource.metadata;\n\n      const pluginModule: RemotePluginModule = {};\n\n      const loadPromises = resource.spec.plugins.map(async (plugin) => {\n        const remotePluginModule = await loadPlugin({\n          moduleName: pluginModuleName,\n          pluginName: plugin.spec.name,\n          registry,\n          version,\n          baseURL: pluginsAssetsPath,\n        });\n\n        const remotePlugin = remotePluginModule?.[plugin.spec.name];\n        if (remotePlugin) {\n          return { kind: plugin.kind as PluginType, name: plugin.spec.name, remotePlugin };\n        } else {\n          console.error(`RemotePluginLoader: Error loading plugin ${plugin.spec.name}`);\n          return null;\n        }\n      });\n\n      const loadedPlugins = await Promise.all(loadPromises);\n\n      loadedPlugins.forEach((item) => {\n        if (item?.remotePlugin) {\n          pluginModule[getPluginModuleCompoundKey({ kind: item.kind, name: item.name, registry, version })] =\n            item.remotePlugin;\n        }\n      });\n\n      return pluginModule;\n    },\n  };\n}\n"],"names":["fetch","defaultFetch","getPluginModuleCompoundKey","loadPlugin","isPluginMetadata","plugin","spec","isPluginModuleResource","pluginModule","Array","isArray","plugins","every","DEFAULT_PLUGINS_API_PATH","DEFAULT_PLUGINS_ASSETS_PATH","paramToOptions","options","undefined","pluginsApiPath","pluginsAssetsPath","apiPrefix","baseURL","remotePluginLoader","fetchFn","getInstalledPlugins","pluginsResponse","json","pluginModules","filter","console","error","length","importPluginModule","resource","name","pluginModuleName","version","registry","metadata","loadPromises","map","remotePluginModule","moduleName","pluginName","remotePlugin","kind","loadedPlugins","Promise","all","forEach","item"],"mappings":"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"}

package/dist/runtime/TimeRangeProvider/query-params.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { isRelativeTimeRange, isDurationString } from "@perses-dev/spec";
 import { getUnixTime, isDate } from "date-fns";
-import { useMemo, useCallback, useEffect, useState } from "react";
+import { useMemo, useCallback, useEffect, useRef } from "react";
 import { useQueryParams, StringParam } from "use-query-params";
 /* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
     // '' or []
@@ -106,22 +106,21 @@ export const timeZoneQueryConfig = {
         updateType: 'replaceIn'
     });
     // determine whether initial param had previously been populated to fix back btn
-    const [paramsLoaded, setParamsLoaded] = useState(false);
+    const paramsLoaded = useRef(false);
     const { start } = query;
     useEffect(()=>{
         // when dashboard loaded with no params, default to dashboard duration
-        if (!paramsLoaded && !start) {
+        if (!paramsLoaded.current && !start) {
             if (isRelativeTimeRange(initialTimeRange)) {
                 setQuery({
                     start: initialTimeRange.pastDuration,
                     end: undefined
                 });
-                setParamsLoaded(true);
+                paramsLoaded.current = true;
             }
         }
     }, [
         initialTimeRange,
-        paramsLoaded,
         start,
         setQuery
     ]);
@@ -172,19 +171,18 @@ export const timeZoneQueryConfig = {
         updateType: 'replaceIn'
     });
     // determine whether initial param had previously been populated to fix back btn
-    const [paramsLoaded, setParamsLoaded] = useState(false);
+    const paramsLoaded = useRef(false);
     const { refresh } = query;
     useEffect(()=>{
         // when dashboard loaded with no params, default to dashboard refresh interval
-        if (!paramsLoaded && !refresh) {
+        if (!paramsLoaded.current && !refresh) {
             setQuery({
                 refresh: initialRefreshInterval
             });
-            setParamsLoaded(true);
+            paramsLoaded.current = true;
         }
     }, [
         initialRefreshInterval,
-        paramsLoaded,
         refresh,
         setQuery
     ]);

package/dist/runtime/TimeRangeProvider/query-params.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/runtime/TimeRangeProvider/query-params.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { TimeRangeValue, DurationString, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, isDurationString } from '@perses-dev/spec';\nimport { getUnixTime, isDate } from 'date-fns';\nimport { useMemo, useCallback, useEffect, useState } from 'react';\nimport type { QueryParamConfig } from 'use-query-params';\nimport { useQueryParams, StringParam } from 'use-query-params';\n\nimport type { TimeRange } from './TimeRangeProvider';\n\nexport type TimeOptionValue = Date | DurationString | null | undefined;\n\n/* Interprets an encoded string and returns either the string or null/undefined if not available */\nfunction getEncodedValue(\n  input: string | Array<string | null> | null | undefined,\n  allowEmptyString?: boolean,\n): string | null | undefined {\n  // '' or []\n  if (!input || (input.length === 0 && (!allowEmptyString || (allowEmptyString && input !== '')))) {\n    return null;\n  }\n\n  const str = input instanceof Array ? input[0] : input;\n  if (str === null || str === undefined) {\n    return str;\n  }\n  if (!allowEmptyString && str === '') {\n    return null;\n  }\n\n  return str;\n}\n\n/* Encodes individual TimeRangeValue as a string, depends on whether start is relative or absolute */\nexport function encodeTimeRangeValue(timeOptionValue: TimeOptionValue): string | null | undefined {\n  if (!timeOptionValue) {\n    return timeOptionValue;\n  }\n\n  if (typeof timeOptionValue === 'string') {\n    if (isDurationString(timeOptionValue)) {\n      return timeOptionValue;\n    }\n  }\n  return (getUnixTime(timeOptionValue) * 1000).toString();\n}\n\n/* Converts param input to supported relative or absolute time range format */\nexport function decodeTimeRangeValue(\n  input: string | Array<string | null> | null | undefined,\n): Date | DurationString | null | undefined {\n  const paramString = getEncodedValue(input);\n  if (!paramString) return null;\n  return isDurationString(paramString) ? paramString : new Date(Number(paramString));\n}\n\n/**\n * Custom TimeRangeValue param type\n * See: https://github.com/pbeshai/use-query-params/tree/master/packages/serialize-query-params#param-types\n */\nexport const TimeRangeParam: QueryParamConfig<TimeOptionValue, TimeOptionValue> = {\n  encode: encodeTimeRangeValue,\n  decode: decodeTimeRangeValue,\n  equals: (valueA: TimeOptionValue, valueB: TimeOptionValue) => {\n    if (valueA === valueB) return true;\n    if (!valueA || !valueB) return valueA === valueB;\n    return valueA.valueOf() === valueB.valueOf();\n  },\n};\n\nexport const timeRangeQueryConfig = {\n  start: TimeRangeParam,\n  end: TimeRangeParam,\n};\n\nexport const refreshIntervalQueryConfig = {\n  refresh: TimeRangeParam,\n};\n\nexport const timeZoneQueryConfig = {\n  tz: StringParam,\n};\n\n/**\n * Gets the initial time range taking into account URL params and dashboard JSON duration\n * Sets start query param if it is empty on page load\n */\nexport function useInitialTimeRange(dashboardDuration: DurationString): TimeRangeValue {\n  const [query] = useQueryParams(timeRangeQueryConfig, { updateType: 'replaceIn' });\n  const { start, end } = query;\n\n  return useMemo(() => {\n    let initialTimeRange: TimeRangeValue = { pastDuration: dashboardDuration };\n    if (!start) {\n      return initialTimeRange;\n    }\n    const startStr = start.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = { pastDuration: startStr };\n    } else if (isDate(start) && isDate(end)) {\n      initialTimeRange = { start: start, end: end } as AbsoluteTimeRange;\n    }\n    return initialTimeRange;\n  }, [start, end, dashboardDuration]);\n}\n\n/**\n * Returns time range getter and setter, taking the URL query params.\n */\nexport function useTimeRangeParams(initialTimeRange: TimeRangeValue): Pick<TimeRange, 'timeRange' | 'setTimeRange'> {\n  const [query, setQuery] = useQueryParams(timeRangeQueryConfig, { updateType: 'replaceIn' });\n  // determine whether initial param had previously been populated to fix back btn\n  const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);\n\n  const { start } = query;\n\n  useEffect(() => {\n    // when dashboard loaded with no params, default to dashboard duration\n    if (!paramsLoaded && !start) {\n      if (isRelativeTimeRange(initialTimeRange)) {\n        setQuery({ start: initialTimeRange.pastDuration, end: undefined });\n        setParamsLoaded(true);\n      }\n    }\n  }, [initialTimeRange, paramsLoaded, start, setQuery]);\n\n  const setTimeRange: TimeRange['setTimeRange'] = useCallback(\n    (value: TimeRangeValue) => {\n      if (isRelativeTimeRange(value)) {\n        setQuery({ start: value.pastDuration, end: undefined });\n      } else {\n        setQuery(value);\n      }\n    },\n    [setQuery],\n  );\n\n  return { timeRange: initialTimeRange, setTimeRange: setTimeRange };\n}\n\n/**\n * Gets the initial refresh interval taking into account URL params and dashboard JSON duration\n * Sets refresh query param if it is empty on page load\n */\nexport function useInitialRefreshInterval(dashboardDuration: DurationString): DurationString {\n  const [query] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });\n  const { refresh } = query;\n  return useMemo(() => {\n    let initialTimeRange: DurationString = dashboardDuration;\n    if (!refresh) {\n      return initialTimeRange;\n    }\n    const startStr = refresh.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = startStr;\n    }\n    return initialTimeRange;\n  }, [dashboardDuration, refresh]);\n}\n\n/**\n * Returns refresh interval getter and setter, taking the URL query params.\n */\nexport function useSetRefreshIntervalParams(\n  initialRefreshInterval?: DurationString,\n): Pick<TimeRange, 'refreshInterval' | 'setRefreshInterval'> {\n  const [query, setQuery] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });\n\n  // determine whether initial param had previously been populated to fix back btn\n  const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);\n\n  const { refresh } = query;\n\n  useEffect(() => {\n    // when dashboard loaded with no params, default to dashboard refresh interval\n    if (!paramsLoaded && !refresh) {\n      setQuery({ refresh: initialRefreshInterval });\n      setParamsLoaded(true);\n    }\n  }, [initialRefreshInterval, paramsLoaded, refresh, setQuery]);\n\n  const setRefreshInterval: TimeRange['setRefreshInterval'] = useCallback(\n    (refresh: DurationString) => setQuery({ refresh }),\n    [setQuery],\n  );\n\n  return {\n    refreshInterval: initialRefreshInterval,\n    setRefreshInterval: setRefreshInterval,\n  };\n}\n\n/**\n * Returns timezone getter and setter, taking the URL query params.\n * Defaults to 'local' when not set.\n */\nexport function useTimeZoneParams(initialTimeZone?: string): { timeZone: string; setTimeZone: (tz: string) => void } {\n  const [query, setQuery] = useQueryParams(timeZoneQueryConfig, { updateType: 'replaceIn' });\n  const { tz } = query;\n\n  const timeZone = (tz as string | undefined) ?? initialTimeZone ?? 'local';\n\n  const setTimeZone = useCallback(\n    (newTz: string) => {\n      setQuery({ tz: newTz });\n    },\n    [setQuery],\n  );\n\n  return { timeZone, setTimeZone };\n}\n"],"names":["isRelativeTimeRange","isDurationString","getUnixTime","isDate","useMemo","useCallback","useEffect","useState","useQueryParams","StringParam","getEncodedValue","input","allowEmptyString","length","str","Array","undefined","encodeTimeRangeValue","timeOptionValue","toString","decodeTimeRangeValue","paramString","Date","Number","TimeRangeParam","encode","decode","equals","valueA","valueB","valueOf","timeRangeQueryConfig","start","end","refreshIntervalQueryConfig","refresh","timeZoneQueryConfig","tz","useInitialTimeRange","dashboardDuration","query","updateType","initialTimeRange","pastDuration","startStr","useTimeRangeParams","setQuery","paramsLoaded","setParamsLoaded","setTimeRange","value","timeRange","useInitialRefreshInterval","useSetRefreshIntervalParams","initialRefreshInterval","setRefreshInterval","refreshInterval","useTimeZoneParams","initialTimeZone","timeZone","setTimeZone","newTz"],"mappings":"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"}
+{"version":3,"sources":["../../../src/runtime/TimeRangeProvider/query-params.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { TimeRangeValue, DurationString, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, isDurationString } from '@perses-dev/spec';\nimport { getUnixTime, isDate } from 'date-fns';\nimport { useMemo, useCallback, useEffect, useRef } from 'react';\nimport type { QueryParamConfig } from 'use-query-params';\nimport { useQueryParams, StringParam } from 'use-query-params';\n\nimport type { TimeRange } from './TimeRangeProvider';\n\nexport type TimeOptionValue = Date | DurationString | null | undefined;\n\n/* Interprets an encoded string and returns either the string or null/undefined if not available */\nfunction getEncodedValue(\n  input: string | Array<string | null> | null | undefined,\n  allowEmptyString?: boolean,\n): string | null | undefined {\n  // '' or []\n  if (!input || (input.length === 0 && (!allowEmptyString || (allowEmptyString && input !== '')))) {\n    return null;\n  }\n\n  const str = input instanceof Array ? input[0] : input;\n  if (str === null || str === undefined) {\n    return str;\n  }\n  if (!allowEmptyString && str === '') {\n    return null;\n  }\n\n  return str;\n}\n\n/* Encodes individual TimeRangeValue as a string, depends on whether start is relative or absolute */\nexport function encodeTimeRangeValue(timeOptionValue: TimeOptionValue): string | null | undefined {\n  if (!timeOptionValue) {\n    return timeOptionValue;\n  }\n\n  if (typeof timeOptionValue === 'string') {\n    if (isDurationString(timeOptionValue)) {\n      return timeOptionValue;\n    }\n  }\n  return (getUnixTime(timeOptionValue) * 1000).toString();\n}\n\n/* Converts param input to supported relative or absolute time range format */\nexport function decodeTimeRangeValue(\n  input: string | Array<string | null> | null | undefined,\n): Date | DurationString | null | undefined {\n  const paramString = getEncodedValue(input);\n  if (!paramString) return null;\n  return isDurationString(paramString) ? paramString : new Date(Number(paramString));\n}\n\n/**\n * Custom TimeRangeValue param type\n * See: https://github.com/pbeshai/use-query-params/tree/master/packages/serialize-query-params#param-types\n */\nexport const TimeRangeParam: QueryParamConfig<TimeOptionValue, TimeOptionValue> = {\n  encode: encodeTimeRangeValue,\n  decode: decodeTimeRangeValue,\n  equals: (valueA: TimeOptionValue, valueB: TimeOptionValue) => {\n    if (valueA === valueB) return true;\n    if (!valueA || !valueB) return valueA === valueB;\n    return valueA.valueOf() === valueB.valueOf();\n  },\n};\n\nexport const timeRangeQueryConfig = {\n  start: TimeRangeParam,\n  end: TimeRangeParam,\n};\n\nexport const refreshIntervalQueryConfig = {\n  refresh: TimeRangeParam,\n};\n\nexport const timeZoneQueryConfig = {\n  tz: StringParam,\n};\n\n/**\n * Gets the initial time range taking into account URL params and dashboard JSON duration\n * Sets start query param if it is empty on page load\n */\nexport function useInitialTimeRange(dashboardDuration: DurationString): TimeRangeValue {\n  const [query] = useQueryParams(timeRangeQueryConfig, { updateType: 'replaceIn' });\n  const { start, end } = query;\n\n  return useMemo(() => {\n    let initialTimeRange: TimeRangeValue = { pastDuration: dashboardDuration };\n    if (!start) {\n      return initialTimeRange;\n    }\n    const startStr = start.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = { pastDuration: startStr };\n    } else if (isDate(start) && isDate(end)) {\n      initialTimeRange = { start: start, end: end } as AbsoluteTimeRange;\n    }\n    return initialTimeRange;\n  }, [start, end, dashboardDuration]);\n}\n\n/**\n * Returns time range getter and setter, taking the URL query params.\n */\nexport function useTimeRangeParams(initialTimeRange: TimeRangeValue): Pick<TimeRange, 'timeRange' | 'setTimeRange'> {\n  const [query, setQuery] = useQueryParams(timeRangeQueryConfig, { updateType: 'replaceIn' });\n  // determine whether initial param had previously been populated to fix back btn\n  const paramsLoaded = useRef(false);\n\n  const { start } = query;\n\n  useEffect(() => {\n    // when dashboard loaded with no params, default to dashboard duration\n    if (!paramsLoaded.current && !start) {\n      if (isRelativeTimeRange(initialTimeRange)) {\n        setQuery({ start: initialTimeRange.pastDuration, end: undefined });\n        paramsLoaded.current = true;\n      }\n    }\n  }, [initialTimeRange, start, setQuery]);\n\n  const setTimeRange: TimeRange['setTimeRange'] = useCallback(\n    (value: TimeRangeValue) => {\n      if (isRelativeTimeRange(value)) {\n        setQuery({ start: value.pastDuration, end: undefined });\n      } else {\n        setQuery(value);\n      }\n    },\n    [setQuery],\n  );\n\n  return { timeRange: initialTimeRange, setTimeRange: setTimeRange };\n}\n\n/**\n * Gets the initial refresh interval taking into account URL params and dashboard JSON duration\n * Sets refresh query param if it is empty on page load\n */\nexport function useInitialRefreshInterval(dashboardDuration: DurationString): DurationString {\n  const [query] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });\n  const { refresh } = query;\n  return useMemo(() => {\n    let initialTimeRange: DurationString = dashboardDuration;\n    if (!refresh) {\n      return initialTimeRange;\n    }\n    const startStr = refresh.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = startStr;\n    }\n    return initialTimeRange;\n  }, [dashboardDuration, refresh]);\n}\n\n/**\n * Returns refresh interval getter and setter, taking the URL query params.\n */\nexport function useSetRefreshIntervalParams(\n  initialRefreshInterval?: DurationString,\n): Pick<TimeRange, 'refreshInterval' | 'setRefreshInterval'> {\n  const [query, setQuery] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });\n\n  // determine whether initial param had previously been populated to fix back btn\n  const paramsLoaded = useRef(false);\n\n  const { refresh } = query;\n\n  useEffect(() => {\n    // when dashboard loaded with no params, default to dashboard refresh interval\n    if (!paramsLoaded.current && !refresh) {\n      setQuery({ refresh: initialRefreshInterval });\n      paramsLoaded.current = true;\n    }\n  }, [initialRefreshInterval, refresh, setQuery]);\n\n  const setRefreshInterval: TimeRange['setRefreshInterval'] = useCallback(\n    (refresh: DurationString) => setQuery({ refresh }),\n    [setQuery],\n  );\n\n  return {\n    refreshInterval: initialRefreshInterval,\n    setRefreshInterval: setRefreshInterval,\n  };\n}\n\n/**\n * Returns timezone getter and setter, taking the URL query params.\n * Defaults to 'local' when not set.\n */\nexport function useTimeZoneParams(initialTimeZone?: string): { timeZone: string; setTimeZone: (tz: string) => void } {\n  const [query, setQuery] = useQueryParams(timeZoneQueryConfig, { updateType: 'replaceIn' });\n  const { tz } = query;\n\n  const timeZone = (tz as string | undefined) ?? initialTimeZone ?? 'local';\n\n  const setTimeZone = useCallback(\n    (newTz: string) => {\n      setQuery({ tz: newTz });\n    },\n    [setQuery],\n  );\n\n  return { timeZone, setTimeZone };\n}\n"],"names":["isRelativeTimeRange","isDurationString","getUnixTime","isDate","useMemo","useCallback","useEffect","useRef","useQueryParams","StringParam","getEncodedValue","input","allowEmptyString","length","str","Array","undefined","encodeTimeRangeValue","timeOptionValue","toString","decodeTimeRangeValue","paramString","Date","Number","TimeRangeParam","encode","decode","equals","valueA","valueB","valueOf","timeRangeQueryConfig","start","end","refreshIntervalQueryConfig","refresh","timeZoneQueryConfig","tz","useInitialTimeRange","dashboardDuration","query","updateType","initialTimeRange","pastDuration","startStr","useTimeRangeParams","setQuery","paramsLoaded","current","setTimeRange","value","timeRange","useInitialRefreshInterval","useSetRefreshIntervalParams","initialRefreshInterval","setRefreshInterval","refreshInterval","useTimeZoneParams","initialTimeZone","timeZone","setTimeZone","newTz"],"mappings":"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"}

package/dist/runtime/UsageMetricsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsageMetricsProvider.d.ts","sourceRoot":"","sources":["../../src/runtime/UsageMetricsProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElD,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,SAAS,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,mBAAmB,mDAAqD,CAAC;AAEtF,eAAO,MAAM,sBAAsB,QAAO,YAAY,GAAG,SAExD,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,sBA6BlC,CAAC;AAiBF,eAAO,MAAM,oBAAoB,gDAAiD,iBAAiB,KAAG,YAerG,CAAC"}
+{"version":3,"file":"UsageMetricsProvider.d.ts","sourceRoot":"","sources":["../../src/runtime/UsageMetricsProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElD,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,SAAS,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,mBAAmB,mDAAqD,CAAC;AAEtF,eAAO,MAAM,sBAAsB,QAAO,YAAY,GAAG,SAExD,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,sBAWlC,CAAC;AAsCF,eAAO,MAAM,oBAAoB,gDAAiD,iBAAiB,KAAG,YAgBrG,CAAC"}

package/dist/runtime/UsageMetricsProvider.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFetch } from "@perses-dev/client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 export const UsageMetricsContext = /*#__PURE__*/ createContext(undefined);
 export const useUsageMetricsContext = ()=>{
     return useContext(UsageMetricsContext);
@@ -24,27 +24,30 @@ export const useUsageMetrics = ()=>{
             if (ctx === undefined) {
                 return;
             }
-            const definitionKey = JSON.stringify(definition);
-            if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
-                // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
-                return;
-            }
-            if (ctx.pendingQueries.get(definitionKey) !== newState) {
-                ctx.pendingQueries.set(definitionKey, newState);
-                if (newState === 'error') {
-                    ctx.renderErrorCount += 1;
-                }
-                const allDone = [
-                    ...ctx.pendingQueries.values()
-                ].every((p)=>p !== 'pending');
-                if (ctx.renderDurationMs === 0 && allDone) {
-                    ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
-                    submitMetrics(ctx);
-                }
-            }
+            recordQuery(ctx, definition, newState);
         }
     };
 };
+function recordQuery(ctx, definition, newState) {
+    const definitionKey = JSON.stringify(definition);
+    if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
+        // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
+        return;
+    }
+    if (ctx.pendingQueries.get(definitionKey) !== newState) {
+        ctx.pendingQueries.set(definitionKey, newState);
+        if (newState === 'error') {
+            ctx.renderErrorCount += 1;
+        }
+        const allDone = [
+            ...ctx.pendingQueries.values()
+        ].every((p)=>p !== 'pending');
+        if (ctx.renderDurationMs === 0 && allDone) {
+            ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
+            submitMetrics(ctx);
+        }
+    }
+}
 const submitMetrics = async (stats)=>{
     await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {
         method: 'POST',
@@ -61,11 +64,12 @@ const submitMetrics = async (stats)=>{
 };
 export const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children })=>{
     const { fetch } = useFetch();
+    const [startRenderTime] = useState(()=>Date.now());
     const ctx = {
         project: project,
         dashboard: dashboard,
         renderErrorCount: 0,
-        startRenderTime: Date.now(),
+        startRenderTime,
         renderDurationMs: 0,
         pendingQueries: new Map(),
         apiPrefix,