mirror of
https://github.com/langgenius/dify.git
synced 2026-02-25 05:04:25 -05:00
feat(refactoring): introduce comprehensive guidelines and tools for component refactoring in Dify (#30162)
Co-authored-by: CodingOnStar <hanxujiang@dify.ai> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Coding On Star
420
web/scripts/refactor-component.js
Normal file
420
web/scripts/refactor-component.js
Normal file
@@ -0,0 +1,420 @@
|
||||
#!/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.hasSWR ? '✓' : '✗'} SWR (should migrate to 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, not SWR
|
||||
- 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 && (analysis.hasEffects || analysis.hasSWR)) {
|
||||
if (analysis.hasSWR) {
|
||||
actions.push('🔄 MIGRATE SWR TO REACT QUERY: Replace useSWR with useQuery from @tanstack/react-query')
|
||||
}
|
||||
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()
|
||||
Reference in New Issue
Block a user