How to Use Sweet! CLI for Code Refactoring

Code refactoring is essential for maintaining healthy, scalable codebases. With Sweet! CLI, you can automate and accelerate refactoring tasks that would normally take hours or days.

Why Refactor with AI?

Traditional refactoring requires: - Manual code review - Identifying patterns - Making systematic changes - Testing after each change

Sweet! CLI automates this process by: - Analyzing your entire codebase - Identifying refactoring opportunities - Making systematic, tested changes - Providing explanations for each change

Getting Started with Refactoring

1. Analyze Your Codebase

First, let Sweet! CLI understand your project structure:

sweet "analyze the project structure and identify refactoring opportunities in /path/to/your/project"

This command: - Scans all source files - Identifies dependencies - Creates a project map - Flags potential issues

2. Identify Refactoring Opportunities

Give Sweet! CLI a goal to find specific improvements:

sweet "Find React class components and convert them to function components with hooks"

Common refactoring patterns: - Class components → Function components with hooks - Redux → React Context or Zustand - jQuery → Vanilla JavaScript or modern frameworks - Callback patterns → Async/await

3. Execute Refactoring Changes

Once you've identified opportunities, execute the refactoring:

sweet "Execute the refactoring plan defined in refactor-plan.json, ensuring tests pass first"

Sweet! CLI will ensure all tests pass before and after changes.

Real-World Example: React Class to Function Components

Let's walk through a concrete example of refactoring legacy React class components to modern function components with hooks.

Before: Class Component

import React from 'react';

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true
    };
  }

  componentDidMount() {
    this.fetchUser();
  }

  fetchUser = async () => {
    try {
      const response = await fetch(`/api/users/${this.props.userId}`);
      const user = await response.json();
      this.setState({ user, loading: false });
    } catch (error) {
      console.error('Failed to fetch user:', error);
      this.setState({ loading: false });
    }
  }

  render() {
    const { user, loading } = this.state;

    if (loading) return <div>Loading...</div>;
    if (!user) return <div>User not found</div>;

    return (
      <div className="user-profile">
        <h1>{user.name}</h1>
        <p>Email: {user.email}</p>
        <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
      </div>
    );
  }
}

After: Function Component with Hooks

Sweet! CLI transforms this to:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div className="user-profile">
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
    </div>
  );
}

export default UserProfile;

Key Improvements:

• Simpler state management with useState
• Cleaner side effects with useEffect
• Removed class boilerplate (constructor, this, binding)
• Better TypeScript support with function components

Advanced Refactoring Techniques

1. Database Migration Refactoring

Sweet! CLI can help refactor database access patterns:

sweet "Find callback-based database patterns and convert them to async/await"

2. API Layer Modernization

Update legacy API calls to modern patterns:

sweet "Convert axios calls to fetch API in src/api/**/*.js"

3. Test Suite Refactoring

Improve test coverage and patterns:

sweet "Migrate Enzyme tests to React Testing Library while maintaining test coverage"

Best Practices for AI-Assisted Refactoring

1. Start Small

Begin with low-risk refactors before tackling core business logic.

2. Test Continuously

Always run tests before and after refactoring.

3. Review Changes

Even AI-generated changes need human review for context and business logic.

4. Use Version Control

Commit before refactoring and use feature branches.

5. Document Transformations

Keep records of what was changed and why.

Common Pitfalls and Solutions

Pitfall 1: Breaking Dependencies

Solution: Use dependency analysis before refactoring:

sweet "Analyze dependencies for src/components/Button.js"

Pitfall 2: Performance Regressions

Solution: Benchmark before and after:

sweet "Benchmark performance before and after refactoring"

Pitfall 3: Lost Business Logic

Solution: Maintain comprehensive test coverage and verify functionality.

Measuring Refactoring Success

Track these metrics: - Code complexity (cyclomatic complexity) - Test coverage (line and branch coverage) - Build times (CI/CD pipeline performance) - Bug reports (pre vs post-refactoring)

Getting Help

If you encounter issues: 1. Check the Sweet! CLI documentation 2. Join our Discord community 3. Contact support at support@sweetcli.com

Next Steps

Ready to start refactoring? Install Sweet! CLI and begin:

npm install -g @sweet-cli/sweet
sweet --help

Or start interactive mode:

sweet

Happy refactoring! 🚀