@oceanbase/codemod 0.2.0

package/src/transforms/__testfixtures__/antd-to-oceanbase-design/antd.output.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  // Genaral
+  Button,
+  FloatButton,
+  Typography,
+  // Layout
+  Divider,
+  Grid,
+  Layout,
+  Space,
+  // Navigation
+  Anchor,
+  Breadcrumb,
+  Dropdown,
+  Menu,
+  Pagination,
+  Steps,
+  // Data Entry
+  AutoComplete,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Mentions,
+  Radio,
+  Rate,
+  Select,
+  Slider,
+  Switch,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  // Data Display
+  Avatar,
+  Badge,
+  Calendar,
+  Card,
+  Carousel,
+  Callapse,
+  Descripions,
+  Empty,
+  Image,
+  List,
+  Popover,
+  QRCode,
+  Segmented,
+  Statistic,
+  Table,
+  Tabs,
+  Tag,
+  Timeline,
+  Tooltip,
+  Tour,
+  Tree,
+  // Feedback
+  Alert,
+  Drawer,
+  message,
+  Modal,
+  notification,
+  Popconfirm,
+  Progress,
+  Result,
+  Skeleton,
+  Spin,
+  Watermark,
+  // Other
+  Affix,
+  App,
+  ConfigProvider,
+  // Theme
+  theme,
+} from '@oceanbase/design';
+// type
+import type { ButtonProps, CardProps } from '@oceanbase/design';
+// es
+import type { ModalProps } from '@oceanbase/design/es/modal';
+import type { Route } from '@oceanbase/design/es/breadcrumb/Breadcrumb';
+// lib
+import type { TooltipProps } from '@oceanbase/design/lib/tooltip';
+import type { FilterDropdownProps } from '@oceanbase/design/lib/table/interface';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/antd-to-oceanbase-design/bigfish-antd.input.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  // Genaral
+  Button,
+  FloatButton,
+  Typography,
+  // Layout
+  Divider,
+  Grid,
+  Layout,
+  Space,
+  // Navigation
+  Anchor,
+  Breadcrumb,
+  Dropdown,
+  Menu,
+  Pagination,
+  Steps,
+  // Data Entry
+  AutoComplete,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Mentions,
+  Radio,
+  Rate,
+  Select,
+  Slider,
+  Switch,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  // Data Display
+  Avatar,
+  Badge,
+  Calendar,
+  Card,
+  Carousel,
+  Callapse,
+  Descripions,
+  Empty,
+  Image,
+  List,
+  Popover,
+  QRCode,
+  Segmented,
+  Statistic,
+  Table,
+  Tabs,
+  Tag,
+  Timeline,
+  Tooltip,
+  Tour,
+  Tree,
+  // Feedback
+  Alert,
+  Drawer,
+  message,
+  Modal,
+  notification,
+  Popconfirm,
+  Progress,
+  Result,
+  Skeleton,
+  Spin,
+  Watermark,
+  // Other
+  Affix,
+  App,
+  ConfigProvider,
+  // Theme
+  theme,
+} from '@alipay/bigfish/antd';
+// type
+import type { ButtonProps, CardProps } from '@alipay/bigfish/antd';
+// es
+import type { ModalProps } from 'antd/es/modal';
+import type { Route } from 'antd/es/breadcrumb/Breadcrumb';
+// lib
+import type { TooltipProps } from 'antd/lib/tooltip';
+import type { FilterDropdownProps } from 'antd/lib/table/interface';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/antd-to-oceanbase-design/bigfish-antd.output.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  // Genaral
+  Button,
+  FloatButton,
+  Typography,
+  // Layout
+  Divider,
+  Grid,
+  Layout,
+  Space,
+  // Navigation
+  Anchor,
+  Breadcrumb,
+  Dropdown,
+  Menu,
+  Pagination,
+  Steps,
+  // Data Entry
+  AutoComplete,
+  Cascader,
+  Checkbox,
+  ColorPicker,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Mentions,
+  Radio,
+  Rate,
+  Select,
+  Slider,
+  Switch,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  // Data Display
+  Avatar,
+  Badge,
+  Calendar,
+  Card,
+  Carousel,
+  Callapse,
+  Descripions,
+  Empty,
+  Image,
+  List,
+  Popover,
+  QRCode,
+  Segmented,
+  Statistic,
+  Table,
+  Tabs,
+  Tag,
+  Timeline,
+  Tooltip,
+  Tour,
+  Tree,
+  // Feedback
+  Alert,
+  Drawer,
+  message,
+  Modal,
+  notification,
+  Popconfirm,
+  Progress,
+  Result,
+  Skeleton,
+  Spin,
+  Watermark,
+  // Other
+  Affix,
+  App,
+  ConfigProvider,
+  // Theme
+  theme,
+} from '@oceanbase/design';
+// type
+import type { ButtonProps, CardProps } from '@oceanbase/design';
+// es
+import type { ModalProps } from '@oceanbase/design/es/modal';
+import type { Route } from '@oceanbase/design/es/breadcrumb/Breadcrumb';
+// lib
+import type { TooltipProps } from '@oceanbase/design/lib/tooltip';
+import type { FilterDropdownProps } from '@oceanbase/design/lib/table/interface';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.input.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert, Button, BasicLayout, Login, PageContainer } from '@alipay/ob-ui';
+import type { BasicLayoutProps } from '@alipay/ob-ui/es/BasicLayout';
+import type { LoginProps } from '@alipay/ob-ui/es/Login';
+import type { PageContainerProps } from '@alipay/ob-ui/es/PageContainer';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.output.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert, Button } from '@oceanbase/design';
+import { BasicLayout, Login, PageContainer } from '@oceanbase/ui';
+import type { BasicLayoutProps } from '@oceanbase/ui/es/BasicLayout';
+import type { LoginProps } from '@oceanbase/ui/es/Login';
+import type { PageContainerProps } from '@oceanbase/ui/es/PageContainer';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/obutil-to-oceanbase-util/obutil.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { isNullValue, sortByNumber } from '@alipay/ob-util';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/obutil-to-oceanbase-util/obutil.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { isNullValue, sortByNumber } from '@oceanbase/util';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/techui-to-oceanbase-ui/pro-components.input.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PageContainer, ProTable } from '@ant-design/pro-components';
+import type { PageContainerProps, ProTableProps } from '@ant-design/pro-components';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/techui-to-oceanbase-ui/pro-components.output.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ProTable } from '@ant-design/pro-components';
+import { PageContainer } from '@oceanbase/ui';
+import type { ProTableProps } from '@ant-design/pro-components';
+import type { PageContainerProps } from '@oceanbase/ui';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/techui-to-oceanbase-ui/techui.input.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PageContainer, ProTable, WelcomeCard } from '@alipay/tech-ui';
+import type { PageContainerProps, ProTableProps, WelcomeCardProps } from '@alipay/tech-ui';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__testfixtures__/techui-to-oceanbase-ui/techui.output.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ProTable, WelcomeCard } from '@alipay/tech-ui';
+import { PageContainer } from '@oceanbase/ui';
+import type { ProTableProps, WelcomeCardProps } from '@alipay/tech-ui';
+import type { PageContainerProps } from '@oceanbase/ui';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/src/transforms/__tests__/antd-charts-to-oceanbase-charts.test.ts

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'antd-charts-to-oceanbase-charts';
+const tests = ['antd-charts'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+  );
+});

package/src/transforms/__tests__/antd-to-oceanbase-design.test.ts

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'antd-to-oceanbase-design';
+const tests = ['antd', 'bigfish-antd'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+  );
+});

package/src/transforms/__tests__/obui-to-oceanbase-design-and-ui.test.ts

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'obui-to-oceanbase-design-and-ui';
+const tests = ['obui'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+  );
+});

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

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'obutil-to-oceanbase-util';
+const tests = ['obutil'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+  );
+});

package/src/transforms/__tests__/techui-to-oceanbase-ui.test.ts

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'techui-to-oceanbase-ui';
+const tests = ['techui', 'pro-components'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+  );
+});

package/src/transforms/antd-charts-to-oceanbase-charts.js

@@ -0,0 +1,17 @@
+const importComponent = require('./utils/import-component');
+
+// from1: import { Line } from '@ant-design/charts';
+// from2: import type { LineConfig } from '@ant-design/charts';
+// to1: import { Line } from '@ant-design/charts';
+// from2: import type { LineConfig } from '@ant-design/charts';
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    fromPkgNames: '@ant-design/charts',
+    toPkgList: [
+      {
+        name: '@oceanbase/charts',
+      },
+    ],
+  });
+};

package/src/transforms/antd-to-oceanbase-design.js

@@ -0,0 +1,17 @@
+const importComponent = require('./utils/import-component');
+
+// from1: import { Button } from 'antd';
+// from2: import { Button } from '@alipay/bigfish/antd';
+// to: import { Button } from '@oceanbase/design';
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    // order: @alipay/bigfish/antd -> antd
+    fromPkgNames: '@alipay/bigfish/antd,antd',
+    toPkgList: [
+      {
+        name: '@oceanbase/design',
+      },
+    ],
+  });
+};

package/src/transforms/obui-to-oceanbase-design-and-ui.js

@@ -0,0 +1,50 @@
+const importComponent = require('./utils/import-component');
+
+// from: import { Button, BasicLayout } from '@alipay/ob-ui';
+// to1: import { Button } from '@oceanbase/design';
+// to2: import { BasicLayout } from '@oceanbase/ui';
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    fromPkgNames: '@alipay/ob-ui',
+    // order: @oceanbase/ui -> @oceanbase/design
+    toPkgList: [
+      {
+        name: '@oceanbase/ui',
+        components: [
+          'PageContainer',
+          'Action',
+          'BackgroundTaskManager',
+          'BasicLayout',
+          'BatchOperationBar',
+          'Boundary',
+          'ContentWithQuestion',
+          'Dialog',
+          'DocDialog',
+          'GraphToolbar',
+          'Login',
+          'Lottie',
+          'NavMenu',
+        ],
+        types: [
+          'PageContainerProps',
+          'ActionProps',
+          'BackgroundTaskManagerProps',
+          'BasicLayoutProps',
+          'BatchOperationBarProps',
+          'BoundaryProps',
+          'ContentWithQuestionProps',
+          'DialogProps',
+          'DocDialogProps',
+          'GraphToolbarProps',
+          'LoginProps',
+          'LottieProps',
+          'NavMenuProps',
+        ],
+      },
+      {
+        name: '@oceanbase/design',
+      },
+    ],
+  });
+};

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

@@ -0,0 +1,15 @@
+const importComponent = require('./utils/import-component');
+
+// from: import { isNullValue, sortByNumber } from '@alipay/ob-util';
+// to: import { isNullValue, sortByNumber } from '@oceanbase/util';
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    fromPkgNames: '@alipay/ob-util',
+    toPkgList: [
+      {
+        name: '@oceanbase/util',
+      },
+    ],
+  });
+};

package/src/transforms/techui-to-oceanbase-ui.js

@@ -0,0 +1,18 @@
+const importComponent = require('./utils/import-component');
+
+// from1: import { PageContainer } from '@alipay/tech-ui';
+// from2: import { PageContainer } from '@ant-design/pro-components';
+// to: import { PageContainer } from '@oceanbase/ui';
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    fromPkgNames: '@alipay/tech-ui,@ant-design/pro-components',
+    toPkgList: [
+      {
+        name: '@oceanbase/ui',
+        components: ['PageContainer'],
+        types: ['PageContainerProps'],
+      },
+    ],
+  });
+};

package/src/transforms/utils/config.js

@@ -0,0 +1,11 @@
+// https://github.com/benjamn/recast/blob/master/lib/options.ts
+const printOptions = {
+  quote: 'single',
+  // remove extra empty line for insertAfter
+  // ref: https://github.com/benjamn/recast/issues/371#issuecomment-565786863
+  reuseWhitespace: false,
+};
+
+module.exports = {
+  printOptions,
+};

package/src/transforms/utils/import-component.js

@@ -0,0 +1,72 @@
+const { addSubmoduleImport, removeEmptyModuleImport, parseStrToArray } = require('./index');
+const { printOptions } = require('./config');
+
+function importComponent(j, root, options) {
+  const { fromPkgNames, toPkgList } = options;
+  let hasChanged = false;
+
+  root
+    .find(j.ImportDeclaration)
+    .filter(path =>
+      fromPkgNames.some(fromPkgName => new RegExp(fromPkgName).test(path.value.source.value))
+    )
+    .forEach(path => {
+      hasChanged = true;
+      const fromPkgName = fromPkgNames.find(fromPkgName =>
+        new RegExp(fromPkgName).test(path.value.source.value)
+      );
+      path.value.specifiers.forEach(specifier => {
+        const toPkgByComponents = toPkgList.find(toPkg =>
+          toPkg.components?.includes(specifier.imported.name)
+        );
+        const toPkgByTypes = toPkgList.find(toPkg =>
+          toPkg.types?.includes(specifier.imported.name)
+        );
+        const toPkg = toPkgByComponents || toPkgByTypes;
+        if (toPkg) {
+          // replace to toPkg for xxx/es/xxx、xxx/lib/xxx
+          if (new RegExp(`${fromPkgName}/(es|lib)/`).test(path.value.source.value)) {
+            path.value.source.value = path.value.source.value?.replace(fromPkgName, toPkg.name);
+          } else {
+            // remove old imports
+            path.value.specifiers = path.value.specifiers.filter(
+              item => !item.imported || item.imported.name !== specifier.imported.name
+            );
+            // add new imports
+            addSubmoduleImport(j, root, {
+              moduleName: toPkg.name,
+              importedName: specifier.imported.name,
+              importKind: toPkgByTypes ? 'type' : 'value',
+              after: fromPkgName,
+            });
+          }
+        }
+      });
+      if (path.value.specifiers.length > 0) {
+        // replace to toPkg when specifiers still not empty
+        const toPkg = toPkgList.find(toPkg => !toPkg.components);
+        if (toPkg) {
+          path.value.source.value = path.value.source.value?.replace(fromPkgName, toPkg.name);
+        }
+      }
+    });
+
+  return hasChanged;
+}
+
+module.exports = (file, api, options) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const fromPkgNames = parseStrToArray(options.fromPkgNames || 'antd');
+
+  let hasChanged = false;
+  hasChanged = importComponent(j, root, { ...options, fromPkgNames }) || hasChanged;
+
+  if (hasChanged) {
+    fromPkgNames.forEach(fromPkgName => {
+      removeEmptyModuleImport(j, root, fromPkgName);
+    });
+  }
+
+  return hasChanged ? root.toSource(options.printOptions || printOptions) : null;
+};