Implementation:Langgenius Dify Refactor Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Build_Tools |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
CLI script that analyzes React component complexity and generates prioritized refactoring prompts for AI coding assistants.
Description
refactor-component.js extends the shared ComponentAnalyzer with additional refactoring-specific metrics and generates structured prompts that guide AI assistants through component refactoring. It contains two key classes:
- RefactorAnalyzer -- Extends ComponentAnalyzer to compute additional metrics: counts of useState, useEffect, useCallback, and useMemo calls; conditional block counts (if, ternary, switch); nested ternary counts; context usage detection; reducer detection; and an estimated modal component count.
- RefactorPromptBuilder -- Identifies and prioritizes up to eight categories of refactoring actions based on the analysis:
- Extract custom hooks when 3+ useState or 2+ useState with 2+ useEffect calls are detected
- Extract data hooks when API calls are present
- Split component when line count exceeds 300
- Extract modal management when 2+ modal patterns are found
- Simplify conditionals when conditional blocks exceed 10 or nested ternaries reach 2+
- Consolidate callbacks when 4+ useCallback calls exist
- Extract context logic when context is used with complexity above 50
- Review memoization when 3+ useMemo calls exist with complexity above 50
If the component is already well-structured (complexity <= 25 and lines <= 200), the script reports that no refactoring is needed and suggests proceeding to test generation. The generated prompt includes Dify project conventions for file organization, hook placement, and verification steps.
Usage
Use this script when a component fails the complexity check in analyze-component.js or when you want to systematically reduce a component's cognitive complexity before writing tests.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/scripts/refactor-component.js
- Lines: 1-415
Signature
class RefactorAnalyzer extends ComponentAnalyzer {
analyze(code, filePath, absolutePath)
countModals(code)
countConditionalBlocks(code)
countNestedTernaries(code)
}
class RefactorPromptBuilder {
build(analysis)
identifyRefactorActions(analysis)
buildRequirements(analysis)
}
function main()
function showHelp()
Import
// CLI script - run directly
node web/scripts/refactor-component.js <component-path> [options]
// Or via pnpm
pnpm refactor-component <component-path> [options]
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| component-path | string (positional arg) | Yes | Relative path to the React component file or directory to analyze for refactoring |
| --json | flag | No | Output the raw analysis object as JSON including refactoring-specific metrics |
| --help / -h | flag | No | Display usage instructions and exit |
Outputs
| Name | Type | Description |
|---|---|---|
| stdout (prompt) | string | Formatted ASCII refactoring prompt with metrics, detected features, prioritized actions, and Dify-specific conventions |
| stdout (JSON) | JSON | Raw analysis object when --json is specified, including stateCount, effectCount, callbackCount, memoCount, conditionalBlocks, nestedTernaries, hasContext, hasReducer, and hasModals |
| stdout (well-structured) | string | Confirmation message when the component has acceptable complexity and line count |
| clipboard | string | The copyable prompt section is automatically placed on the macOS clipboard via pbcopy |
| exit code 0 | number | Success |
| exit code 1 | number | Missing arguments or file not found |
Usage Examples
Generate a refactoring prompt
pnpm refactor-component app/components/app/configuration/index.tsx
Output refactoring analysis as JSON
pnpm refactor-component app/components/tools/mcp/modal.tsx --json
Analyze a directory (auto-resolves entry file)
pnpm refactor-component app/components/workflow/nodes/http