update vite to v5 (#3657)

dimaMachina · web-flow · commit 5bc7b84531b6 · 2024-07-25T12:17:00.000+02:00
* aa

* update vite to v5

* aa

* fix tests

* fix

* Update .changeset/fifty-swans-care.md
diff --git a/.changeset/fifty-swans-care.md b/.changeset/fifty-swans-care.md
@@ -0,0 +1,7 @@
+---
+"@graphiql/plugin-code-exporter": patch
+"@graphiql/plugin-explorer": patch
+"@graphiql/react": minor
+---
+
+update vite to v5
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,7 +35,7 @@ module.exports = {
   overrides: [
     {
       // Rules for all code files
-      files: ['**/*.{js,jsx,ts,tsx}'],
+      files: ['**/*.{js,jsx,ts,tsx,mts,cts}'],
       parserOptions: {
         ecmaVersion: 6,
       },
@@ -342,7 +342,10 @@ module.exports = {
         'sonar/prefer-promise-shorthand': 'error',
         'sonar/no-dead-store': 'error',
         'unicorn/prefer-node-protocol': 'error',
-        'import/no-unresolved': ['error', { ignore: ['^node:'] }],
+        'import/no-unresolved': [
+          'error',
+          { ignore: ['^node:', '\\.svg\\?react$'] },
+        ],
         'unicorn/prefer-string-replace-all': 'error',
         'unicorn/no-hex-escape': 'off', // TODO: enable
         // doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
@@ -357,7 +360,7 @@ module.exports = {
     },
     {
       // Rules that requires type information
-      files: ['**/*.{ts,tsx}'],
+      files: ['**/*.{ts,tsx,mts,cts}'],
       excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
       // extends: ['plugin:@typescript-eslint/recommended-type-checked'],
       rules: {
diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json
@@ -14,8 +14,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.1",
-    "vite": "^4.3.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4",
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "scripts": {
diff --git a/package.json b/package.json
@@ -135,7 +135,7 @@
     "ts-jest": "^27.1.5",
     "typedoc": "^0.19.2",
     "typescript": "^4.6.3",
-    "vitest": "^0.32.2",
+    "vitest": "^2.0.4",
     "wgutils": "^0.1.7",
     "wsrun": "^5.2.4"
   },
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
@@ -40,12 +40,12 @@
   },
   "devDependencies": {
     "@graphiql/react": "^0.22.4",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.8.1",
     "postcss-nesting": "^10.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^4.3.9"
+    "vite": "^5.3.4"
   }
 }
diff --git a/packages/graphiql-plugin-code-exporter/vite.config.mts b/packages/graphiql-plugin-code-exporter/vite.config.mts
diff --git a/packages/graphiql-plugin-explorer/package.json b/packages/graphiql-plugin-explorer/package.json
@@ -39,12 +39,12 @@
   },
   "devDependencies": {
     "@graphiql/react": "^0.22.4",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^4.3.9",
-    "vite-plugin-svgr": "^3.2.0"
+    "vite": "^5.3.4",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/packages/graphiql-plugin-explorer/src/index.tsx b/packages/graphiql-plugin-explorer/src/index.tsx
@@ -12,10 +12,10 @@ import {
   GraphiQLExplorerProps,
 } from 'graphiql-explorer';
 
-import ArrowIcon from './icons/arrow.svg';
-import FolderPlusIcon from './icons/folder-plus.svg';
-import CheckboxUncheckedIcon from './icons/checkbox-unchecked.svg';
-import CheckboxCheckedIcon from './icons/checkbox-checked.svg';
+import ArrowIcon from './icons/arrow.svg?react';
+import FolderPlusIcon from './icons/folder-plus.svg?react';
+import CheckboxUncheckedIcon from './icons/checkbox-unchecked.svg?react';
+import CheckboxCheckedIcon from './icons/checkbox-checked.svg?react';
 
 import './graphiql-explorer.d.ts';
 import './index.css';
diff --git a/packages/graphiql-plugin-explorer/src/vite-env.d.ts b/packages/graphiql-plugin-explorer/src/vite-env.d.ts
@@ -1,7 +1,2 @@
-declare module '*.svg' {
-  import { FC, SVGProps } from 'react';
-  const ReactComponent: FC<SVGProps<SVGSVGElement>>;
-  export default ReactComponent;
-}
-
+/// <reference types="vite-plugin-svgr/client" />
 /// <reference types="vite/client" />
diff --git a/packages/graphiql-plugin-explorer/vite.config.mts b/packages/graphiql-plugin-explorer/vite.config.mts
diff --git a/packages/graphiql-react/jest.config.js b/packages/graphiql-react/jest.config.js
@@ -3,7 +3,7 @@ const base = require('../../jest.config.base')(__dirname);
 module.exports = {
   ...base,
   moduleNameMapper: {
-    '\\.svg$': `${__dirname}/__mocks__/svg`,
+    '\\.svg\\?react$': `${__dirname}/__mocks__/svg`,
     ...base.moduleNameMapper,
   },
 };
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -68,13 +68,13 @@
     "@babel/helper-string-parser": "^7.19.4",
     "@testing-library/react": "14.0.0",
     "@types/set-value": "^4.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "graphql": "^16.8.1",
     "postcss-nesting": "^10.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^4.3.9",
-    "vite-plugin-svgr": "^3.2.0"
+    "vite": "^5.3.4",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/packages/graphiql-react/src/icons/index.tsx b/packages/graphiql-react/src/icons/index.tsx
@@ -1,36 +1,36 @@
-import { ComponentProps, FC } from 'react';
+import { ComponentProps, FC, SVGProps } from 'react';
 
-import _ArgumentIcon from './argument.svg';
-import _ChevronDownIcon from './chevron-down.svg';
-import _ChevronLeftIcon from './chevron-left.svg';
-import _ChevronUpIcon from './chevron-up.svg';
-import _CloseIcon from './close.svg';
-import _CopyIcon from './copy.svg';
-import _DeprecatedArgumentIcon from './deprecated-argument.svg';
-import _DeprecatedEnumValueIcon from './deprecated-enum-value.svg';
-import _DeprecatedFieldIcon from './deprecated-field.svg';
-import _DirectiveIcon from './directive.svg';
-import _DocsFilledIcon from './docs-filled.svg';
-import _DocsIcon from './docs.svg';
-import _EnumValueIcon from './enum-value.svg';
-import _FieldIcon from './field.svg';
-import _HistoryIcon from './history.svg';
-import _ImplementsIcon from './implements.svg';
-import _KeyboardShortcutIcon from './keyboard-shortcut.svg';
-import _MagnifyingGlassIcon from './magnifying-glass.svg';
-import _MergeIcon from './merge.svg';
-import _PenIcon from './pen.svg';
-import _PlayIcon from './play.svg';
-import _PlusIcon from './plus.svg';
-import _PrettifyIcon from './prettify.svg';
-import _ReloadIcon from './reload.svg';
-import _RootTypeIcon from './root-type.svg';
-import _SettingsIcon from './settings.svg';
-import _StarFilledIcon from './star-filled.svg';
-import _StarIcon from './star.svg';
-import _StopIcon from './stop.svg';
-import _TrashIcon from './trash.svg';
-import _TypeIcon from './type.svg';
+import _ArgumentIcon from './argument.svg?react';
+import _ChevronDownIcon from './chevron-down.svg?react';
+import _ChevronLeftIcon from './chevron-left.svg?react';
+import _ChevronUpIcon from './chevron-up.svg?react';
+import _CloseIcon from './close.svg?react';
+import _CopyIcon from './copy.svg?react';
+import _DeprecatedArgumentIcon from './deprecated-argument.svg?react';
+import _DeprecatedEnumValueIcon from './deprecated-enum-value.svg?react';
+import _DeprecatedFieldIcon from './deprecated-field.svg?react';
+import _DirectiveIcon from './directive.svg?react';
+import _DocsFilledIcon from './docs-filled.svg?react';
+import _DocsIcon from './docs.svg?react';
+import _EnumValueIcon from './enum-value.svg?react';
+import _FieldIcon from './field.svg?react';
+import _HistoryIcon from './history.svg?react';
+import _ImplementsIcon from './implements.svg?react';
+import _KeyboardShortcutIcon from './keyboard-shortcut.svg?react';
+import _MagnifyingGlassIcon from './magnifying-glass.svg?react';
+import _MergeIcon from './merge.svg?react';
+import _PenIcon from './pen.svg?react';
+import _PlayIcon from './play.svg?react';
+import _PlusIcon from './plus.svg?react';
+import _PrettifyIcon from './prettify.svg?react';
+import _ReloadIcon from './reload.svg?react';
+import _RootTypeIcon from './root-type.svg?react';
+import _SettingsIcon from './settings.svg?react';
+import _StarFilledIcon from './star-filled.svg?react';
+import _StarIcon from './star.svg?react';
+import _StopIcon from './stop.svg?react';
+import _TrashIcon from './trash.svg?react';
+import _TypeIcon from './type.svg?react';
 
 export const ArgumentIcon = generateIcon(_ArgumentIcon);
 export const ChevronDownIcon = generateIcon(_ChevronDownIcon);
@@ -42,7 +42,7 @@ export const DeprecatedArgumentIcon = generateIcon(_DeprecatedArgumentIcon);
 export const DeprecatedEnumValueIcon = generateIcon(_DeprecatedEnumValueIcon);
 export const DeprecatedFieldIcon = generateIcon(_DeprecatedFieldIcon);
 export const DirectiveIcon = generateIcon(_DirectiveIcon);
-export const DocsFilledIcon = generateIcon(_DocsFilledIcon, 'filled docs icon');
+export const DocsFilledIcon = generateIcon(_DocsFilledIcon);
 export const DocsIcon = generateIcon(_DocsIcon);
 export const EnumValueIcon = generateIcon(_EnumValueIcon);
 export const FieldIcon = generateIcon(_FieldIcon);
@@ -58,25 +58,28 @@ export const PrettifyIcon = generateIcon(_PrettifyIcon);
 export const ReloadIcon = generateIcon(_ReloadIcon);
 export const RootTypeIcon = generateIcon(_RootTypeIcon);
 export const SettingsIcon = generateIcon(_SettingsIcon);
-export const StarFilledIcon = generateIcon(_StarFilledIcon, 'filled star icon');
+export const StarFilledIcon = generateIcon(_StarFilledIcon);
 export const StarIcon = generateIcon(_StarIcon);
 export const StopIcon = generateIcon(_StopIcon);
-export const TrashIcon = generateIcon(_TrashIcon, 'trash icon');
+export const TrashIcon = generateIcon(_TrashIcon);
 export const TypeIcon = generateIcon(_TypeIcon);
 
 function generateIcon(
-  RawComponent: any,
-  title = RawComponent.name
-    // Icon component name starts with `Svg${CamelCaseFilename without .svg}`
-    .replace('Svg', '')
-    // Insert a space before all caps
-    .replaceAll(/([A-Z])/g, ' $1')
-    .trimStart()
-    .toLowerCase() + ' icon',
+  RawComponent: FC<SVGProps<SVGSVGElement> & { title?: string }>,
 ): FC<ComponentProps<'svg'>> {
+  const title =
+    RawComponent.name
+      // Icon component name starts with `Svg${CamelCaseFilename without .svg}`
+      .replace('Svg', '')
+      // Insert a space before all caps
+      .replaceAll(/([A-Z])/g, ' $1')
+      .trimStart()
+      .toLowerCase() + ' icon';
+
   function IconComponent(props: ComponentProps<'svg'>) {
     return <RawComponent title={title} {...props} />;
   }
+
   IconComponent.displayName = RawComponent.name;
   return IconComponent;
 }
diff --git a/packages/graphiql-react/src/icons/trash.svg b/packages/graphiql-react/src/icons/trash.svg
@@ -8,11 +8,10 @@
   style="height: 1.5em"
   clip-rule="evenodd"
 >
-  <title>trash icon</title>
   <path
     d="M19 24h-14c-1.104 0-2-.896-2-2v-17h-1v-2h6v-1.5c0-.827.673-1.5 1.5-1.5h5c.825 0 1.5.671 1.5 1.5v1.5h6v2h-1v17c0 1.104-.896 2-2 2zm0-19h-14v16.5c0 .276.224.5.5.5h13c.276 0 .5-.224.5-.5v-16.5zm-7 7.586l3.293-3.293 1.414 1.414-3.293 3.293 3.293 3.293-1.414 1.414-3.293-3.293-3.293 3.293-1.414-1.414 3.293-3.293-3.293-3.293 1.414-1.414 3.293 3.293zm2-10.586h-4v1h4v-1z"
     fill="currentColor"
     stroke-width=".25"
     stroke="currentColor"
-  ></path>
+  />
 </svg>
diff --git a/packages/graphiql-react/src/vite-env.d.ts b/packages/graphiql-react/src/vite-env.d.ts
@@ -1 +1,2 @@
+/// <reference types="vite-plugin-svgr/client" />
 /// <reference types="vite/client" />
diff --git a/packages/graphiql-react/vite.config.mts b/packages/graphiql-react/vite.config.mts
diff --git a/packages/graphiql/jest.config.js b/packages/graphiql/jest.config.js
@@ -3,7 +3,7 @@ const base = require('../../jest.config.base')(__dirname);
 module.exports = {
   ...base,
   moduleNameMapper: {
-    '\\.svg$': `${__dirname}/__mocks__/svg`,
+    '\\.svg\\?react$': `${__dirname}/__mocks__/svg`,
     ...base.moduleNameMapper,
   },
 };
diff --git a/packages/monaco-graphql/vitest.config.mts b/packages/monaco-graphql/vitest.config.mts
diff --git a/packages/vscode-graphql-syntax/vitest.config.mts b/packages/vscode-graphql-syntax/vitest.config.mts
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
@@ -9,7 +9,8 @@
   "include": [
     "packages/*/src/*/__tests__/**/*.ts",
     "packages/*/src/__tests__/**/*.ts",
-    "packages/*/vite.config.ts",
+    "packages/*/vite.config.mts",
+    "packages/*/vitest.config.mts",
     "examples/*/vite.config.ts",
     "packages/graphiql/src/components/__tests__/**/*.ts",
     "packages/graphiql/src/components/__tests__/**/*.tsx",
diff --git a/yarn.lock b/yarn.lock
