show graphql config examples in usage (#2770)

dimaMachina · web-flow · commit 9966df64de1f · 2024-11-26T21:29:36.000+07:00
* show graphql config examples in usage

* show graphql config examples in usage

* aa

* aa
diff --git a/examples/code-file/.eslintrc.cjs b/examples/code-file/.eslintrc.cjs
@@ -14,7 +14,10 @@ module.exports = {
       processor: '@graphql-eslint/graphql',
       extends: ['eslint:recommended'],
       env: {
-        es6: true,
+        es2022: true,
+      },
+      parserOptions: {
+        sourceType: 'module',
       },
       rules: {
         'no-console': 'error',
diff --git a/examples/code-file/graphql.config.js b/examples/code-file/graphql.config.js
diff --git a/examples/graphql-config/.eslintrc.cjs b/examples/graphql-config/.eslintrc.cjs
@@ -12,6 +12,12 @@ module.exports = {
     {
       files: ['*.js'],
       extends: ['eslint:recommended'],
+      env: {
+        es2022: true,
+      },
+      parserOptions: {
+        sourceType: 'module',
+      },
     },
     {
       files: ['*.graphql'],
diff --git a/examples/graphql-config/graphql.config.js b/examples/graphql-config/graphql.config.js
diff --git a/examples/monorepo/.eslintrc.cjs b/examples/monorepo/.eslintrc.cjs
@@ -10,11 +10,14 @@ module.exports = {
   // they will try to also execute for all overrides, as ESLint's configs cascade
   overrides: [
     {
-      files: '*.tsx',
+      files: '*.{js,tsx}',
       extends: 'eslint:recommended',
       env: {
         es2022: true,
       },
+      parserOptions: {
+        sourceType: 'module',
+      },
     },
     {
       files: 'client/**/*.tsx',
diff --git a/examples/monorepo/graphql.config.js b/examples/monorepo/graphql.config.js
diff --git a/examples/multiple-projects-graphql-config/.eslintrc.cjs b/examples/multiple-projects-graphql-config/.eslintrc.cjs
@@ -13,12 +13,12 @@ module.exports = {
       files: ['*.js'],
       processor: '@graphql-eslint/graphql',
       extends: ['eslint:recommended'],
+      env: {
+        es2022: true,
+      },
       parserOptions: {
         sourceType: 'module',
       },
-      env: {
-        es6: true,
-      },
     },
     {
       files: ['schema.*.graphql'],
diff --git a/examples/prettier/.eslintrc.cjs b/examples/prettier/.eslintrc.cjs
@@ -10,7 +10,7 @@ module.exports = {
       processor: '@graphql-eslint/graphql',
       extends: ['eslint:recommended', 'plugin:prettier/recommended'],
       env: {
-        es6: true,
+        es2022: true,
       },
       parserOptions: {
         sourceType: 'module',
diff --git a/examples/svelte-code-file/.eslintrc.cjs b/examples/svelte-code-file/.eslintrc.cjs
@@ -15,7 +15,7 @@ module.exports = {
       processor: '@graphql-eslint/graphql',
       extends: ['eslint:recommended'],
       env: {
-        es6: true,
+        es2022: true,
       },
     },
     {
diff --git a/examples/vue-code-file/.eslintrc.cjs b/examples/vue-code-file/.eslintrc.cjs
@@ -15,7 +15,7 @@ module.exports = {
       processor: '@graphql-eslint/graphql',
       extends: ['eslint:recommended'],
       env: {
-        es6: true,
+        es2022: true,
       },
     },
     {
diff --git a/website/content/docs/usage/graphql.mdx b/website/content/docs/usage/graphql.mdx
@@ -5,4 +5,4 @@ icon: GraphQLIcon
 
 # Usage with `.graphql` files
 
-<ESLintConfigs gitFolder="graphql-config" />
+<ESLintConfigs gitFolder="graphql-config" graphqlConfigFile="graphql.config.js" />
diff --git a/website/content/docs/usage/js.mdx b/website/content/docs/usage/js.mdx
@@ -3,7 +3,7 @@ sidebarTitle: Code Files
 icon: JSIcon
 ---
 
-# Usage with code files `.js/.jsx`
+# Usage with code files `.js`/`.jsx`
 
 You need to add a new
 [configuration object](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects)
@@ -39,4 +39,6 @@ export default [
 > you define for `.graphql` files, under `files: ['**/*.graphql']`, to be applied to the definitions
 > within your code files[^1].
 
-<ESLintConfigs gitFolder="code-file" />
+---
+
+<ESLintConfigs gitFolder="code-file" graphqlConfigFile="graphql.config.js" />
diff --git a/website/content/docs/usage/multiple-projects.mdx b/website/content/docs/usage/multiple-projects.mdx
@@ -5,4 +5,4 @@ icon: StackIcon
 
 # Usage to lint different schemas
 
-<ESLintConfigs gitFolder="multiple-projects-graphql-config" />
+<ESLintConfigs gitFolder="multiple-projects-graphql-config" graphqlConfigFile="graphql.config.ts" />
diff --git a/website/content/docs/usage/schema-and-documents.mdx b/website/content/docs/usage/schema-and-documents.mdx
@@ -5,4 +5,4 @@ icon: HalfIcon
 
 # Usage to lint both schema/documents
 
-<ESLintConfigs gitFolder="monorepo" />
+<ESLintConfigs gitFolder="monorepo" graphqlConfigFile="graphql.config.js" />
diff --git a/website/mdx-components.tsx b/website/mdx-components.tsx
@@ -1,7 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { addBasePath } from 'next/dist/client/add-base-path';
-import { Callout } from '@theguild/components';
 import {
   compileMdx,
   useMDXComponents as getDocsMDXComponents,
@@ -29,23 +28,33 @@ const docsComponents = getDocsMDXComponents({
       />
     );
   },
-  WIP() {
-    return (
-      <Callout type="warning" emoji="🚧">
-        This page is under construction. Help us improve the content by submitting a PR.
-      </Callout>
-    );
-  },
-  async ESLintConfigs({ gitFolder }) {
+  // WIP() {
+  //   return (
+  //     <Callout type="warning" emoji="🚧">
+  //       This page is under construction. Help us improve the content by submitting a PR.
+  //     </Callout>
+  //   );
+  // },
+  async ESLintConfigs({ gitFolder, graphqlConfigFile = '' }) {
     const docsPath = path.join(process.cwd(), '..', 'examples', gitFolder);
+    const { ext } = path.parse(graphqlConfigFile);
+    const graphqlConfig =
+      graphqlConfigFile &&
+      `
+## GraphQL Config
+
+\`\`\`${ext.slice(1)} filename="${graphqlConfigFile}"
+${(await fs.readFile(`${docsPath}/${graphqlConfigFile}`, 'utf8')).trim()}
+\`\`\`
+`;
     return (
       <MDXRemote
         compiledSource={await compileMdx(`
 <OfficialExampleCallout gitFolder="${gitFolder}" />
-
+${graphqlConfig}
 ## ESLint Flat Config
 \`\`\`js filename="eslint.config.js"
-${await fs.readFile(`${docsPath}/eslint.config.js`)}
+${(await fs.readFile(`${docsPath}/eslint.config.js`, 'utf8')).trim()}
 \`\`\`
 
 ## ESLint Legacy Config
@@ -55,7 +64,7 @@ ${await fs.readFile(`${docsPath}/eslint.config.js`)}
 > An eslintrc configuration file, is deprecated and support will be removed in ESLint v10.0.0. Migrate to an [\`eslint.config.js\` file](#eslint-flat-config)
 
 \`\`\`js filename=".eslintrc.cjs"
-${await fs.readFile(`${docsPath}/.eslintrc.cjs`)}
+${(await fs.readFile(`${docsPath}/.eslintrc.cjs`, 'utf8')).trim()}
 \`\`\``)}
       />
     );

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,12 @@ module.exports = {`
`12`	`12`	`{`
`13`	`13`	`files: ['*.js'],`
`14`	`14`	`extends: ['eslint:recommended'],`
	`15`	`+ env: {`
	`16`	`+ es2022: true,`
	`17`	`+ },`
	`18`	`+ parserOptions: {`
	`19`	`+ sourceType: 'module',`
	`20`	`+ },`
`15`	`21`	`},`
`16`	`22`	`{`
`17`	`23`	`files: ['*.graphql'],`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ module.exports = {`
`15`	`15`	`processor: '@graphql-eslint/graphql',`
`16`	`16`	`extends: ['eslint:recommended'],`
`17`	`17`	`env: {`
`18`		`- es6: true,`
	`18`	`+ es2022: true,`
`19`	`19`	`},`
`20`	`20`	`},`
`21`	`21`	`{`