[1/3] [v3] Exclude codemirror/... and codemirror-graphql/... impo…

…rts from bundle (#3824) * [skip ci] * fix * add .js extension * add .js extension * upd
graphql · Dec 14, 2024 · 72f06bc · 72f06bc
1 parent 9f725b8
commit 72f06bc
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 34 deletions.
diff --git a/.changeset/silly-nails-double.md b/.changeset/silly-nails-double.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Exclude `codemirror/...` and `codemirror-graphql/...` imports from bundle
diff --git a/jest.config.base.js b/jest.config.base.js
@@ -24,7 +24,7 @@ module.exports = (dir, env = 'jsdom') => {
       '^graphql-language-([^/]+)': `${__dirname}/packages/graphql-language-$1/src`,
       '^@graphiql\\/([^/]+)': `${__dirname}/packages/graphiql-$1/src`,
       '^@graphiql-plugins\\/([^/]+)': `${__dirname}/plugins/$1/src`,
-      '^codemirror-graphql\\/esm([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
+      '^codemirror-graphql\\/esm([^]+)\\.js': `${__dirname}/packages/codemirror-graphql/src/$1`,
       '^codemirror-graphql\\/cjs([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
       // relies on compilation
       '^cm6-graphql\\/src\\/([^]+)': `${__dirname}/packages/cm6-graphql/dist/$1`,

diff --git a/packages/graphiql-react/src/editor/common.ts b/packages/graphiql-react/src/editor/common.ts
@@ -34,17 +34,17 @@ export async function importCodeMirror(
     options?.useCommonAddons === false
       ? addons
       : [
-          import('codemirror/addon/hint/show-hint'),
-          import('codemirror/addon/edit/matchbrackets'),
-          import('codemirror/addon/edit/closebrackets'),
-          import('codemirror/addon/fold/brace-fold'),
-          import('codemirror/addon/fold/foldgutter'),
-          import('codemirror/addon/lint/lint'),
-          import('codemirror/addon/search/searchcursor'),
-          import('codemirror/addon/search/jump-to-line'),
-          import('codemirror/addon/dialog/dialog'),
+          import('codemirror/addon/hint/show-hint.js'),
+          import('codemirror/addon/edit/matchbrackets.js'),
+          import('codemirror/addon/edit/closebrackets.js'),
+          import('codemirror/addon/fold/brace-fold.js'),
+          import('codemirror/addon/fold/foldgutter.js'),
+          import('codemirror/addon/lint/lint.js'),
+          import('codemirror/addon/search/searchcursor.js'),
+          import('codemirror/addon/search/jump-to-line.js'),
+          import('codemirror/addon/dialog/dialog.js'),
           // @ts-expect-error
-          import('codemirror/keymap/sublime'),
+          import('codemirror/keymap/sublime.js'),
           ...addons,
         ],
   );

diff --git a/packages/graphiql-react/src/editor/header-editor.ts b/packages/graphiql-react/src/editor/header-editor.ts
@@ -53,7 +53,7 @@ export function useHeaderEditor(
 
     void importCodeMirror([
       // @ts-expect-error
-      import('codemirror/mode/javascript/javascript'),
+      import('codemirror/mode/javascript/javascript.js'),
     ]).then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
       if (!isActive) {

diff --git a/packages/graphiql-react/src/editor/query-editor.ts b/packages/graphiql-react/src/editor/query-editor.ts
@@ -144,13 +144,13 @@ export function useQueryEditor(
     let isActive = true;
 
     void importCodeMirror([
-      import('codemirror/addon/comment/comment'),
-      import('codemirror/addon/search/search'),
-      import('codemirror-graphql/esm/hint'),
-      import('codemirror-graphql/esm/lint'),
-      import('codemirror-graphql/esm/info'),
-      import('codemirror-graphql/esm/jump'),
-      import('codemirror-graphql/esm/mode'),
+      import('codemirror/addon/comment/comment.js'),
+      import('codemirror/addon/search/search.js'),
+      import('codemirror-graphql/esm/hint.js'),
+      import('codemirror-graphql/esm/lint.js'),
+      import('codemirror-graphql/esm/info.js'),
+      import('codemirror-graphql/esm/jump.js'),
+      import('codemirror-graphql/esm/mode.js'),
     ]).then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
       if (!isActive) {

diff --git a/packages/graphiql-react/src/editor/response-editor.tsx b/packages/graphiql-react/src/editor/response-editor.tsx
@@ -64,16 +64,16 @@ export function useResponseEditor(
     let isActive = true;
     void importCodeMirror(
       [
-        import('codemirror/addon/fold/foldgutter'),
-        import('codemirror/addon/fold/brace-fold'),
-        import('codemirror/addon/dialog/dialog'),
-        import('codemirror/addon/search/search'),
-        import('codemirror/addon/search/searchcursor'),
-        import('codemirror/addon/search/jump-to-line'),
+        import('codemirror/addon/fold/foldgutter.js'),
+        import('codemirror/addon/fold/brace-fold.js'),
+        import('codemirror/addon/dialog/dialog.js'),
+        import('codemirror/addon/search/search.js'),
+        import('codemirror/addon/search/searchcursor.js'),
+        import('codemirror/addon/search/jump-to-line.js'),
         // @ts-expect-error
-        import('codemirror/keymap/sublime'),
-        import('codemirror-graphql/esm/results/mode'),
-        import('codemirror-graphql/esm/utils/info-addon'),
+        import('codemirror/keymap/sublime.js'),
+        import('codemirror-graphql/esm/results/mode.js'),
+        import('codemirror-graphql/esm/utils/info-addon.js'),
       ],
       { useCommonAddons: false },
     ).then(CodeMirror => {

diff --git a/packages/graphiql-react/src/editor/variable-editor.ts b/packages/graphiql-react/src/editor/variable-editor.ts
@@ -58,9 +58,9 @@ export function useVariableEditor(
     let isActive = true;
 
     void importCodeMirror([
-      import('codemirror-graphql/esm/variables/hint'),
-      import('codemirror-graphql/esm/variables/lint'),
-      import('codemirror-graphql/esm/variables/mode'),
+      import('codemirror-graphql/esm/variables/hint.js'),
+      import('codemirror-graphql/esm/variables/lint.js'),
+      import('codemirror-graphql/esm/variables/mode.js'),
     ]).then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
       if (!isActive) {

diff --git a/packages/graphiql-react/vite.config.mts b/packages/graphiql-react/vite.config.mts
@@ -32,9 +32,9 @@ export default defineConfig({
         'react/jsx-runtime',
         // Exclude peer dependencies and dependencies from bundle
         ...Object.keys(packageJSON.peerDependencies),
-        ...Object.keys(packageJSON.dependencies).filter(
-          dependency => dependency !== 'codemirror',
-        ),
+        ...Object.keys(packageJSON.dependencies),
+        // Exclude `codemirror/...` and `codemirror-graphql/...` but not `../style/codemirror.css`
+        /codemirror[/-]/,
       ],
       output: {
         chunkFileNames: '[name].[format].js',