diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml index d10b037eb..3daed6e4b 100644 --- a/.github/workflows/react.yml +++ b/.github/workflows/react.yml @@ -45,3 +45,21 @@ jobs: enable_npm: true - run: npm ci - run: npm run type-check + + # Plugins are developed against React 18 (the minimum supported version); also validate them against React 19. + react-19: + name: 'type-check & test (React 19)' + runs-on: ubuntu-latest + steps: + - name: checkout + uses: actions/checkout@v7 + - uses: perses/github-actions@v0.13.0 + - uses: ./.github/perses-ci/actions/setup_environment + with: + enable_npm: true + - run: npm ci + - run: npm install --no-save react@^19 react-dom@^19 @types/react@^19 @types/react-dom@^19 + # Fail fast if peer resolution silently kept React 18. + - run: node -e "const v=require('react/package.json').version; if(!v.startsWith('19.')) { console.error('Expected React 19, got', v); process.exit(1) }" + - run: npm run type-check + - run: npm run test diff --git a/README.md b/README.md index b5459da4d..26c7290d4 100644 --- a/README.md +++ b/README.md @@ -49,23 +49,27 @@ This will allow you to use the updates from perses core in your plugin so you ca # perses/plugins/timeserieschart/package.json "dependencies": { - "color-hash": "^2.0.2" + "color-hash": "^2.0.2", + "d3-scale-chromatic": "^3.1.0", + "react-compiler-runtime": "^1.0.0", + "@perses-dev/components": "v0.0.0-snapshot-panel-actions-520389b", + "@perses-dev/plugin-system": "v0.0.0-snapshot-panel-actions-520389b" }, "peerDependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@hookform/resolvers": "^3.2.0", -- "@perses-dev/components": "^0.51.0-rc.1", -- "@perses-dev/plugin-system": "^0.51.0-rc.1", + "@hookform/resolvers": "^5.9.1", +- "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", +- "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^17.0.2 || ^18.0.0", - "react-dom": "^17.0.2 || ^18.0.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" } ``` diff --git a/alertmanager/README.md b/alertmanager/README.md index a9330c2eb..1e34c3e93 100644 --- a/alertmanager/README.md +++ b/alertmanager/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/alertmanager/package.json b/alertmanager/package.json index 5d9ee3998..dd40ad4a1 100644 --- a/alertmanager/package.json +++ b/alertmanager/package.json @@ -31,16 +31,16 @@ "peerDependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@perses-dev/components": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" }, "files": [ "lib/**/*", diff --git a/alertmanager/rsbuild.config.ts b/alertmanager/rsbuild.config.ts index acab3547b..820b58248 100644 --- a/alertmanager/rsbuild.config.ts +++ b/alertmanager/rsbuild.config.ts @@ -29,8 +29,9 @@ export default createConfigForPlugin({ './AlertManagerSilencesExplorer': './src/explore/AlertManagerSilencesExplorer.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, 'date-fns': { singleton: true }, lodash: { singleton: true }, '@perses-dev/components': { singleton: true }, diff --git a/barchart/README.md b/barchart/README.md index 57196de97..d6177020f 100644 --- a/barchart/README.md +++ b/barchart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/barchart/package.json b/barchart/package.json index 8e77e67df..689a76c9a 100644 --- a/barchart/package.json +++ b/barchart/package.json @@ -31,16 +31,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/barchart/rsbuild.config.ts b/barchart/rsbuild.config.ts index 0e19f5344..8bbf6e1f1 100644 --- a/barchart/rsbuild.config.ts +++ b/barchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './BarChart': './src/BarChart.ts', }, shared: { - react: { requiredVersion: '^18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '^18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, @@ -34,7 +35,7 @@ export default createConfigForPlugin({ '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, '@emotion/styled': { singleton: true }, '@hookform/resolvers': { singleton: true }, - 'use-resize-observer': { requiredVersion: '^9.1.0', singleton: true }, + 'use-resize-observer': { requiredVersion: '^10.0.0', singleton: true }, 'mdi-material-ui': { requiredVersion: '^7.4.0', singleton: true }, immer: { singleton: true }, }, diff --git a/canvas/README.md b/canvas/README.md index 98ac5e3a6..bf4462151 100644 --- a/canvas/README.md +++ b/canvas/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/canvas/package.json b/canvas/package.json index 5d78a687e..31cf7811f 100644 --- a/canvas/package.json +++ b/canvas/package.json @@ -28,13 +28,13 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/material": "^5.0.0 || ^6.0.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", "mdi-material-ui": "^7.9.2", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" }, "files": [ "lib/**/*", diff --git a/canvas/rsbuild.config.ts b/canvas/rsbuild.config.ts index b337c40af..0654c5e4d 100644 --- a/canvas/rsbuild.config.ts +++ b/canvas/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './Canvas': './src/Canvas.tsx', }, shared: { - react: { requiredVersion: '^18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '^18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, '@perses-dev/components': { singleton: true }, '@perses-dev/plugin-system': { singleton: true }, '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, diff --git a/clickhouse/README.md b/clickhouse/README.md index e96cd896c..07c9ba098 100644 --- a/clickhouse/README.md +++ b/clickhouse/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/clickhouse/package.json b/clickhouse/package.json index 35470304b..83f8229d8 100644 --- a/clickhouse/package.json +++ b/clickhouse/package.json @@ -31,22 +31,22 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/clickhouse/rsbuild.config.ts b/clickhouse/rsbuild.config.ts index 5716dd430..560f02616 100644 --- a/clickhouse/rsbuild.config.ts +++ b/clickhouse/rsbuild.config.ts @@ -25,8 +25,9 @@ export default createConfigForPlugin({ './ClickHouseLogQuery': './src/queries/click-house-log-query', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/datasourcevariable/package.json b/datasourcevariable/package.json index e2b411935..6d7b58e8e 100644 --- a/datasourcevariable/package.json +++ b/datasourcevariable/package.json @@ -31,15 +31,15 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/datasourcevariable/rsbuild.config.ts b/datasourcevariable/rsbuild.config.ts index a1e07aadb..a224ad36d 100644 --- a/datasourcevariable/rsbuild.config.ts +++ b/datasourcevariable/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './DatasourceVariable': './src/DatasourceVariable.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/flamechart/package.json b/flamechart/package.json index ea370e9a6..1386ad4c8 100644 --- a/flamechart/package.json +++ b/flamechart/package.json @@ -34,17 +34,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@tanstack/react-table": "^8.20.5", + "@tanstack/react-table": "^9.2.8", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/flamechart/rsbuild.config.ts b/flamechart/rsbuild.config.ts index 079c19c83..966a7b931 100644 --- a/flamechart/rsbuild.config.ts +++ b/flamechart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './FlameChart': './src/FlameChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/flamechart/src/components/SeriesChart.tsx b/flamechart/src/components/SeriesChart.tsx index deca1fbe9..63f187fa5 100644 --- a/flamechart/src/components/SeriesChart.tsx +++ b/flamechart/src/components/SeriesChart.tsx @@ -44,7 +44,7 @@ export function SeriesChart(props: SeriesChartProps): ReactElement { const chartsTheme = useChartsTheme(); const theme = useTheme(); const { setTimeRange } = useTimeRange(); - const chartRef = useRef(); + const chartRef = useRef(undefined); const handleEvents: OnEventsType = useMemo(() => { return { diff --git a/flamechart/src/components/TableChart.tsx b/flamechart/src/components/TableChart.tsx index 20c467fda..781be39fa 100644 --- a/flamechart/src/components/TableChart.tsx +++ b/flamechart/src/components/TableChart.tsx @@ -50,10 +50,10 @@ export function TableChart(props: TableChartProps): ReactElement { return tableRecursionJson(data.profile.stackTrace, searchValue); }, [data, searchValue]); - const columns: Array> = useMemo(() => { + const columns: Array> = useMemo(() => { const unit = data.metadata?.units || ''; - const columnSettings: Array> = [ + const columnSettings: Array> = [ { accessorKey: 'name', header: 'Name', @@ -69,7 +69,7 @@ export function TableChart(props: TableChartProps): ReactElement { underline="hover" onClick={(e) => { e.preventDefault(); - const currentSample = ctx.row.original as TableChartSample; + const currentSample = ctx.row.original; onSelectedIdChange(currentSample.id); // focus on this item in the flame graph onSearchValueChange(currentSample.name); }} diff --git a/gaugechart/README.md b/gaugechart/README.md index 281e16682..0154f7e47 100644 --- a/gaugechart/README.md +++ b/gaugechart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/gaugechart/package.json b/gaugechart/package.json index 97e7f7c13..346d133f5 100644 --- a/gaugechart/package.json +++ b/gaugechart/package.json @@ -31,16 +31,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/gaugechart/rsbuild.config.ts b/gaugechart/rsbuild.config.ts index 8327128af..68952374c 100644 --- a/gaugechart/rsbuild.config.ts +++ b/gaugechart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './GaugeChart': './src/GaugeChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, @@ -34,7 +35,7 @@ export default createConfigForPlugin({ '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, '@emotion/styled': { singleton: true }, '@hookform/resolvers': { singleton: true }, - 'use-resize-observer': { requiredVersion: '9.1.0', singleton: true }, + 'use-resize-observer': { requiredVersion: '^10.0.0', singleton: true }, 'mdi-material-ui': { requiredVersion: '7.4.0', singleton: true }, immer: { singleton: true }, }, diff --git a/gaugechart/src/GaugeChartOptionsEditorSettings.test.tsx b/gaugechart/src/GaugeChartOptionsEditorSettings.test.tsx index b97fa994b..224a1250a 100644 --- a/gaugechart/src/GaugeChartOptionsEditorSettings.test.tsx +++ b/gaugechart/src/GaugeChartOptionsEditorSettings.test.tsx @@ -14,18 +14,38 @@ import { ChartsProvider, testChartsTheme } from '@perses-dev/components'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import React from 'react'; +import type { ReactElement } from 'react'; +import { useCallback, useState } from 'react'; import type { GaugeChartOptions } from './gauge-chart-model'; import { GaugeChartOptionsEditorSettings } from './GaugeChartOptionsEditorSettings'; +// Keeps the options in state, like a real parent of this controlled editor +function StatefulGaugeChartOptionsEditorSettings({ + initialValue, + onChange, +}: { + initialValue: GaugeChartOptions; + onChange: (value: GaugeChartOptions) => void; +}): ReactElement { + const [value, setValue] = useState(initialValue); + const handleChange = useCallback( + (next: GaugeChartOptions): void => { + setValue(next); + onChange(next); + }, + [onChange], + ); + return ( + + + + ); +} + describe('GaugeChartOptionsEditorSettings', () => { const renderGaugeChartOptionsEditorSettings = (value: GaugeChartOptions, onChange = vi.fn()): void => { - render( - - - , - ); + render(); }; it('can modify unit', () => { diff --git a/greptimedb/README.md b/greptimedb/README.md index 0f2f60e86..98a1069dc 100644 --- a/greptimedb/README.md +++ b/greptimedb/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/greptimedb/package.json b/greptimedb/package.json index a71af714b..2aad76d4e 100644 --- a/greptimedb/package.json +++ b/greptimedb/package.json @@ -31,10 +31,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -42,10 +42,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/greptimedb/rsbuild.config.ts b/greptimedb/rsbuild.config.ts index c90756aa0..5c569cdcb 100644 --- a/greptimedb/rsbuild.config.ts +++ b/greptimedb/rsbuild.config.ts @@ -26,8 +26,9 @@ export default createConfigForPlugin({ './GreptimeDBTraceQuery': './src/queries/greptimedb-trace-query', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/heatmapchart/package.json b/heatmapchart/package.json index b921141ac..1fce80f9a 100644 --- a/heatmapchart/package.json +++ b/heatmapchart/package.json @@ -28,13 +28,13 @@ "react-compiler-runtime": "^1.0.0" }, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/heatmapchart/rsbuild.config.ts b/heatmapchart/rsbuild.config.ts index 77c0a26fd..b093fa630 100644 --- a/heatmapchart/rsbuild.config.ts +++ b/heatmapchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './HeatMapChart': './src/HeatMapChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, lodash: { singleton: true }, '@perses-dev/spec': { singleton: true }, diff --git a/histogramchart/package.json b/histogramchart/package.json index 39e239caf..ed16a9dc2 100644 --- a/histogramchart/package.json +++ b/histogramchart/package.json @@ -28,13 +28,13 @@ "react-compiler-runtime": "^1.0.0" }, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/histogramchart/rsbuild.config.ts b/histogramchart/rsbuild.config.ts index 066c89ffe..77042342f 100644 --- a/histogramchart/rsbuild.config.ts +++ b/histogramchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './HistogramChart': './src/HistogramChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, lodash: { singleton: true }, '@perses-dev/spec': { singleton: true }, diff --git a/histogramchart/src/components/HistogramChartOptionsEditorSettings.test.tsx b/histogramchart/src/components/HistogramChartOptionsEditorSettings.test.tsx index 045d67060..e4371ada8 100644 --- a/histogramchart/src/components/HistogramChartOptionsEditorSettings.test.tsx +++ b/histogramchart/src/components/HistogramChartOptionsEditorSettings.test.tsx @@ -14,17 +14,38 @@ import { ChartsProvider, testChartsTheme } from '@perses-dev/components'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import type { ReactElement } from 'react'; +import { useCallback, useState } from 'react'; import type { HistogramChartOptions } from '../histogram-chart-model'; import { HistogramChartOptionsEditorSettings } from './HistogramChartOptionsEditorSettings'; +// Keeps the options in state, like a real parent of this controlled editor +function StatefulHistogramChartOptionsEditorSettings({ + initialValue, + onChange, +}: { + initialValue: HistogramChartOptions; + onChange: (value: HistogramChartOptions) => void; +}): ReactElement { + const [value, setValue] = useState(initialValue); + const handleChange = useCallback( + (next: HistogramChartOptions): void => { + setValue(next); + onChange(next); + }, + [onChange], + ); + return ( + + + + ); +} + describe('HistogramChartOptionsEditorSettings', () => { const renderHistogramChartOptionsEditorSettings = (value: HistogramChartOptions, onChange = vi.fn()): void => { - render( - - - , - ); + render(); }; it('can modify unit', () => { diff --git a/jaeger/README.md b/jaeger/README.md index 97b25c4ca..accc8beab 100644 --- a/jaeger/README.md +++ b/jaeger/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18. +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/jaeger/package.json b/jaeger/package.json index 8d4299c4d..cf829417e 100644 --- a/jaeger/package.json +++ b/jaeger/package.json @@ -31,11 +31,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -43,10 +43,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/jaeger/rsbuild.config.ts b/jaeger/rsbuild.config.ts index 8307a2e78..76dea48c6 100644 --- a/jaeger/rsbuild.config.ts +++ b/jaeger/rsbuild.config.ts @@ -24,8 +24,9 @@ export default createConfigForPlugin({ './JaegerTraceQuery': './src/plugins/JaegerTraceQuery.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/json/README.md b/json/README.md index 0a3444e13..1576841d5 100644 --- a/json/README.md +++ b/json/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 17 or 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react react-dom +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/json/package.json b/json/package.json index b8c50cfe3..7c36b5bc2 100644 --- a/json/package.json +++ b/json/package.json @@ -21,12 +21,12 @@ "peerDependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@perses-dev/client": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", - "react": "^17.0.2 || ^18.0.0", - "react-dom": "^17.0.2 || ^18.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.52.2" }, "files": [ diff --git a/json/rsbuild.config.ts b/json/rsbuild.config.ts index b2534c3ec..864a5a6a7 100644 --- a/json/rsbuild.config.ts +++ b/json/rsbuild.config.ts @@ -21,8 +21,9 @@ export default createConfigForPlugin({ './JsonQuery': './src/queries/json-query', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, '@emotion/styled': { singleton: true }, '@perses-dev/plugin-system': { singleton: true }, diff --git a/logexplorer/README.md b/logexplorer/README.md index 58090454c..bf1e6431d 100644 --- a/logexplorer/README.md +++ b/logexplorer/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/logexplorer/package.json b/logexplorer/package.json index d06fd8784..ad1278ea0 100644 --- a/logexplorer/package.json +++ b/logexplorer/package.json @@ -33,10 +33,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -44,8 +44,8 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", "react-router-dom": "^5 || ^6 || ^7" }, diff --git a/logexplorer/rsbuild.config.ts b/logexplorer/rsbuild.config.ts index c0c3e8327..6349baa50 100644 --- a/logexplorer/rsbuild.config.ts +++ b/logexplorer/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './LogExplorer': './src/explore/log-explorer', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/logstable/README.md b/logstable/README.md index f6714d3be..b87cfbe34 100644 --- a/logstable/README.md +++ b/logstable/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/logstable/package.json b/logstable/package.json index 8a13dce3b..de6ea237d 100644 --- a/logstable/package.json +++ b/logstable/package.json @@ -33,17 +33,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/logstable/rsbuild.config.ts b/logstable/rsbuild.config.ts index 21b083fe6..49de86302 100644 --- a/logstable/rsbuild.config.ts +++ b/logstable/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './LogsTable': './src/LogsTable.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, @@ -36,7 +37,7 @@ export default createConfigForPlugin({ '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, '@emotion/styled': { singleton: true }, '@hookform/resolvers': { singleton: true }, - 'use-resize-observer': { requiredVersion: '^9.1.0', singleton: true }, + 'use-resize-observer': { requiredVersion: '^10.0.0', singleton: true }, }, }, }); diff --git a/loki/README.md b/loki/README.md index c0af46a29..8939c5880 100644 --- a/loki/README.md +++ b/loki/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/loki/package.json b/loki/package.json index 15d89820e..521e68f32 100644 --- a/loki/package.json +++ b/loki/package.json @@ -32,10 +32,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -43,10 +43,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/loki/rsbuild.config.ts b/loki/rsbuild.config.ts index 635c0295e..3f8486d24 100644 --- a/loki/rsbuild.config.ts +++ b/loki/rsbuild.config.ts @@ -28,8 +28,9 @@ export default createConfigForPlugin({ './LokiLogQLVariable': './src/variables/LokiLogQLVariable.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/markdown/README.md b/markdown/README.md index 13896345c..e6bcb414e 100644 --- a/markdown/README.md +++ b/markdown/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/markdown/package.json b/markdown/package.json index 7f69acf0b..2d297b4fe 100644 --- a/markdown/package.json +++ b/markdown/package.json @@ -33,16 +33,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/markdown/rsbuild.config.ts b/markdown/rsbuild.config.ts index 7a22c20bc..8b9b60d16 100644 --- a/markdown/rsbuild.config.ts +++ b/markdown/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './Markdown': './src/Markdown.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/opensearch/README.md b/opensearch/README.md index a1c10be30..63c9d5e06 100644 --- a/opensearch/README.md +++ b/opensearch/README.md @@ -8,10 +8,10 @@ pivot from a trace to the related logs in OpenSearch. ### How to install -This plugin requires react and react-dom 18. +This plugin requires react and react-dom 18 or 19. ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 npm install @perses-dev/opensearch-plugin ``` diff --git a/opensearch/package.json b/opensearch/package.json index 079a75806..6ca3ba201 100644 --- a/opensearch/package.json +++ b/opensearch/package.json @@ -32,10 +32,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -43,10 +43,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/opensearch/rsbuild.config.ts b/opensearch/rsbuild.config.ts index cbeda8de2..beb572209 100644 --- a/opensearch/rsbuild.config.ts +++ b/opensearch/rsbuild.config.ts @@ -25,8 +25,9 @@ export default createConfigForPlugin({ './OpenSearchLogQuery': './src/queries/opensearch-log-query', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { requiredVersion: '5.5.0', singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { requiredVersion: '^3.2.0', version: '3.2.0', singleton: true }, diff --git a/opensearch/src/queries/opensearch-log-query/OpenSearchLogQueryEditor.test.tsx b/opensearch/src/queries/opensearch-log-query/OpenSearchLogQueryEditor.test.tsx index 4b924feb3..4c8edc682 100644 --- a/opensearch/src/queries/opensearch-log-query/OpenSearchLogQueryEditor.test.tsx +++ b/opensearch/src/queries/opensearch-log-query/OpenSearchLogQueryEditor.test.tsx @@ -13,6 +13,7 @@ import type * as PluginSystemModule from '@perses-dev/plugin-system'; import { render, screen, fireEvent } from '@testing-library/react'; +import type { ReactElement } from 'react'; import type { Mock } from 'vitest'; import { PPL_DOCS_URL } from '../constants'; @@ -21,7 +22,7 @@ import { OpenSearchLogQueryEditor } from './OpenSearchLogQueryEditor'; vi.mock('@perses-dev/plugin-system', async (importOriginal) => ({ ...(await importOriginal()), - DatasourceSelect: (): JSX.Element =>
, + DatasourceSelect: (): ReactElement =>
, useDatasourceSelectValueToSelector: (): undefined => undefined, isVariableDatasource: (): boolean => false, })); diff --git a/package-lock.json b/package-lock.json index 4312fcd8f..7924e80ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,11 +44,11 @@ ], "devDependencies": { "@module-federation/rsbuild-plugin": "^2.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@rsbuild/core": "^2.2.13", "@rsbuild/plugin-react": "^2.1.1", @@ -77,6 +77,7 @@ "ts-node": "^10.9.2", "turbo": "^2.6.1", "typescript": "^7.0.2", + "use-resize-observer": "^10.0.0", "vitest": "^4.1.11", "zod": "^4.5.4" }, @@ -85,9 +86,9 @@ "npm": ">=11" }, "peerDependencies": { - "@types/react-dom": "^18.3.0", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "@types/react-dom": "^18.3.0 || ^19.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "alertmanager": { @@ -100,16 +101,16 @@ "peerDependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "barchart": { @@ -123,17 +124,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "canvas": { @@ -153,13 +154,13 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/material": "^5.0.0 || ^6.0.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", "mdi-material-ui": "^7.9.2", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "clickhouse": { @@ -173,11 +174,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -185,10 +186,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "datasourcevariable": { @@ -202,15 +203,15 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "e2e": { @@ -252,18 +253,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@tanstack/react-table": "^8.20.5", + "@tanstack/react-table": "^9.2.8", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "gaugechart": { @@ -277,17 +278,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "greptimedb": { @@ -301,10 +302,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -312,10 +313,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "heatmapchart": { @@ -326,14 +327,14 @@ "react-compiler-runtime": "^1.0.0" }, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "histogramchart": { @@ -344,14 +345,14 @@ "react-compiler-runtime": "^1.0.0" }, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "jaeger": { @@ -365,11 +366,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -377,10 +378,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "json": { @@ -398,12 +399,12 @@ "peerDependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@perses-dev/client": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", - "react": "^17.0.2 || ^18.0.0", - "react-dom": "^17.0.2 || ^18.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.52.2" } }, @@ -420,10 +421,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -431,8 +432,8 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", "react-router-dom": "^5 || ^6 || ^7" } @@ -450,17 +451,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "loki": { @@ -475,10 +476,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -486,10 +487,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "markdown": { @@ -505,16 +506,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "node_modules/@acemir/cssom": { @@ -755,6 +756,21 @@ "@lezer/json": "^1.0.0" } }, + "node_modules/@codemirror/lang-yaml": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.3.tgz", + "integrity": "sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.2.0", + "@lezer/lr": "^1.0.0", + "@lezer/yaml": "^1.0.0" + } + }, "node_modules/@codemirror/language": { "version": "6.12.4", "license": "MIT", @@ -1375,10 +1391,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.4.0", - "license": "Apache-2.0" - }, "node_modules/@keyv/serialize": { "version": "1.1.1", "dev": true, @@ -1411,6 +1423,17 @@ "@lezer/common": "^1.0.0" } }, + "node_modules/@lezer/yaml": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.4.tgz", + "integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.4.0" + } + }, "node_modules/@marijn/find-cluster-break": { "version": "1.0.3", "license": "MIT" @@ -3368,34 +3391,37 @@ "link": true }, "node_modules/@perses-dev/client": { - "version": "0.55.0", - "resolved": "https://registry.npmjs.org/@perses-dev/client/-/client-0.55.0.tgz", - "integrity": "sha512-ptT1EK5R2ZrwQGvgtjNjX8N6Qy+ETU+bjNxBhTFPwN6cllaSPsUJtmeuJQPcVaiVu0QnskXW000LofdBXPt30g==", + "version": "0.56.0-beta.0", + "resolved": "https://registry.npmjs.org/@perses-dev/client/-/client-0.56.0-beta.0.tgz", + "integrity": "sha512-a3Ok35aaBzP8MOaxxzU6HRVvJYg/+t5AaQoBupvO1RP0Lo/MOLSMkJZYZzNlACZuUtkqNSNo0dhBoTA7FZ0ozQ==", "license": "Apache-2.0", "dependencies": { "@perses-dev/spec": "0.3.0", + "react-compiler-runtime": "^1.0.0", "zod": "^4.5.4" }, "peerDependencies": { - "react": "^18.3.0" + "react": "^18.3.0 || ^19.0.0" } }, "node_modules/@perses-dev/components": { - "version": "0.55.0", - "resolved": "https://registry.npmjs.org/@perses-dev/components/-/components-0.55.0.tgz", - "integrity": "sha512-zLzLqFdDKuqGI6WwCvV807xb4D1rznl9Ilyk7R95PUeXBqLbmHnDpoiryPxdd0wlTO4l7SRNEqkWjzurWcXscg==", + "version": "0.56.0-beta.0", + "resolved": "https://registry.npmjs.org/@perses-dev/components/-/components-0.56.0-beta.0.tgz", + "integrity": "sha512-6LrhGSyM42SW0tyof3AgRI4a/9bdaSvrzxoInvyOTBFwiq6/Av1jQf70r/suaPnxmMKob+QJ8pBK40rKLyEj6Q==", "license": "Apache-2.0", "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.4.0", "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3", "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-yaml": "^6.1.0", + "@codemirror/lint": "^6.9.7", "@date-fns/tz": "^1.4.1", "@fontsource/inter": "^5.0.0", "@mui/x-date-pickers": "^7.23.1", - "@perses-dev/client": "0.55.0", + "@perses-dev/client": "0.56.0-beta.0", "@perses-dev/spec": "0.3.0", "@tanstack/match-sorter-utils": "^8.19.4", - "@tanstack/react-table": "^8.20.5", + "@tanstack/react-table": "^9.2.8", "@uiw/react-codemirror": "^4.19.1", "date-fns": "^4.1.0", "echarts": "5.5.0", @@ -3406,48 +3432,53 @@ "notistack": "^3.0.2", "numbro": "^2.3.6", "react-colorful": "^5.6.1", + "react-compiler-runtime": "^1.0.0", "react-error-boundary": "^3.1.4", - "react-virtuoso": "^4.12.2" + "react-virtuoso": "^4.12.2", + "use-resize-observer": "^10.0.0", + "yaml": "^2.9.1" }, "peerDependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@mui/material": "^6.1.10", + "@mui/system": "^6.1.10", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "node_modules/@perses-dev/dashboards": { - "version": "0.55.0", - "resolved": "https://registry.npmjs.org/@perses-dev/dashboards/-/dashboards-0.55.0.tgz", - "integrity": "sha512-vFe2bPr2K8Q2JVKVQhldevIpibJ19U2KLM6MCXSooYN8Z5BmzHROQdu0Lt7EkTWbxFE72TOve9oJy3tNmsrkXA==", + "version": "0.56.0-beta.0", + "resolved": "https://registry.npmjs.org/@perses-dev/dashboards/-/dashboards-0.56.0-beta.0.tgz", + "integrity": "sha512-wps7/JJmpN1NIabBFA98L83K3X95ZkwZeRi4qn8HNg/tmT/ruPlqqueRY3j8NHmFlSd5bCBvYoBbGEU0T5AZsQ==", "license": "Apache-2.0", "dependencies": { "@dnd-kit/dom": "^0.4.0", "@dnd-kit/react": "^0.4.0", - "@perses-dev/client": "0.55.0", - "@perses-dev/components": "0.55.0", - "@perses-dev/plugin-system": "0.55.0", + "@perses-dev/client": "0.56.0-beta.0", + "@perses-dev/components": "0.56.0-beta.0", + "@perses-dev/plugin-system": "0.56.0-beta.0", "@perses-dev/spec": "0.3.0", "@snapgridjs/react": "^0.10.0", "@tanstack/hotkeys": "^0.8.0", "@tanstack/react-hotkeys": "^0.9.1", "immer": "^10.1.1", "mdi-material-ui": "^7.9.2", + "react-compiler-runtime": "^1.0.0", "react-hook-form": "^7.87.0", "react-intersection-observer": "^9.4.0", "use-immer": "^0.11.0", "use-query-params": "^2.2.1", - "use-resize-observer": "^9.0.0", - "yaml": "^2.7.0", + "use-resize-observer": "^10.0.0", + "yaml": "^2.9.1", "zustand": "^4.3.3" }, "peerDependencies": { "@mui/material": "^6.1.10", "@tanstack/react-query": "^4.39.1", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "node_modules/@perses-dev/datasource-variable-plugin": { @@ -3455,26 +3486,26 @@ "link": true }, "node_modules/@perses-dev/explore": { - "version": "0.55.0", - "resolved": "https://registry.npmjs.org/@perses-dev/explore/-/explore-0.55.0.tgz", - "integrity": "sha512-gRr13bpNNHBL3VbNk5HGDCKwmhqWfQ+eFVgk1OqWtxTOW/BR7mjMiyvvxMfgjJAtO9x5MleWFboJzoIRAFdnEA==", + "version": "0.56.0-beta.0", + "resolved": "https://registry.npmjs.org/@perses-dev/explore/-/explore-0.56.0-beta.0.tgz", + "integrity": "sha512-8blZAjMSgfE6Y4X3TgUU3wK/ZrdrPVnygs2N/IHD/rO93McJPXhSNG8pSApZsCGPX0uZw+hMIQykCptiHySTkA==", "license": "Apache-2.0", "dependencies": { "@nexucis/fuzzy": "^0.5.1", - "@perses-dev/components": "0.55.0", - "@perses-dev/dashboards": "0.55.0", - "@perses-dev/plugin-system": "0.55.0", + "@perses-dev/components": "0.56.0-beta.0", + "@perses-dev/dashboards": "0.56.0-beta.0", + "@perses-dev/plugin-system": "0.56.0-beta.0", "mdi-material-ui": "^7.9.2", "qs": "6.16.0", + "react-compiler-runtime": "^1.0.0", "react-virtuoso": "^4.12.2", - "use-query-params": "^2.2.1", - "use-resize-observer": "^9.0.0" + "use-query-params": "^2.2.1" }, "peerDependencies": { "@mui/material": "^6.1.10", "@tanstack/react-query": "^4.39.1", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "node_modules/@perses-dev/flame-chart-plugin": { @@ -3530,22 +3561,24 @@ "link": true }, "node_modules/@perses-dev/plugin-system": { - "version": "0.55.0", - "resolved": "https://registry.npmjs.org/@perses-dev/plugin-system/-/plugin-system-0.55.0.tgz", - "integrity": "sha512-CR/gYo7IdnBdBeBNbuFj4U5QJZK0bozTVEn7e6T0LnoQkXSLFIKGy23wv1J5nMTHCyPmEfRiTyFbO+TaqmizzA==", + "version": "0.56.0-beta.0", + "resolved": "https://registry.npmjs.org/@perses-dev/plugin-system/-/plugin-system-0.56.0-beta.0.tgz", + "integrity": "sha512-4U6M+B8GEJUu6noqefDfeweCrdx01U1XyVARlUOz8vB1vsmnOw6n59ULuXWFyJrMvMf4koXTe8+76PIg3zqeSw==", "license": "Apache-2.0", "dependencies": { "@module-federation/enhanced": "^2.9.1", - "@perses-dev/client": "0.55.0", - "@perses-dev/components": "0.55.0", + "@perses-dev/client": "0.56.0-beta.0", + "@perses-dev/components": "0.56.0-beta.0", "@perses-dev/spec": "0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "fast-uri": "3.1.8", "immer": "^10.1.1", + "react-compiler-runtime": "^1.0.0", "react-hook-form": "^7.87.0", "semver": "^7.8.0", "use-query-params": "^2.2.1", + "use-resize-observer": "^10.0.0", "zod": "^4.5.4" }, "peerDependencies": { @@ -3554,8 +3587,8 @@ "@hookform/resolvers": "^5.9.1", "@mui/material": "^6.1.10", "@tanstack/react-query": "^4.39.1", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "node_modules/@perses-dev/plugins-e2e": { @@ -4884,25 +4917,47 @@ } }, "node_modules/@tanstack/react-table": { - "version": "8.21.3", + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-9.3.1.tgz", + "integrity": "sha512-E6Ya5TnY6EaGyZYIUqig/29Lr/gJSAubQkLJFqiWkUl5nRCr0Xr9hvJot+NiRTtG+TzGxHTiqUW3bnLtQxlHug==", "license": "MIT", "dependencies": { - "@tanstack/table-core": "8.21.3" + "@tanstack/react-store": "^0.11.2", + "@tanstack/table-core": "9.3.1" }, "engines": { - "node": ">=12" + "node": ">=20" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "react": ">=18" + } + }, + "node_modules/@tanstack/react-table/node_modules/@tanstack/react-store": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.11.2.tgz", + "integrity": "sha512-oj5O5DmiMWE+ih+SioX2ayC1kbK7d3fpLx0B75fPJr9nY3zU+hoW010yr64qXsY/9fyiLVE2bn5mGNV3owm8RQ==", + "license": "MIT", + "dependencies": { + "@tanstack/store": "0.11.2", + "use-sync-external-store": "^1.6.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@tanstack/store": { - "version": "0.11.0", + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.11.2.tgz", + "integrity": "sha512-sJ4mjol8uQsHV0gOJzzjwXfh2Fwm+Sz0+8deqiTm4jGbMdjzNSW+xZCFm0kUa870uhd8yi+DpKnZb5Kc4apa0Q==", "license": "MIT", "funding": { "type": "github", @@ -4910,10 +4965,15 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.21.3", + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-9.3.1.tgz", + "integrity": "sha512-zQvlxSNi2qGM3L4jh85Z6hqMfdIR5qOfD9KHOU32nuKFJGN0RlJ7UvV1lsPb1fPVhpFYI0VP3jJGxLdLDpTKjQ==", "license": "MIT", + "dependencies": { + "@tanstack/store": "^0.11.2" + }, "engines": { - "node": ">=12" + "node": ">=20" }, "funding": { "type": "github", @@ -10590,14 +10650,12 @@ } }, "node_modules/use-resize-observer": { - "version": "9.1.0", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-10.0.0.tgz", + "integrity": "sha512-bR6D9uOoNB51isaK3yFs12+0Ue81jwHawsvdIyOIq5o+4ekmHn4U207IlBf3zc0fLHckhXLQtFl8moEOKcGGAQ==", "license": "MIT", - "dependencies": { - "@juggle/resize-observer": "^3.3.1" - }, "peerDependencies": { - "react": "16.8.0 - 18", - "react-dom": "16.8.0 - 18" + "react": ">=18.2" } }, "node_modules/use-sync-external-store": { @@ -10929,7 +10987,9 @@ } }, "node_modules/yaml": { - "version": "2.9.0", + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.1.tgz", + "integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==", "license": "ISC", "bin": { "yaml": "bin.mjs" @@ -11098,10 +11158,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -11109,10 +11169,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "piechart": { @@ -11126,17 +11186,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "prometheus": { @@ -11158,11 +11218,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -11170,11 +11230,11 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", "react-router-dom": "^5 || ^6 || ^7", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "pyroscope": { @@ -11190,11 +11250,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "@uiw/react-codemirror": "^4.19.1", @@ -11203,10 +11263,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "scatterchart": { @@ -11224,16 +11284,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "splunk": { @@ -11245,12 +11305,12 @@ }, "devDependencies": {}, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" } }, "statchart": { @@ -11268,17 +11328,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "staticlistvariable": { @@ -11293,15 +11353,15 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "statushistorychart": { @@ -11315,17 +11375,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "table": { @@ -11339,18 +11399,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@tanstack/react-table": "^8.20.5", + "@tanstack/react-table": "^9.2.8", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "tempo": { @@ -11367,11 +11427,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "@uiw/react-codemirror": "^4.25.3", @@ -11380,10 +11440,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } }, "timeserieschart": { @@ -11402,18 +11462,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "timeseriestable": { @@ -11427,17 +11487,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "tracetable": { @@ -11455,16 +11515,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "tracingganttchart": { @@ -11483,18 +11543,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" } }, "victorialogs": { @@ -11509,10 +11569,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -11520,10 +11580,10 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" } } } diff --git a/package.json b/package.json index 2b840312a..423aa7248 100644 --- a/package.json +++ b/package.json @@ -64,17 +64,17 @@ "e2e" ], "peerDependencies": { - "@types/react-dom": "^18.3.0", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "@types/react-dom": "^18.3.0 || ^19.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" }, "devDependencies": { "@module-federation/rsbuild-plugin": "^2.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@rsbuild/core": "^2.2.13", "@rsbuild/plugin-react": "^2.1.1", @@ -103,6 +103,7 @@ "ts-node": "^10.9.2", "turbo": "^2.6.1", "typescript": "^7.0.2", + "use-resize-observer": "^10.0.0", "vitest": "^4.1.11", "zod": "^4.5.4" }, diff --git a/piechart/README.md b/piechart/README.md index e2bcd1775..94f97af2d 100644 --- a/piechart/README.md +++ b/piechart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/piechart/package.json b/piechart/package.json index 12f0c80eb..0e15ab020 100644 --- a/piechart/package.json +++ b/piechart/package.json @@ -31,16 +31,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/piechart/rsbuild.config.ts b/piechart/rsbuild.config.ts index 76fe69ed1..ad6e311f0 100644 --- a/piechart/rsbuild.config.ts +++ b/piechart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './PieChart': './src/PieChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { requiredVersion: '5.5.0', singleton: true }, 'date-fns': { requiredVersion: '^4.1.0', singleton: true }, lodash: { requiredVersion: '^4.17.21', singleton: true }, diff --git a/piechart/src/PieChartBase.tsx b/piechart/src/PieChartBase.tsx index 31a37cfa5..21a4821c8 100644 --- a/piechart/src/PieChartBase.tsx +++ b/piechart/src/PieChartBase.tsx @@ -73,7 +73,7 @@ export function PieChartBase(props: PieChartBaseProps): ReactElement { } = props; const chartsTheme = useChartsTheme(); const muiTheme = useTheme(); - const chartRef = useRef(); + const chartRef = useRef(undefined); useLayoutEffect(() => { chartRef.current?.resize({ width, height }); diff --git a/piechart/src/utils.test.ts b/piechart/src/utils.test.ts index 1b7995b8e..413f6c226 100644 --- a/piechart/src/utils.test.ts +++ b/piechart/src/utils.test.ts @@ -11,6 +11,7 @@ // See the License for the specific language governing permissions and // limitations under the License. +import type { LegendItem, TableFeatures } from '@perses-dev/components'; import type { CellContext, ColumnDefTemplate } from '@tanstack/react-table'; import type { PieChartData } from './PieChartBase'; @@ -147,13 +148,12 @@ describe('PieChartTableLegendMapper', () => { const columns = mapper.mapToLegendColumns(selectedValues as Array<'relative' | 'abs'>, formatOptions); expect(columns).toEqual(expectedColumns.map((v) => expect.objectContaining(v))); expect(selectedValues.length).toEqual(columns.length); - const cellFormatter: ColumnDefTemplate> = columns[0]?.cell as ColumnDefTemplate< - CellContext - >; + type LegendCellContext = CellContext; + const cellFormatter = columns[0]?.cell as ColumnDefTemplate; if (typeof cellFormatter === 'function') { const formattedValue = cellFormatter({ getValue: () => cellValue, - } as CellContext); + } as LegendCellContext); expect(formattedValue).toEqual(expectedDisplayValue); } else { throw new Error('Cell formatter is not defined'); diff --git a/prometheus/README.md b/prometheus/README.md index 8f63d145d..047412643 100644 --- a/prometheus/README.md +++ b/prometheus/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/prometheus/package.json b/prometheus/package.json index 5a437f6da..75e3bc4d8 100644 --- a/prometheus/package.json +++ b/prometheus/package.json @@ -37,11 +37,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", @@ -49,11 +49,11 @@ "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", "react-router-dom": "^5 || ^6 || ^7", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "devDependencies": { "@types/qs": "^6.9.18" diff --git a/prometheus/rsbuild.config.ts b/prometheus/rsbuild.config.ts index fd9d49215..75b9f82fb 100644 --- a/prometheus/rsbuild.config.ts +++ b/prometheus/rsbuild.config.ts @@ -29,8 +29,9 @@ export default createConfigForPlugin({ './PrometheusPromQLAnnotation': './src/annotations/PrometheusPromQLAnnotation.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/prometheus/src/explore/PrometheusExplorer.tsx b/prometheus/src/explore/PrometheusExplorer.tsx index d34bbb52e..32047759b 100644 --- a/prometheus/src/explore/PrometheusExplorer.tsx +++ b/prometheus/src/explore/PrometheusExplorer.tsx @@ -18,7 +18,7 @@ import { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@pers import type { QueryDefinition } from '@perses-dev/spec'; import type { ReactElement } from 'react'; import { useState } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; import { DEFAULT_PROM } from '../model/prometheus-selectors'; import { PrometheusMetricsFinder } from './PrometheusMetricsFinder'; diff --git a/prometheus/src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx b/prometheus/src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx index 133d98ea6..97e25e897 100644 --- a/prometheus/src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx +++ b/prometheus/src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx @@ -24,7 +24,7 @@ import { } from '@mui/material'; import type { DatasourceSelector } from '@perses-dev/spec'; import DeleteIcon from 'mdi-material-ui/Delete'; -import type { HTMLAttributes, ReactElement, SyntheticEvent } from 'react'; +import type { HTMLAttributes, ReactElement, ReactNode, SyntheticEvent } from 'react'; import { cloneElement, forwardRef, useCallback, useMemo, useState } from 'react'; import { Virtuoso } from 'react-virtuoso'; @@ -74,7 +74,7 @@ export function LabelFilterInput({ // https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso export const ListboxComponent = forwardRef>( ({ children, ...rest }, ref) => { - const data = children as ReactElement[]; + const data = children as Array>; const [maxHeight, setMaxHeight] = useState('500px'); const [height, setHeight] = useState(0); diff --git a/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx b/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx index 70b267202..215b3aac9 100644 --- a/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx +++ b/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx @@ -19,7 +19,7 @@ import type { DatasourceSelector, QueryDefinition } from '@perses-dev/spec'; import HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline'; import type { ReactElement } from 'react'; import { useMemo, useState } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; import type { LabelFilter } from '../types'; import { computeFilterExpr } from '../types'; diff --git a/pyroscope/package.json b/pyroscope/package.json index 48e6ee98c..3310f90f2 100644 --- a/pyroscope/package.json +++ b/pyroscope/package.json @@ -33,21 +33,21 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/explore": "^0.55.0", + "@perses-dev/explore": "^0.56.0-beta.0", "@tanstack/react-query": "^4.39.1", "@uiw/react-codemirror": "^4.19.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "react-hook-form": "^7.87.0", "immer": "^10.1.1" }, diff --git a/pyroscope/rsbuild.config.ts b/pyroscope/rsbuild.config.ts index c32eaf336..995466bc8 100644 --- a/pyroscope/rsbuild.config.ts +++ b/pyroscope/rsbuild.config.ts @@ -25,8 +25,9 @@ export default createConfigForPlugin({ './PyroscopeExplorer': './src/explore/PyroscopeExplorer.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/rsbuild.shared.ts b/rsbuild.shared.ts index 0dcebd62b..e6d2e7485 100644 --- a/rsbuild.shared.ts +++ b/rsbuild.shared.ts @@ -18,7 +18,7 @@ import type { ModuleFederationOptions } from '@module-federation/rsbuild-plugin' import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; import type { RsbuildConfig } from '@rsbuild/core'; import { mergeRsbuildConfig } from '@rsbuild/core'; -import type { ReactCompilerOptions } from '@rsbuild/plugin-react'; +import type { PluginReactOptions, ReactCompilerOptions } from '@rsbuild/plugin-react'; import { pluginReact } from '@rsbuild/plugin-react'; /** The base path for all plugin assets. This should match the path where plugins are stored on the Perses server. @@ -28,14 +28,25 @@ const PLUGINS_PATH = '/plugins'; /** * React Compiler options shared by every plugin, passed to `pluginReact({ reactCompiler })`. - * Perses runs on React 18, so the compiled output relies on the `react-compiler-runtime` package. Switch the target to - * '19' (and drop `react-compiler-runtime`) when upgrading React. + * Plugins support React 18 and 19, so the compiler targets the minimum supported version (18). The compiled output then + * imports the `react-compiler-runtime` package, which delegates to React's built-in compiler runtime on React 19+. * @see {@link https://rsbuild.rs/plugins/list/plugin-react#reactcompiler} */ const reactCompilerOptions: ReactCompilerOptions = { target: '18', // Keep in sync with `.swcrc` React target }; +/** + * SWC JSX options shared by every plugin, passed to `pluginReact({ swcReactOptions })`. + * Always compile JSX to `react/jsx-runtime`, even in dev mode, so that plugins consume the host's shared JSX runtime. + * The default dev transform imports `react/jsx-dev-runtime`, which isn't shared by the host: the plugin would then bundle + * its own React 18 dev runtime, which breaks against a React 19 host. Fast Refresh is not affected. + * @see {@link https://rsbuild.rs/plugins/list/plugin-react#swcreactoptions} + */ +const swcReactOptions: PluginReactOptions['swcReactOptions'] = { + development: false, +}; + /** * Configuration options for building a Perses plugin with rsbuild. * @see {@link createConfigForPlugin} @@ -136,7 +147,7 @@ function getRsbuildConfig(name: string): RsbuildConfig { const version = process.env.NODE_ENV === 'development' ? undefined : getPluginVersion(); return { - plugins: [pluginReact({ reactCompiler: reactCompilerOptions })], + plugins: [pluginReact({ reactCompiler: reactCompilerOptions, swcReactOptions })], server: { port: 3000 + Math.floor(Math.random() * 1000), strictPort: false, diff --git a/scatterchart/README.md b/scatterchart/README.md index e37e3e5ff..0c86b5b4f 100644 --- a/scatterchart/README.md +++ b/scatterchart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/scatterchart/package.json b/scatterchart/package.json index a28c2fdad..ffe0ba733 100644 --- a/scatterchart/package.json +++ b/scatterchart/package.json @@ -32,16 +32,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "devDependencies": { "react-router-dom": "^5 || ^6 || ^7" diff --git a/scatterchart/rsbuild.config.ts b/scatterchart/rsbuild.config.ts index 453306908..e2f361034 100644 --- a/scatterchart/rsbuild.config.ts +++ b/scatterchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './ScatterChart': './src/ScatterChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/splunk/package.json b/splunk/package.json index d8e837b2f..381c1a796 100644 --- a/splunk/package.json +++ b/splunk/package.json @@ -28,12 +28,12 @@ "react-compiler-runtime": "^1.0.0" }, "peerDependencies": { - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "immer": "^10.1.1", - "react": "^18.3.0", - "react-dom": "^18.3.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0" }, "devDependencies": {}, "files": [ diff --git a/splunk/rsbuild.config.ts b/splunk/rsbuild.config.ts index 83e7ea100..88cf700a8 100644 --- a/splunk/rsbuild.config.ts +++ b/splunk/rsbuild.config.ts @@ -25,7 +25,8 @@ export default createConfigForPlugin({ './SplunkLogQuery': './src/queries/splunk-log-query', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, immer: { singleton: true }, '@perses-dev/components': { singleton: true }, '@perses-dev/plugin-system': { singleton: true }, diff --git a/statchart/README.md b/statchart/README.md index 33344d302..800428335 100644 --- a/statchart/README.md +++ b/statchart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/statchart/package.json b/statchart/package.json index a5588fbac..e3af870fe 100644 --- a/statchart/package.json +++ b/statchart/package.json @@ -28,17 +28,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/statchart/rsbuild.config.ts b/statchart/rsbuild.config.ts index 70a5f4150..b189a3170 100644 --- a/statchart/rsbuild.config.ts +++ b/statchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './StatChart': './src/StatChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/staticlistvariable/README.md b/staticlistvariable/README.md index e8ee0de9e..2cf93c225 100644 --- a/staticlistvariable/README.md +++ b/staticlistvariable/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/staticlistvariable/package.json b/staticlistvariable/package.json index c10ddee19..4f6f48ce6 100644 --- a/staticlistvariable/package.json +++ b/staticlistvariable/package.json @@ -32,15 +32,15 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/staticlistvariable/rsbuild.config.ts b/staticlistvariable/rsbuild.config.ts index e521ea878..b7013e180 100644 --- a/staticlistvariable/rsbuild.config.ts +++ b/staticlistvariable/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './StaticListVariable': './src/StaticListVariable.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/statushistorychart/README.md b/statushistorychart/README.md index 8832774b8..a55b07bd7 100644 --- a/statushistorychart/README.md +++ b/statushistorychart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/statushistorychart/package.json b/statushistorychart/package.json index 91f32b186..4f1a0e5a4 100644 --- a/statushistorychart/package.json +++ b/statushistorychart/package.json @@ -31,16 +31,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/statushistorychart/rsbuild.config.ts b/statushistorychart/rsbuild.config.ts index 9688718c1..6e8090223 100644 --- a/statushistorychart/rsbuild.config.ts +++ b/statushistorychart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './StatusHistoryChart': './src/StatusHistoryChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/table/README.md b/table/README.md index c3ee50706..398ac857a 100644 --- a/table/README.md +++ b/table/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/table/package.json b/table/package.json index b900ab2c3..204f037f2 100644 --- a/table/package.json +++ b/table/package.json @@ -31,18 +31,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@tanstack/react-table": "^8.20.5", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@tanstack/react-table": "^9.2.8", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/table/rsbuild.config.ts b/table/rsbuild.config.ts index 2b0b998ae..0a388d584 100644 --- a/table/rsbuild.config.ts +++ b/table/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './Table': './src/Table.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/table/src/components/EmbeddedPanel.tsx b/table/src/components/EmbeddedPanel.tsx index 0f1f4d90b..a1abbe5a2 100644 --- a/table/src/components/EmbeddedPanel.tsx +++ b/table/src/components/EmbeddedPanel.tsx @@ -16,7 +16,7 @@ import { PanelPluginLoader } from '@perses-dev/dashboards'; import type { PanelData } from '@perses-dev/plugin-system'; import type { QueryDataType, UnknownSpec } from '@perses-dev/spec'; import type { ReactElement } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; interface EmbeddedPanelProps { kind: string; diff --git a/table/src/components/TablePanel.tsx b/table/src/components/TablePanel.tsx index 796b5bae4..341f8bd3b 100644 --- a/table/src/components/TablePanel.tsx +++ b/table/src/components/TablePanel.tsx @@ -160,7 +160,7 @@ function generateCellContentConfig( column: ColumnSettings, gaugeRange?: GaugeRange, globalCellSettings: CellSettings[] = [], -): Pick, 'cellDescription' | 'cell'> { +): Pick>, 'cellDescription' | 'cell'> { const plugin = column.plugin; if (plugin !== undefined) { return { @@ -336,7 +336,7 @@ function generateColumnConfig( gaugeRangeByColumn: Record, globalCellSettings: CellSettings[] = [], defaultEnableSorting = false, -): TableColumnConfig | undefined { +): TableColumnConfig> | undefined { for (const column of columnSettings) { if (column.name === name) { if (column.hide) { @@ -528,8 +528,8 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps }, [data, keys]); // Generate columns and map each column accessor to its settings index and data key - const columns: Array> = useMemo(() => { - const columns: Array> = []; + const columns: Array>> = useMemo(() => { + const columns: Array>> = []; const customizedColumns = new Set(); // Process columnSettings if they exist diff --git a/tempo/README.md b/tempo/README.md index 72ad39b40..580ea315c 100644 --- a/tempo/README.md +++ b/tempo/README.md @@ -4,12 +4,12 @@ This plugin supports Tempo v2.6.0 and later. ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/tempo/package.json b/tempo/package.json index a2341acf7..b64d59e58 100644 --- a/tempo/package.json +++ b/tempo/package.json @@ -34,21 +34,21 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/client": "^0.55.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/client": "^0.56.0-beta.0", "@tanstack/react-query": "^4.39.1", "@uiw/react-codemirror": "^4.25.3", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "react-hook-form": "^7.87.0", "immer": "^10.1.1" }, diff --git a/tempo/rsbuild.config.ts b/tempo/rsbuild.config.ts index a75d21928..dedf94bd1 100644 --- a/tempo/rsbuild.config.ts +++ b/tempo/rsbuild.config.ts @@ -25,8 +25,9 @@ export default createConfigForPlugin({ './TempoExplorer': './src/explore/TempoExplorer.tsx', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/timeserieschart/README.md b/timeserieschart/README.md index 4c2bae72d..b6e12b7da 100644 --- a/timeserieschart/README.md +++ b/timeserieschart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/timeserieschart/package.json b/timeserieschart/package.json index 0feaa0bda..f575d0f2b 100644 --- a/timeserieschart/package.json +++ b/timeserieschart/package.json @@ -36,17 +36,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0", "immer": "^10.1.1" }, "files": [ diff --git a/timeserieschart/rsbuild.config.ts b/timeserieschart/rsbuild.config.ts index 15652108e..66d4200eb 100644 --- a/timeserieschart/rsbuild.config.ts +++ b/timeserieschart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './TimeSeriesChart': './src/TimeSeriesChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/timeserieschart/src/TimeSeriesChartBase.test.tsx b/timeserieschart/src/TimeSeriesChartBase.test.tsx index 07495342a..451c4beed 100644 --- a/timeserieschart/src/TimeSeriesChartBase.test.tsx +++ b/timeserieschart/src/TimeSeriesChartBase.test.tsx @@ -18,7 +18,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import type { ECharts } from 'echarts/core'; import { init } from 'echarts/core'; import type { ReactElement } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; import { ANNOTATION_Y_AXIS } from './annotations/AnnotationTooltip'; import type { TimeChartProps } from './TimeSeriesChartBase'; @@ -36,7 +36,7 @@ vi.mock('@perses-dev/components', async (importOriginal) => ({ ), })); -vi.mock('use-resize-observer', () => ({ default: vi.fn(() => ({ ref: vi.fn() })) })); +vi.mock('use-resize-observer', () => ({ useResizeObserver: vi.fn(() => ({ ref: vi.fn() })) })); const DATA: TimeSeries[] = [ { @@ -149,11 +149,13 @@ describe('TimeSeriesChartBase performance', () => { chart.resize.mockClear(); const onResize = vi.mocked(useResizeObserver).mock.calls.at(-1)?.[0]?.onResize; expect(onResize).toBeDefined(); - onResize?.({ width: 500, height: 300 }); + const resize = (width: number, height: number): void => + onResize?.({ width, height, entry: {} as ResizeObserverEntry }); + resize(500, 300); expect(chart.resize).not.toHaveBeenCalled(); - onResize?.({ width: 800, height: 300 }); + resize(800, 300); expect(chart.resize).toHaveBeenLastCalledWith({ width: 800, height: 300 }); - onResize?.({ width: 800, height: 400 }); + resize(800, 400); expect(chart.resize).toHaveBeenLastCalledWith({ width: 800, height: 400 }); }); diff --git a/timeserieschart/src/TimeSeriesChartBase.tsx b/timeserieschart/src/TimeSeriesChartBase.tsx index dcb4ec87a..f79657a6d 100644 --- a/timeserieschart/src/TimeSeriesChartBase.tsx +++ b/timeserieschart/src/TimeSeriesChartBase.tsx @@ -70,7 +70,7 @@ import isEqual from 'lodash/isEqual'; import merge from 'lodash/merge'; import type { MouseEvent } from 'react'; import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; import { ANNOTATION_Y_AXIS, AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip'; import type { TimeSeriesAnnotation } from './utils/annotation'; @@ -161,7 +161,7 @@ export const TimeSeriesChartBase = forwardRef(fun const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext(); const isPinningEnabled = tooltipConfig.enablePinning && enablePinning; - const chartRef = useRef(); + const chartRef = useRef(undefined); const [showTooltip, setShowTooltip] = useState(true); const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null); const [pinnedCrosshair, setPinnedCrosshair] = useState(null); diff --git a/timeserieschart/src/annotations/AnnotationTooltip.tsx b/timeserieschart/src/annotations/AnnotationTooltip.tsx index d6f4b53ad..e5cb1f948 100644 --- a/timeserieschart/src/annotations/AnnotationTooltip.tsx +++ b/timeserieschart/src/annotations/AnnotationTooltip.tsx @@ -27,7 +27,8 @@ import { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system'; import type { LineSeriesOption, MarkPointComponentOption, YAXisComponentOption } from 'echarts'; import Pin from 'mdi-material-ui/Pin'; import PinOutline from 'mdi-material-ui/PinOutline'; -import useResizeObserver from 'use-resize-observer'; +import type { ReactElement } from 'react'; +import { useResizeObserver } from 'use-resize-observer'; import type { TimeSeriesAnnotation } from '../utils/annotation'; @@ -56,7 +57,7 @@ export function AnnotationTooltip({ pinnedPos, enablePinning = true, onUnpinClick, -}: AnnotationTooltipProps): JSX.Element | null { +}: AnnotationTooltipProps): ReactElement | null { const mousePos = useMousePosition(); const { height, width, ref: tooltipRef } = useResizeObserver(); diff --git a/timeseriestable/README.md b/timeseriestable/README.md index 659fb6139..470a63927 100644 --- a/timeseriestable/README.md +++ b/timeseriestable/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/timeseriestable/package.json b/timeseriestable/package.json index 01617edc0..899057ee7 100644 --- a/timeseriestable/package.json +++ b/timeseriestable/package.json @@ -31,17 +31,17 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/plugin-system": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/timeseriestable/rsbuild.config.ts b/timeseriestable/rsbuild.config.ts index c003ed120..1992302f1 100644 --- a/timeseriestable/rsbuild.config.ts +++ b/timeseriestable/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './TimeSeriesTable': './src/TimeSeriesTable.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, @@ -36,7 +37,7 @@ export default createConfigForPlugin({ '@emotion/react': { requiredVersion: '^11.11.3', singleton: true }, '@emotion/styled': { singleton: true }, '@hookform/resolvers': { singleton: true }, - 'use-resize-observer': { requiredVersion: '^9.1.0', singleton: true }, + 'use-resize-observer': { requiredVersion: '^10.0.0', singleton: true }, }, }, }); diff --git a/timeseriestable/src/components/EmbeddedPanel.tsx b/timeseriestable/src/components/EmbeddedPanel.tsx index 0f1f4d90b..a1abbe5a2 100644 --- a/timeseriestable/src/components/EmbeddedPanel.tsx +++ b/timeseriestable/src/components/EmbeddedPanel.tsx @@ -16,7 +16,7 @@ import { PanelPluginLoader } from '@perses-dev/dashboards'; import type { PanelData } from '@perses-dev/plugin-system'; import type { QueryDataType, UnknownSpec } from '@perses-dev/spec'; import type { ReactElement } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; interface EmbeddedPanelProps { kind: string; diff --git a/tracetable/README.md b/tracetable/README.md index 8c55dfac5..14ee9b255 100644 --- a/tracetable/README.md +++ b/tracetable/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/tracetable/package.json b/tracetable/package.json index 08985115b..d97ed54f6 100644 --- a/tracetable/package.json +++ b/tracetable/package.json @@ -32,16 +32,16 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "devDependencies": { "react-router-dom": "^5 || ^6 || ^7" diff --git a/tracetable/rsbuild.config.ts b/tracetable/rsbuild.config.ts index e25add0ef..0f23f94ee 100644 --- a/tracetable/rsbuild.config.ts +++ b/tracetable/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './TraceTable': './src/TraceTable.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/tracingganttchart/README.md b/tracingganttchart/README.md index a829905a5..8fc1dbfa5 100644 --- a/tracingganttchart/README.md +++ b/tracingganttchart/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/tracingganttchart/package.json b/tracingganttchart/package.json index a0118c738..eebed4317 100644 --- a/tracingganttchart/package.json +++ b/tracingganttchart/package.json @@ -33,18 +33,18 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/client": "^0.55.0", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", + "@perses-dev/client": "^0.56.0-beta.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", - "use-resize-observer": "^9.0.0" + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", + "use-resize-observer": "^10.0.0" }, "devDependencies": { "react-router-dom": "^5 || ^6 || ^7" diff --git a/tracingganttchart/rsbuild.config.ts b/tracingganttchart/rsbuild.config.ts index 05008a8db..eef0e1e11 100644 --- a/tracingganttchart/rsbuild.config.ts +++ b/tracingganttchart/rsbuild.config.ts @@ -23,8 +23,9 @@ export default createConfigForPlugin({ './TracingGanttChart': './src/TracingGanttChart.ts', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/tracingganttchart/src/TracingGanttChart/GanttTable/ResizableDivider.tsx b/tracingganttchart/src/TracingGanttChart/GanttTable/ResizableDivider.tsx index b22365eae..4f3bd8482 100644 --- a/tracingganttchart/src/TracingGanttChart/GanttTable/ResizableDivider.tsx +++ b/tracingganttchart/src/TracingGanttChart/GanttTable/ResizableDivider.tsx @@ -17,7 +17,7 @@ import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react'; import { useEffect, useState } from 'react'; interface ResizableDividerProps { - parentRef: React.RefObject; + parentRef: React.RefObject; onMove: (left: number) => void; } diff --git a/tracingganttchart/src/TracingGanttChart/MiniGanttChart/Canvas.tsx b/tracingganttchart/src/TracingGanttChart/MiniGanttChart/Canvas.tsx index e72a4367f..d26833552 100644 --- a/tracingganttchart/src/TracingGanttChart/MiniGanttChart/Canvas.tsx +++ b/tracingganttchart/src/TracingGanttChart/MiniGanttChart/Canvas.tsx @@ -16,7 +16,7 @@ import { useChartsTheme } from '@perses-dev/components'; import { useEvent } from '@perses-dev/plugin-system'; import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react'; import { useEffect, useRef, useState, useCallback } from 'react'; -import useResizeObserver from 'use-resize-observer'; +import { useResizeObserver } from 'use-resize-observer'; import type { TracingGanttChartOptions } from '../../gantt-chart-model'; import { Ticks } from '../Ticks'; diff --git a/victorialogs/README.md b/victorialogs/README.md index 3fbb70476..3eb4f2656 100644 --- a/victorialogs/README.md +++ b/victorialogs/README.md @@ -2,12 +2,12 @@ ### How to install -This plugin requires react and react-dom 18 +This plugin requires react and react-dom 18 or 19. Install peer dependencies: ```bash -npm install react@18 react-dom@18 +npm install react@18 react-dom@18 # or react@19 react-dom@19 ``` Install the plugin: diff --git a/victorialogs/package.json b/victorialogs/package.json index ff9c6947e..369e39af6 100644 --- a/victorialogs/package.json +++ b/victorialogs/package.json @@ -32,21 +32,21 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^5.9.1", - "@perses-dev/components": "^0.55.0", - "@perses-dev/dashboards": "^0.55.0", + "@perses-dev/components": "^0.56.0-beta.0", + "@perses-dev/dashboards": "^0.56.0-beta.0", "@perses-dev/spec": "^0.3.0", - "@perses-dev/explore": "^0.55.0", - "@perses-dev/plugin-system": "^0.55.0", + "@perses-dev/explore": "^0.56.0-beta.0", + "@perses-dev/plugin-system": "^0.56.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", "immer": "^10.1.1", "lodash": "^4.17.21", - "react": "^18.3.0", - "react-dom": "^18.3.0", + "react": "^18.3.0 || ^19.0.0", + "react-dom": "^18.3.0 || ^19.0.0", "react-hook-form": "^7.87.0", - "use-resize-observer": "^9.0.0" + "use-resize-observer": "^10.0.0" }, "files": [ "lib/**/*", diff --git a/victorialogs/rsbuild.config.ts b/victorialogs/rsbuild.config.ts index 23310c41f..a49ad6f5a 100644 --- a/victorialogs/rsbuild.config.ts +++ b/victorialogs/rsbuild.config.ts @@ -27,8 +27,9 @@ export default createConfigForPlugin({ './VictoriaLogsFieldValuesVariable': './src/variables/victorialogs-field-values', }, shared: { - react: { requiredVersion: '18.2.0', singleton: true }, - 'react-dom': { requiredVersion: '18.2.0', singleton: true }, + react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, + 'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true }, echarts: { singleton: true }, 'date-fns': { singleton: true }, 'date-fns-tz': { singleton: true }, diff --git a/vitest.setup.ts b/vitest.setup.ts index 4c1527631..58986c6da 100644 --- a/vitest.setup.ts +++ b/vitest.setup.ts @@ -13,3 +13,15 @@ // jsdom does not implement the geometry API CodeMirror uses when measuring text. Range.prototype.getClientRects = (): DOMRectList => [] as unknown as DOMRectList; + +// jsdom has no layout engine nor ResizeObserver; observed elements are never measured during tests. +if (typeof ResizeObserver === 'undefined') { + vi.stubGlobal( + 'ResizeObserver', + class { + observe(): void {} + unobserve(): void {} + disconnect(): void {} + }, + ); +} diff --git a/vitest.shared.ts b/vitest.shared.ts index 35cfcfa6b..561dbd155 100644 --- a/vitest.shared.ts +++ b/vitest.shared.ts @@ -31,7 +31,6 @@ const sharedConfig = defineConfig({ find: /^@perses-dev\/(client|components|dashboards|explore|plugin-system|spec)$/, replacement: resolve(repoRoot, 'node_modules/@perses-dev/$1/dist/index.js'), }, - { find: 'use-resize-observer', replacement: 'use-resize-observer/polyfilled' }, ], }, test: {