From 9d439a503f8cdf3102410f3cb393d5b591d6175a Mon Sep 17 00:00:00 2001 From: Roman Zabaluev Date: Mon, 26 Feb 2024 22:08:42 +0700 Subject: [PATCH] FE: Add tsc & gen:sources for a build phase. Refactor vite config --- frontend/.prettierrc | 3 +- frontend/package.json | 6 +- frontend/pnpm-lock.yaml | 114 +++++++++++++++++- .../NavBar/__tests__/NavBar.spec.tsx | 2 +- .../__tests__/PageContainer.spec.tsx | 2 +- .../Topics/Topic/Messages/Filters/Filters.tsx | 6 +- .../common/NewTable/__test__/Table.spec.tsx | 2 +- .../lib/hooks/api/__tests__/topics.spec.ts | 1 - frontend/vite.config.ts | 67 ++++++---- 9 files changed, 165 insertions(+), 38 deletions(-) diff --git a/frontend/.prettierrc b/frontend/.prettierrc index e88e08a44..2c6ddbf69 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -6,5 +6,6 @@ "jsxSingleQuote": false, "bracketSpacing": true, "bracketSameLine": false, - "arrowParens": "always" + "arrowParens": "always", + "endOfLine": "lf" } diff --git a/frontend/package.json b/frontend/package.json index cb7919927..540c85a88 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -50,8 +50,9 @@ "scripts": { "start": "vite", "dev": "vite", - "gen:sources": "rimraf src/generated-sources && openapi-generator-cli generate", - "build": "vite build", + "clean": "rimraf ./src/generated-sources", + "gen:sources": "pnpm clean && openapi-generator-cli generate", + "build": "pnpm gen:sources && tsc --noEmit && vite build", "preview": "vite preview", "lint": "eslint --ext .tsx,.ts src/", "lint:fix": "eslint --ext .tsx,.ts src/ --fix", @@ -103,6 +104,7 @@ "ts-node": "^10.9.1", "ts-prune": "^0.10.3", "typescript": "^4.7.4", + "vite-plugin-checker": "^0.6.4", "vite-plugin-ejs": "^1.6.4" }, "engines": { diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 757bbc622..427aeadf1 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -264,6 +264,9 @@ devDependencies: typescript: specifier: ^4.7.4 version: 4.7.4 + vite-plugin-checker: + specifier: ^0.6.4 + version: 0.6.4(eslint@8.48.0)(typescript@4.7.4)(vite@4.5.2) vite-plugin-ejs: specifier: ^1.6.4 version: 1.6.4 @@ -333,7 +336,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@ampproject/remapping': 2.2.0 - '@babel/code-frame': 7.18.6 + '@babel/code-frame': 7.23.5 '@babel/generator': 7.18.9 '@babel/helper-compilation-targets': 7.18.9(@babel/core@7.18.9) '@babel/helper-module-transforms': 7.18.9 @@ -443,7 +446,7 @@ packages: '@babel/helper-module-imports': 7.18.6 '@babel/helper-simple-access': 7.18.6 '@babel/helper-split-export-declaration': 7.18.6 - '@babel/helper-validator-identifier': 7.18.6 + '@babel/helper-validator-identifier': 7.22.20 '@babel/template': 7.18.6 '@babel/traverse': 7.23.9(supports-color@5.5.0) '@babel/types': 7.18.9 @@ -680,7 +683,7 @@ packages: resolution: {integrity: sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.18.6 + '@babel/code-frame': 7.23.5 '@babel/parser': 7.18.9 '@babel/types': 7.18.9 dev: false @@ -3792,6 +3795,15 @@ packages: universalify: 2.0.0 dev: true + /fs-extra@11.2.0: + resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: true + /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -5295,7 +5307,6 @@ packages: engines: {node: '>=8'} dependencies: path-key: 3.1.1 - dev: false /nwsapi@2.2.0: resolution: {integrity: sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==} @@ -6397,6 +6408,10 @@ packages: resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==} dev: false + /tiny-invariant@1.3.3: + resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + dev: true + /tmp@0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} @@ -6706,6 +6721,57 @@ packages: convert-source-map: 1.7.0 dev: false + /vite-plugin-checker@0.6.4(eslint@8.48.0)(typescript@4.7.4)(vite@4.5.2): + resolution: {integrity: sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==} + engines: {node: '>=14.16'} + peerDependencies: + eslint: '>=7' + meow: ^9.0.0 + optionator: ^0.9.1 + stylelint: '>=13' + typescript: '*' + vite: '>=2.0.0' + vls: '*' + vti: '*' + vue-tsc: '>=1.3.9' + peerDependenciesMeta: + eslint: + optional: true + meow: + optional: true + optionator: + optional: true + stylelint: + optional: true + typescript: + optional: true + vls: + optional: true + vti: + optional: true + vue-tsc: + optional: true + dependencies: + '@babel/code-frame': 7.23.5 + ansi-escapes: 4.3.2 + chalk: 4.1.2 + chokidar: 3.5.2 + commander: 8.3.0 + eslint: 8.48.0 + fast-glob: 3.3.2 + fs-extra: 11.2.0 + npm-run-path: 4.0.1 + semver: 7.5.4 + strip-ansi: 6.0.1 + tiny-invariant: 1.3.3 + typescript: 4.7.4 + vite: 4.5.2(@types/node@20.11.17)(sass@1.66.1) + vscode-languageclient: 7.0.0 + vscode-languageserver: 7.0.0 + vscode-languageserver-textdocument: 1.0.11 + vscode-uri: 3.0.8 + dev: true + /vite-plugin-ejs@1.6.4: resolution: {integrity: sha512-23p1RS4PiA0veXY5/gHZ60pl3pPvd8NEqdBsDgxNK8nM1rjFFDcVb0paNmuipzCgNP/Y0f/Id22M7Il4kvZ2jA==} dependencies: @@ -6765,6 +6831,46 @@ packages: optionalDependencies: fsevents: 2.3.2 + /vscode-jsonrpc@6.0.0: + resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==} + engines: {node: '>=8.0.0 || >=10.0.0'} + dev: true + + /vscode-languageclient@7.0.0: + resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==} + engines: {vscode: ^1.52.0} + dependencies: + minimatch: 3.1.2 + semver: 7.5.4 + vscode-languageserver-protocol: 3.16.0 + dev: true + + /vscode-languageserver-protocol@3.16.0: + resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==} + dependencies: + vscode-jsonrpc: 6.0.0 + vscode-languageserver-types: 3.16.0 + dev: true + + /vscode-languageserver-textdocument@1.0.11: + resolution: {integrity: sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==} + dev: true + + /vscode-languageserver-types@3.16.0: + resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==} + dev: true + + /vscode-languageserver@7.0.0: + resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==} + hasBin: true + dependencies: + vscode-languageserver-protocol: 3.16.0 + dev: true + + /vscode-uri@3.0.8: + resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + dev: true + /w3c-hr-time@1.0.2: resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==} deprecated: Use your platform's native performance.now() and performance.timeOrigin. diff --git a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx index 2e37613ba..9b3e4528f 100644 --- a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx +++ b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx @@ -20,7 +20,7 @@ describe('NavBar', () => { })), }); - render(); + render(); }); it('correctly renders header', () => { diff --git a/frontend/src/components/PageContainer/__tests__/PageContainer.spec.tsx b/frontend/src/components/PageContainer/__tests__/PageContainer.spec.tsx index ca91cd207..de270a0a3 100644 --- a/frontend/src/components/PageContainer/__tests__/PageContainer.spec.tsx +++ b/frontend/src/components/PageContainer/__tests__/PageContainer.spec.tsx @@ -30,7 +30,7 @@ describe('Page Container', () => { })), }); render( - +
child
, { diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx index 347623d22..22f017088 100644 --- a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx +++ b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx @@ -152,7 +152,7 @@ const Filters: React.FC = ({ const [queryType, setQueryType] = React.useState( activeFilter.name - ? MessageFilterType.GROOVY_SCRIPT + ? MessageFilterType.CEL_SCRIPT : MessageFilterType.STRING_CONTAINS ); const [query, setQuery] = React.useState(searchParams.get('q') || ''); @@ -206,7 +206,7 @@ const Filters: React.FC = ({ const nextAttempt = Number(searchParams.get('attempt') || 0) + 1; const props: Query = { q: - queryType === MessageFilterType.GROOVY_SCRIPT + queryType === MessageFilterType.CEL_SCRIPT ? activeFilter.code : query, filterQueryType: queryType, @@ -309,7 +309,7 @@ const Filters: React.FC = ({ JSON.stringify({ index, ...newActiveFilter }) ); setActiveFilter({ index, ...newActiveFilter }); - setQueryType(MessageFilterType.GROOVY_SCRIPT); + setQueryType(MessageFilterType.CEL_SCRIPT); }; const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({ diff --git a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx index e31a88846..b22e7c0ec 100644 --- a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx +++ b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx @@ -94,7 +94,7 @@ const columns: ColumnDef[] = [ const ExpandedRow: React.FC = () =>
I am expanded row
; -interface Props extends TableProps { +interface Props extends TableProps { path?: string; } diff --git a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts index 34b864fd4..802368495 100644 --- a/frontend/src/lib/hooks/api/__tests__/topics.spec.ts +++ b/frontend/src/lib/hooks/api/__tests__/topics.spec.ts @@ -77,7 +77,6 @@ describe('Topics hooks', () => { minInSyncReplicas: 0, cleanupPolicy: '', retentionMs: 0, - retentionBytes: 0, maxMessageBytes: 0, customParams: [], }; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index b4cdd022a..63856bd6d 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -7,19 +7,34 @@ import { import react from '@vitejs/plugin-react-swc'; import tsconfigPaths from 'vite-tsconfig-paths'; import { ViteEjsPlugin } from 'vite-plugin-ejs'; +import checker from 'vite-plugin-checker'; export default defineConfig(({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; + const isDevMode = mode === 'development'; + const isProxy = process.env.VITE_DEV_PROXY; + + const defaultPlugins = [ + react(), + tsconfigPaths(), + ViteEjsPlugin({ + PUBLIC_PATH: !isDevMode ? 'PUBLIC-PATH-VARIABLE' : '', + }), + ]; + + const prodPlugins = [...defaultPlugins, splitVendorChunkPlugin()]; + + const devPlugins = [ + ...defaultPlugins, + checker({ + overlay: { initialIsOpen: false }, + typescript: true, + eslint: { lintCommand: 'eslint --ext .tsx,.ts src/' }, + }), + ]; const defaultConfig: UserConfigExport = { - plugins: [ - react(), - tsconfigPaths(), - splitVendorChunkPlugin(), - ViteEjsPlugin({ - PUBLIC_PATH: mode !== 'development' ? 'PUBLIC-PATH-VARIABLE' : '', - }), - ], + plugins: isDevMode ? devPlugins : prodPlugins, server: { port: 3000, }, @@ -59,25 +74,29 @@ export default defineConfig(({ mode }) => { 'process.env.VITE_COMMIT': `"${process.env.VITE_COMMIT}"`, }, }; - const proxy = process.env.VITE_DEV_PROXY; - if (mode === 'development' && proxy) { + + const proxyDevServerConfig = { + ...defaultConfig.server, + open: true, + proxy: { + '/api': { + target: isProxy, + changeOrigin: true, + secure: false, + }, + '/actuator/info': { + target: isProxy, + changeOrigin: true, + secure: false, + }, + }, + }; + + if (isDevMode && isProxy) { return { ...defaultConfig, server: { - ...defaultConfig.server, - open: true, - proxy: { - '/api': { - target: proxy, - changeOrigin: true, - secure: false, - }, - '/actuator/info': { - target: proxy, - changeOrigin: true, - secure: false, - }, - }, + ...proxyDevServerConfig, }, }; }