Merge pull request #240 from oceanbase/dengfuping-dev

fix(codemod): should avoid duplicate `const { token } = theme.useToken();`

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    <div>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
+    </div>
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    (<div>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Tooltip color={token.colorBgContainer} backgroundColor="#fff1f0" borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
+    </div>)
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert, Button, Tooltip } from '@oceanbase/design';
+
+const Demo = () => {
+  const columns = [{
+    render: () => {
+      return <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />;
+    },
+  }];
+  return (
+    <div>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+    </div>
+  );
+};
+
+export default Demo;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  const columns = [{
+    render: () => {
+      return <Tooltip color={token.colorBgContainer} backgroundColor="#fff1f0" borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />;
+    },
+  }];
+  return (
+    (<div>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+    </div>)
+  );
+};
+
+export default Demo;

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

@@ -1,7 +1,13 @@
 import { defineTest } from 'jscodeshift/src/testUtils';
 
 const testUnit = 'style-to-token';
-const tests = ['function-component', 'class-component', 'static'];
+const tests = [
+  'function-component',
+  'class-component',
+  'static',
+  'multiple-block-statement',
+  'existed-useToken',
+];
 
 describe(testUnit, () => {
   tests.forEach(test =>

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

@@ -2,6 +2,20 @@ const { addSubmoduleImport } = require('./utils');
 const { tokenParse } = require('./utils/token');
 const { printOptions } = require('./utils/config');
 
+function isTopBlockStatement(path) {
+  const isBlockStatement = path.value.type === 'BlockStatement';
+  let isTop = isBlockStatement && true;
+  path = path.parentPath;
+  while (isTop && path.value.type !== 'Program') {
+    if (path.value.type === 'BlockStatement') {
+      isTop = false;
+      break;
+    }
+    path = path.parentPath;
+  }
+  return isTop;
+}
+
 function importComponent(j, root, options) {
   let hasChanged = false;
 
@@ -27,35 +41,45 @@ function importComponent(j, root, options) {
       return formattedValue === key ? j.identifier(stringValue) : j.identifier(templateStringValue);
     });
 
-    root.find(j.BlockStatement).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 parentType = path.parentPath.value?.type;
-        // React function component
-        if (includeJsxElementList && parentType !== 'ClassMethod') {
-          const importString = `const { token } = theme.useToken()`;
-          path.get('body').value.unshift(j.expressionStatement(j.identifier(importString)));
-          // import theme from @oceanbase/design
-          addSubmoduleImport(j, root, {
-            moduleName: '@oceanbase/design',
-            importedName: 'theme',
-            importKind: 'value',
-          });
-        } else {
-          // React class component and static file (not react component)
-          // import token from @oceanbase/design
-          addSubmoduleImport(j, root, {
-            moduleName: '@oceanbase/design',
-            importedName: 'token',
-            importKind: 'value',
-          });
+    root
+      .find(j.BlockStatement)
+      .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 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 (!includeUseTokenStatement) {
+              const importString = 'const { token } = theme.useToken()';
+              // insert `const { token } = theme.useToken()`
+              path.get('body').value.unshift(j.expressionStatement(j.identifier(importString)));
+              // import theme from @oceanbase/design
+              addSubmoduleImport(j, root, {
+                moduleName: '@oceanbase/design',
+                importedName: 'theme',
+                importKind: 'value',
+              });
+            }
+          } else {
+            // React class component and static file (not react component)
+            // import token from @oceanbase/design
+            addSubmoduleImport(j, root, {
+              moduleName: '@oceanbase/design',
+              importedName: 'token',
+              importKind: 'value',
+            });
+          }
         }
-      }
-    });
+      });
   }
 
   return hasChanged;