avoid bundling code from react/jsx-runtime (#3017)

* mark `react/jsx-runtime` as external in `@graphiql/react` use classic jsx transform in plugins
graphql · Mar 19, 2023 · 4a2284f · 4a2284f
1 parent 6ed73bf
commit 4a2284f
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 8 deletions.
diff --git a/.changeset/twenty-flies-unite.md b/.changeset/twenty-flies-unite.md
@@ -0,0 +1,7 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+Avoid bundling code from `react/jsx-runtime` so that the package can be used with Preact
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -132,7 +132,11 @@ module.exports = {
 
     '@typescript-eslint/no-unused-vars': [
       'error',
-      { argsIgnorePattern: '^_', ignoreRestSiblings: true },
+      {
+        varsIgnorePattern: '^React$',
+        argsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
     ],
 
     'no-use-before-define': 0,

diff --git a/custom-words.txt b/custom-words.txt
@@ -96,6 +96,7 @@ onegraph
 openvsx
 ovsx
 picomatch
+preact
 snyk
 stackblitz
 strictsoftware

diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -1,5 +1,5 @@
 import type { GraphiQLPlugin } from '@graphiql/react';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
 } from 'graphiql-code-exporter';

diff --git a/packages/graphiql-plugin-code-exporter/tsconfig.json b/packages/graphiql-plugin-code-exporter/tsconfig.json
@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "declaration": true,
     "declarationDir": "types",
-    "jsx": "react-jsx"
+    "jsx": "react"
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

diff --git a/packages/graphiql-plugin-code-exporter/vite.config.ts b/packages/graphiql-plugin-code-exporter/vite.config.ts
@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react({ jsxRuntime: 'classic' })],
   build: {
     lib: {
       entry: 'src/index.tsx',

diff --git a/packages/graphiql-plugin-explorer/src/index.tsx b/packages/graphiql-plugin-explorer/src/index.tsx
@@ -5,7 +5,7 @@ import {
   useSchemaContext,
 } from '@graphiql/react';
 import GraphiQLExplorer, { GraphiQLExplorerProps } from 'graphiql-explorer';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 
 import './graphiql-explorer.d.ts';
 import './index.css';

diff --git a/packages/graphiql-plugin-explorer/tsconfig.json b/packages/graphiql-plugin-explorer/tsconfig.json
@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "declaration": true,
     "declarationDir": "types",
-    "jsx": "react-jsx"
+    "jsx": "react"
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

diff --git a/packages/graphiql-plugin-explorer/vite.config.ts b/packages/graphiql-plugin-explorer/vite.config.ts
@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react({ jsxRuntime: 'classic' })],
   build: {
     lib: {
       entry: 'src/index.tsx',

diff --git a/packages/graphiql-react/vite.config.ts b/packages/graphiql-react/vite.config.ts
@@ -23,7 +23,7 @@ export default defineConfig({
       formats: ['cjs', 'es'],
     },
     rollupOptions: {
-      external: ['graphql', 'react', 'react-dom'],
+      external: ['graphql', 'react', 'react-dom', 'react/jsx-runtime'],
       output: {
         chunkFileNames: '[name].[format].js',
       },