Gladorme · Aug 28, 2026 · Aug 24, 2026 · Aug 27, 2026
@@ -1 +1 @@
-v22.14.0
+v24.19.0
@@ -8,7 +8,6 @@
     "perf": "warn"
   },
   "env": {
-    "commonjs": true,
     "es6": true,
     "vitest": true,
     "node": true,
@@ -18,6 +17,15 @@
     "typescript/explicit-function-return-type": "error",
     "typescript/explicit-module-boundary-types": "error",
     "typescript/array-type": ["error", { "default": "array-simple" }],
+    "typescript/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "separate-type-imports",
+        "disallowTypeAnnotations": true
+      }
+    ],
+    "typescript/no-import-type-side-effects": "error",
     "eqeqeq": ["error", "always"],
     "no-unused-vars": [
       "error",
@@ -43,6 +51,7 @@
       "error",
       { "props": "never", "children": "never", "propElementValues": "always" }
     ],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
     "import/no-duplicates": "error",
     "no-restricted-imports": [
       "error",

@@ -1,20 +1,26 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
   "jsc": {
+    "baseUrl": ".",
     "parser": {
       "syntax": "typescript",
       "tsx": true
     },
-    "target": "es2022",
+    "target": "es2023",
     "transform": {
       "react": {
         "runtime": "automatic",
         "useBuiltins": true
       }
+    },
+    "experimental": {
+      "keepImportAttributes": true
     }
   },
   "module": {
-    "type": "es6"
+    "type": "es6",
+    "resolveFully": true,
+    "outFileExtension": "js"
   },
   "sourceMaps": true,
   "exclude": ["\\.(stories|test)\\."]

@@ -6,8 +6,8 @@ This repository contains the core plugins for [Perses](https://github.com/perses
 
 As prerequisites, you need:
 
-- NodeJS [version 22 or greater](https://nodejs.org/).
-- npm [version 10 or greater](https://www.npmjs.com/).
+- NodeJS [version 24 or greater](https://nodejs.org/).
+- npm [version 11 or greater](https://www.npmjs.com/).
 
 You should first run `npm install` at the root of the repository.
 

diff --git a/alertmanager/package.json b/alertmanager/package.json
@@ -15,24 +15,24 @@
     "dev": "rsbuild dev",
     "build": "npm run build-mf && concurrently \"npm:build:*\"",
     "build-mf": "rsbuild build",
-    "build:cjs": "swc ./src -d dist/lib/cjs --strip-leading-paths --config-file ../.cjs.swcrc",
     "build:esm": "swc ./src -d dist/lib --strip-leading-paths --config-file ../.swcrc",
     "build:types": "tsc --project tsconfig.build.json",
     "lint": "oxlint src",
     "test": "cross-env LC_ALL=C TZ=UTC vitest run",
     "type-check": "tsc --noEmit"
   },
-  "main": "lib/cjs/index.js",
+  "type": "module",
+  "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@perses-dev/components": "^0.55.0-beta.3",
-    "@perses-dev/spec": "^0.3.0-beta.4",
-    "@perses-dev/dashboards": "^0.55.0-beta.3",
-    "@perses-dev/explore": "^0.55.0-beta.3",
-    "@perses-dev/plugin-system": "^0.55.0-beta.3",
+    "@perses-dev/spec": "^0.3.0-beta.5",
+    "@perses-dev/dashboards": "^0.55.0-beta.6",
+    "@perses-dev/explore": "^0.55.0-beta.6",
+    "@perses-dev/plugin-system": "^0.55.0-beta.6",
     "@tanstack/react-query": "^4.39.1",
     "date-fns": "^4.1.0",
     "lodash": "^4.17.21",

@@ -31,7 +31,8 @@ import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
 import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import DeleteIcon from 'mdi-material-ui/Delete';
 import PlusIcon from 'mdi-material-ui/Plus';
-import { ReactElement, useCallback, useRef } from 'react';
+import type { ReactElement } from 'react';
+import { useCallback, useRef } from 'react';
 
 export interface BaseColumnDefinition {
   name: string;

@@ -12,7 +12,8 @@
 // limitations under the License.
 
 import { TextField } from '@mui/material';
-import { ChangeEvent, ReactElement, useCallback, useEffect, useState } from 'react';
+import type { ChangeEvent, ReactElement } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface LazyTextFieldProps {
   label: string;

@@ -11,18 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  IconButton,
-  MenuItem,
-  Stack,
-  TextField,
-  Select,
-  FormControl,
-  InputLabel,
-  SelectChangeEvent,
-} from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material';
+import { IconButton, MenuItem, Stack, TextField, Select, FormControl, InputLabel } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/Delete';
-import { ReactElement, useId } from 'react';
+import type { ReactElement } from 'react';
+import { useId } from 'react';
 
 export interface MatcherValue {
   name: string;

@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import { Chip, Stack } from '@mui/material';
-import { SilenceMatcher } from '@perses-dev/spec';
-import { ReactElement } from 'react';
+import type { SilenceMatcher } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
 
 export interface MatchersListProps {
   matchers: SilenceMatcher[];

@@ -13,10 +13,12 @@
 
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
-import { ReactElement, useState } from 'react';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
 
-import { PostableSilence } from '../model/api-types';
-import { MatcherEditor, MatcherValue } from './MatcherEditor';
+import type { PostableSilence } from '../model/api-types';
+import type { MatcherValue } from './MatcherEditor';
+import { MatcherEditor } from './MatcherEditor';
 
 export interface SilenceFormProps {
   open: boolean;

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Chip, ChipProps } from '@mui/material';
-import { ReactElement } from 'react';
+import type { ChipProps } from '@mui/material';
+import { Chip } from '@mui/material';
+import type { ReactElement } from 'react';
 
 export interface StatusBadgeProps {
   status: string;

@@ -15,8 +15,9 @@ import { Box, Stack } from '@mui/material';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { DataQueriesProvider, MultiQueryEditor } from '@perses-dev/plugin-system';
-import { QueryDefinition } from '@perses-dev/spec';
-import { ReactElement, useState } from 'react';
+import type { QueryDefinition } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
 
 interface AlertsExplorerQueryParams {
   queries?: QueryDefinition[];

@@ -16,13 +16,15 @@ import { useSnackbar } from '@perses-dev/components';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { DataQueriesProvider, MultiQueryEditor, useDatasourceClient } from '@perses-dev/plugin-system';
-import { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
+import type { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
 import { useQueryClient } from '@tanstack/react-query';
 import BellOffIcon from 'mdi-material-ui/BellOff';
-import { ReactElement, useCallback, useMemo, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { SilenceForm } from '../components/SilenceForm';
-import { AlertManagerClient, DEFAULT_ALERTMANAGER, PostableSilence } from '../model';
+import type { AlertManagerClient, PostableSilence } from '../model';
+import { DEFAULT_ALERTMANAGER } from '../model';
 
 interface SilencesExplorerQueryParams {
   queries?: QueryDefinition[];

@@ -11,9 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';
+import type { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';
 
-import packageJson from '../package.json';
+import packageJson from '../package.json' with { type: 'json' };
 
 export function getPluginModule(): PluginModuleResource {
   const { name, version, perses } = packageJson;

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import type * as ClientModule from '@perses-dev/client';
+
 import { createSilence, deleteSilence, getAlerts, getSilence, getSilences, getStatus } from './alertmanager-client';
 
 type FetchResponse = {
@@ -22,7 +24,7 @@ type FetchResponse = {
 
 const fetchMock = vi.hoisted(() => vi.fn());
 vi.mock('@perses-dev/client', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('@perses-dev/client')>()),
+  ...(await importOriginal<typeof ClientModule>()),
   fetch: (...args: unknown[]): Promise<FetchResponse> => fetchMock(...args),
 }));
 

@@ -11,10 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { fetch, RequestHeaders } from '@perses-dev/client';
-import { DatasourceClient } from '@perses-dev/plugin-system';
+import type { RequestHeaders } from '@perses-dev/client';
+import { fetch } from '@perses-dev/client';
+import type { DatasourceClient } from '@perses-dev/plugin-system';
 
-import {
+import type {
   AlertManagerStatus,
   AlertsQueryParams,
   GettableAlert,

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DatasourceSelectValue, isVariableDatasource } from '@perses-dev/plugin-system';
-import { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
+import type { DatasourceSelectValue } from '@perses-dev/plugin-system';
+import { isVariableDatasource } from '@perses-dev/plugin-system';
+import type { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
 
 export const ALERTMANAGER_DATASOURCE_KIND = 'AlertManagerDatasource' as const;
 

@@ -12,9 +12,9 @@
 // limitations under the License.
 
 import { HTTPSettingsEditor } from '@perses-dev/plugin-system';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
-import { AlertManagerDatasourceSpec } from './types';
+import type { AlertManagerDatasourceSpec } from './types';
 
 export interface AlertManagerDatasourceEditorProps {
   value: AlertManagerDatasourceSpec;

@@ -11,14 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { PanelPlugin } from '@perses-dev/plugin-system';
+import type { PanelPlugin } from '@perses-dev/plugin-system';
 
-import { AlertTableOptions } from './alert-table-model';
+import type { AlertTableOptions } from './alert-table-model';
 import { AlertTableColumnsEditor } from './AlertTableColumnsEditor';
 import { AlertTableDeduplicationEditor } from './AlertTableDeduplicationEditor';
 import { AlertTableLabelsEditor } from './AlertTableLabelsEditor';
 import { AlertTableOptionsEditor } from './AlertTableOptionsEditor';
-import { AlertTablePanel, AlertTablePanelProps } from './AlertTablePanel';
+import type { AlertTablePanelProps } from './AlertTablePanel';
+import { AlertTablePanel } from './AlertTablePanel';
 
 /**
  * Panel plugin for displaying Alert Manager alerts in a hierarchical table.

@@ -12,12 +12,13 @@
 // limitations under the License.
 
 import { TextField } from '@mui/material';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { ReactElement, useCallback } from 'react';
+import type { ReactElement } from 'react';
+import { useCallback } from 'react';
 
 import { ColumnsEditor } from '../../components/ColumnsEditor';
-import { AlertTableOptions, ColumnDefinition, ColumnSortMode } from './alert-table-model';
+import type { AlertTableOptions, ColumnDefinition, ColumnSortMode } from './alert-table-model';
 
 const SORT_MODE_LABELS: Record<ColumnSortMode, string> = {
   alphabetical: 'Alphabetical',

@@ -13,11 +13,12 @@
 
 import { Autocomplete, Chip, FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { OptionsEditorGroup } from '@perses-dev/components';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { ReactElement, SyntheticEvent, useCallback } from 'react';
+import type { ReactElement, SyntheticEvent } from 'react';
+import { useCallback } from 'react';
 
-import { AlertDeduplicationConfig, AlertTableOptions } from './alert-table-model';
+import type { AlertDeduplicationConfig, AlertTableOptions } from './alert-table-model';
 
 const MODE_DESCRIPTIONS: Record<AlertDeduplicationConfig['mode'], string> = {
   none: 'No deduplication. All alerts from all datasources are shown as-is.',

@@ -27,13 +27,14 @@ import {
   Typography,
 } from '@mui/material';
 import { OptionsEditorGroup } from '@perses-dev/components';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import DeleteIcon from 'mdi-material-ui/Delete';
 import PlusIcon from 'mdi-material-ui/Plus';
-import { ReactElement, useCallback } from 'react';
+import type { ReactElement } from 'react';
+import { useCallback } from 'react';
 
-import { AlertTableOptions, LabelColorMapping, LabelColorOverride } from './alert-table-model';
+import type { AlertTableOptions, LabelColorMapping, LabelColorOverride } from './alert-table-model';
 
 const MODE_LABELS: Record<LabelColorMapping['mode'], string> = {
   auto: 'Auto (hash-derived colors)',

@@ -13,11 +13,13 @@
 
 import { Autocomplete, Checkbox, Chip, FormControlLabel, TextField } from '@mui/material';
 import { OptionsEditorGroup } from '@perses-dev/components';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { ChangeEvent, ReactElement, SyntheticEvent, useCallback } from 'react';
+import type { ChangeEvent, ReactElement, SyntheticEvent } from 'react';
+import { useCallback } from 'react';
 
-import { AlertAction, AlertTableOptions, ALL_ALERT_ACTIONS } from './alert-table-model';
+import type { AlertAction, AlertTableOptions } from './alert-table-model';
+import { ALL_ALERT_ACTIONS } from './alert-table-model';
 
 const ACTION_LABELS: Record<AlertAction, string> = {
   silence: 'Silence alert',