Merge pull request #241 from oceanbase/dengfuping-dev

fix(codemod): style-to-token should import token for normal statement

packages/codemod/bin/cli.js

@@ -91,7 +91,7 @@ function getRunnerArgs(transformerPath, parser = 'babylon', options = {}) {
     // 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(','),
+    extensions: ['js', 'jsx', 'ts', 'tsx'].join(','),
     transform: transformerPath,
     ignorePattern: '**/node_modules',
     ignoreConfig,
@@ -291,7 +291,7 @@ async function bootstrap() {
     console.log('[Prettier] format files running...');
     try {
       const isDir = isDirectory.sync(dir);
-      const targetPath = isDir ? path.join(dir, '**/*.{js,jsx,ts,tsx,d.ts}') : dir;
+      const targetPath = isDir ? path.join(dir, '**/*.{js,jsx,ts,tsx}') : dir;
       const npxCommand = commandExistsSync('tnpx') ? 'tnpx' : 'npx';
       await execa(npxCommand, ['prettier', '--write', targetPath], { stdio: 'inherit' });
       console.log('\n[Prettier] format files completed!\n');

packages/codemod/transforms/__testfixtures__/style-to-token/static.input.js → packages/codemod/transforms/__testfixtures__/style-to-token/block-statement.input.js

@@ -1,14 +1,3 @@
-const color = '#fafafa';
-const border = '1px solid #fafafa';
-
-const colorMap = {
-  info: '#1890ff',
-  success: '#52c41a',
-  warning: '#faad14',
-  error: '#ff4D4F',
-  border: '1px solid #d9d9d9',
-};
-
 function getColorList() {
   return [
     {

packages/codemod/transforms/__testfixtures__/style-to-token/static.output.js → packages/codemod/transforms/__testfixtures__/style-to-token/block-statement.output.js

@@ -1,15 +1,4 @@
 import { token } from '@oceanbase/design';
-const color = token.colorBgLayout;
-const border = `1px solid ${token.colorBgLayout}`;
-
-const colorMap = {
-  info: token.colorInfo,
-  success: token.colorSuccess,
-  warning: token.colorWarning,
-  error: token.colorError,
-  border: `1px solid ${token.colorBorder}`,
-};
-
 function getColorList() {
   return [
     {

packages/codemod/transforms/__testfixtures__/style-to-token/statement.input.js

@@ -0,0 +1,10 @@
+const color = '#fafafa';
+const border = '1px solid #fafafa';
+
+const colorMap = {
+  info: '#1890ff',
+  success: '#52c41a',
+  warning: '#faad14',
+  error: '#ff4D4F',
+  border: '1px solid #d9d9d9',
+};

packages/codemod/transforms/__testfixtures__/style-to-token/statement.output.js

@@ -0,0 +1,11 @@
+import { token } from '@oceanbase/design';
+const color = token.colorBgLayout;
+const border = `1px solid ${token.colorBgLayout}`;
+
+const colorMap = {
+  info: token.colorInfo,
+  success: token.colorSuccess,
+  warning: token.colorWarning,
+  error: token.colorError,
+  border: `1px solid ${token.colorBorder}`,
+};

packages/codemod/transforms/__tests__/style-to-token.test.ts

@@ -2,11 +2,12 @@ import { defineTest } from 'jscodeshift/src/testUtils';
 
 const testUnit = 'style-to-token';
 const tests = [
-  'function-component',
-  'class-component',
-  'static',
-  'multiple-block-statement',
-  'existed-useToken',
+  // 'function-component',
+  // 'class-component',
+  // 'block-statement',
+  // 'nested-block-statement',
+  // 'existed-useToken',
+  'statement',
 ];
 
 describe(testUnit, () => {

packages/codemod/transforms/style-to-token.js

@@ -7,6 +7,23 @@ function isTopBlockStatement(path) {
   let isTop = isBlockStatement && true;
   path = path.parentPath;
   while (isTop && path.value.type !== 'Program') {
+    // isTopBlockStatement => not wrapped by BlockStatement
+    if (path.value.type === 'BlockStatement') {
+      isTop = false;
+      break;
+    }
+    path = path.parentPath;
+  }
+  return isTop;
+}
+
+function isTopStatement(path) {
+  // VariableDeclaration and other XXXStatement is Statement also, so can't judge Statement simplely by `path.value.type`
+  // should filter by `find(j.Statement)` in advance
+  let isTop = true;
+  path = path.parentPath;
+  while (isTop && path.value.type !== 'Program') {
+    // isTopStatement => not wrapped by BlockStatement
     if (path.value.type === 'BlockStatement') {
       isTop = false;
       break;
@@ -43,25 +60,27 @@ function importComponent(j, root, options) {
 
     root
       .find(j.BlockStatement)
+      // avoid duplicate insert for nested block statement
       .filter(path => isTopBlockStatement(path))
       .forEach(path => {
         const includeToken =
           j(path).find(j.Identifier, {
             name: name => name?.includes('token.'),
           }).length > 0;
         if (includeToken) {
-          const includeJsxElementList = j(path).find(j.JSXElement).length > 0;
+          const includeJSXElement = j(path).find(j.JSXElement).length > 0;
           const includeUseTokenStatement =
             j(path).find(j.Identifier, {
               name: name => name.includes('useToken'),
             }).length > 0;
           const parentType = path.parentPath.value?.type;
           // React function component
-          if (includeJsxElementList && parentType !== 'ClassMethod') {
+          if (includeJSXElement && parentType !== 'ClassMethod') {
+            // avoid duplicate insert when it's existed
             if (!includeUseTokenStatement) {
-              const importString = 'const { token } = theme.useToken()';
+              const insertString = 'const { token } = theme.useToken()';
               // insert `const { token } = theme.useToken()`
-              path.get('body').value.unshift(j.expressionStatement(j.identifier(importString)));
+              path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
               // import theme from @oceanbase/design
               addSubmoduleImport(j, root, {
                 moduleName: '@oceanbase/design',
@@ -80,6 +99,24 @@ function importComponent(j, root, options) {
           }
         }
       });
+
+    root
+      .find(j.Statement)
+      .filter(path => isTopStatement(path))
+      .forEach(path => {
+        const includeToken =
+          j(path).find(j.Identifier, {
+            name: name => name?.includes('token.'),
+          }).length > 0;
+        if (includeToken) {
+          // import token from @oceanbase/design
+          addSubmoduleImport(j, root, {
+            moduleName: '@oceanbase/design',
+            importedName: 'token',
+            importKind: 'value',
+          });
+        }
+      });
   }
 
   return hasChanged;