Feat/support config provider (#2)

ant-design · Nov 28, 2019 · fde4b62 · fde4b62
1 parent 26913e0
commit fde4b62
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 56 deletions.
diff --git a/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/alias-import.input.js b/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/alias-import.input.js
@@ -0,0 +1,9 @@
+import { LocaleProvider as MyProvider } from 'antd';
+
+const App = () => {
+  return (
+    <MyProvider {...yourConfig}>
+      <Main />
+    </MyProvider>
+  );
+}
diff --git a/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/alias-import.output.js b/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/alias-import.output.js
@@ -0,0 +1,9 @@
+import { ConfigProvider as MyProvider } from 'antd';
+
+const App = () => {
+  return (
+    <MyProvider {...yourConfig}>
+      <Main />
+    </MyProvider>
+  );
+}
diff --git a/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/basic.input.js b/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/basic.input.js
@@ -0,0 +1,9 @@
+import { LocaleProvider } from 'antd';
+
+const App = () => {
+  return (
+    <LocaleProvider {...yourConfig}>
+      <Main />
+    </LocaleProvider>
+  );
+}
diff --git a/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/basic.output.js b/transforms/__testfixtures__/v3-LocaleProvider-to-v4-ConfigProvider/basic.output.js
@@ -0,0 +1,9 @@
+import { ConfigProvider } from 'antd';
+
+const App = () => {
+  return (
+    <ConfigProvider {...yourConfig}>
+      <Main />
+    </ConfigProvider>
+  );
+}
diff --git a/transforms/__tests__/v3-Form-to-v4-Form.test.js b/transforms/__tests__/v3-Form-to-v4-Form.test.js
@@ -2,13 +2,10 @@ const tests = ['basic', 'alias-import'];
 
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
 
-describe('icon', () => {
+const testUnit = 'v3-Form-to-v4-Form';
+
+describe(testUnit, () => {
   tests.forEach(test =>
-    defineTest(
-      __dirname,
-      'v3-Form-to-v4-Form',
-      null,
-      `v3-Form-to-v4-Form/${test}`,
-    ),
+    defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
   );
 });
diff --git a/transforms/__tests__/v3-Icon-to-v4-Icon.test.js b/transforms/__tests__/v3-Icon-to-v4-Icon.test.js
@@ -2,13 +2,10 @@ const tests = ['basic', 'icon-static-methods'];
 
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
 
-describe('icon', () => {
+const testUnit = 'v3-Icon-to-v4-Icon';
+
+describe(testUnit, () => {
   tests.forEach(test =>
-    defineTest(
-      __dirname,
-      'v3-Icon-to-v4-Icon',
-      null,
-      `v3-Icon-to-v4-Icon/${test}`,
-    ),
+    defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
   );
 });
diff --git a/transforms/__tests__/v3-LocaleProvider-to-v4-ConfigProvider.test.js b/transforms/__tests__/v3-LocaleProvider-to-v4-ConfigProvider.test.js
@@ -0,0 +1,11 @@
+const tests = ['basic', 'alias-import'];
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const testUnit = 'v3-LocaleProvider-to-v4-ConfigProvider';
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, null, `${testUnit}/${test}`),
+  );
+});
diff --git a/transforms/config.js → transforms/utils/config.js b/transforms/config.js → transforms/utils/config.js
diff --git a/transforms/utils/index.js b/transforms/utils/index.js
@@ -106,43 +106,40 @@ function addSubmoduleImport(
     return;
   }
 
-  const path = findImportAfterModule(j, root, pkgName);
-  if (path) {
-    const newImportSpecifier = j.importSpecifier(
-      j.identifier(importedModuleName),
-      localModuleName ? j.identifier(localModuleName) : null,
-    );
+  const newImportSpecifier = j.importSpecifier(
+    j.identifier(importedModuleName),
+    localModuleName ? j.identifier(localModuleName) : null,
+  );
 
-    // if has module imported, just import new submodule from existed
-    // else just create a new import
-    if (hasModuleImport(j, root, pkgName)) {
-      root
-        .find(j.ImportDeclaration, {
-          source: { value: pkgName },
-        })
-        .at(0)
-        .replaceWith(({ node }) => {
-          const mergedImportSpecifiers = node.specifiers
-            .concat(newImportSpecifier)
-            .sort((a, b) => {
-              if (a.type === 'ImportDefaultSpecifier') {
-                return -1;
-              }
-
-              if (b.type === 'ImportDefaultSpecifier') {
-                return 1;
-              }
-
-              return a.imported.name.localeCompare(b.imported.name);
-            });
-          return j.importDeclaration(
-            mergedImportSpecifiers,
-            j.literal(pkgName),
-          );
-        });
-      return;
-    }
+  // if has module imported, just import new submodule from existed
+  // else just create a new import
+  if (hasModuleImport(j, root, pkgName)) {
+    root
+      .find(j.ImportDeclaration, {
+        source: { value: pkgName },
+      })
+      .at(0)
+      .replaceWith(({ node }) => {
+        const mergedImportSpecifiers = node.specifiers
+          .concat(newImportSpecifier)
+          .sort((a, b) => {
+            if (a.type === 'ImportDefaultSpecifier') {
+              return -1;
+            }
+
+            if (b.type === 'ImportDefaultSpecifier') {
+              return 1;
+            }
+
+            return a.imported.name.localeCompare(b.imported.name);
+          });
+        return j.importDeclaration(mergedImportSpecifiers, j.literal(pkgName));
+      });
+    return;
+  }
 
+  const path = findImportAfterModule(j, root, pkgName);
+  if (path) {
     const importStatement = j.importDeclaration(
       [newImportSpecifier],
       j.literal(pkgName),

diff --git a/transforms/v3-Form-to-v4-Form.js b/transforms/v3-Form-to-v4-Form.js
@@ -1,4 +1,4 @@
-const { printOptions } = require('./config');
+const { printOptions } = require('./utils/config');
 const { removeEmptyModuleImport, addSubmoduleImport } = require('./utils');
 
 module.exports = (file, api, options) => {

diff --git a/transforms/v3-Icon-to-v4-Icon.js b/transforms/v3-Icon-to-v4-Icon.js
@@ -5,7 +5,7 @@ const {
 } = require('@ant-design/compatible/lib/icon/utils');
 const allIcons = require('@ant-design/icons/lib/icons');
 
-const { printOptions } = require('./config');
+const { printOptions } = require('./utils/config');
 const {
   removeEmptyModuleImport,
   addSubmoduleImport,
@@ -22,14 +22,14 @@ module.exports = (file, api, options) => {
   const j = api.jscodeshift;
   const root = j(file.source);
 
-  let localModuleName = 'Icon';
+  let localComponentName = 'Icon';
 
   function rewriteOldIconWithImport(j, root) {
     let hasChanged = false;
     // 找到符合条件的 Icon components 通过 '@ant-design/icons' 引入
     // 条件为 type 属性为 string, 且 theme 属性为 string
     // 不符合的一概通过 '@ant-design/compatible' 引入
-    const existedIconComponents = root.findJSXElements(localModuleName);
+    const existedIconComponents = root.findJSXElements(localComponentName);
 
     const targetIconComponents = existedIconComponents
       .find(j.JSXAttribute, {
@@ -89,14 +89,14 @@ module.exports = (file, api, options) => {
         });
 
       if (unconvertableIconComponents.size() > 0) {
-        if (localModuleName !== 'Icon') {
+        if (localComponentName !== 'Icon') {
           // add @ant-design/compatible imports
           addSubmoduleImport(
             j,
             root,
             '@ant-design/compatible',
             'Icon',
-            localModuleName,
+            localComponentName,
           );
           hasChanged = true;
         }
@@ -194,7 +194,7 @@ module.exports = (file, api, options) => {
       )
       .forEach(path => {
         hasChanged = true;
-        localModuleName = path.parent.node.local.name;
+        localComponentName = path.parent.node.local.name;
 
         const importDeclaration = path.parent.parent.node;
         importDeclaration.specifiers = importDeclaration.specifiers.filter(

diff --git a/transforms/v3-LocaleProvider-to-v4-ConfigProvider.js b/transforms/v3-LocaleProvider-to-v4-ConfigProvider.js
@@ -0,0 +1,65 @@
+const { printOptions } = require('./utils/config');
+const { removeEmptyModuleImport, addSubmoduleImport } = require('./utils');
+
+module.exports = (file, api, options) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let localComponentName = 'LocaleProvider';
+
+  // remove old LocaleProvider imports
+  function removeAntdLocaleProviderImport(j, root) {
+    let hasChanged = false;
+
+    // import { LocaleProvider } from 'antd';
+    root
+      .find(j.Identifier)
+      .filter(
+        path =>
+          path.node.name === 'LocaleProvider' &&
+          path.parent.node.type === 'ImportSpecifier' &&
+          path.parent.parent.node.source.value === 'antd',
+      )
+      .forEach(path => {
+        hasChanged = true;
+        localComponentName = path.parent.node.local.name;
+
+        const importDeclaration = path.parent.parent.node;
+        importDeclaration.specifiers = importDeclaration.specifiers.filter(
+          specifier =>
+            !specifier.imported || specifier.imported.name !== 'LocaleProvider',
+        );
+      });
+
+    return hasChanged;
+  }
+
+  // step1. remove LocaleProvider import from antd
+  // step2. add ConfigProvider import from antd
+  // step3. cleanup antd import if empty
+  let hasChanged = false;
+  hasChanged = removeAntdLocaleProviderImport(j, root) || hasChanged;
+
+  if (hasChanged) {
+    if (localComponentName === 'LocaleProvider') {
+      root
+        .findJSXElements(localComponentName)
+        .find(j.JSXIdentifier, {
+          name: localComponentName,
+        })
+        .forEach(nodePath => {
+          nodePath.node.name = 'ConfigProvider';
+
+          addSubmoduleImport(j, root, 'antd', 'ConfigProvider');
+        });
+    } else {
+      addSubmoduleImport(j, root, 'antd', 'ConfigProvider', localComponentName);
+    }
+
+    removeEmptyModuleImport(j, root, 'antd');
+  }
+
+  return hasChanged
+    ? root.toSource(options.printOptions || printOptions)
+    : null;
+};