@oceanbase/codemod 1.0.0-alpha.4 → 1.0.0-alpha.6

package/bin/cli.js

@@ -142,14 +142,21 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
   const result = [];
   const cwd = path.join(process.cwd(), targetDir);
   const { readPackageUp } = await import('read-pkg-up');
-  const closetPkgJson = await readPackageUp({ cwd });
+  let closetPkgJson;
+  try {
+    closetPkgJson = await readPackageUp({ cwd });
+  } catch (err) {
+    // 处理无效的 package.json 文件（如版本格式错误）
+    console.log(chalk.yellow(`Warning: Failed to read package.json: ${err.message}`));
+    closetPkgJson = null;
+  }
 
   let pkgJsonPath;
   if (!closetPkgJson) {
     pkgJsonPath = "we didn't find your package.json";
     // unknown dependency property
-    result.push(['install', '@oceanbase/design', pkgUpgradeList['@oceanbase/design']]);
-    result.push(['install', '@oceanbase/ui', pkgUpgradeList['@oceanbase/ui']]);
+    result.push(['install', '@oceanbase/design', pkgUpgradeList['@oceanbase/design'].version]);
+    result.push(['install', '@oceanbase/ui', pkgUpgradeList['@oceanbase/ui'].version]);
     if (needOBCharts) {
       result.push(['install', '@oceanbase/charts', pkgUpgradeList['@oceanbase/charts'].version]);
     }
@@ -241,14 +248,31 @@ async function upgradeDetect(targetDir, needOBCharts, needObUtil) {
   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`);
+  const deprecatedPackages = ['@alipay/ob-ui', '@alipay/ob-util', '@alipay/ob-charts'];
+  const uninstallDependencies = [];
+
+  if (closetPkgJson) {
+    const { packageJson } = closetPkgJson;
+    deprecatedPackages.forEach(depName => {
+      dependencyProperties.forEach(property => {
+        const versionRange = _.get(packageJson, `${property}.${depName}`);
+        if (versionRange && !uninstallDependencies.includes(depName)) {
+          uninstallDependencies.push(depName);
+        }
+      });
+    });
+  }
+  // 如果没有找到 package.json，跳过卸载操作（无法确定包是否存在）
+
+  if (uninstallDependencies.length > 0) {
+    console.log(`Deprecated package uninstalling...\n`);
+    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`);
+  }
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^1.0.0-alpha.4",
+    "@oceanbase/design": "^1.0.0-alpha.6",
     "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": "7619cf0d3f5d29dd4c7b67be8265ace300d7e731"
+  "gitHead": "7ce9c565c23262a8ffaeab5904095ca65806def9"
 }

package/transforms/__testfixtures__/style-to-token/single-function.output.js

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import { token } from '@oceanbase/design';
+import React from 'react';
 
 function getComponent() {
   return <div style={{ fontSize: token.fontSizeLG }} />;

package/transforms/__testfixtures__/style-to-token/template-string.input.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Component = () => {
+  return (
+    <div
+      style={{
+        border: `1px solid #5c6b8a`,
+      }}
+    />
+  );
+};
+
+const getComponent = () => {
+  return (
+    <div
+      style={{
+        border: `1px solid #5c6b8a`,
+      }}
+    />
+  );
+};
+
+export default Component;

package/transforms/__testfixtures__/style-to-token/template-string.output.js

@@ -0,0 +1,25 @@
+import { theme, token } from '@oceanbase/design';
+import React from 'react';
+
+const Component = () => {
+  const { token } = theme.useToken();
+  return (
+    <div
+      style={{
+        border: `1px solid ${token.colorTextSecondary}`,
+      }}
+    />
+  );
+};
+
+const getComponent = () => {
+  return (
+    <div
+      style={{
+        border: `1px solid ${token.colorTextSecondary}`,
+      }}
+    />
+  );
+};
+
+export default Component;

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

@@ -15,6 +15,7 @@ const tests = [
   'nested-object',
   'case-insensitive',
   'antd-style',
+  'template-string',
 ];
 
 describe(testUnit, () => {

package/transforms/style-to-token.js

@@ -156,7 +156,6 @@ function addTokenImportToBlockStatement(j, root, path) {
       moduleName: '@oceanbase/design',
       importedName: 'token',
       importKind: 'value',
-      after: 'react',
     });
   }
 }
@@ -271,35 +270,94 @@ function processTemplateLiterals(j, root) {
     templateList.forEach(path => {
       const templateLiteral = path.value;
       const quasis = templateLiteral.quasis;
+      const expressions = templateLiteral.expressions || [];
 
       // 检查每个模板字符串片段是否包含需要转换的颜色值
+      let needsReconstruction = false;
+      const newQuasis = [];
+      const newExpressions = [];
+
       for (let i = 0; i < quasis.length; i++) {
         const quasi = quasis[i];
         let value = quasi.value.raw;
-        let newValue = value;
-        let valueChanged = false;
 
         // 查找需要转换的颜色值
-        const colorMatch = newValue.match(
+        const colorMatch = value.match(
           /rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|hsl\([^)]+\)|hsla?\([^)]+\)/g
         );
         if (colorMatch) {
           hasChanged = true;
-          valueChanged = true;
+          needsReconstruction = true;
 
+          // 收集所有需要替换的匹配项及其 token
+          const replacements = [];
           colorMatch.forEach(match => {
             const { token } = tokenParse(match);
             if (token) {
-              newValue = newValue.replace(match, `\${token.${token}}`);
+              const index = value.indexOf(match);
+              replacements.push({ index, match, token });
             }
           });
+
+          // 按位置排序，从后往前处理以避免位置偏移
+          replacements.sort((a, b) => b.index - a.index);
+
+          let processedValue = value;
+          replacements.forEach(({ index, match, token }) => {
+            const before = processedValue.substring(0, index);
+            const after = processedValue.substring(index + match.length);
+
+            // 如果前面有内容，创建一个 quasi
+            if (before) {
+              newQuasis.push(j.templateElement({ raw: before, cooked: before }, false));
+            }
+
+            // 创建 token 表达式
+            newExpressions.push(j.memberExpression(j.identifier('token'), j.identifier(token)));
+
+            // 剩余部分继续处理
+            processedValue = after;
+          });
+
+          // 如果有剩余部分，添加到 quasis
+          if (processedValue || newQuasis.length === 0) {
+            const isTail = i === quasis.length - 1 && expressions.length === 0;
+            newQuasis.push(
+              j.templateElement({ raw: processedValue || '', cooked: processedValue || '' }, isTail)
+            );
+          } else if (newQuasis.length > 0) {
+            // 确保最后一个 quasi 标记为 tail（如果这是最后一个 quasi 且没有更多表达式）
+            const isTail = i === quasis.length - 1 && expressions.length === 0;
+            if (isTail) {
+              const lastQuasi = newQuasis[newQuasis.length - 1];
+              lastQuasi.tail = true;
+            }
+          }
+        } else {
+          // 如果没有颜色值需要转换，保持原样
+          newQuasis.push(quasi);
+          if (i < expressions.length) {
+            newExpressions.push(expressions[i]);
+          }
+        }
+      }
+
+      // 如果需要重构，替换整个模板字符串
+      if (needsReconstruction) {
+        // 确保最后一个 quasi 标记为 tail
+        if (newQuasis.length > 0) {
+          const lastQuasi = newQuasis[newQuasis.length - 1];
+          lastQuasi.tail = true;
         }
 
-        // 如果值发生了变化，更新模板字符串片段
-        if (valueChanged) {
-          quasi.value.raw = newValue;
-          quasi.value.cooked = newValue;
+        // 合并原有的表达式（如果有）
+        const allExpressions = [...newExpressions];
+        // 添加原有的表达式（在 quasis 之后）
+        for (let i = 0; i < expressions.length; i++) {
+          allExpressions.push(expressions[i]);
         }
+
+        path.replace(j.templateLiteral(newQuasis, allExpressions));
       }
     });
 

package/transforms/utils/token.js

@@ -68,7 +68,8 @@ const TOKEN_MAP = {
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',
-  '#5c6b8a': 'colorTextTertiary',
+  '#5c6b8a': 'colorTextSecondary',
+  '#5C6B8A': 'colorTextSecondary',
   'rgba(0,0,0,0.25)': 'colorTextQuaternary',
   'rgba(0,0,0,.85)': 'colorText',
   'rgba(0,0,0,.65)': 'colorTextSecondary',