feat(reporters): add console and json reporters for analyze command

Add reporter system to analyze command with console and json output options
Improve feature type detection with import map support

Author: AndreyYolkin

packages/cli/src/commands/analyze.ts

@@ -1,5 +1,5 @@
 import { log } from '@clack/prompts'
-import { analyzeProject } from '@vuetify/cli-shared'
+import { analyzeProject, ConsoleReporter, JsonReporter, type Reporter } from '@vuetify/cli-shared'
 import { defineCommand } from 'citty'
 import { resolve } from 'pathe'
 
@@ -14,19 +14,44 @@ export const analyze = defineCommand({
       description: 'Directory to scan',
       default: '.',
     },
+    output: {
+      type: 'string',
+      alias: 'o',
+      description: 'Output file path (only for json reporter)',
+    },
+    reporter: {
+      type: 'string',
+      alias: 'r',
+      description: 'Reporter to use (console, json)',
+      default: 'console',
+      valueHint: 'console | json',
+    },
     suppressWarnings: {
       type: 'boolean',
       description: 'Suppress warnings',
       default: false,
     },
   },
   run: async ({ args }) => {
-    if (!args.suppressWarnings) {
+    if (!args.suppressWarnings && args.reporter !== 'json') {
       log.warn('This command is experimental and may change in the future.')
     }
     const cwd = resolve(process.cwd(), args.dir)
     const features = await analyzeProject(cwd)
-    console.log(JSON.stringify(features, null, 2))
+
+    let reporter: Reporter
+    switch (args.reporter) {
+      case 'json': {
+        reporter = JsonReporter
+        break
+      }
+      default: {
+        reporter = ConsoleReporter
+        break
+      }
+    }
+
+    await reporter.report({ features }, { output: args.output })
   },
 })
 

packages/cli/src/index.ts

@@ -44,5 +44,10 @@ await tab(main).then(completion => {
   }
 })
 
-await checkForUpdate(version)
+const hasReporter = process.argv.includes('--reporter') || process.argv.includes('-r')
+
+if (!hasReporter) {
+  await checkForUpdate(version)
+}
+
 runMain(main)

packages/shared/src/functions/analyze.ts

@@ -1,11 +1,51 @@
+import type { AnalyzedFeature, FeatureType } from '../reporters/types'
 import { existsSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
+import { dirname, join } from 'pathe'
+import { resolvePackageJSON } from 'pkg-types'
 import { glob } from 'tinyglobby'
 import { parse } from 'vue-eslint-parser'
 
 const require = createRequire(import.meta.url)
 
+async function loadImportMap (cwd: string, targetPackage: string) {
+  try {
+    const pkgPath = await resolvePackageJSON(targetPackage, { url: cwd })
+    const pkgRoot = dirname(pkgPath)
+    const mapPath = join(pkgRoot, 'dist/json/importMap.json')
+    if (existsSync(mapPath)) {
+      const content = await readFile(mapPath, 'utf8')
+      return JSON.parse(content)
+    }
+  } catch (error) {
+    console.warn('Failed to load importMap.json', error)
+  }
+  return null
+}
+
+function getFeatureType (name: string, isType = false, importMap?: any): FeatureType {
+  if (isType) {
+    return 'type'
+  }
+  if (importMap?.components?.[name]) {
+    return 'component'
+  }
+  if (name.startsWith('use') && name.length > 3 && name.at(3)?.match(/[A-Z]/)) {
+    return 'composable'
+  }
+  if (/^create.*Plugin$/.test(name)) {
+    return 'plugin'
+  }
+  if (/^[A-Z][A-Z0-9_]*$/.test(name)) {
+    return 'constant'
+  }
+  if (/^[A-Z]/.test(name)) {
+    return 'component'
+  }
+  return 'util'
+}
+
 function walk (node: any, callback: (node: any, parent: any) => void, parent?: any) {
   if (!node || typeof node !== 'object') {
     return
@@ -35,20 +75,38 @@ export function analyzeCode (code: string, targetPackage = '@vuetify/v0') {
     parser: require.resolve('@typescript-eslint/parser'),
   })
 
-  const found = new Set<string>()
-  const importedFromVuetify = new Set<string>()
+  const found = new Map<string, { isType: boolean }>()
 
   if (ast.body) {
+    // eslint-disable-next-line complexity
     walk(ast, (node, parent) => {
       // Static imports: import { X } from 'pkg'
       if (node.type === 'ImportDeclaration' && typeof node.source.value === 'string' && (node.source.value === targetPackage || node.source.value.startsWith(`${targetPackage}/`))) {
+        const isDeclType = node.importKind === 'type'
         for (const spec of node.specifiers) {
+          const isSpecType = spec.importKind === 'type'
+          const isType = isDeclType || isSpecType
+
           if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
-            found.add(spec.imported.name)
-            importedFromVuetify.add(spec.local.name)
+            const name = spec.imported.name
+            const current = found.get(name)
+            if (current) {
+              if (!isType) {
+                current.isType = false
+              }
+            } else {
+              found.set(name, { isType })
+            }
           } else if (spec.type === 'ImportDefaultSpecifier') {
-            found.add('default')
-            importedFromVuetify.add(spec.local.name)
+            const name = 'default'
+            const current = found.get(name)
+            if (current) {
+              if (!isType) {
+                current.isType = false
+              }
+            } else {
+              found.set(name, { isType })
+            }
           }
         }
       }
@@ -59,10 +117,25 @@ export function analyzeCode (code: string, targetPackage = '@vuetify/v0') {
         && parent?.type === 'MemberExpression' && parent.object === node) {
         if (parent.property.type === 'Identifier' && !parent.computed) {
           // .Prop
-          found.add(parent.property.name)
+          if (parent.property.name === 'then') {
+            return
+          }
+          const name = parent.property.name
+          const current = found.get(name)
+          if (current) {
+            current.isType = false
+          } else {
+            found.set(name, { isType: false })
+          }
         } else if (parent.property.type === 'Literal') {
           // ['Prop']
-          found.add(parent.property.value)
+          const name = parent.property.value
+          const current = found.get(name)
+          if (current) {
+            current.isType = false
+          } else {
+            found.set(name, { isType: false })
+          }
         }
       }
       // Case 2: (await import('pkg')).Prop
@@ -81,42 +154,67 @@ export function analyzeCode (code: string, targetPackage = '@vuetify/v0') {
         const source = node.object.argument.source.value
         if (source === targetPackage) {
           if (node.property.type === 'Identifier' && !node.computed) {
-            found.add(node.property.name)
+            const name = node.property.name
+            const current = found.get(name)
+            if (current) {
+              current.isType = false
+            } else {
+              found.set(name, { isType: false })
+            }
           } else if (node.property.type === 'Literal') {
-            found.add(node.property.value)
+            const name = node.property.value
+            const current = found.get(name)
+            if (current) {
+              current.isType = false
+            } else {
+              found.set(name, { isType: false })
+            }
           }
         }
       }
     })
   }
 
-  return Array.from(found)
+  return found
 }
 
-export async function analyzeProject (cwd: string = process.cwd(), targetPackage = '@vuetify/v0') {
+export async function analyzeProject (cwd: string = process.cwd(), targetPackage = '@vuetify/v0'): Promise<AnalyzedFeature[]> {
   if (!existsSync(cwd)) {
     throw new Error(`Directory ${cwd} does not exist`)
   }
 
-  const files = await glob(['**/*.{vue,ts,js,tsx,jsx}'], {
-    cwd,
-    ignore: ['**/node_modules/**', '**/dist/**', '**/.git/**'],
-    absolute: true,
-  })
+  const [files, importMap] = await Promise.all([
+    glob(['**/*.{vue,ts,js,tsx,jsx}'], {
+      cwd,
+      ignore: ['**/node_modules/**', '**/dist/**', '**/.git/**'],
+      absolute: true,
+    }),
+    loadImportMap(cwd, targetPackage),
+  ])
 
-  const features = new Set<string>()
+  const features = new Map<string, { isType: boolean }>()
 
   for (const file of files) {
     try {
       const code = await readFile(file, 'utf8')
       const fileFeatures = analyzeCode(code, targetPackage)
-      for (const feature of fileFeatures) {
-        features.add(feature)
+      for (const [name, info] of fileFeatures) {
+        const current = features.get(name)
+        if (current) {
+          if (!info.isType) {
+            current.isType = false
+          }
+        } else {
+          features.set(name, { isType: info.isType })
+        }
       }
     } catch {
       // console.warn(`Failed to analyze ${file}:`, error)
     }
   }
 
-  return Array.from(features).toSorted()
+  return Array.from(features.keys()).toSorted().map(name => ({
+    name,
+    type: getFeatureType(name, features.get(name)?.isType, importMap),
+  }))
 }

packages/shared/src/index.ts

@@ -2,5 +2,6 @@ export { projectArgs, type ProjectArgs } from './args'
 export * from './commands'
 export { registerProjectArgsCompletion } from './completion'
 export * from './functions'
+export * from './reporters'
 export * from './utils/banner'
 export { templateBuilder } from './utils/template'

packages/shared/src/reporters/console.ts

@@ -0,0 +1,42 @@
+import type { AnalyzeReport, Reporter } from './types'
+import { ansi256, bold, green, yellow } from 'kolorist'
+
+const blue = ansi256(33)
+
+export const ConsoleReporter: Reporter = {
+  report: (data: AnalyzeReport) => {
+    console.log()
+    console.log(bold('Vuetify Analysis Report'))
+    console.log(blue('======================='))
+    console.log()
+
+    if (data.features.length === 0) {
+      console.log(yellow('No Vuetify features detected.'))
+      return
+    }
+
+    console.log(`Detected ${green(data.features.length)} features:`)
+    console.log()
+
+    const grouped = data.features.reduce((acc, feature) => {
+      if (!acc[feature.type]) {
+        acc[feature.type] = []
+      }
+      acc[feature.type].push(feature)
+      return acc
+    }, {} as Record<string, typeof data.features>)
+
+    const categories = ['component', 'composable', 'constant', 'plugin', 'util', 'type'] as const
+
+    for (const category of categories) {
+      const features = grouped[category]
+      if (features && features.length > 0) {
+        console.log(bold(category.charAt(0).toUpperCase() + category.slice(1) + 's'))
+        for (const feature of features) {
+          console.log(`  ${blue('•')} ${feature.name}`)
+        }
+        console.log()
+      }
+    }
+  },
+}

packages/shared/src/reporters/index.ts

@@ -0,0 +1,3 @@
+export * from './console'
+export * from './json'
+export * from './types'

packages/shared/src/reporters/json.ts

@@ -0,0 +1,17 @@
+import type { AnalyzeReport, Reporter, ReporterOptions } from './types'
+import { writeFile } from 'node:fs/promises'
+import { resolve } from 'pathe'
+
+export const JsonReporter: Reporter = {
+  report: async (data: AnalyzeReport, options?: ReporterOptions) => {
+    const output = JSON.stringify(data.features, null, 2)
+
+    if (options?.output) {
+      const path = resolve(process.cwd(), options.output)
+      await writeFile(path, output, 'utf8')
+      console.log(`Report written to ${path}`)
+    } else {
+      console.log(output)
+    }
+  },
+}

packages/shared/src/reporters/types.ts

@@ -0,0 +1,18 @@
+export type FeatureType = 'component' | 'composable' | 'constant' | 'plugin' | 'util' | 'type'
+
+export interface AnalyzedFeature {
+  name: string
+  type: FeatureType
+}
+
+export interface AnalyzeReport {
+  features: AnalyzedFeature[]
+}
+
+export interface ReporterOptions {
+  output?: string
+}
+
+export interface Reporter {
+  report: (data: AnalyzeReport, options?: ReporterOptions) => Promise<void> | void
+}