replace unmaintained vite-plugin-react-svg with vite-plugin-svgr (#…

…3230)

custom-words.txt

@@ -115,7 +115,7 @@ wsrun
 lezer
 buildhelper
 sonarjs
-
+svgr
 
 // identifiers used in code and configs
 acmerc

packages/graphiql-react/package.json

@@ -11,8 +11,19 @@
     "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/react"
   },
   "license": "MIT",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./font/roboto.css": "./font/roboto.css",
+    "./font/fira-code.css": "./font/fira-code.css",
+    "./dist/style.css": "./dist/style.css"
+  },
   "types": "types/index.d.ts",
   "keywords": [
     "react",
@@ -56,13 +67,13 @@
     "@testing-library/react": "12.1.5",
     "@types/codemirror": "^5.60.5",
     "@types/set-value": "^4.0.1",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "graphql": "^16.4.0",
     "postcss-nesting": "^10.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.16",
-    "vite-plugin-react-svg": "^0.2.0"
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0"
   }
 }

packages/graphiql-react/src/icons/index.ts

@@ -0,0 +1,77 @@
+import { ComponentProps, FC } 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 _TypeIcon from './type.svg';
+
+export const ArgumentIcon = generateIcon(_ArgumentIcon);
+export const ChevronDownIcon = generateIcon(_ChevronDownIcon);
+export const ChevronLeftIcon = generateIcon(_ChevronLeftIcon);
+export const ChevronUpIcon = generateIcon(_ChevronUpIcon);
+export const CloseIcon = generateIcon(_CloseIcon);
+export const CopyIcon = generateIcon(_CopyIcon);
+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 DocsIcon = generateIcon(_DocsIcon);
+export const EnumValueIcon = generateIcon(_EnumValueIcon);
+export const FieldIcon = generateIcon(_FieldIcon);
+export const HistoryIcon = generateIcon(_HistoryIcon);
+export const ImplementsIcon = generateIcon(_ImplementsIcon);
+export const KeyboardShortcutIcon = generateIcon(_KeyboardShortcutIcon);
+export const MagnifyingGlassIcon = generateIcon(_MagnifyingGlassIcon);
+export const MergeIcon = generateIcon(_MergeIcon);
+export const PenIcon = generateIcon(_PenIcon);
+export const PlayIcon = generateIcon(_PlayIcon);
+export const PlusIcon = generateIcon(_PlusIcon);
+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 StarIcon = generateIcon(_StarIcon);
+export const StopIcon = generateIcon(_StopIcon);
+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',
+): FC<ComponentProps<'svg'>> {
+  RawComponent.defaultProps = { title };
+  return RawComponent;
+}

packages/graphiql-react/vite.config.ts

@@ -1,16 +1,17 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import reactSvgPlugin from 'vite-plugin-react-svg';
+import svgr from 'vite-plugin-svgr';
 import postCssNestingPlugin from 'postcss-nesting';
 import packageJSON from './package.json';
 
 export default defineConfig({
   plugins: [
     react(),
-    reactSvgPlugin({
-      defaultExport: 'component',
-      expandProps: 'end',
-      titleProp: true,
+    svgr({
+      exportAsDefault: true,
+      svgrOptions: {
+        titleProp: true,
+      },
     }),
   ],
   css: {