Skip to content

Commit

Permalink
feat: support v4 icon without outlined (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
vagusX authored Nov 28, 2019
1 parent 1aaa0dc commit 71b3f48
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 0 deletions.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,9 @@ git clone git@github.com:ant-design/codemod.git antd-codemod
npx jscodeshift -t antd-codemod/transforms/v3-Icon-to-v4-Icon.js src/**/*.js --parser=babylon
npx jscodeshift -t antd-codemod/transforms/v3-Icon-to-v4-Form.js src/**/*.js --parser=babylon
npx jscodeshift -t antd-codemod/transforms/v3-LocaleProvider-to-v4-ConfigProvider.js src/**/*.js --parser=babylon
npx jscodeshift -t antd-codemod/transforms/v4-Icon-Outlined.js src/**/*.js --parser=babylon
```

**tips**

If you are using typescript, you can use `--parser=tsx` option.
13 changes: 13 additions & 0 deletions transforms/__testfixtures__/v4-Icon-Outlined/alias-import.input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Smile as SmileO, SmileFilled, SmileTwoTone } from '@ant-design/icons';

const Component = () => {
return <SmileO />;
};

const Component1 = props => {
return <SmileFilled />;
};

const Component2 = props => {
return <SmileTwoTone />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { SmileFilled, SmileOutlined as SmileO, SmileTwoTone } from '@ant-design/icons';

const Component = () => {
return <SmileO />;
};

const Component1 = props => {
return <SmileFilled />;
};

const Component2 = props => {
return <SmileTwoTone />;
};
13 changes: 13 additions & 0 deletions transforms/__testfixtures__/v4-Icon-Outlined/basic.input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Smile, SmileFilled, SmileTwoTone } from '@ant-design/icons';

const Component = () => {
return <Smile />;
};

const Component1 = props => {
return <SmileFilled />;
};

const Component2 = props => {
return <SmileTwoTone />;
};
13 changes: 13 additions & 0 deletions transforms/__testfixtures__/v4-Icon-Outlined/basic.output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { SmileFilled, SmileOutlined, SmileTwoTone } from '@ant-design/icons';

const Component = () => {
return <SmileOutlined />;
};

const Component1 = props => {
return <SmileFilled />;
};

const Component2 = props => {
return <SmileTwoTone />;
};
11 changes: 11 additions & 0 deletions transforms/__tests__/v4-Icon-Outlined.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const tests = ['basic', 'alias-import'];

const defineTest = require('jscodeshift/dist/testUtils').defineTest;

const testUnit = 'v4-Icon-Outlined';

describe(testUnit, () => {
tests.forEach(test =>
defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
);
});
80 changes: 80 additions & 0 deletions transforms/v4-Icon-Outlined.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
const allIcons = require('@ant-design/icons/lib/icons');

const { printOptions } = require('./utils/config');
const { removeEmptyModuleImport, addSubmoduleImport } = require('./utils');

const outlinedIcons = Object.keys(allIcons)
.filter(n => n.endsWith('Outlined'))
.map(n => n.replace(/Outlined$/, ''));

module.exports = (file, api, options) => {
const j = api.jscodeshift;
const root = j(file.source);

// remove old LocaleProvider imports
function renameV4IconWithoutOutlinedImport(j, root) {
let hasChanged = false;

// import { LocaleProvider } from 'antd';
root
.find(j.Identifier)
.filter(
path =>
outlinedIcons.includes(path.node.name) &&
path.parent.node.type === 'ImportSpecifier' &&
path.parent.parent.node.source.value === '@ant-design/icons',
)
.forEach(path => {
hasChanged = true;
const localComponentName = path.parent.node.local.name;
const importComponentName = path.parent.node.imported.name;

const importDeclaration = path.parent.parent.node;
importDeclaration.specifiers = importDeclaration.specifiers.filter(
specifier =>
!specifier.imported ||
specifier.imported.name !== importComponentName,
);

const outlinedIconName = importComponentName + 'Outlined';

if (localComponentName === importComponentName) {
addSubmoduleImport(j, root, '@ant-design/icons', outlinedIconName);
if (localComponentName === importComponentName) {
root
.findJSXElements(localComponentName)
.find(j.JSXIdentifier, {
name: localComponentName,
})
.forEach(nodePath => {
nodePath.node.name = outlinedIconName;
});
}
} else {
addSubmoduleImport(
j,
root,
'@ant-design/icons',
outlinedIconName,
localComponentName,
);
}
});

return hasChanged;
}

// step1. remove LocaleProvider import from antd
// step2. add ConfigProvider import from antd
// step3. cleanup antd import if empty
let hasChanged = false;
hasChanged = renameV4IconWithoutOutlinedImport(j, root) || hasChanged;

if (hasChanged) {
removeEmptyModuleImport(j, root, 'antd');
}

return hasChanged
? root.toSource(options.printOptions || printOptions)
: null;
};

0 comments on commit 71b3f48

Please sign in to comment.