gh-dhofheinz-open-plugins-plugins-10x-fullstack-engineer/commands/refactor/duplicate.md

# Code Duplication Elimination Operation

Detect and eliminate code duplication through extraction, parameterization, or templating.

## Parameters

**Received from $ARGUMENTS**: All arguments after "duplicate"

**Expected format**:
```
scope:"<path>" [threshold:"<percentage>"] [strategy:"<strategy-name>"]
```

**Parameter definitions**:
- `scope` (REQUIRED): Path to analyze (e.g., "src/", "src/components/")
- `threshold` (OPTIONAL): Similarity threshold percentage (default: 80)
  - 100: Exact duplicates only
  - 80-99: Near duplicates (recommended)
  - 50-79: Similar patterns
- `strategy` (OPTIONAL): Consolidation strategy (default: auto-detect)
  - `extract-function` - Extract to shared function
  - `extract-class` - Extract to shared class
  - `parameterize` - Add parameters to reduce duplication
  - `template` - Use template/component pattern

## Workflow

### 1. Detect Duplication

Use jsinspect or similar tools:

```bash
# Find duplicate code blocks
npx jsinspect <scope> \
  --threshold <threshold> \
  --min-instances 2 \
  --ignore "node_modules|dist|build|test" \
  --reporter json

# Or use script
./.scripts/detect-duplication.sh <scope> <threshold>
```

### 2. Analyze Duplication Patterns

Categorize duplicates:
- **Exact duplicates** (100% match): Copy-paste code
- **Near duplicates** (80-99% match): Similar with minor differences
- **Structural duplicates** (50-79% match): Same pattern, different data

### 3. Choose Consolidation Strategy

Based on duplication type:

## Strategy Examples

### Strategy 1: Extract Function

**When to use**:
- Exact or near duplicate code blocks
- Pure logic with clear inputs/outputs
- Used in 2+ places
- No complex state dependencies

**Before** (Duplicated validation):
```typescript
// UserForm.tsx
function validateForm() {
  const errors: Errors = {};

  if (!formData.email) {
    errors.email = "Email is required";
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      errors.email = "Invalid email format";
    }
  }

  if (!formData.password) {
    errors.password = "Password is required";
  } else if (formData.password.length < 8) {
    errors.password = "Password must be at least 8 characters";
  } else {
    const hasUpper = /[A-Z]/.test(formData.password);
    const hasLower = /[a-z]/.test(formData.password);
    const hasNumber = /[0-9]/.test(formData.password);
    if (!hasUpper || !hasLower || !hasNumber) {
      errors.password = "Password must contain uppercase, lowercase, and number";
    }
  }

  return errors;
}

// ProfileForm.tsx - Same validation copied
function validateForm() {
  const errors: Errors = {};

  if (!formData.email) {
    errors.email = "Email is required";
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      errors.email = "Invalid email format";
    }
  }

  if (!formData.password) {
    errors.password = "Password is required";
  } else if (formData.password.length < 8) {
    errors.password = "Password must be at least 8 characters";
  } else {
    const hasUpper = /[A-Z]/.test(formData.password);
    const hasLower = /[a-z]/.test(formData.password);
    const hasNumber = /[0-9]/.test(formData.password);
    if (!hasUpper || !hasLower || !hasNumber) {
      errors.password = "Password must contain uppercase, lowercase, and number";
    }
  }

  return errors;
}

// RegistrationForm.tsx - Same validation copied again
// SettingsForm.tsx - Same validation copied again
// AdminForm.tsx - Same validation copied again
```

**After** (Extracted to shared utilities):
```typescript
// utils/validation.ts
export interface ValidationResult {
  valid: boolean;
  errors: Record<string, string>;
}

export function validateEmail(email: string): string | null {
  if (!email) {
    return "Email is required";
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    return "Invalid email format";
  }

  return null;
}

export function validatePassword(password: string): string | null {
  if (!password) {
    return "Password is required";
  }

  if (password.length < 8) {
    return "Password must be at least 8 characters";
  }

  const hasUpper = /[A-Z]/.test(password);
  const hasLower = /[a-z]/.test(password);
  const hasNumber = /[0-9]/.test(password);

  if (!hasUpper || !hasLower || !hasNumber) {
    return "Password must contain uppercase, lowercase, and number";
  }

  return null;
}

export function validateUserForm(data: {
  email: string;
  password: string;
}): ValidationResult {
  const errors: Record<string, string> = {};

  const emailError = validateEmail(data.email);
  if (emailError) errors.email = emailError;

  const passwordError = validatePassword(data.password);
  if (passwordError) errors.password = passwordError;

  return {
    valid: Object.keys(errors).length === 0,
    errors
  };
}

// All forms now use shared validation
// UserForm.tsx
import { validateUserForm } from '@/utils/validation';

function validateForm() {
  return validateUserForm(formData);
}

// ProfileForm.tsx
import { validateUserForm } from '@/utils/validation';

function validateForm() {
  return validateUserForm(formData);
}

// Same for RegistrationForm, SettingsForm, AdminForm
```

**Improvements**:
- DRY: 5 duplicates → 1 implementation
- Lines saved: ~200 lines (40 lines × 5 copies)
- Single source of truth: Fix bugs once
- Testability: Test validation independently
- Consistency: All forms use same validation

---

### Strategy 2: Extract Class

**When to use**:
- Duplicated logic with state
- Related methods copied together
- Object-oriented patterns
- Multiple functions working on same data

**Before** (Duplicated error handling across services):
```typescript
// UserService.ts
class UserService {
  async createUser(data: any) {
    try {
      const user = await this.db.users.create(data);
      return { success: true, data: user };
    } catch (error) {
      if (error.code === '23505') {
        return {
          success: false,
          error: { code: 'DUPLICATE_EMAIL', message: 'Email already exists' }
        };
      }
      if (error.code === '23503') {
        return {
          success: false,
          error: { code: 'INVALID_REFERENCE', message: 'Invalid reference' }
        };
      }
      console.error('User creation error:', error);
      return {
        success: false,
        error: { code: 'INTERNAL_ERROR', message: 'Internal server error' }
      };
    }
  }
}

// PostService.ts - Same error handling copied
class PostService {
  async createPost(data: any) {
    try {
      const post = await this.db.posts.create(data);
      return { success: true, data: post };
    } catch (error) {
      if (error.code === '23505') {
        return {
          success: false,
          error: { code: 'DUPLICATE_TITLE', message: 'Title already exists' }
        };
      }
      if (error.code === '23503') {
        return {
          success: false,
          error: { code: 'INVALID_REFERENCE', message: 'Invalid reference' }
        };
      }
      console.error('Post creation error:', error);
      return {
        success: false,
        error: { code: 'INTERNAL_ERROR', message: 'Internal server error' }
        };
    }
  }
}

// CommentService.ts - Same pattern copied
// OrderService.ts - Same pattern copied
```

**After** (Extracted error handler class):
```typescript
// errors/DatabaseErrorHandler.ts
export interface ErrorResponse {
  code: string;
  message: string;
  details?: any;
}

export interface Result<T> {
  success: boolean;
  data?: T;
  error?: ErrorResponse;
}

export class DatabaseErrorHandler {
  private errorMappings: Map<string, (error: any) => ErrorResponse> = new Map([
    ['23505', this.handleDuplicateKey],
    ['23503', this.handleForeignKeyViolation],
    ['23502', this.handleNotNullViolation],
    ['23514', this.handleCheckViolation]
  ]);

  handleError(error: any, context: string = 'Database'): ErrorResponse {
    const handler = this.errorMappings.get(error.code);
    if (handler) {
      return handler.call(this, error);
    }

    console.error(`${context} error:`, error);
    return {
      code: 'INTERNAL_ERROR',
      message: 'Internal server error'
    };
  }

  private handleDuplicateKey(error: any): ErrorResponse {
    return {
      code: 'DUPLICATE_KEY',
      message: 'Resource with this identifier already exists',
      details: error.detail
    };
  }

  private handleForeignKeyViolation(error: any): ErrorResponse {
    return {
      code: 'INVALID_REFERENCE',
      message: 'Referenced resource does not exist',
      details: error.detail
    };
  }

  private handleNotNullViolation(error: any): ErrorResponse {
    return {
      code: 'MISSING_REQUIRED_FIELD',
      message: 'Required field is missing',
      details: error.column
    };
  }

  private handleCheckViolation(error: any): ErrorResponse {
    return {
      code: 'CONSTRAINT_VIOLATION',
      message: 'Data violates constraint',
      details: error.constraint
    };
  }

  async wrapOperation<T>(
    operation: () => Promise<T>,
    context?: string
  ): Promise<Result<T>> {
    try {
      const data = await operation();
      return { success: true, data };
    } catch (error) {
      return {
        success: false,
        error: this.handleError(error, context)
      };
    }
  }
}

// Services now use shared error handler
// UserService.ts
class UserService {
  constructor(
    private db: Database,
    private errorHandler: DatabaseErrorHandler
  ) {}

  async createUser(data: CreateUserInput): Promise<Result<User>> {
    return this.errorHandler.wrapOperation(
      () => this.db.users.create(data),
      'User creation'
    );
  }
}

// PostService.ts
class PostService {
  constructor(
    private db: Database,
    private errorHandler: DatabaseErrorHandler
  ) {}

  async createPost(data: CreatePostInput): Promise<Result<Post>> {
    return this.errorHandler.wrapOperation(
      () => this.db.posts.create(data),
      'Post creation'
    );
  }
}

// All services now use shared error handling
```

**Improvements**:
- Centralized error handling
- Consistent error responses
- Easier to extend (add new error types)
- Better logging and monitoring
- DRY: One error handler for all services

---

### Strategy 3: Parameterize

**When to use**:
- Functions differ only in values/configuration
- Similar structure, different data
- Can be unified with parameters
- Limited number of variations

**Before** (Similar functions with hard-coded values):
```typescript
// formatters.ts
function formatUserName(user: User): string {
  return `${user.firstName} ${user.lastName}`;
}

function formatAdminName(admin: Admin): string {
  return `${admin.firstName} ${admin.lastName} (Admin)`;
}

function formatModeratorName(moderator: Moderator): string {
  return `${moderator.firstName} ${moderator.lastName} (Moderator)`;
}

function formatGuestName(guest: Guest): string {
  return `Guest: ${guest.firstName} ${guest.lastName}`;
}

// Similar for emails
function formatUserEmail(user: User): string {
  return user.email.toLowerCase();
}

function formatAdminEmail(admin: Admin): string {
  return `admin-${admin.email.toLowerCase()}`;
}

function formatModeratorEmail(moderator: Moderator): string {
  return `mod-${moderator.email.toLowerCase()}`;
}
```

**After** (Parameterized):
```typescript
// formatters.ts
interface Person {
  firstName: string;
  lastName: string;
  email: string;
}

type NameFormat = {
  prefix?: string;
  suffix?: string;
  template?: (person: Person) => string;
};

function formatName(person: Person, format: NameFormat = {}): string {
  if (format.template) {
    return format.template(person);
  }

  const base = `${person.firstName} ${person.lastName}`;
  const prefix = format.prefix ? `${format.prefix}: ` : '';
  const suffix = format.suffix ? ` (${format.suffix})` : '';

  return `${prefix}${base}${suffix}`;
}

type EmailFormat = {
  prefix?: string;
  domain?: string;
  transform?: (email: string) => string;
};

function formatEmail(person: Person, format: EmailFormat = {}): string {
  let email = person.email.toLowerCase();

  if (format.transform) {
    email = format.transform(email);
  }

  if (format.prefix) {
    const [local, domain] = email.split('@');
    email = `${format.prefix}-${local}@${domain}`;
  }

  if (format.domain) {
    const [local] = email.split('@');
    email = `${local}@${format.domain}`;
  }

  return email;
}

// Usage - Much more flexible
const userName = formatName(user);
const adminName = formatName(admin, { suffix: 'Admin' });
const modName = formatName(moderator, { suffix: 'Moderator' });
const guestName = formatName(guest, { prefix: 'Guest' });

const userEmail = formatEmail(user);
const adminEmail = formatEmail(admin, { prefix: 'admin' });
const modEmail = formatEmail(moderator, { prefix: 'mod' });

// Easy to add new formats without new functions
const vipName = formatName(vip, { suffix: 'VIP', prefix: 'Special' });
const customEmail = formatEmail(user, {
  transform: (email) => email.toUpperCase()
});
```

**Improvements**:
- 7 functions → 2 parameterized functions
- More flexible: Infinite combinations possible
- Easier to maintain: One function to update
- Easier to test: Test parameters instead of functions
- Extensible: Add new formats without new code

---

### Strategy 4: Template/Component Pattern

**When to use**:
- Repeated UI patterns
- Similar component structures
- Variations in content, not structure
- React/Vue component duplication

**Before** (Duplicated card components):
```typescript
// UserCard.tsx
function UserCard({ user }: { user: User }) {
  return (
    <div className="card">
      <div className="card-header">
        <img src={user.avatar} alt={user.name} />
        <h3>{user.name}</h3>
      </div>
      <div className="card-body">
        <p>{user.email}</p>
        <p>{user.role}</p>
      </div>
      <div className="card-footer">
        <button onClick={() => viewUser(user.id)}>View</button>
        <button onClick={() => editUser(user.id)}>Edit</button>
      </div>
    </div>
  );
}

// PostCard.tsx - Same structure copied
function PostCard({ post }: { post: Post }) {
  return (
    <div className="card">
      <div className="card-header">
        <img src={post.thumbnail} alt={post.title} />
        <h3>{post.title}</h3>
      </div>
      <div className="card-body">
        <p>{post.excerpt}</p>
        <p>By {post.author}</p>
      </div>
      <div className="card-footer">
        <button onClick={() => viewPost(post.id)}>View</button>
        <button onClick={() => editPost(post.id)}>Edit</button>
      </div>
    </div>
  );
}

// ProductCard.tsx - Same structure copied
// CommentCard.tsx - Same structure copied
```

**After** (Generic Card template):
```typescript
// components/Card.tsx
interface CardProps {
  header: {
    image: string;
    title: string;
    imageAlt?: string;
  };
  body: React.ReactNode;
  footer?: {
    actions: Array<{
      label: string;
      onClick: () => void;
      variant?: 'primary' | 'secondary';
    }>;
  };
  className?: string;
}

export function Card({ header, body, footer, className = '' }: CardProps) {
  return (
    <div className={`card ${className}`}>
      <div className="card-header">
        <img
          src={header.image}
          alt={header.imageAlt || header.title}
          className="card-image"
        />
        <h3 className="card-title">{header.title}</h3>
      </div>
      <div className="card-body">{body}</div>
      {footer && (
        <div className="card-footer">
          {footer.actions.map((action, index) => (
            <button
              key={index}
              onClick={action.onClick}
              className={`btn btn-${action.variant || 'primary'}`}
            >
              {action.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// Usage - Much cleaner
// UserCard.tsx
function UserCard({ user }: { user: User }) {
  return (
    <Card
      header={{
        image: user.avatar,
        title: user.name,
        imageAlt: `${user.name}'s avatar`
      }}
      body={
        <>
          <p>{user.email}</p>
          <p className="user-role">{user.role}</p>
        </>
      }
      footer={{
        actions: [
          { label: 'View', onClick: () => viewUser(user.id) },
          { label: 'Edit', onClick: () => editUser(user.id), variant: 'secondary' }
        ]
      }}
    />
  );
}

// PostCard.tsx
function PostCard({ post }: { post: Post }) {
  return (
    <Card
      header={{
        image: post.thumbnail,
        title: post.title
      }}
      body={
        <>
          <p>{post.excerpt}</p>
          <p className="post-author">By {post.author}</p>
        </>
      }
      footer={{
        actions: [
          { label: 'Read More', onClick: () => viewPost(post.id) },
          { label: 'Edit', onClick: () => editPost(post.id), variant: 'secondary' }
        ]
      }}
    />
  );
}
```

**Improvements**:
- Reusable Card component
- Consistent UI across cards
- Easy to change card structure globally
- Less code duplication
- Compose with different content

---

## Measurement

Calculate duplication savings:

```bash
# Before
Total lines: 10,000
Duplicate lines: 800 (8%)

# After
Total lines: 9,200
Duplicate lines: 100 (1.1%)

# Savings
Lines removed: 800
Duplication reduced: 8% → 1.1% (87.5% improvement)
```

## Output Format

```markdown
# Code Duplication Elimination Report

## Analysis

**Scope**: <path>
**Threshold**: <percentage>%

**Duplicates Found**:
- Exact duplicates: <count> instances
- Near duplicates: <count> instances
- Total duplicate lines: <count> / <total> (<percentage>%)

## Duplication Examples

### Duplicate 1: <description>

**Instances**: <count> copies

**Locations**:
1. <file1>:<line-range>
2. <file2>:<line-range>
3. <file3>:<line-range>

**Strategy**: <extract-function | extract-class | parameterize | template>

**Before** (<lines> lines duplicated):
```typescript
<duplicated-code>
```

**After** (Single implementation):
```typescript
<consolidated-code>
```

**Savings**: <lines> lines removed

## Total Impact

**Before**:
- Total lines: <count>
- Duplicate lines: <count> (<percentage>%)

**After**:
- Total lines: <count>
- Duplicate lines: <count> (<percentage>%)

**Improvement**:
- Lines removed: <count>
- Duplication reduced: <before>% → <after>% (<percentage>% improvement)
- Maintainability: Significantly improved

## Files Changed

**Created**:
- <new-shared-file-1>
- <new-shared-file-2>

**Modified**:
- <file-1>: Replaced with shared implementation
- <file-2>: Replaced with shared implementation

## Testing

**Tests Updated**:
- <test-file-1>: Updated to test shared code
- <test-file-2>: Removed duplicate tests

**Coverage**:
- Before: <percentage>%
- After: <percentage>%

## Next Steps

**Remaining Duplication**:
1. <duplicate-pattern-1>: <count> instances
2. <duplicate-pattern-2>: <count> instances

**Recommendations**:
- Continue eliminating duplicates
- Set up automated duplication detection in CI/CD
- Code review for new duplicates

---

**Duplication Eliminated**: Code is now DRY and maintainable.
```

## Error Handling

**No duplicates found**:
```
Success: No significant code duplication found (threshold: <percentage>%)

**Duplication**: <percentage>% (Target: < 3%)

The codebase is already DRY. Great work!
```

**Threshold too low**:
```
Warning: Threshold <percentage>% is very low. Found <count> potential duplicates.

Many may be false positives (similar structure but different purpose).

Recommendation: Use threshold 80-90% for meaningful duplicates.
```