From ce4b1c6607b3fb15b037fad9e44c6b29f604d717 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Tue, 3 Sep 2024 08:10:31 +0000 Subject: [PATCH] DSEGOG-341 Fix yarn preview:build:dev and address some comments --- src/images/imageWindow.component.test.tsx | 1 - src/main.tsx | 1 - src/plotting/plot.component.tsx | 2 -- .../plotSettingsController.component.test.tsx | 6 +++--- src/plotting/plotWindow.component.test.tsx | 1 - src/testUtils.tsx | 8 +------- src/traces/tracePlot.component.tsx | 2 -- src/traces/traceWindow.component.test.tsx | 1 - vite.config.ts | 8 ++++++-- 9 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/images/imageWindow.component.test.tsx b/src/images/imageWindow.component.test.tsx index 8466c6b6..ec6a65eb 100644 --- a/src/images/imageWindow.component.test.tsx +++ b/src/images/imageWindow.component.test.tsx @@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils'; import ImageWindow from './imageWindow.component'; vi.mock('../windows/windowPortal.component', async () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/src/main.tsx b/src/main.tsx index 1adb332b..07e107bc 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -198,7 +198,6 @@ async function prepare() { import.meta.env.VITE_APP_INCLUDE_MSW === 'true' || settingsResult?.apiUrl === '' ) { - // Need to use require instead of import as import breaks when loaded in SG const { worker } = await import('./mocks/browser'); return worker.start({ onUnhandledRequest(request, print) { diff --git a/src/plotting/plot.component.tsx b/src/plotting/plot.component.tsx index a66664b8..2bca686f 100644 --- a/src/plotting/plot.component.tsx +++ b/src/plotting/plot.component.tsx @@ -8,8 +8,6 @@ import { } from '../app.types'; // only import types as we don't actually run any chart.js code in React import type { ChartDataset, ChartOptions } from 'chart.js'; -// we import this even though we don't use it so we can get typescript info added to ChartOptions -// eslint-disable-next-line @typescript-eslint/no-unused-vars export interface PlotProps { datasets: PlotDataset[]; diff --git a/src/plotting/plotSettings/plotSettingsController.component.test.tsx b/src/plotting/plotSettings/plotSettingsController.component.test.tsx index 7de0c7ae..9597c9c3 100644 --- a/src/plotting/plotSettings/plotSettingsController.component.test.tsx +++ b/src/plotting/plotSettings/plotSettingsController.component.test.tsx @@ -24,9 +24,9 @@ describe('Plot Settings component', () => { const createView = async () => { // need to import like this in order for the doMock's to work - const PlotSettingsController = - // eslint-disable-next-line @typescript-eslint/no-var-requires - (await vi.importActual('./plotSettingsController.component')).default; + const PlotSettingsController = ( + await vi.importActual('./plotSettingsController.component') + ).default; return render(); }; diff --git a/src/plotting/plotWindow.component.test.tsx b/src/plotting/plotWindow.component.test.tsx index ea0308a9..2a512e33 100644 --- a/src/plotting/plotWindow.component.test.tsx +++ b/src/plotting/plotWindow.component.test.tsx @@ -12,7 +12,6 @@ import { WindowPortal } from '../windows/windowPortal.component'; import PlotWindow from './plotWindow.component'; vi.mock('../windows/windowPortal.component', async () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/src/testUtils.tsx b/src/testUtils.tsx index 1d1027cc..e0950934 100644 --- a/src/testUtils.tsx +++ b/src/testUtils.tsx @@ -1,15 +1,9 @@ -import React from 'react'; -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; -// need to mock for plotting import { Action, ThunkAction } from '@reduxjs/toolkit'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { RenderOptions } from '@testing-library/react'; import { render } from '@testing-library/react'; import { matchRequestUrl } from 'msw'; +import React from 'react'; import { Provider } from 'react-redux'; import { staticChannels } from './api/channels'; import { diff --git a/src/traces/tracePlot.component.tsx b/src/traces/tracePlot.component.tsx index 9bd96c3e..a2db988e 100644 --- a/src/traces/tracePlot.component.tsx +++ b/src/traces/tracePlot.component.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { Waveform } from '../app.types'; // only import types as we don't actually run any chart.js code in React import type { ChartData, ChartOptions } from 'chart.js'; -// we import this even though we don't use it so we can get typescript info added to ChartOptions -// eslint-disable-next-line @typescript-eslint/no-unused-vars export interface TracePlotProps { trace: Waveform; diff --git a/src/traces/traceWindow.component.test.tsx b/src/traces/traceWindow.component.test.tsx index 537af601..44374e55 100644 --- a/src/traces/traceWindow.component.test.tsx +++ b/src/traces/traceWindow.component.test.tsx @@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils'; import TraceWindow from './traceWindow.component'; vi.mock('../windows/windowPortal.component', async () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = await vi.importActual('react'); return { default: ReactMock.forwardRef(({ children }, ref) => ( diff --git a/vite.config.ts b/vite.config.ts index 8df4867d..0f78cb02 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -93,12 +93,16 @@ export default defineConfig(({ mode }) => { // Config for deployment in SciGateway config.build = { lib: { - // https://github.com/vitejs/vite/issues/7130 + // We use `umd` here as `es` causes some import statements to leak into the main.js, breaking the build + // removing this entirely uses a default of both, which for build results in `umd` taking precedence but when + // using --watch, `es` appears to replace it intermittently. Hopefully this can be fixed in the future and we + // can use `es` instead. + formats: ['umd'], entry: 'src/main.tsx', name: 'operationsgateway', }, rollupOptions: { - external: ['react', 'react-dom'].concat(rollupExternals), + external: rollupExternals, input: 'src/main.tsx', output: { entryFileNames: '[name].js',