@oceanbase/codemod 0.4.13 → 0.4.14

package/README.md

@@ -19,6 +19,7 @@ npx -p @oceanbase/codemod codemod src
 # options
 # --transformer=t1,t2     // run specify transformers
 # --disablePrettier       // disable prettier
+# --ignore-config         // ignore config file
 ```
 
 Run specific transformers:
@@ -27,6 +28,23 @@ Run specific transformers:
 npx -p @oceanbase/codemod codemod src --transformer=style-to-token,less-to-token
 ```
 
+Ignore config file:
+
+```shell
+npx -p @oceanbase/codemod codemod src --ignore-config=.codemodignore
+```
+
+- `.codemodignore`:
+
+```bash
+node_modules
+*.css
+*.json
+.umi
+.umi-production
+.umi-test
+```
+
 ## Codemod transformers introduction
 
 ### `antd-to-oceanbase-design`

package/bin/cli.js

@@ -94,7 +94,7 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
     extensions: ['js', 'jsx', 'ts', 'tsx'].join(','),
     transform: transformerPath,
     ignorePattern: '**/node_modules',
-    ignoreConfig,
+    ignoreConfig: options.ignoreConfig || ignoreConfig,
   };
 
   return args;
@@ -257,6 +257,7 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
  * --cpus=1              // specify cpus cores to use
  * --disablePrettier     // disable prettier
  * --transformer=t1,t2   // specify target transformer
+ * --ignore-config       // ignore config file
  */
 
 async function bootstrap() {

package/bin/codemod.ignore

@@ -1,9 +1,6 @@
 node_modules
 *.css
 *.json
-*.less
-*.sass
-*.scss
 .umi
 .umi-production
 .umi-test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^0.4.13",
+    "@oceanbase/design": "^0.4.14",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
@@ -47,5 +47,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "2d9213d7c374b9dc207ebd40663f1c50828e72b7"
+  "gitHead": "e5b9f06614070e38c9d6a77244da2320679e3ffa"
 }

package/transforms/__testfixtures__/style-to-token/antd-style.input.js

@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+const useStyle1 = createStyles(() => {
+  return {
+    main: {
+      background: '#1890ff',
+    },
+  };
+});
+
+const useStyle2 = createStyles(({}) => {
+  return {
+    main: {
+      background: '#1890ff',
+    },
+  };
+});
+
+const useStyle3 = createStyles(({ token }) => {
+  return {
+    main: {
+      background: '#1890ff',
+    },
+  };
+});
+
+export { useStyle1, useStyle2, useStyle3 };

package/transforms/__testfixtures__/style-to-token/antd-style.output.js

@@ -0,0 +1,33 @@
+import { createStyles } from 'antd-style';
+
+const useStyle1 = createStyles((
+  {
+    token
+  }
+) => {
+  return {
+    main: {
+      background: token.colorInfo,
+    },
+  };
+});
+
+const useStyle2 = createStyles(({
+  token
+}) => {
+  return {
+    main: {
+      background: token.colorInfo,
+    },
+  };
+});
+
+const useStyle3 = createStyles(({ token }) => {
+  return {
+    main: {
+      background: token.colorInfo,
+    },
+  };
+});
+
+export { useStyle1, useStyle2, useStyle3 };

package/transforms/__tests__/style-to-token.test.ts

@@ -11,6 +11,7 @@ const tests = [
   'existed-useToken',
   'top-identifier',
   'case-insensitive',
+  'antd-style',
 ];
 
 describe(testUnit, () => {

package/transforms/style-to-token.js

@@ -36,6 +36,12 @@ function isFirstUpperCase(str) {
   return upperFirst(str) === str;
 }
 
+// ref: https://github.com/facebook/jscodeshift/issues/403#issuecomment-991759561
+function shorthandProperty(property) {
+  property.shorthand = true;
+  return property;
+}
+
 function importComponent(j, root, options) {
   let hasChanged = false;
 
@@ -83,6 +89,7 @@ function importComponent(j, root, options) {
               : parentType === 'ArrowFunctionExpression'
                 ? path.parentPath.parentPath?.value?.id?.name
                 : undefined;
+          const calleeName = path.parentPath.parentPath?.parentPath?.value?.callee?.name;
           if (
             includeJSXElement &&
             functionName &&
@@ -101,6 +108,45 @@ function importComponent(j, root, options) {
                 importKind: 'value',
               });
             }
+          }
+          // antd-style createStyles
+          else if (parentType === 'ArrowFunctionExpression' && calleeName === 'createStyles') {
+            const arrowFunc = path.parentPath?.parentPath?.value?.[0];
+            if (arrowFunc && arrowFunc.type === 'ArrowFunctionExpression') {
+              let hasToken = false;
+              if (arrowFunc.params.length > 0) {
+                const param = arrowFunc.params[0];
+                if (param.type === 'ObjectPattern') {
+                  hasToken = param.properties.some(
+                    p => p.type === 'ObjectProperty' && p.key && p.key.name === 'token'
+                  );
+                  // 如果参数对象中没有 token 属性，则插入 token 属性
+                  if (!hasToken) {
+                    param.properties.push(
+                      shorthandProperty(
+                        j.property('init', j.identifier('token'), j.identifier('token'))
+                      )
+                    );
+                  }
+                } else {
+                  // 如果参数不是对象结构，则替换为 { token }
+                  arrowFunc.params[0] = j.objectPattern([
+                    shorthandProperty(
+                      j.property('init', j.identifier('token'), j.identifier('token'))
+                    ),
+                  ]);
+                }
+              } else {
+                // 如果没有参数，则插入 { token }
+                arrowFunc.params = [
+                  j.objectPattern([
+                    shorthandProperty(
+                      j.property('init', j.identifier('token'), j.identifier('token'))
+                    ),
+                  ]),
+                ];
+              }
+            }
           } else {
             // React class component and static file (not react component)
             // import `token` from @oceanbase/design