@oceanbase/codemod 0.2.0 → 0.2.1

package/README.md

@@ -64,7 +64,7 @@ import components and typs from `antd` to `@oceanbase/design` and `@oceanbase/ui
   export default Demo;
 ```
 
-### `techui-to-oceanbase-ui`
+### `page-container-to-oceanbase-ui`
 
 import `PageContainer` from `@alipay/tech-ui` to `@ant-design/pro-components` and `@oceanbase/ui`.
 
@@ -84,9 +84,9 @@ import `PageContainer` from `@alipay/tech-ui` to `@ant-design/pro-components` an
   export default Demo;
 ```
 
-### `antd-charts-to-oceanbase-charts`
+### `antd-and-ob-charts-to-oceanbase-charts`
 
-import components and typs from `@ant-design/charts` to `@oceanbase/charts`.
+import components and typs from `@ant-design/charts` and `@alipay/ob-charts` to `@oceanbase/charts`.
 
 ```diff
   import React from 'react';
@@ -102,6 +102,20 @@ import components and typs from `@ant-design/charts` to `@oceanbase/charts`.
   export default Demo;
 ```
 
+```diff
+  import React from 'react';
+- import { Bar, Line } from '@alipay/ob-charts';
+- import type { BarConfig, LineConfig } from '@ant-design/ob-charts';
++ import { Bar, Line } from '@oceanbase/charts';
++ import type { BarConfig, LineConfig } from '@oceanbase/charts';
+
+  const Demo = () => {
+    return <div />;
+  };
+
+  export default Demo;
+```
+
 ### `obutil-to-oceanbase-util`
 
 import components and typs from `@alipay/ob-util` to `@oceanbase/util`.

package/bin/babylon.config.json

@@ -0,0 +1,45 @@
+{
+  "sourceType": "module",
+  "allowImportExportEverywhere": true,
+  "allowReturnOutsideFunction": true,
+  "startLine": 1,
+  "tokens": true,
+  "plugins": [
+    "jsx",
+    "typescript",
+    "asyncGenerators",
+    "bigInt",
+    "classProperties",
+    "classPrivateProperties",
+    "classPrivateMethods",
+    [
+      "decorators",
+      {
+        "decoratorsBeforeExport": true
+      }
+    ],
+    "doExpressions",
+    "dynamicImport",
+    "exportDefaultFrom",
+    "exportExtensions",
+    "exportNamespaceFrom",
+    "functionBind",
+    "functionSent",
+    "importMeta",
+    "logicalAssignment",
+    "nullishCoalescingOperator",
+    "numericSeparator",
+    "objectRestSpread",
+    "optionalCatchBinding",
+    "optionalChaining",
+    [
+      "pipelineOperator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "throwExpressions",
+    "asyncDoExpressions",
+    "topLevelAwait"
+  ]
+}

package/{src/bin → bin}/cli.js

@@ -11,6 +11,9 @@ const updateCheck = require('update-check');
 const findUp = require('find-up');
 const semver = require('semver');
 const { run: jscodeshift } = require('jscodeshift/src/Runner');
+const execa = require('execa');
+const isDirectory = require('is-directory');
+const commandExistsSync = require('command-exists').sync;
 
 const pkg = require('../package.json');
 const pkgUpgradeList = require('./upgrade-list');
@@ -23,9 +26,11 @@ const transformersDir = path.join(__dirname, '../transforms');
 const ignoreConfig = path.join(__dirname, './codemod.ignore');
 
 const transformers = [
+  'antd-and-ob-charts-to-oceanbase-charts',
   'antd-to-oceanbase-design',
-  'obui-to-oceanbase-design',
-  'techui-to-oceanbase-ui',
+  'obui-to-oceanbase-design-and-ui',
+  'obutil-to-oceanbase-util',
+  'page-container-to-oceanbase-ui',
 ];
 
 const dependencyProperties = [
@@ -72,13 +77,19 @@ function getMaxWorkers(options = {}) {
   return options.cpus || Math.max(2, Math.ceil(os.cpus().length / 3));
 }
 
-function getRunnerArgs(transformerPath, parser = 'tsx', options = {}) {
+function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
   const args = {
     verbose: 2,
     // limit usage for cpus
     cpus: getMaxWorkers(options),
     parser,
-    extensions: ['tsx', 'ts', 'jsx', 'js'].join(','),
+    // https://github.com/facebook/jscodeshift/blob/master/src/Runner.js#L255
+    // https://github.com/facebook/jscodeshift/blob/master/src/Worker.js#L50
+    babel: false,
+    // override default babylon parser config to enable `decorator-legacy`
+    // https://github.com/facebook/jscodeshift/blob/master/parser/babylon.js
+    parserConfig: require('./babylon.config.json'),
+    extensions: ['js', 'jsx', 'ts', 'tsx', 'd.ts'].join(','),
     transform: transformerPath,
     ignorePattern: '**/node_modules',
     ignoreConfig,
@@ -89,7 +100,7 @@ function getRunnerArgs(transformerPath, parser = 'tsx', options = {}) {
 
 async function run(filePath, args = {}) {
   for (const transformer of transformers) {
-    await transform(transformer, 'tsx', filePath, args);
+    await transform(transformer, 'babylon', filePath, args);
   }
 }
 
@@ -108,6 +119,7 @@ async function transform(transformer, parser, filePath, options) {
 
     // js part
     await jscodeshift(transformerPath, [filePath], args);
+    console.log();
   } catch (err) {
     console.error(err);
     if (process.env.NODE_ENV === 'local') {
@@ -195,10 +207,14 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
 
   console.log(
     chalk.yellow(
-      "It's recommended to install or upgrade these dependencies to ensure working well with oceanbase design system\n"
+      'It will install or upgrade these dependencies to ensure working well with oceanbase design system\n'
     )
   );
-  console.log(`> package.json file:  ${pkgJsonPath} \n`);
+  console.log(`> Update package.json file: ${pkgJsonPath} \n`);
+  const npmCommand = commandExistsSync('tnpm') ? 'tnpm' : 'npm';
+
+  // install dependencies
+  console.log(`New package installing...\n`);
   const dependencies = result.map(([operateType, depName, expectVersion, dependencyProperty]) =>
     [
       _.capitalize(operateType),
@@ -206,18 +222,37 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
       dependencyProperty ? `in ${dependencyProperty}` : '',
     ].join(' ')
   );
-
   console.log(dependencies.map(n => `* ${n}`).join('\n'));
+  console.log('\n');
+  const installDependencies = result.map(([_, depName, expectVersion]) =>
+    expectVersion ? `${depName}@${expectVersion}` : depName
+  );
+  await execa(npmCommand, ['install', ...installDependencies, '--save'], {
+    stdio: 'inherit',
+  });
+  console.log(`\nNew package installed!\n`);
+
+  // uninstall dependencies
+  console.log(`Deprecated package uninstalling...\n`);
+  const uninstallDependencies = ['@alipay/ob-ui', '@alipay/ob-util', '@alipay/ob-charts'];
+  console.log(uninstallDependencies.map(n => `* ${n}`).join('\n'));
+  console.log('\n');
+  await execa(npmCommand, ['uninstall', ...uninstallDependencies, '--save'], {
+    stdio: 'inherit',
+  });
+  console.log(`\nDeprecated package uninstalled!\n`);
 }
 
 /**
  * options
- * --force   // force skip git checking (dangerously)
- * --cpus=1  // specify cpus cores to use
+ * --force             // force skip git checking (dangerously)
+ * --cpus=1            // specify cpus cores to use
+ * --disablePrettier   // disable prettier
  */
 
 async function bootstrap() {
   const dir = process.argv[2];
+
   // eslint-disable-next-line global-require
   const args = require('yargs-parser')(process.argv.slice(3));
   if (process.env.NODE_ENV !== 'local') {
@@ -246,13 +281,27 @@ async function bootstrap() {
 
   await run(dir, args);
 
+  if (!args.disablePrettier) {
+    console.log('----------- Prettier Format -----------\n');
+    console.log('[Prettier] format files running...');
+    try {
+      const isDir = isDirectory.sync(dir);
+      const path = isDir ? '**/*.{js,jsx,tsx,ts,d.ts}' : dir;
+      const npxCommand = commandExistsSync('tnpx') ? 'tnpx' : 'npx';
+      await execa(npxCommand, ['prettier', '--write', path], { stdio: 'inherit' });
+      console.log('\n[Prettier] format files completed!\n');
+    } catch (err) {
+      console.log('\n[Prettier] format files failed, please format it by yourself.\n', err);
+    }
+  }
+
   try {
-    console.log('----------- dependencies alert -----------\n');
+    console.log('----------- Dependencies Alert -----------\n');
     const depsList = await getDependencies();
     await upgradeDetect(
       dir,
-      depsList.includes('@ant-design/charts'),
-      depsList.includes('@alipay/ob-util')
+      depsList.includes('@oceanbase/charts'),
+      depsList.includes('@oceanbase/util')
     );
   } catch (err) {
     console.log('skip summary due to', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -24,11 +24,15 @@
   },
   "dependencies": {
     "chalk": "^3.0.0",
+    "command-exists": "^1.2.9",
+    "execa": "^5.1.1",
     "find-up": "^4.1.0",
     "glob": "^8.0.3",
+    "is-directory": "^0.3.1",
     "is-git-clean": "^1.1.0",
     "jscodeshift": "^0.14.0",
     "lodash": "^4.17.15",
+    "prettier": "^3.0.3",
     "read-pkg-up": "^9.1.0",
     "semver": "^7.1.3",
     "update-check": "^1.5.3",
@@ -40,5 +44,5 @@
     "enzyme": "^3.0.0",
     "enzyme-to-json": "^3.4.0"
   },
-  "gitHead": "6f801e95ba5ddc345f6d2c462bcf2af1abc74c84"
+  "gitHead": "489ec76ca21b3a0448dae92fc001f2b03a4bf053"
 }

package/{src/transforms/__testfixtures__/antd-charts-to-oceanbase-charts/antd-charts.input.tsx → transforms/__testfixtures__/antd-and-ob-charts-to-oceanbase-charts/antd-charts.input.js}

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as Charts from '@ant-design/charts';
 import { Bar, Line } from '@ant-design/charts';
 import type { BarConfig, LineConfig } from '@ant-design/charts';
 

package/{src/transforms/__testfixtures__/antd-charts-to-oceanbase-charts/antd-charts.output.tsx → transforms/__testfixtures__/antd-and-ob-charts-to-oceanbase-charts/antd-charts.output.js}

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as Charts from '@oceanbase/charts';
 import { Bar, Line } from '@oceanbase/charts';
 import type { BarConfig, LineConfig } from '@oceanbase/charts';
 

package/transforms/__testfixtures__/antd-and-ob-charts-to-oceanbase-charts/ob-charts.input.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as Charts from '@alipay/ob-charts';
+import { Bar, Line } from '@alipay/ob-charts';
+import type { BarConfig, LineConfig } from '@alipay/ob-charts';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/transforms/__testfixtures__/antd-and-ob-charts-to-oceanbase-charts/ob-charts.output.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as Charts from '@oceanbase/charts';
+import { Bar, Line } from '@oceanbase/charts';
+import type { BarConfig, LineConfig } from '@oceanbase/charts';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/{src/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.input.tsx → transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.input.js}

@@ -3,6 +3,8 @@ 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';
+import { Action } from '@alipay/ob-ui-v1';
+import type { ActionProps } from '@alipay/ob-ui-v1/es/Action';
 
 const Demo = () => {
   return <div />;

package/{src/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.output.tsx → transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.output.js}

@@ -4,6 +4,8 @@ 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';
+import { Action } from '@alipay/ob-ui-v1';
+import type { ActionProps } from '@alipay/ob-ui-v1/es/Action';
 
 const Demo = () => {
   return <div />;

package/{src/transforms/__testfixtures__/techui-to-oceanbase-ui/pro-components.output.tsx → transforms/__testfixtures__/page-container-to-oceanbase-ui/pro-components.output.js}

@@ -2,6 +2,7 @@ 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 = () => {

package/{src/transforms/__testfixtures__/techui-to-oceanbase-ui/techui.output.tsx → transforms/__testfixtures__/page-container-to-oceanbase-ui/techui.output.js}

@@ -2,6 +2,7 @@ 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 = () => {

package/{src/transforms/__tests__/antd-charts-to-oceanbase-charts.test.ts → transforms/__tests__/antd-and-ob-charts-to-oceanbase-charts.test.ts}

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

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

@@ -5,6 +5,6 @@ const tests = ['antd', 'bigfish-antd'];
 
 describe(testUnit, () => {
   tests.forEach(test =>
-    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'babylon' })
   );
 });

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

@@ -5,6 +5,6 @@ const tests = ['obui'];
 
 describe(testUnit, () => {
   tests.forEach(test =>
-    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'babylon' })
   );
 });

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

@@ -5,6 +5,6 @@ const tests = ['obutil'];
 
 describe(testUnit, () => {
   tests.forEach(test =>
-    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'tsx' })
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'babylon' })
   );
 });

package/{src/transforms/__tests__/techui-to-oceanbase-ui.test.ts → transforms/__tests__/page-container-to-oceanbase-ui.test.ts}

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

package/transforms/antd-and-ob-charts-to-oceanbase-charts.js

@@ -0,0 +1,13 @@
+const importComponent = require('./utils/import-component');
+
+module.exports = (file, api, options) => {
+  return importComponent(file, api, {
+    ...options,
+    fromPkgNames: '@ant-design/charts,@alipay/ob-charts',
+    toPkgList: [
+      {
+        name: '@oceanbase/charts',
+      },
+    ],
+  });
+};

package/{src/transforms → transforms}/antd-to-oceanbase-design.js

@@ -1,8 +1,5 @@
 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,

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

@@ -1,8 +1,5 @@
 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,

package/{src/transforms → transforms}/obutil-to-oceanbase-util.js

@@ -1,7 +1,5 @@
 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,

package/{src/transforms/techui-to-oceanbase-ui.js → transforms/page-container-to-oceanbase-ui.js}

@@ -1,8 +1,5 @@
 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,

package/transforms/utils/config.js

@@ -0,0 +1,8 @@
+// https://github.com/benjamn/recast/blob/master/lib/options.ts
+const printOptions = {
+  quote: 'single',
+};
+
+module.exports = {
+  printOptions,
+};

package/{src/transforms → transforms}/utils/import-component.js

@@ -1,20 +1,19 @@
 const { addSubmoduleImport, removeEmptyModuleImport, parseStrToArray } = require('./index');
+const { markDependency } = require('./marker');
 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)
-      );
+  root.find(j.ImportDeclaration).forEach(path => {
+    hasChanged = true;
+    const fromPkgName = fromPkgNames.find(
+      fromPkgName =>
+        fromPkgName === path.value.source.value ||
+        new RegExp(`${fromPkgName}/(es|lib|locale)/`).test(path.value.source.value)
+    );
+    if (fromPkgName) {
       path.value.specifiers.forEach(specifier => {
         const toPkgByComponents = toPkgList.find(toPkg =>
           toPkg.components?.includes(specifier.imported.name)
@@ -25,7 +24,7 @@ function importComponent(j, root, options) {
         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)) {
+          if (new RegExp(`${fromPkgName}/(es|lib|locale)/`).test(path.value.source.value)) {
             path.value.source.value = path.value.source.value?.replace(fromPkgName, toPkg.name);
           } else {
             // remove old imports
@@ -40,6 +39,7 @@ function importComponent(j, root, options) {
               after: fromPkgName,
             });
           }
+          markDependency(toPkg.name);
         }
       });
       if (path.value.specifiers.length > 0) {
@@ -47,9 +47,11 @@ function importComponent(j, root, options) {
         const toPkg = toPkgList.find(toPkg => !toPkg.components);
         if (toPkg) {
           path.value.source.value = path.value.source.value?.replace(fromPkgName, toPkg.name);
+          markDependency(toPkg.name);
         }
       }
-    });
+    }
+  });
 
   return hasChanged;
 }

package/{src/transforms → transforms}/utils/marker.js

@@ -10,7 +10,9 @@ const markerPath = path.join(
 const newline = '\n';
 
 function ensureFile() {
-  return fs.openSync(markerPath, 'w');
+  if (!fs.existsSync(markerPath)) {
+    fs.openSync(markerPath, 'w');
+  }
 }
 
 async function cleanup() {

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

@@ -1,17 +0,0 @@
-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/utils/config.js

@@ -1,11 +0,0 @@
-// 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,
-};