@oceanbase/codemod 0.2.2 → 0.2.3

package/README.md

@@ -17,7 +17,7 @@ npx -p @oceanbase/codemod codemod src
 
 ### `antd-to-oceanbase-design`
 
-import components and typs from `antd` and `@alipay/bigfish/antd` to `@oceanbase/design`.
+import components and types from `antd` and `@alipay/bigfish/antd` to `@oceanbase/design`.
 
 ```diff
   import React from 'react';
@@ -43,7 +43,7 @@ import components and typs from `antd` and `@alipay/bigfish/antd` to `@oceanbase
 
 ### `obui-to-oceanbase-design-and-ui`
 
-import components and typs from `antd` to `@oceanbase/design` and `@oceanbase/ui`.
+import components and types from `antd` to `@oceanbase/design` and `@oceanbase/ui`.
 
 ```diff
   import React from 'react';
@@ -86,7 +86,7 @@ import `PageContainer` from `@alipay/tech-ui` to `@ant-design/pro-components` an
 
 ### `antd-and-ob-charts-to-oceanbase-charts`
 
-import components and typs from `@ant-design/charts` and `@alipay/ob-charts` to `@oceanbase/charts`.
+import components and types from `@ant-design/charts` and `@alipay/ob-charts` to `@oceanbase/charts`.
 
 ```diff
   import React from 'react';
@@ -118,15 +118,17 @@ import components and typs from `@ant-design/charts` and `@alipay/ob-charts` to
 
 ### `obutil-to-oceanbase-util`
 
-import components and typs from `@alipay/ob-util` to `@oceanbase/util`.
+import utils and hooks from `@alipay/ob-util` to `@oceanbase/util`. Additionally, it will rename `getTableData` to `useTableData` to follow hooks naming conventions.
 
 ```diff
   import React from 'react';
-- import { isNullValue, sortByNumber } from '@alipay/ob-util';
-+ import { isNullValue, sortByNumber } from '@oceanbase/util';
+- import { isNullValue, sortByNumber, getTableData } from '@alipay/ob-util';
++ import { isNullValue, sortByNumber, useTableData } from '@oceanbase/util';
 
   const Demo = () => {
-    return <div />;
+-    const { tableProps } = getTableData(fn, {});
++    const { tableProps } = useTableData(fn, {});
+     return <div />;
   };
 
   export default Demo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "chalk": "^5.3.0",
+    "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
     "find-up": "^4.1.0",
@@ -34,7 +34,7 @@
     "lodash": "^4.17.15",
     "prettier": "^3.0.3",
     "read-pkg-up": "^9.1.0",
-    "semver": "^7.1.3",
+    "semver": "^7.5.4",
     "update-check": "^1.5.4",
     "yargs-parser": "^21.1.1"
   },
@@ -44,5 +44,5 @@
     "enzyme": "^3.0.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "3d55f9a8967c0b20491eb7d154f53db8943c1522"
+  "gitHead": "f1b50fbb012ad65a936b94c23bd64bed3256c1b3"
 }

package/transforms/__testfixtures__/obutil-to-oceanbase-util/getTableData.input.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { getTableData } from '@alipay/ob-util';
+
+const Demo = () => {
+  const { tableProps, refresh } = getTableData({
+    fn: getClusters,
+    params: {
+      configName,
+    },
+    refreshDeps: [],
+    options: {
+      pagePropName: 'pageNo',
+      sizePropName: 'pageSize',
+      formatResult: (res: any) => {
+        const { data, pageNo, pageSize, total } = res || {};
+        return {
+          list: data || [],
+          current: pageNo,
+          pageSize,
+          total,
+        };
+      },
+    },
+  });
+  return <div />;
+};
+
+export default Demo;

package/transforms/__testfixtures__/obutil-to-oceanbase-util/getTableData.output.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTableData } from '@oceanbase/util';
+
+const Demo = () => {
+  const { tableProps, refresh } = useTableData({
+    fn: getClusters,
+    params: {
+      configName,
+    },
+    refreshDeps: [],
+    options: {
+      pagePropName: 'pageNo',
+      sizePropName: 'pageSize',
+      formatResult: (res: any) => {
+        const { data, pageNo, pageSize, total } = res || {};
+        return {
+          list: data || [],
+          current: pageNo,
+          pageSize,
+          total,
+        };
+      },
+    },
+  });
+  return <div />;
+};
+
+export default Demo;

package/transforms/__tests__/obutil-to-oceanbase-util.test.ts

@@ -1,7 +1,7 @@
 import { defineTest } from 'jscodeshift/src/testUtils';
 
 const testUnit = 'obutil-to-oceanbase-util';
-const tests = ['obutil'];
+const tests = ['obutil', 'getTableData'];
 
 describe(testUnit, () => {
   tests.forEach(test =>

package/transforms/obutil-to-oceanbase-util.js

@@ -5,6 +5,15 @@ module.exports = (file, api, options) => {
     ...options,
     fromPkgNames: '@alipay/ob-util',
     toPkgList: [
+      {
+        name: '@oceanbase/util',
+        components: [
+          {
+            // rename
+            getTableData: 'useTableData',
+          },
+        ],
+      },
       {
         name: '@oceanbase/util',
       },

package/transforms/utils/import-component.js

@@ -1,6 +1,8 @@
 const { addSubmoduleImport, removeEmptyModuleImport, parseStrToArray } = require('./index');
 const { markDependency } = require('./marker');
 const { printOptions } = require('./config');
+const { isPlainObject } = require('lodash');
+const { flatten } = require('lodash');
 
 function importComponent(j, root, options) {
   const { fromPkgNames, toPkgList } = options;
@@ -15,11 +17,15 @@ function importComponent(j, root, options) {
     );
     if (fromPkgName) {
       path.value.specifiers.forEach(specifier => {
-        const toPkgByComponents = toPkgList.find(toPkg =>
-          toPkg.components?.includes(specifier.imported.name)
+        const toPkgByComponents = toPkgList.find(
+          toPkg =>
+            toPkg.components?.includes(specifier.imported.name) ||
+            toPkg.components?.find(component => component[specifier.imported.name])
         );
-        const toPkgByTypes = toPkgList.find(toPkg =>
-          toPkg.types?.includes(specifier.imported.name)
+        const toPkgByTypes = toPkgList.find(
+          toPkg =>
+            toPkg.types?.includes(specifier.imported.name) ||
+            toPkg.types?.find(type => type[specifier.imported.name])
         );
         const toPkg = toPkgByComponents || toPkgByTypes;
         if (toPkg) {
@@ -31,13 +37,28 @@ function importComponent(j, root, options) {
             path.value.specifiers = path.value.specifiers.filter(
               item => !item.imported || item.imported.name !== specifier.imported.name
             );
-            // add new imports
+            const renameComponent = toPkg.components?.find(
+              component => component[specifier.imported.name]
+            );
+            const renameType = toPkg.types?.find(type => type[specifier.imported.name]);
+            const rename = renameComponent || renameType;
+            // add and rename new imports
             addSubmoduleImport(j, root, {
               moduleName: toPkg.name,
-              importedName: specifier.imported.name,
+              importedName: rename ? rename[specifier.imported.name] : specifier.imported.name,
               importKind: toPkgByTypes ? 'type' : 'value',
               after: fromPkgName,
             });
+            // rename used part
+            if (rename) {
+              root
+                .find(j.Identifier, {
+                  name: specifier.imported.name,
+                })
+                .forEach(path => {
+                  path.node.name = rename[specifier.imported.name];
+                });
+            }
           }
           markDependency(toPkg.name);
         }