1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416#!/usr/bin/env node
import { spawnSync } from 'node:child_process'
import fs from 'node:fs'
import path from 'node:path'
import {
ComponentAnalyzer,
extractCopyContent,
getComplexityLevel,
listAnalyzableFiles,
resolveDirectoryEntry,
} from './component-analyzer.js'
// ============================================================================
// Extended Analyzer for Refactoring
// ============================================================================
class RefactorAnalyzer extends ComponentAnalyzer {
analyze(code, filePath, absolutePath) {
// Get base analysis from parent class
const baseAnalysis = super.analyze(code, filePath, absolutePath)
// Add refactoring-specific metrics
// Note: These counts use regex matching which may include import statements.
// For most components this results in +1 over actual usage, which is acceptable
// for heuristic analysis. For precise AST-based counting, consider using
// @typescript-eslint/parser to traverse the AST.
const stateCount = (code.match(/useState\s*[(<]/g) || []).length
const effectCount = (code.match(/useEffect\s*\(/g) || []).length
const callbackCount = (code.match(/useCallback\s*\(/g) || []).length
const memoCount = (code.match(/useMemo\s*\(/g) || []).length
const conditionalBlocks = this.countConditionalBlocks(code)
const nestedTernaries = this.countNestedTernaries(code)
const hasContext = code.includes('useContext') || code.includes('createContext')
const hasReducer = code.includes('useReducer')
const hasModals = this.countModals(code)
return {
...baseAnalysis,
stateCount,
effectCount,
callbackCount,
memoCount,
conditionalBlocks,
nestedTernaries,
hasContext,
hasReducer,
hasModals,
}
}
countModals(code) {
const modalPatterns = [
/Modal/g,
/Dialog/g,
/Drawer/g,
/Confirm/g,
/showModal|setShowModal|isShown|isShowing/g,
]
let count = 0
modalPatterns.forEach((pattern) => {
const matches = code.match(pattern)
if (matches)
count += matches.length
})
return Math.floor(count / 3) // Rough estimate of actual modals
}
countConditionalBlocks(code) {
const ifBlocks = (code.match(/\bif\s*\(/g) || []).length
const ternaries = (code.match(/\?.*:/g) || []).length
const switchCases = (code.match(/\bswitch\s*\(/g) || []).length
return ifBlocks + ternaries + switchCases
}
countNestedTernaries(code) {
const nestedInTrueBranch = (code.match(/\?[^:?]*\?[^:]*:/g) || []).length
const nestedInFalseBranch = (code.match(/\?[^:?]*:[^?]*\?[^:]*:/g) || []).length
return nestedInTrueBranch + nestedInFalseBranch
}
}
// ============================================================================
// Refactor Prompt Builder
// ============================================================================
class RefactorPromptBuilder {
build(analysis) {
const refactorActions = this.identifyRefactorActions(analysis)
return `
╔════════════════════════════════════════════════════════════════════════════╗
║ 🔧 REFACTOR DIFY COMPONENT ║
╚════════════════════════════════════════════════════════════════════════════╝
📍 Component: ${analysis.name}
📂 Path: ${analysis.path}
📊 Complexity Analysis:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Total Complexity: ${analysis.complexity}/100 ${getComplexityLevel(analysis.complexity)}
Max Func Complexity: ${analysis.maxComplexity}/100 ${getComplexityLevel(analysis.maxComplexity)}
Lines: ${analysis.lineCount} ${analysis.lineCount > 300 ? '⚠️ TOO LARGE' : ''}
Usage: ${analysis.usageCount} reference${analysis.usageCount !== 1 ? 's' : ''}
📈 Code Metrics:
useState calls: ${analysis.stateCount}
useEffect calls: ${analysis.effectCount}
useCallback calls: ${analysis.callbackCount}
useMemo calls: ${analysis.memoCount}
Conditional blocks: ${analysis.conditionalBlocks}
Nested ternaries: ${analysis.nestedTernaries}
Modal components: ${analysis.hasModals}
🔍 Features Detected:
${analysis.hasState ? '✓' : '✗'} Local state (useState/useReducer)
${analysis.hasEffects ? '✓' : '✗'} Side effects (useEffect)
${analysis.hasCallbacks ? '✓' : '✗'} Callbacks (useCallback)
${analysis.hasMemo ? '✓' : '✗'} Memoization (useMemo)
${analysis.hasContext ? '✓' : '✗'} Context (useContext/createContext)
${analysis.hasEvents ? '✓' : '✗'} Event handlers
${analysis.hasRouter ? '✓' : '✗'} Next.js routing
${analysis.hasAPI ? '✓' : '✗'} API calls
${analysis.hasReactQuery ? '✓' : '✗'} React Query
${analysis.hasAhooks ? '✓' : '✗'} ahooks
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 RECOMMENDED REFACTORING ACTIONS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
${refactorActions.map((action, i) => `${i + 1}. ${action}`).join('\n')}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 PROMPT FOR AI ASSISTANT (COPY THIS TO YOUR AI ASSISTANT):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Please refactor the component at @${analysis.path}
Component metrics:
- Complexity: ${analysis.complexity}/100 (target: < 50)
- Lines: ${analysis.lineCount} (target: < 300)
- useState: ${analysis.stateCount}, useEffect: ${analysis.effectCount}
Refactoring tasks:
${refactorActions.map(action => `- ${action}`).join('\n')}
Requirements:
${this.buildRequirements(analysis)}
Follow Dify project conventions:
- Place extracted hooks in \`hooks/\` subdirectory or as \`use-<feature>.ts\`
- Use React Query (\`@tanstack/react-query\`) for data fetching
- Follow existing patterns in \`web/service/use-*.ts\` for API hooks
- Keep each new file under 300 lines
- Maintain TypeScript strict typing
After refactoring, verify:
- \`pnpm lint:fix\` passes
- \`pnpm type-check:tsgo\` passes
- Re-run \`pnpm refactor-component ${analysis.path}\` to confirm complexity < 50
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
`
}
identifyRefactorActions(analysis) {
const actions = []
// Priority 1: Extract hooks for complex state management
if (analysis.stateCount >= 3 || (analysis.stateCount >= 2 && analysis.effectCount >= 2)) {
actions.push(`🪝 EXTRACT CUSTOM HOOK: ${analysis.stateCount} useState + ${analysis.effectCount} useEffect detected. Extract related state and effects into a custom hook (e.g., \`use${analysis.name}State.ts\`)`)
}
// Priority 2: Extract API/data logic
if (analysis.hasAPI)
actions.push('🌐 EXTRACT DATA HOOK: Move API calls and data fetching logic into a dedicated hook using React Query')
// Priority 3: Split large components
if (analysis.lineCount > 300) {
actions.push(`📦 SPLIT COMPONENT: ${analysis.lineCount} lines exceeds limit. Extract UI sections into sub-components`)
}
// Priority 4: Extract modal management
if (analysis.hasModals >= 2) {
actions.push(`🔲 EXTRACT MODAL MANAGEMENT: ${analysis.hasModals} modal-related patterns detected. Create a useModalState hook or separate modal components`)
}
// Priority 5: Simplify conditionals
if (analysis.conditionalBlocks > 10 || analysis.nestedTernaries >= 2) {
actions.push('🔀 SIMPLIFY CONDITIONALS: Use lookup tables, early returns, or extract complex conditions into named functions')
}
// Priority 6: Extract callbacks
if (analysis.callbackCount >= 4) {
actions.push(`⚡ CONSOLIDATE CALLBACKS: ${analysis.callbackCount} useCallback calls. Consider extracting related callbacks into a custom hook`)
}
// Priority 7: Context provider extraction
if (analysis.hasContext && analysis.complexity > 50) {
actions.push('🎯 EXTRACT CONTEXT LOGIC: Move context provider logic into separate files or split into domain-specific contexts')
}
// Priority 8: Memoization review
if (analysis.memoCount >= 3 && analysis.complexity > 50) {
actions.push(`📝 REVIEW MEMOIZATION: ${analysis.memoCount} useMemo calls. Extract complex computations into utility functions or hooks`)
}
// If no specific issues, provide general guidance
if (actions.length === 0) {
if (analysis.complexity > 50) {
actions.push('🔍 ANALYZE FUNCTIONS: Review individual functions for complexity and extract helper functions')
}
else {
actions.push('✅ Component complexity is acceptable. Consider minor improvements for maintainability')
}
}
return actions
}
buildRequirements(analysis) {
const requirements = []
if (analysis.stateCount >= 3) {
requirements.push('- Group related useState calls into a single custom hook')
requirements.push('- Move associated useEffect calls with the state they depend on')
}
if (analysis.hasAPI) {
requirements.push('- Create data fetching hook following web/service/use-*.ts patterns')
requirements.push('- Use useQuery with proper queryKey and enabled options')
requirements.push('- Export invalidation hook (useInvalidXxx) for cache management')
}
if (analysis.lineCount > 300) {
requirements.push('- Extract logical UI sections into separate components')
requirements.push('- Keep parent component focused on orchestration')
requirements.push('- Pass minimal props to child components')
}
if (analysis.hasModals >= 2) {
requirements.push('- Create unified modal state management')
requirements.push('- Consider extracting modals to separate file')
}
if (analysis.conditionalBlocks > 10) {
requirements.push('- Replace switch statements with lookup tables')
requirements.push('- Use early returns to reduce nesting')
requirements.push('- Extract complex boolean logic to named functions')
}
if (requirements.length === 0) {
requirements.push('- Maintain existing code structure')
requirements.push('- Focus on readability improvements')
}
return requirements.join('\n')
}
}
// ============================================================================
// Main Function
// ============================================================================
function showHelp() {
console.log(`
🔧 Component Refactor Tool - Generate refactoring prompts for AI assistants
Usage:
node refactor-component.js <component-path> [options]
pnpm refactor-component <component-path> [options]
Options:
--help Show this help message
--json Output analysis result as JSON (for programmatic use)
Examples:
# Analyze and generate refactoring prompt
pnpm refactor-component app/components/app/configuration/index.tsx
# Output as JSON
pnpm refactor-component app/components/tools/mcp/modal.tsx --json
Complexity Thresholds:
🟢 0-25: Simple (no refactoring needed)
🟡 26-50: Medium (consider minor refactoring)
🟠 51-75: Complex (should refactor)
🔴 76-100: Very Complex (must refactor)
For complete refactoring guidelines, see:
.claude/skills/component-refactoring/SKILL.md
`)
}
function main() {
const rawArgs = process.argv.slice(2)
let isJsonMode = false
const args = []
rawArgs.forEach((arg) => {
if (arg === '--json') {
isJsonMode = true
return
}
if (arg === '--help' || arg === '-h') {
showHelp()
process.exit(0)
}
args.push(arg)
})
if (args.length === 0) {
showHelp()
process.exit(1)
}
let componentPath = args[0]
let absolutePath = path.resolve(process.cwd(), componentPath)
if (!fs.existsSync(absolutePath)) {
console.error(`❌ Error: Path not found: ${componentPath}`)
process.exit(1)
}
if (fs.statSync(absolutePath).isDirectory()) {
const resolvedFile = resolveDirectoryEntry(absolutePath, componentPath)
if (resolvedFile) {
absolutePath = resolvedFile.absolutePath
componentPath = resolvedFile.componentPath
}
else {
const availableFiles = listAnalyzableFiles(absolutePath)
console.error(`❌ Error: Directory does not contain a recognizable entry file: ${componentPath}`)
if (availableFiles.length > 0) {
console.error(`\n Available files to analyze:`)
availableFiles.forEach(f => console.error(` - ${path.join(componentPath, f)}`))
console.error(`\n Please specify the exact file path, e.g.:`)
console.error(` pnpm refactor-component ${path.join(componentPath, availableFiles[0])}`)
}
process.exit(1)
}
}
const sourceCode = fs.readFileSync(absolutePath, 'utf-8')
const analyzer = new RefactorAnalyzer()
const analysis = analyzer.analyze(sourceCode, componentPath, absolutePath)
// JSON output mode
if (isJsonMode) {
console.log(JSON.stringify(analysis, null, 2))
return
}
// Check if refactoring is needed
if (analysis.complexity <= 25 && analysis.lineCount <= 200) {
console.log(`
╔════════════════════════════════════════════════════════════════════════════╗
║ ✅ COMPONENT IS WELL-STRUCTURED ║
╚════════════════════════════════════════════════════════════════════════════╝
📍 Component: ${analysis.name}
📂 Path: ${analysis.path}
📊 Metrics:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Complexity: ${analysis.complexity}/100 🟢 Simple
Lines: ${analysis.lineCount} ✓ Within limits
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
This component has good structure. No immediate refactoring needed.
You can proceed with testing using: pnpm analyze-component ${componentPath}
`)
return
}
// Build refactoring prompt
const builder = new RefactorPromptBuilder()
const prompt = builder.build(analysis)
console.log(prompt)
// Copy to clipboard (macOS)
try {
const checkPbcopy = spawnSync('which', ['pbcopy'], { stdio: 'pipe' })
if (checkPbcopy.status !== 0)
return
const copyContent = extractCopyContent(prompt)
if (!copyContent)
return
const result = spawnSync('pbcopy', [], {
input: copyContent,
encoding: 'utf-8',
})
if (result.status === 0) {
console.log('\n📋 Refactoring prompt copied to clipboard!')
console.log(' Paste it in your AI assistant:')
console.log(' - Cursor: Cmd+L (Chat) or Cmd+I (Composer)')
console.log(' - GitHub Copilot Chat: Cmd+I')
console.log(' - Or any other AI coding tool\n')
}
}
catch {
// pbcopy failed, but don't break the script
}
}
// ============================================================================
// Run
// ============================================================================
main()