Merge pull request #35 from asonnleitner/main

feat(logging): enhance GraphQL document validation logging
dulnan · Jul 30, 2024 · 0a68492 · 0a68492
2 parents cd58ba6 + c25887b
commit 0a68492
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,9 +64,9 @@
     "@graphql-tools/utils": "^10.2.2",
     "@nuxt/devtools-kit": "1.3.7",
     "@nuxt/kit": "^3.12.2",
-    "cli-table": "^0.3.11",
     "inquirer": "^9.3.2",
-    "minisearch": "^6.3.0"
+    "minisearch": "^6.3.0",
+    "picocolors": "^1.0.1"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.36",

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -6,8 +6,6 @@ import type { Resolver } from '@nuxt/kit'
 import { inlineImportsWithLineToImports } from './fragment-import'
 import { validateGraphQlDocuments } from '@graphql-tools/utils'
 import { loadSchema } from '@graphql-tools/load'
-import Table from 'cli-table'
-import chalk from 'chalk'
 import type {
   GraphQLSchema,
   GraphQLError,
@@ -20,6 +18,7 @@ import { falsy } from '../runtime/helpers'
 import { generateSchema, generateTemplates } from './../codegen'
 import { type GraphqlMiddlewareDocument } from './../types'
 import { type ModuleOptions } from './../module'
+import { logDocuments } from './reporter'
 
 export const logger = useLogger('nuxt-graphql-middleware')
 
@@ -428,33 +427,10 @@ export async function generate(
     schemaPath,
     options,
   )
-
   const hasErrors =
     extracted.some((v) => !v.isValid) || validated.some((v) => !v.isValid)
   if (hasErrors || logEverything) {
-    const table = new Table({
-      head: ['Operation', 'Name', 'File', 'Errors'].map((v) => chalk.white(v)),
-    })
-
-    extracted.forEach((document) => {
-      if (logEverything || !document.isValid) {
-        table.push(
-          [
-            document.operation || '',
-            document.name || '',
-            document.relativePath || '',
-            document.errors?.join('\n\n') || '',
-          ].map((v) => {
-            if (document.isValid) {
-              return v
-            }
-            return chalk.red(v)
-          }),
-        )
-      }
-    })
-
-    logger.log('GraphQL code generation table:\n' + table.toString())
+    logDocuments(logger, extracted, logEverything)
   }
 
   process.stdout.write('\n')

diff --git a/src/helpers/reporter.ts b/src/helpers/reporter.ts
@@ -0,0 +1,55 @@
+import type { GraphqlMiddlewareDocument } from '../types'
+import colors from 'picocolors'
+import type { useLogger } from '@nuxt/kit'
+
+function getMaxLengths(documents: GraphqlMiddlewareDocument[]) {
+  let longestOperation = 0
+  let longestName = 0
+  let longestPath = 0
+
+  for (const { operation, name, relativePath } of documents) {
+    if (operation && operation.length > longestOperation) {
+      longestOperation = operation.length
+    }
+    if (name && name.length > longestName) {
+      longestName = name.length
+    }
+    if (relativePath && relativePath.length > longestPath) {
+      longestPath = relativePath.length
+    }
+  }
+  return { longestOperation, longestName, longestPath }
+}
+
+export function logDocuments(
+  logger: ReturnType<typeof useLogger>,
+  documents: GraphqlMiddlewareDocument[],
+  logEverything: boolean,
+) {
+  const { longestOperation, longestName, longestPath } =
+    getMaxLengths(documents)
+  logger.log(colors.green('GraphQL Document Validation'))
+
+  for (const { operation, name, relativePath, isValid, errors } of documents) {
+    if (logEverything || !isValid) {
+      let log = ''
+      log += (operation || '').padEnd(longestOperation + 2)
+      log += colors.cyan((name || '').padEnd(longestName + 2))
+      log += colors.dim((relativePath || '').padEnd(longestPath + 2))
+      log += isValid ? colors.green('✓') : colors.red('x')
+      if (!isValid && errors) {
+        log += '\n' + errors.map((error) => colors.red(error as any)).join('\n')
+      }
+      logger.log(log)
+    }
+  }
+
+  process.stdout.write('\n')
+  logger.restoreStd()
+
+  if (documents.some((v) => !v.isValid)) {
+    logger.error('GraphQL document validation failed with errors.')
+  } else {
+    logger.success('GraphQL document validation completed successfully.')
+  }
+}
diff --git a/test/helpers/__snapshots__/generate.test.ts.snap b/test/helpers/__snapshots__/generate.test.ts.snap
@@ -799,35 +799,19 @@ declare module 'nitropack' {
 `;
 
 exports[`generate > Renders a table with information about all documents with errors. 1`] = `
-"GraphQL code generation table:
-┌───────────┬──────┬────────────────┬───────────────────────────────────────────┐
-│ Operation │ Name │ File           │ Errors                                    │
-├───────────┼──────┼────────────────┼───────────────────────────────────────────┤
-│           │      │ nuxt.config.ts │ Syntax Error: Expected Name, found <EOF>. │
-│           │      │                │                                           │
-│           │      │                │ nuxt.config.ts:3:11                       │
-│           │      │                │ 2 |             id                        │
-│           │      │                │ 3 |                                       │
-│           │      │                │   |           ^                           │
-├───────────┼──────┼────────────────┼───────────────────────────────────────────┤
-│           │      │ nuxt.config.ts │ Syntax Error: Expected Name, found <EOF>. │
-│           │      │                │                                           │
-│           │      │                │ nuxt.config.ts:3:11                       │
-│           │      │                │ 2 |             id                        │
-│           │      │                │ 3 |                                       │
-│           │      │                │   |           ^                           │
-└───────────┴──────┴────────────────┴───────────────────────────────────────────┘"
+"GraphQL Document Validation    nuxt.config.ts  x
+Syntax Error: Expected Name, found <EOF>.
+
+nuxt.config.ts:3:11
+2 |             id
+3 |           
+  |           ^    nuxt.config.ts  x
+Syntax Error: Expected Name, found <EOF>.
+
+nuxt.config.ts:3:11
+2 |             id
+3 |           
+  |           ^"
 `;
 
-exports[`generate > Renders a table with information about all documents. 1`] = `
-"GraphQL code generation table:
-┌───────────┬────────────────┬────────────────┬────────┐
-│ Operation │ Name           │ File           │ Errors │
-├───────────┼────────────────┼────────────────┼────────┤
-│           │ nuxt.config.ts │ nuxt.config.ts │        │
-├───────────┼────────────────┼────────────────┼────────┤
-│ query     │ one            │ nuxt.config.ts │        │
-├───────────┼────────────────┼────────────────┼────────┤
-│ mutation  │ two            │ nuxt.config.ts │        │
-└───────────┴────────────────┴────────────────┴────────┘"
-`;
+exports[`generate > Renders a table with information about all documents. 1`] = `"GraphQL Document Validation          nuxt.config.ts  nuxt.config.ts  ✓query     one             nuxt.config.ts  ✓mutation  two             nuxt.config.ts  ✓"`;