@perses-dev/heatmap-chart-plugin 0.2.0

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// Copyright 2025 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2025 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/HeatMapChart.js

@@ -0,0 +1,40 @@
+// Copyright 2025 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, "HeatMapChart", {
+    enumerable: true,
+    get: function() {
+        return HeatMapChart;
+    }
+});
+const _components = require("./components");
+const _heatmapchartmodel = require("./heat-map-chart-model");
+const HeatMapChart = {
+    PanelComponent: _components.HeatMapChartPanel,
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    queryOptions: {
+        mode: 'range'
+    },
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: _components.HeatMapChartOptionsEditorSettings
+        }
+    ],
+    createInitialOptions: _heatmapchartmodel.createInitialHeatMapChartOptions
+};

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// Copyright 2025 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
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _client = /*#__PURE__*/ _interop_require_default(require("react-dom/client"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.StrictMode, {}));

package/lib/cjs/components/HeatMapChart.js

@@ -0,0 +1,149 @@
+// Copyright 2025 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, "HeatMapChart", {
+    enumerable: true,
+    get: function() {
+        return HeatMapChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _material = require("@mui/material");
+const _utils = require("../utils");
+const _HeatMapTooltip = require("./HeatMapTooltip");
+(0, _core.use)([
+    _charts.HeatmapChart
+]);
+// The default coloring is a blue->yellow->red gradient
+const DEFAULT_VISUAL_MAP_COLORS = [
+    '#313695',
+    '#4575b4',
+    '#74add1',
+    '#abd9e9',
+    '#e0f3f8',
+    '#ffffbf',
+    '#fee090',
+    '#fdae61',
+    '#f46d43',
+    '#d73027',
+    '#a50026'
+];
+function HeatMapChart({ width, height, data, xAxisCategories, yAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap }) {
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const theme = (0, _material.useTheme)();
+    const { timeZone } = (0, _components.useTimeZone)();
+    const option = (0, _react.useMemo)(()=>{
+        return {
+            tooltip: {
+                appendToBody: true,
+                formatter: (params)=>{
+                    return (0, _HeatMapTooltip.generateTooltipHTML)({
+                        data: params.data.value,
+                        label: params.data.label,
+                        marker: params.marker,
+                        xAxisCategories,
+                        yAxisCategories,
+                        theme,
+                        yAxisFormat: yAxisFormat,
+                        countFormat: countFormat
+                    });
+                }
+            },
+            xAxis: {
+                type: 'category',
+                data: xAxisCategories,
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: (0, _utils.getFormattedHeatmapAxisLabel)(timeScale?.rangeMs ?? 0, timeZone)
+                }
+            },
+            yAxis: (0, _components.getFormattedAxis)({
+                type: 'category',
+                data: yAxisCategories
+            }, yAxisFormat),
+            visualMap: {
+                show: showVisualMap ?? false,
+                type: 'continuous',
+                min: countMin,
+                max: countMax,
+                realtime: false,
+                itemHeight: height - 30,
+                itemWidth: 10,
+                orient: 'vertical',
+                left: 'right',
+                top: 'center',
+                inRange: {
+                    color: DEFAULT_VISUAL_MAP_COLORS
+                },
+                textStyle: {
+                    color: theme.palette.text.primary,
+                    textBorderColor: theme.palette.background.default,
+                    textBorderWidth: 5
+                }
+            },
+            series: [
+                {
+                    name: 'Gaussian',
+                    type: 'heatmap',
+                    data: data,
+                    emphasis: {
+                        itemStyle: {
+                            borderColor: '#333',
+                            borderWidth: 1
+                        }
+                    },
+                    progressive: 1000,
+                    animation: false
+                }
+            ]
+        };
+    }, [
+        xAxisCategories,
+        timeScale?.rangeMs,
+        timeZone,
+        yAxisCategories,
+        yAxisFormat,
+        showVisualMap,
+        countMin,
+        countMax,
+        height,
+        theme,
+        data,
+        countFormat
+    ]);
+    const chart = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
+            sx: {
+                width: width,
+                height: height,
+                padding: `${chartsTheme.container.padding.default}px`
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        }), [
+        chartsTheme.container.padding.default,
+        chartsTheme.echartsTheme,
+        height,
+        option,
+        width
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: chart
+    });
+}

package/lib/cjs/components/HeatMapChartOptionsEditorSettings.js

@@ -0,0 +1,85 @@
+// Copyright 2025 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, "HeatMapChartOptionsEditorSettings", {
+    enumerable: true,
+    get: function() {
+        return HeatMapChartOptionsEditorSettings;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _heatmapchartmodel = require("../heat-map-chart-model");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function HeatMapChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleYAxisFormatChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.yAxisFormat = newFormat;
+        }));
+    };
+    const handleCountFormatChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.countFormat = newFormat;
+        }));
+    };
+    const handleShowVisualMapChange = (_, checked)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showVisualMap = checked;
+        }));
+    };
+    // ensures decimalPlaces defaults to correct value
+    const yAxisFormat = (0, _merge.default)({}, _heatmapchartmodel.DEFAULT_FORMAT, value.yAxisFormat);
+    const countFormat = (0, _merge.default)({}, _heatmapchartmodel.DEFAULT_FORMAT, value.countFormat);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                    title: "Bucket Count",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                            value: countFormat,
+                            onChange: handleCountFormatChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                            label: "Show Visual Map",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                checked: !!value.showVisualMap,
+                                onChange: handleShowVisualMapChange
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                    title: "Y Axis",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                        value: yAxisFormat,
+                        onChange: handleYAxisFormatChange
+                    })
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/components/HeatMapChartPanel.js

@@ -0,0 +1,178 @@
+// Copyright 2025 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, "HeatMapChartPanel", {
+    enumerable: true,
+    get: function() {
+        return HeatMapChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+const _heatmapchartmodel = require("../heat-map-chart-model");
+const _utils = require("../utils");
+const _HeatMapChart = require("./HeatMapChart");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const HEATMAP_MIN_HEIGHT = 200;
+const HEATMAP_ITEM_MIN_HEIGHT = 2;
+function HeatMapChartPanel(props) {
+    const { spec: pluginSpec, contentDimensions, queryResults } = props;
+    // ensures all default format properties set if undef
+    const yAxisFormat = (0, _merge.default)({}, _heatmapchartmodel.DEFAULT_FORMAT, pluginSpec.yAxisFormat);
+    const countFormat = (0, _merge.default)({}, _heatmapchartmodel.DEFAULT_FORMAT, pluginSpec.countFormat);
+    const { data, xAxisCategories, yAxisCategories, countMin, countMax, timeScale } = (0, _react.useMemo)(()=>{
+        if (!queryResults || queryResults.length === 0) {
+            return {
+                data: [],
+                xAxisCategories: [],
+                yAxisCategories: [],
+                countMin: 0,
+                countMax: 0,
+                timeScale: undefined
+            };
+        }
+        if (queryResults.length != 1 || queryResults[0].data.series.length != 1 || queryResults[0].data.series[0].histograms === undefined) {
+            return {
+                data: [],
+                xAxisCategories: [],
+                yAxisCategories: [],
+                countMin: 0,
+                countMax: 0,
+                timeScale: undefined
+            };
+        }
+        const series = queryResults[0].data.series[0];
+        const timeScale = (0, _utils.getCommonTimeScaleForQueries)(queryResults);
+        const xAxisCategories = (0, _utils.generateCompleteTimestamps)(timeScale);
+        // Dummy value that will be replaced at the first iteration
+        let lowestBound = Infinity;
+        let highestBound = -Infinity;
+        let countMin = Infinity;
+        let countMax = -Infinity;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        for (const [_, histogram] of series?.histograms ?? []){
+            for (const bucket of histogram?.buckets ?? []){
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const [_, lowerBound, upperBound, count] = bucket;
+                const lowerBoundFloat = parseFloat(lowerBound);
+                const upperBoundFloat = parseFloat(upperBound);
+                const countFloat = parseFloat(count);
+                if (lowerBoundFloat < lowestBound) {
+                    lowestBound = lowerBoundFloat;
+                }
+                if (upperBoundFloat > highestBound) {
+                    highestBound = upperBoundFloat;
+                }
+                if (countFloat < countMin) {
+                    countMin = countFloat;
+                }
+                if (countFloat > countMax) {
+                    countMax = countFloat;
+                }
+            }
+        }
+        const height = contentDimensions?.height ?? HEATMAP_MIN_HEIGHT;
+        const totalRange = highestBound - lowestBound;
+        const rangePerItem = totalRange * HEATMAP_ITEM_MIN_HEIGHT / height;
+        const totalItems = Math.ceil(height / HEATMAP_ITEM_MIN_HEIGHT);
+        // Generating value of the Y axis based on the height divided by the size of a cell (item)
+        const yAxisCategories = Array.from({
+            length: totalItems
+        }, (_, index)=>(lowestBound + index * rangePerItem).toFixed(3));
+        const data = [];
+        // Logic for filling all cells where a bucket is present
+        for (const [time, histogram] of series?.histograms ?? []){
+            const itemIndexOnXaxis = xAxisCategories.findIndex((v)=>v === time * 1000);
+            for (const bucket of histogram?.buckets ?? []){
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const [_, lowerBound, upperBound, count] = bucket;
+                const yLowerBoundItem = Math.floor((parseFloat(lowerBound) - lowestBound) / rangePerItem);
+                const yUpperBoundItem = Math.ceil((parseFloat(upperBound) - lowestBound) / rangePerItem);
+                for(let i = 0; i < yUpperBoundItem - yLowerBoundItem; i++){
+                    // TODO: some bucket may have overlapping cells, we could use avg value. Probably will need to move to a matrix data structure for performance reasons
+                    data.push({
+                        value: [
+                            itemIndexOnXaxis,
+                            yLowerBoundItem + i,
+                            parseFloat(count)
+                        ],
+                        label: count
+                    });
+                }
+            }
+        }
+        return {
+            data,
+            xAxisCategories,
+            yAxisCategories,
+            countMin,
+            countMax,
+            timeScale
+        };
+    }, [
+        contentDimensions?.height,
+        queryResults
+    ]);
+    // TODO: add support for multiple queries
+    if (queryResults.length > 1) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            justifyContent: "center",
+            height: "100%",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                textAlign: "center",
+                children: "Only one query at a time is supported for now"
+            })
+        });
+    }
+    // Mo data message handled inside chart component
+    if (data.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            justifyContent: "center",
+            height: "100%",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                textAlign: "center",
+                children: "No data available (only native histograms are supported for now)"
+            })
+        });
+    }
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        direction: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeatMapChart.HeatMapChart, {
+            width: contentDimensions.width,
+            height: contentDimensions.height,
+            data: data,
+            xAxisCategories: xAxisCategories,
+            yAxisCategories: yAxisCategories,
+            yAxisFormat: yAxisFormat,
+            countFormat: countFormat,
+            countMin: countMin,
+            countMax: countMax,
+            timeScale: timeScale,
+            showVisualMap: pluginSpec.showVisualMap
+        })
+    });
+}

package/lib/cjs/components/HeatMapTooltip.js

@@ -0,0 +1,58 @@
+// Copyright 2024 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, "generateTooltipHTML", {
+    enumerable: true,
+    get: function() {
+        return generateTooltipHTML;
+    }
+});
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme, yAxisFormat, countFormat }) {
+    const [x, y] = data;
+    const xAxisLabel = xAxisCategories[x];
+    const { formattedDate, formattedTime } = (0, _components.getDateAndTime)(xAxisLabel);
+    const tooltipHeader = (0, _material.css)`
+    border-bottom: 1px solid ${theme.palette.grey[500]};
+    padding-bottom: 8px;
+  `;
+    const tooltipContentStyles = (0, _material.css)`
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+  `;
+    const labelStyles = (0, _material.css)`
+    margin-right: 16px;
+  `;
+    const lowerBound = parseFloat(yAxisCategories[y]);
+    const upperBound = yAxisCategories[y + 1] ? parseFloat(yAxisCategories[y + 1]) : parseFloat(yAxisCategories[y]) + parseFloat(yAxisCategories[y]) - parseFloat(yAxisCategories[y - 1]); // Top cell, upper bound need to be calculated from previous cell
+    return `
+    <div>
+      <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
+      <div style="${tooltipContentStyles.styles}">
+        <div style="${labelStyles.styles}">
+          ${marker}
+          <strong>${(0, _core.formatValue)(lowerBound, yAxisFormat)} - ${(0, _core.formatValue)(upperBound, yAxisFormat)}</strong>
+        </div>
+        <div>
+          ${(0, _core.formatValue)(parseFloat(label), countFormat)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/lib/cjs/components/index.js

@@ -0,0 +1,32 @@
+// Copyright 2025 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
+});
+_export_star(require("./HeatMapChartOptionsEditorSettings"), exports);
+_export_star(require("./HeatMapChartPanel"), exports);
+_export_star(require("./HeatMapChart"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// Copyright 2025 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

package/lib/cjs/getPluginModule.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return getPluginModule;
+    }
+});
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../package.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getPluginModule() {
+    const { name, version, perses } = _packagejson.default;
+    return {
+        kind: 'PluginModule',
+        metadata: {
+            name,
+            version
+        },
+        spec: perses
+    };
+}