npm - react-code-smell-detector - Versions diffs - 1.2.0 → 1.3.1 - Mend

react-code-smell-detector 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/LICENSE +21 -0
package/README.md +46 -0
package/dist/analyzer.d.ts.map +1 -1
package/dist/analyzer.js +18 -1
package/dist/cli.js +93 -26
package/dist/detectors/complexity.d.ts +17 -0
package/dist/detectors/complexity.d.ts.map +1 -0
package/dist/detectors/complexity.js +69 -0
package/dist/detectors/imports.d.ts +22 -0
package/dist/detectors/imports.d.ts.map +1 -0
package/dist/detectors/imports.js +210 -0
package/dist/detectors/index.d.ts +3 -0
package/dist/detectors/index.d.ts.map +1 -1
package/dist/detectors/index.js +4 -0
package/dist/detectors/memoryLeak.d.ts +7 -0
package/dist/detectors/memoryLeak.d.ts.map +1 -0
package/dist/detectors/memoryLeak.js +111 -0
package/dist/fixer.d.ts +23 -0
package/dist/fixer.d.ts.map +1 -0
package/dist/fixer.js +133 -0
package/dist/git.d.ts +28 -0
package/dist/git.d.ts.map +1 -0
package/dist/git.js +117 -0
package/dist/reporter.js +13 -0
package/dist/types/index.d.ts +7 -1
package/dist/types/index.d.ts.map +1 -1
package/dist/types/index.js +9 -0
package/dist/watcher.d.ts +16 -0
package/dist/watcher.d.ts.map +1 -0
package/dist/watcher.js +89 -0
package/package.json +8 -2
package/src/analyzer.ts +0 -324
package/src/cli.ts +0 -159
package/src/detectors/accessibility.ts +0 -212
package/src/detectors/deadCode.ts +0 -163
package/src/detectors/debug.ts +0 -103
package/src/detectors/dependencyArray.ts +0 -176
package/src/detectors/hooksRules.ts +0 -101
package/src/detectors/index.ts +0 -20
package/src/detectors/javascript.ts +0 -169
package/src/detectors/largeComponent.ts +0 -63
package/src/detectors/magicValues.ts +0 -114
package/src/detectors/memoization.ts +0 -177
package/src/detectors/missingKey.ts +0 -105
package/src/detectors/nestedTernary.ts +0 -75
package/src/detectors/nextjs.ts +0 -124
package/src/detectors/nodejs.ts +0 -199
package/src/detectors/propDrilling.ts +0 -103
package/src/detectors/reactNative.ts +0 -154
package/src/detectors/security.ts +0 -179
package/src/detectors/typescript.ts +0 -151
package/src/detectors/useEffect.ts +0 -117
package/src/htmlReporter.ts +0 -464
package/src/index.ts +0 -4
package/src/parser/index.ts +0 -195
package/src/reporter.ts +0 -291
package/src/types/index.ts +0 -165
package/tsconfig.json +0 -19

package/src/htmlReporter.ts DELETED Viewed

@@ -1,464 +0,0 @@
-import { AnalysisResult, SmellSeverity } from './types/index.js';
-import path from 'path';
-/**
- * Generate a beautiful HTML report with charts and styling
- */
-export function generateHTMLReport(result: AnalysisResult, rootDir: string): string {
-  const { summary, debtScore, files } = result;
-  // Generate chart data
-  const smellTypeData = Object.entries(summary.smellsByType)
-    .filter(([_, count]) => count > 0)
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, 10);
-  const severityColors = {
-    error: '#ef4444',
-    warning: '#f59e0b',
-    info: '#3b82f6',
-  };
-  const gradeColors: Record<string, string> = {
-    A: '#22c55e',
-    B: '#84cc16',
-    C: '#eab308',
-    D: '#f97316',
-    F: '#ef4444',
-  };
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code Smell Detector Report</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-      min-height: 100vh;
-      color: #e2e8f0;
-      line-height: 1.6;
-    }
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-    header {
-      text-align: center;
-      padding: 3rem 0;
-      border-bottom: 1px solid rgba(255,255,255,0.1);
-      margin-bottom: 2rem;
-    }
-    h1 {
-      font-size: 2.5rem;
-      margin-bottom: 0.5rem;
-      background: linear-gradient(90deg, #60a5fa, #a78bfa);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .subtitle {
-      color: #94a3b8;
-      font-size: 1.1rem;
-    }
-    .dashboard {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 2rem;
-    }
-    .card {
-      background: rgba(255,255,255,0.05);
-      border-radius: 1rem;
-      padding: 1.5rem;
-      border: 1px solid rgba(255,255,255,0.1);
-      backdrop-filter: blur(10px);
-    }
-    .card h2 {
-      font-size: 1rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      color: #94a3b8;
-      margin-bottom: 1rem;
-    }
-    .grade-container {
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-    }
-    .grade {
-      font-size: 5rem;
-      font-weight: 800;
-      color: ${gradeColors[debtScore.grade]};
-      text-shadow: 0 0 30px ${gradeColors[debtScore.grade]}40;
-    }
-    .score-details {
-      flex: 1;
-    }
-    .score-bar {
-      height: 8px;
-      background: rgba(255,255,255,0.1);
-      border-radius: 4px;
-      overflow: hidden;
-      margin: 0.5rem 0;
-    }
-    .score-bar-fill {
-      height: 100%;
-      border-radius: 4px;
-      transition: width 1s ease;
-    }
-    .score-label {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.9rem;
-      color: #94a3b8;
-    }
-    .stat-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1rem;
-      text-align: center;
-    }
-    .stat-value {
-      font-size: 2rem;
-      font-weight: 700;
-      color: #60a5fa;
-    }
-    .stat-label {
-      font-size: 0.8rem;
-      color: #94a3b8;
-      text-transform: uppercase;
-    }
-    .severity-badges {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-    .severity-badge {
-      padding: 0.5rem 1rem;
-      border-radius: 2rem;
-      font-size: 0.9rem;
-      font-weight: 600;
-    }
-    .severity-error { background: rgba(239,68,68,0.2); color: #ef4444; }
-    .severity-warning { background: rgba(245,158,11,0.2); color: #f59e0b; }
-    .severity-info { background: rgba(59,130,246,0.2); color: #3b82f6; }
-    .issues-by-type {
-      margin-top: 1rem;
-    }
-    .type-bar {
-      display: flex;
-      align-items: center;
-      margin: 0.75rem 0;
-    }
-    .type-name {
-      flex: 1;
-      font-size: 0.9rem;
-    }
-    .type-bar-bg {
-      width: 150px;
-      height: 20px;
-      background: rgba(255,255,255,0.1);
-      border-radius: 4px;
-      overflow: hidden;
-      margin: 0 1rem;
-    }
-    .type-bar-fill {
-      height: 100%;
-      background: linear-gradient(90deg, #60a5fa, #a78bfa);
-      border-radius: 4px;
-    }
-    .type-count {
-      width: 40px;
-      text-align: right;
-      font-weight: 600;
-    }
-    .findings-section {
-      margin-top: 2rem;
-    }
-    .findings-section h2 {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-      padding-bottom: 0.5rem;
-      border-bottom: 1px solid rgba(255,255,255,0.1);
-    }
-    .file-group {
-      margin-bottom: 1.5rem;
-    }
-    .file-header {
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.9rem;
-      color: #60a5fa;
-      padding: 0.75rem 1rem;
-      background: rgba(96,165,250,0.1);
-      border-radius: 0.5rem 0.5rem 0 0;
-      border: 1px solid rgba(96,165,250,0.2);
-      border-bottom: none;
-    }
-    .issue {
-      padding: 1rem;
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-top: none;
-    }
-    .issue:last-child {
-      border-radius: 0 0 0.5rem 0.5rem;
-    }
-    .issue-header {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.75rem;
-    }
-    .issue-icon {
-      font-size: 1rem;
-      padding: 0.25rem;
-    }
-    .issue-message {
-      flex: 1;
-      font-weight: 500;
-    }
-    .issue-line {
-      font-family: monospace;
-      font-size: 0.8rem;
-      color: #94a3b8;
-    }
-    .issue-suggestion {
-      margin-top: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      background: rgba(167,139,250,0.1);
-      border-left: 3px solid #a78bfa;
-      font-size: 0.9rem;
-      color: #c4b5fd;
-    }
-    .code-snippet {
-      margin-top: 0.5rem;
-      padding: 0.75rem;
-      background: #0d1117;
-      border-radius: 0.5rem;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 0.8rem;
-      overflow-x: auto;
-      white-space: pre;
-      color: #c9d1d9;
-    }
-    .refactor-time {
-      font-size: 1.1rem;
-      color: #f59e0b;
-      margin-top: 0.5rem;
-    }
-    footer {
-      text-align: center;
-      padding: 2rem;
-      color: #64748b;
-      font-size: 0.9rem;
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .card, .file-group {
-      animation: fadeIn 0.5s ease forwards;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <header>
-      <h1>🔍 Code Smell Detector</h1>
-      <p class="subtitle">Analysis Report - ${new Date().toLocaleDateString()}</p>
-    </header>
-    <div class="dashboard">
-      <div class="card">
-        <h2>Technical Debt Score</h2>
-        <div class="grade-container">
-          <div class="grade">${debtScore.grade}</div>
-          <div class="score-details">
-            <div class="score-label"><span>Overall Score</span><span>${debtScore.score}/100</span></div>
-            <div class="score-bar">
-              <div class="score-bar-fill" style="width: ${debtScore.score}%; background: ${gradeColors[debtScore.grade]}"></div>
-            </div>
-            ${generateBreakdownBars(debtScore.breakdown)}
-            <p class="refactor-time">⏱️ Est. refactor time: ${debtScore.estimatedRefactorTime}</p>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <h2>Summary</h2>
-        <div class="stat-grid">
-          <div>
-            <div class="stat-value">${summary.totalFiles}</div>
-            <div class="stat-label">Files</div>
-          </div>
-          <div>
-            <div class="stat-value">${summary.totalComponents}</div>
-            <div class="stat-label">Components</div>
-          </div>
-          <div>
-            <div class="stat-value">${summary.totalSmells}</div>
-            <div class="stat-label">Issues</div>
-          </div>
-        </div>
-        <div class="severity-badges">
-          <span class="severity-badge severity-error">${summary.smellsBySeverity.error} Errors</span>
-          <span class="severity-badge severity-warning">${summary.smellsBySeverity.warning} Warnings</span>
-          <span class="severity-badge severity-info">${summary.smellsBySeverity.info} Info</span>
-        </div>
-      </div>
-      <div class="card">
-        <h2>Issues by Type</h2>
-        <div class="issues-by-type">
-          ${smellTypeData.map(([type, count]) => {
-            const maxCount = Math.max(...smellTypeData.map(([_, c]) => c));
-            const percentage = (count / maxCount) * 100;
-            return `
-              <div class="type-bar">
-                <span class="type-name">${formatTypeLabel(type)}</span>
-                <div class="type-bar-bg">
-                  <div class="type-bar-fill" style="width: ${percentage}%"></div>
-                </div>
-                <span class="type-count">${count}</span>
-              </div>
-            `;
-          }).join('')}
-        </div>
-      </div>
-    </div>
-    <section class="findings-section">
-      <h2>📋 Detailed Findings</h2>
-      ${files.filter(f => f.smells.length > 0).map(file => `
-        <div class="file-group">
-          <div class="file-header">${path.relative(rootDir, file.file)}</div>
-          ${file.smells.map(smell => `
-            <div class="issue">
-              <div class="issue-header">
-                <span class="issue-icon">${getSeverityIcon(smell.severity)}</span>
-                <span class="issue-message" style="color: ${severityColors[smell.severity]}">${escapeHtml(smell.message)}</span>
-                <span class="issue-line">Line ${smell.line}</span>
-              </div>
-              <div class="issue-suggestion">💡 ${escapeHtml(smell.suggestion)}</div>
-              ${smell.codeSnippet ? `<div class="code-snippet">${escapeHtml(smell.codeSnippet)}</div>` : ''}
-            </div>
-          `).join('')}
-        </div>
-      `).join('')}
-    </section>
-    <footer>
-      Generated by React Code Smell Detector • ${new Date().toISOString()}
-    </footer>
-  </div>
-</body>
-</html>`;
-}
-function generateBreakdownBars(breakdown: { useEffectScore: number; propDrillingScore: number; componentSizeScore: number; memoizationScore: number }): string {
-  const items = [
-    { label: 'useEffect', score: breakdown.useEffectScore },
-    { label: 'Prop Drilling', score: breakdown.propDrillingScore },
-    { label: 'Component Size', score: breakdown.componentSizeScore },
-    { label: 'Memoization', score: breakdown.memoizationScore },
-  ];
-  return items.map(({ label, score }) => {
-    const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
-    return `
-      <div class="score-label" style="margin-top: 0.5rem"><span>${label}</span><span>${score}</span></div>
-      <div class="score-bar">
-        <div class="score-bar-fill" style="width: ${score}%; background: ${color}"></div>
-      </div>
-    `;
-  }).join('');
-}
-function formatTypeLabel(type: string): string {
-  const labels: Record<string, string> = {
-    'useEffect-overuse': '⚡ useEffect',
-    'prop-drilling': '🔗 Prop Drilling',
-    'large-component': '📐 Large Component',
-    'unmemoized-calculation': '💾 Unmemoized',
-    'inline-function-prop': '📎 Inline Func',
-    'deep-nesting': '📊 Deep Nesting',
-    'missing-key': '🔑 Missing Key',
-    'magic-value': '🔢 Magic Value',
-    'debug-statement': '🐛 Debug',
-    'todo-comment': '📝 TODO',
-    'security-xss': '🔒 Security XSS',
-    'security-eval': '🔒 Security Eval',
-    'security-secrets': '🔑 Secrets',
-    'a11y-missing-alt': '♿ Missing Alt',
-    'a11y-missing-label': '♿ Missing Label',
-    'ts-any-usage': '🔷 TS any',
-    'ts-missing-return-type': '🔷 TS Return Type',
-  };
-  return labels[type] || type.replace(/-/g, ' ');
-}
-function getSeverityIcon(severity: SmellSeverity): string {
-  switch (severity) {
-    case 'error': return '❌';
-    case 'warning': return '⚠️';
-    case 'info': return 'ℹ️';
-  }
-}
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}

package/src/index.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export { analyzeProject, type AnalyzerOptions } from './analyzer.js';
-export { reportResults, type ReporterOptions } from './reporter.js';
-export * from './types/index.js';
-export { parseFile, parseCode, type ParseResult, type ParsedComponent } from './parser/index.js';

package/src/parser/index.ts DELETED Viewed

@@ -1,195 +0,0 @@
-import * as parser from '@babel/parser';
-import _traverse, { NodePath } from '@babel/traverse';
-import * as t from '@babel/types';
-import fs from 'fs/promises';
-// Handle ESM/CJS interop
-const traverse = (_traverse as unknown as { default: typeof _traverse }).default || _traverse;
-export interface ParsedComponent {
-  name: string;
-  startLine: number;
-  endLine: number;
-  node: t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression;
-  path: NodePath;
-  hooks: {
-    useEffect: t.CallExpression[];
-    useState: t.CallExpression[];
-    useMemo: t.CallExpression[];
-    useCallback: t.CallExpression[];
-    useRef: t.CallExpression[];
-    custom: t.CallExpression[];
-  };
-  props: string[];
-  jsxDepth: number;
-}
-export interface ParseResult {
-  ast: t.File;
-  components: ParsedComponent[];
-  imports: string[];
-  sourceCode: string;
-}
-export async function parseFile(filePath: string): Promise<ParseResult> {
-  const sourceCode = await fs.readFile(filePath, 'utf-8');
-  return parseCode(sourceCode, filePath);
-}
-export function parseCode(sourceCode: string, filePath: string = 'unknown'): ParseResult {
-  const ast = parser.parse(sourceCode, {
-    sourceType: 'module',
-    plugins: [
-      'jsx',
-      'typescript',
-      'decorators-legacy',
-      'classProperties',
-      'optionalChaining',
-      'nullishCoalescingOperator',
-    ],
-    sourceFilename: filePath,
-  });
-  const components: ParsedComponent[] = [];
-  const imports: string[] = [];
-  traverse(ast, {
-    ImportDeclaration(path) {
-      imports.push(path.node.source.value);
-    },
-    FunctionDeclaration(path) {
-      if (isReactComponent(path.node.id?.name, path)) {
-        components.push(extractComponentInfo(path.node.id?.name || 'Anonymous', path));
-      }
-    },
-    VariableDeclarator(path) {
-      const init = path.node.init;
-      const id = path.node.id;
-      if (
-        t.isIdentifier(id) &&
-        (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init))
-      ) {
-        if (isReactComponent(id.name, path)) {
-          components.push(extractComponentInfo(id.name, path, init));
-        }
-      }
-    },
-  });
-  return { ast, components, imports, sourceCode };
-}
-function isReactComponent(name: string | undefined, path: NodePath): boolean {
-  if (!name) return false;
-  // Component names start with uppercase
-  if (!/^[A-Z]/.test(name)) return false;
-  // Check if it returns JSX
-  let hasJSX = false;
-  path.traverse({
-    JSXElement() {
-      hasJSX = true;
-    },
-    JSXFragment() {
-      hasJSX = true;
-    },
-  });
-  return hasJSX;
-}
-function extractComponentInfo(
-  name: string,
-  path: NodePath,
-  node?: t.ArrowFunctionExpression | t.FunctionExpression
-): ParsedComponent {
-  const actualNode = node || (path.node as t.FunctionDeclaration);
-  const loc = actualNode.loc;
-  const hooks = {
-    useEffect: [] as t.CallExpression[],
-    useState: [] as t.CallExpression[],
-    useMemo: [] as t.CallExpression[],
-    useCallback: [] as t.CallExpression[],
-    useRef: [] as t.CallExpression[],
-    custom: [] as t.CallExpression[],
-  };
-  const props: string[] = [];
-  let jsxDepth = 0;
-  // Extract hooks
-  path.traverse({
-    CallExpression(callPath) {
-      const callee = callPath.node.callee;
-      if (t.isIdentifier(callee)) {
-        const hookName = callee.name;
-        if (hookName === 'useEffect') hooks.useEffect.push(callPath.node);
-        else if (hookName === 'useState') hooks.useState.push(callPath.node);
-        else if (hookName === 'useMemo') hooks.useMemo.push(callPath.node);
-        else if (hookName === 'useCallback') hooks.useCallback.push(callPath.node);
-        else if (hookName === 'useRef') hooks.useRef.push(callPath.node);
-        else if (hookName.startsWith('use')) hooks.custom.push(callPath.node);
-      }
-    },
-  });
-  // Extract props
-  const params = t.isFunctionDeclaration(actualNode)
-    ? actualNode.params
-    : actualNode.params;
-  if (params.length > 0) {
-    const firstParam = params[0];
-    if (t.isObjectPattern(firstParam)) {
-      firstParam.properties.forEach(prop => {
-        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
-          props.push(prop.key.name);
-        } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
-          props.push(`...${prop.argument.name}`);
-        }
-      });
-    } else if (t.isIdentifier(firstParam)) {
-      props.push(firstParam.name);
-    }
-  }
-  // Calculate JSX nesting depth
-  path.traverse({
-    JSXElement: {
-      enter() {
-        jsxDepth++;
-      },
-    },
-  });
-  return {
-    name,
-    startLine: loc?.start.line || 0,
-    endLine: loc?.end.line || 0,
-    node: actualNode as any,
-    path,
-    hooks,
-    props,
-    jsxDepth: Math.floor(jsxDepth / 2), // Approximate depth
-  };
-}
-export function getCodeSnippet(sourceCode: string, line: number, context: number = 2): string {
-  const lines = sourceCode.split('\n');
-  const start = Math.max(0, line - context - 1);
-  const end = Math.min(lines.length, line + context);
-  return lines
-    .slice(start, end)
-    .map((l, i) => {
-      const lineNum = start + i + 1;
-      const marker = lineNum === line ? '>' : ' ';
-      return `${marker} ${lineNum.toString().padStart(4)} | ${l}`;
-    })
-    .join('\n');
-}