sickn33/antigravity-awesome-skills/dependency-upgrade

MAJOR.MINOR.PATCH (e.g., 2.3.1)
 
MAJOR: Breaking changes
MINOR: New features, backward compatible
PATCH: Bug fixes, backward compatible
 
^2.3.1 = >=2.3.1 <3.0.0 (minor updates)
~2.3.1 = >=2.3.1 <2.4.0 (patch updates)
2.3.1 = exact version

# npm
npm outdated
npm audit
npm audit fix
 
# yarn
yarn outdated
yarn audit
 
# Check for major updates
npx npm-check-updates
npx npm-check-updates -u  # Update package.json

# See why a package is installed
npm ls package-name
yarn why package-name
 
# Find duplicate packages
npm dedupe
yarn dedupe
 
# Visualize dependencies
npx madge --image graph.png src/

// compatibility-matrix.js
const compatibilityMatrix = {
  'react': {
    '16.x': {
      'react-dom': '^16.0.0',
      'react-router-dom': '^5.0.0',
      '@testing-library/react': '^11.0.0'
    },
    '17.x': {
      'react-dom': '^17.0.0',
      'react-router-dom': '^5.0.0 || ^6.0.0',
      '@testing-library/react': '^12.0.0'
    },
    '18.x': {
      'react-dom': '^18.0.0',
      'react-router-dom': '^6.0.0',
      '@testing-library/react': '^13.0.0'
    }
  }
};
function checkCompatibility(packages) {
  // Validate package versions against matrix
}

# 1. Identify current versions
npm list --depth=0
 
# 2. Check for breaking changes
# Read CHANGELOG.md and MIGRATION.md
 
# 3. Create upgrade plan
echo "Upgrade order:
1. TypeScript
2. React
3. React Router
4. Testing libraries
5. Build tools" > UPGRADE_PLAN.md

# Don't upgrade everything at once!
 
# Step 1: Update TypeScript
npm install typescript@latest
 
# Test
npm run test
npm run build
 
# Step 2: Update React (one major version at a time)
npm install react@17 react-dom@17
 
# Test again
npm run test
 
# Step 3: Continue with other packages
npm install react-router-dom@6
 
# And so on...

// tests/compatibility.test.js
describe('Dependency Compatibility', () => {
  it('should have compatible React versions', () => {
    const reactVersion = require('react/package.json').version;
    const reactDomVersion = require('react-dom/package.json').version;
    expect(reactVersion).toBe(reactDomVersion);
  });
  it('should not have peer dependency warnings', () => {
    // Run npm ls and check for warnings
  });
});

# Use changelog parsers
npx changelog-parser react 16.0.0 17.0.0
 
# Or manually check
curl https://raw.githubusercontent.com/facebook/react/main/CHANGELOG.md

# React upgrade codemods
npx react-codeshift <transform> <path>
 
# Example: Update lifecycle methods
npx react-codeshift \
  --parser tsx \
  --transform react-codeshift/transforms/rename-unsafe-lifecycles.js \
  src/

// migration-script.js
const fs = require('fs');
const glob = require('glob');
glob('src/**/*.tsx', (err, files) => {
  files.forEach(file => {
    let content = fs.readFileSync(file, 'utf8');
    // Replace old API with new API
    content = content.replace(
      /componentWillMount/g,
      'UNSAFE_componentWillMount'
    );
    // Update imports
    content = content.replace(
      /import { Component } from 'react'/g,
      "import React, { Component } from 'react'"
    );
    fs.writeFileSync(file, content);
  });
});

// Ensure tests pass before and after upgrade
npm run test
// Update test utilities if needed
npm install @testing-library/react@latest

// tests/integration/app.test.js
describe('App Integration', () => {
  it('should render without crashing', () => {
    render(<App />);
  });
  it('should handle navigation', () => {
    const { getByText } = render(<App />);
    fireEvent.click(getByText('Navigate'));
    expect(screen.getByText('New Page')).toBeInTheDocument();
  });
});

// visual-regression.test.js
describe('Visual Regression', () => {
  it('should match snapshot', () => {
    const { container } = render(<App />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

// cypress/e2e/app.cy.js
describe('E2E Tests', () => {
  it('should complete user flow', () => {
    cy.visit('/');
    cy.get('[data-testid="login"]').click();
    cy.get('input[name="email"]').type('user@example.com');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// renovate.json
{
  "extends": ["config:base"],
  "packageRules": [
    {
      "matchUpdateTypes": ["minor", "patch"],
      "automerge": false
    },
    {
      "matchUpdateTypes": ["major"],
      "automerge": false,
      "labels": ["major-update"]
    }
  ],
  "schedule": ["before 3am on Monday"],
  "timezone": "America/New_York"
}

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 5
    reviewers:
      - "team-leads"
    commit-message:
      prefix: "chore"
      include: "scope"

# Work on a topic branch with a clean or separately preserved starting state.
# Record the original full commit SHA and lockfile before changing dependencies.
# If validation fails, keep the failed diff and logs for diagnosis.
# Review and revert only task-owned manifest/lockfile changes when appropriate,
# then use npm ci to restore the recorded lockfile; never delete the branch or others' work.

# npm
npm install --package-lock-only  # Update lock file only
npm ci  # Clean install from lock file
 
# yarn
yarn install --frozen-lockfile  # CI mode
yarn upgrade-interactive  # Interactive upgrades

# npm 7+: strict peer dependencies
npm install --legacy-peer-deps  # Ignore peer deps
 
# npm 8+: override peer dependencies
npm install --force

# Update all workspace packages
npm install --workspaces
 
# Update specific workspace
npm install package@latest --workspace=packages/app

Pre-Upgrade:
-[ ] Review current dependency versions
-[ ] Read changelogs for breaking changes
-[ ] Create feature branch
-[ ] Backup current state (git tag)
-[ ] Run full test suite (baseline)
 
During Upgrade:
-[ ] Upgrade one dependency at a time
-[ ] Update peer dependencies
-[ ] Fix TypeScript errors
-[ ] Update tests if needed
-[ ] Run test suite after each upgrade
-[ ] Check bundle size impact
 
Post-Upgrade:
-[ ] Full regression testing
-[ ] Performance testing
-[ ] Update documentation
-[ ] Deploy to staging
-[ ] Monitor for errors
-[ ] Deploy to production