replace-package

replace-package

A tool to replace legacy package

from:

import classnames from 'classnames';

const Component = ({ active }) => {
  return (
    <div className={classnames({ ['text-black']: active })}>orz</div>
  );
};

to:

import clsx from 'clsx';

const Component = ({ active }) => {
  return (
    <div className={clsx({ ['text-black']: active })}>orz</div>
  );
};

How to use

step 1: init

npx replace-package@latest init

codemod.json

{
  "replace-package": [{
    "name": "",
    "source": "",
    "importDefault": false,
    "legacyName": "",
    "legacySource": "",
    "legacyImportDefault": false,
  }]
}

step 2: change config

{
  "replace-package": [{
    "name": "clsx",
    "source": "clsx",
    "importDefault": true,
    "legacyName": "classnames",
    "legacySource": "classnames",
    "legacyImportDefault": true,
  }]
}

step 3: transform

npx replace-package@latest src/**/*.(ts|tsx)

It will check your git directory is clean, you can use '--force' to skip the check.

Example

component

codemod.json

{
  "replace-package": [{
    "name": "Form",
    "source": "@ant-design/compatible",
    "importDefault": false,
    "legacyName": "Form",
    "legacySource": "antd",
    "legacyImportDefault": false
  }]
}

by path(VSCode copy path)

{
  "replace-package": [{
    "name": "Form",
    "source": "/Users/xx/workspace/xx/src/components/Form",
    "importDefault": false,
    "legacyName": "Form",
    "legacySource": "antd",
    "legacyImportDefault": false
  }]
}

utils

codemod.json

{
  "replace-package": [{
    "legacyName": "classnames",
    "legacySource": "classnames",
    "legacyImportDefault": true,
    "name": "clsx",
    "source": "clsx",
    "importDefault": true
  }]
}

or

{
  "replace-package": [{
    "legacyName": "classnames",
    "legacySource": "/Users/xx/workspace/xx/src/utils/classnames",
    "legacyImportDefault": true,
    "name": "clsx",
    "source": "clsx",
    "importDefault": true
  }]
}

name import

legacy

import { Form as NewForm, Select, Input, DatePicker } from 'antd';
import { Form } from '@ant-design/compatible';

//...
<Form layout="horizontal"></Form>

codemod.json

{
  "replace-package": [{
    "legacyName": "Form",
    "legacySource": "@ant-design/compatible",
    "legacyImportDefault": false,
    "name": "Form",
    "source": "antd",
    "importDefault": false
  }]
}

transformed

import { Form as NewForm, Select, Input, DatePicker } from 'antd';

//...
<NewForm layout="horizontal"></NewForm>