From 72f06bc52a9bdc0cb146d65861ba7364717bbdf5 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 14 Dec 2024 20:20:59 +0800 Subject: [PATCH] [1/3] [v3] Exclude `codemirror/...` and `codemirror-graphql/...` imports from bundle (#3824) * [skip ci] * fix * add .js extension * add .js extension * upd --- .changeset/silly-nails-double.md | 5 +++++ jest.config.base.js | 2 +- packages/graphiql-react/src/editor/common.ts | 20 +++++++++---------- .../src/editor/header-editor.ts | 2 +- .../graphiql-react/src/editor/query-editor.ts | 14 ++++++------- .../src/editor/response-editor.tsx | 18 ++++++++--------- .../src/editor/variable-editor.ts | 6 +++--- packages/graphiql-react/vite.config.mts | 6 +++--- 8 files changed, 39 insertions(+), 34 deletions(-) create mode 100644 .changeset/silly-nails-double.md diff --git a/.changeset/silly-nails-double.md b/.changeset/silly-nails-double.md new file mode 100644 index 00000000000..f1f24f5f602 --- /dev/null +++ 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 index 029f7e79290..d9e7bf85e21 100644 --- 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 index 33f55299a5c..8ed6d7f936e 100644 --- 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 index db700f56fea..609b7487c62 100644 --- 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 index 48c8aec4f97..a589fbc06ae 100644 --- 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 index 03f1d7e069c..405e6eae784 100644 --- 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 index 2213c383e27..364a0658b58 100644 --- 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 index fb552395aaf..d04a1d5f524 100644 --- 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',