diff --git a/package-lock.json b/package-lock.json index 0ccf037..8cd1cf4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "nuxt-graphql-middleware", - "version": "4.0.0", + "version": "4.1.0", "license": "MIT", "dependencies": { "@graphql-codegen/cli": "^5.0.2", @@ -17,9 +17,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", @@ -10396,17 +10396,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cli-table": { - "version": "0.3.11", - "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.11.tgz", - "integrity": "sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==", - "dependencies": { - "colors": "1.0.3" - }, - "engines": { - "node": ">= 0.2.0" - } - }, "node_modules/cli-table3": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz", @@ -10632,14 +10621,6 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==" }, - "node_modules/colors": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz", - "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==", - "engines": { - "node": ">=0.1.90" - } - }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", diff --git a/package.json b/package.json index 2649664..29d7878 100644 --- 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 index a842618..4286341 100644 --- 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 new file mode 100644 index 0000000..e6f6538 --- /dev/null +++ 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, + 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 index bf30c27..e84abf6 100644 --- 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 . │ -│ │ │ │ │ -│ │ │ │ nuxt.config.ts:3:11 │ -│ │ │ │ 2 | id │ -│ │ │ │ 3 | │ -│ │ │ │ | ^ │ -├───────────┼──────┼────────────────┼───────────────────────────────────────────┤ -│ │ │ nuxt.config.ts │ Syntax Error: Expected Name, found . │ -│ │ │ │ │ -│ │ │ │ nuxt.config.ts:3:11 │ -│ │ │ │ 2 | id │ -│ │ │ │ 3 | │ -│ │ │ │ | ^ │ -└───────────┴──────┴────────────────┴───────────────────────────────────────────┘" +"GraphQL Document Validation nuxt.config.ts x +Syntax Error: Expected Name, found . + +nuxt.config.ts:3:11 +2 | id +3 | + | ^ nuxt.config.ts x +Syntax Error: Expected Name, found . + +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 ✓"`;