From 69f1f6faca22be1f66823f962bacff9a79e61bd6 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Wed, 11 May 2022 15:06:02 +0200 Subject: [PATCH 1/9] update example/graphiql-create-react-app --- examples/graphiql-create-react-app/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/graphiql-create-react-app/package.json b/examples/graphiql-create-react-app/package.json index 062374409f6..febbc3d2921 100644 --- a/examples/graphiql-create-react-app/package.json +++ b/examples/graphiql-create-react-app/package.json @@ -5,9 +5,9 @@ "dependencies": { "graphiql": "file:../../packages/graphiql", "graphql": "^16.4.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-scripts": "3.4.1" + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "5.0.1" }, "scripts": { "start": "react-scripts start", From edbf3478305a1cdb02a48df3d2c19e5d633372d2 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Wed, 11 May 2022 15:31:54 +0200 Subject: [PATCH 2/9] update examples/graphiql-parcel --- examples/graphiql-parcel/.gitignore | 1 + examples/graphiql-parcel/package.json | 6 +++--- examples/graphiql-parcel/src/index.html | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 examples/graphiql-parcel/.gitignore diff --git a/examples/graphiql-parcel/.gitignore b/examples/graphiql-parcel/.gitignore new file mode 100644 index 00000000000..f78ec92852f --- /dev/null +++ b/examples/graphiql-parcel/.gitignore @@ -0,0 +1 @@ +.parcel-cache diff --git a/examples/graphiql-parcel/package.json b/examples/graphiql-parcel/package.json index 058c7e6013f..e7dd26eb3fa 100644 --- a/examples/graphiql-parcel/package.json +++ b/examples/graphiql-parcel/package.json @@ -24,12 +24,12 @@ "dependencies": { "graphiql": "file:../../packages/graphiql", "graphql": "^16.4.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "typescript": "^3.4.4" }, "devDependencies": { - "parcel-bundler": "^1.12.4", + "parcel": "^2.5.0", "worker-loader": "^2.0.0" } } diff --git a/examples/graphiql-parcel/src/index.html b/examples/graphiql-parcel/src/index.html index 88b1d3a8351..f4a46532d6a 100644 --- a/examples/graphiql-parcel/src/index.html +++ b/examples/graphiql-parcel/src/index.html @@ -20,6 +20,6 @@
- + From f78be0e552a267ef1081019d3ff5a6e20c9d8953 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Wed, 11 May 2022 15:32:03 +0200 Subject: [PATCH 3/9] fix codemirror imports for parcel example --- packages/graphiql/src/utility/importCodeMirror.ts | 6 +++++- packages/graphiql/src/utility/onHasCompletion.ts | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/graphiql/src/utility/importCodeMirror.ts b/packages/graphiql/src/utility/importCodeMirror.ts index 405e5c3bdf7..3ba657ff608 100644 --- a/packages/graphiql/src/utility/importCodeMirror.ts +++ b/packages/graphiql/src/utility/importCodeMirror.ts @@ -20,7 +20,11 @@ export async function importCodeMirror( addons: Promise[], options?: { useCommonAddons?: boolean }, ) { - const { default: CodeMirror } = await import('codemirror'); + const CodeMirror = await import('codemirror').then(c => + // Depending on bundler and settings the dynamic import either returns a + // function (e.g. parcel) or an object containing a `default` property + typeof c === 'function' ? c : c.default, + ); const allAddons = options?.useCommonAddons === false ? addons diff --git a/packages/graphiql/src/utility/onHasCompletion.ts b/packages/graphiql/src/utility/onHasCompletion.ts index b87e49130b0..6ce99d75b8e 100644 --- a/packages/graphiql/src/utility/onHasCompletion.ts +++ b/packages/graphiql/src/utility/onHasCompletion.ts @@ -14,6 +14,7 @@ import { } from 'graphql'; import escapeHTML from 'escape-html'; import MD from 'markdown-it'; +import { importCodeMirror } from './importCodeMirror'; const md = new MD(); @@ -26,7 +27,7 @@ export default function onHasCompletion( data: CM.EditorChange | undefined, onHintInformationRender: (el: HTMLDivElement) => void, ) { - import('codemirror').then(({ default: CodeMirror }) => { + importCodeMirror([], { useCommonAddons: false }).then(CodeMirror => { let information: HTMLDivElement | null; let deprecation: HTMLDivElement | null; CodeMirror.on( From e1a1afb27fc11467cd01a15eb865c757a51f70c9 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Wed, 11 May 2022 15:41:50 +0200 Subject: [PATCH 4/9] update graphiql --- packages/graphiql-2-rfc-context/package.json | 8 +-- .../resources/index.html.ejs | 54 +++++++++++-------- packages/graphiql/package.json | 4 +- packages/graphiql/resources/index.html.ejs | 20 +++++-- yarn.lock | 21 +++++--- 5 files changed, 66 insertions(+), 41 deletions(-) diff --git a/packages/graphiql-2-rfc-context/package.json b/packages/graphiql-2-rfc-context/package.json index cecc6f3e285..2e67d353e83 100644 --- a/packages/graphiql-2-rfc-context/package.json +++ b/packages/graphiql-2-rfc-context/package.json @@ -60,8 +60,8 @@ "peerDependencies": { "graphql": "^15.5.0 || ^16.0.0", "prop-types": ">=15.5.0", - "react": "^16.8.0", - "react-dom": "^16.8.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "devDependencies": { "@storybook/addon-storyshots": "^5.2.8", @@ -92,8 +92,8 @@ "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "prop-types": "15.7.2", - "react": "^16.12.0", - "react-dom": "^16.12.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-hot-loader": "^4.12.20", "react-test-renderer": "^16.13.1", "require-context.macro": "^1.2.2", diff --git a/packages/graphiql-2-rfc-context/resources/index.html.ejs b/packages/graphiql-2-rfc-context/resources/index.html.ejs index 7b2107a76f1..95499eb0bf1 100644 --- a/packages/graphiql-2-rfc-context/resources/index.html.ejs +++ b/packages/graphiql-2-rfc-context/resources/index.html.ejs @@ -7,41 +7,49 @@ --> + + - #graphiql { - height: 100vh; - } - - - - - + + - - - - -
Loading...
- - + + +
Loading...
+ + diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json index 30098df42aa..7b39097c736 100644 --- a/packages/graphiql/package.json +++ b/packages/graphiql/package.json @@ -88,8 +88,8 @@ "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "prop-types": "15.7.2", - "react": "^16.12.0", - "react-dom": "^16.12.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-hot-loader": "^4.12.20", "react-test-renderer": "^16.13.1", "require-context.macro": "^1.2.2", diff --git a/packages/graphiql/resources/index.html.ejs b/packages/graphiql/resources/index.html.ejs index 159b6e78029..c841cfc1261 100644 --- a/packages/graphiql/resources/index.html.ejs +++ b/packages/graphiql/resources/index.html.ejs @@ -27,8 +27,14 @@ If you do not want to rely on a CDN, you can host these files locally or include them directly in your favored resource bunder. --> - - + +