akfun 5.2.13 → 5.3.0

package/module/index.js

@@ -33,7 +33,6 @@ let argv = yargs
     '创建一个项目',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 init [options]')
         .option('type', {
           alias: 't',
@@ -106,7 +105,6 @@ let argv = yargs
     '初始化AKFun配置文件',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 config init')
         .alias('h', 'help');
     },
@@ -119,7 +117,6 @@ let argv = yargs
     '开启本地调试模式',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 dev')
         .alias('h', 'help');
     },
@@ -132,7 +129,6 @@ let argv = yargs
     '构建生产环境代码',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 build')
         .alias('h', 'help');
     },
@@ -145,7 +141,6 @@ let argv = yargs
     '构建 Library 库（UMD 模块）',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 build2lib')
         .alias('h', 'help');
     },
@@ -158,7 +153,6 @@ let argv = yargs
     '构建 ESM 模块',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 build2esm')
         .alias('h', 'help');
     },
@@ -171,7 +165,6 @@ let argv = yargs
     '构建 Node 模块',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 build2node')
         .alias('h', 'help');
     },
@@ -184,7 +177,6 @@ let argv = yargs
     '输出当前配置文件',
     (yargs) => {
       yargs
-        .reset()
         .usage(titleTip('Usage') + ': $0 inspect')
         .option('type', {
           alias: 't',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "5.2.13",
+  "version": "5.3.0",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -51,7 +51,6 @@
   "dependencies": {
     "@babel/cli": "^7.17.0",
     "@babel/core": "^7.17.0",
-    "@babel/polyfill": "^7.10.1",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.17.0",
@@ -59,41 +58,44 @@
     "@babel/plugin-proposal-function-sent": "^7.16.7",
     "@babel/plugin-proposal-json-strings": "^7.16.7",
     "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.0",
-    "@babel/plugin-transform-optional-chaining": "^7.23.0",
     "@babel/plugin-proposal-throw-expressions": "^7.16.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.0",
+    "@babel/plugin-transform-optional-chaining": "^7.23.0",
     "@babel/plugin-transform-runtime": "^7.27.1",
-    "@babel/runtime": "^7.27.1",
+    "@babel/polyfill": "^7.10.1",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/register": "^7.17.0",
+    "@babel/runtime": "^7.27.1",
+    "@baiducloud/sdk": "^1.0.7",
     "@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-image": "^3.0.3",
-    "@svgr/rollup": "^8.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^6.2.1",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "@vue/compiler-sfc": "^3.2.29",
     "@vue/eslint-config-typescript": "^10.0.0",
+    "ali-oss": "^6.17.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.13.3",
     "chalk": "^4.0.0",
-    "compression-webpack-plugin": "^9.2.0",
+    "compression-webpack-plugin": "^11.1.0",
     "connect-history-api-fallback": "^2.0.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^6.6.0",
-    "css-minimizer-webpack-plugin": "^3.4.1",
+    "css-minimizer-webpack-plugin": "^7.0.4",
     "cssnano": "^5.0.16",
     "deepmerge": "^4.2.2",
     "del": "^6.0.0",
@@ -113,35 +115,33 @@
     "express": "^4.17.2",
     "figlet": "^1.5.2",
     "file-loader": "^6.2.0",
-    "git-clone": "0.1.0",
+    "git-clone": "^0.2.0",
     "glob": "^7.2.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^2.0.2",
-    "inquirer": "^8.2.0",
-    "rollup-plugin-jsx": "^1.0.3",
+    "inquirer": "^13.3.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
     "mini-css-extract-plugin": "^2.5.3",
     "open": "^8.4.0",
     "ora": "^4.0.4",
     "params-replace-loader": "^1.1.6",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.3.4",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.3.1",
     "postcss-simple-vars": "^6.0.3",
     "progress-bar-webpack-plugin": "^2.1.0",
-    "qs": "^6.10.3",
+    "qs": "^6.14.2",
     "rimraf": "^3.0.2",
-    "rollup": "^4.53.3",
+    "rollup": "^4.59.0",
+    "rollup-plugin-jsx": "^1.0.3",
     "rollup-plugin-node-externals": "^8.1.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.94.2",
     "sass-loader": "^12.4.0",
-    "less": "^4.1.3",
-    "less-loader": "^11.0.0",
-    "stylus": "^0.57.0",
-    "stylus-loader": "^7.0.0",
     "sass-resources-loader": "^2.2.4",
     "semver": "^7.3.5",
     "shelljs": "^0.8.5",
@@ -150,32 +150,39 @@
     "stylelint": "^14.3.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-webpack-plugin": "^3.1.1",
+    "stylus": "^0.57.0",
+    "stylus-loader": "^7.0.0",
     "ts-import-plugin": "^2.0.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5",
     "url-loader": "^4.1.1",
     "vue-eslint-parser": "^8.2.0",
-    "vue-loader": "^15.9.8",
+    "vue-loader": "^15.11.1",
     "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.68.0",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^5.105.3",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
-    "yargs": "^12.0.5",
-    "@baiducloud/sdk": "^1.0.7",
-    "ali-oss": "^6.17.0"
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.1.0",
-    "@commitlint/config-conventional": "^16.0.0",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
     "husky": "^4.3.8",
     "lint-staged": "^12.3.3",
     "prettier": "^2.5.1"
   },
+  "overrides": {
+    "serialize-javascript": "^7.0.3",
+    "ajv": "^8.18.0",
+    "lodash": "^4.17.22",
+    "minimatch": "^3.1.3",
+    "diff": "^4.0.4"
+  },
   "engines": {
     "node": ">= 16.0.0",
     "npm": ">= 8.0.0"

package/src/loaders/README.md

@@ -0,0 +1 @@
+# 此处存放 webpack 自定义 loader

package/src/loaders/component-scope-style-loader.js

@@ -0,0 +1,429 @@
+const path = require('path');
+const curConfig = require('../config/index'); // 获取当前项目根目录下的配置文件
+
+const DEFAULT_COMPONENTS_DIR = curConfig.componentsDir || './src/components';
+const DEFAULT_SCOPE_KEY = 'data-scope';
+
+function normalizePath(targetPath) {
+  return targetPath ? path.normalize(targetPath) : '';
+}
+
+/**
+ * 将驼峰命名转换为 kebab-case（短横线连接）
+ * @param {string} str - 输入字符串
+ * @returns {string} kebab-case 格式
+ */
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * 将驼峰命名转换为 snake_case（下划线连接）
+ * @param {string} str - 输入字符串
+ * @returns {string} snake_case 格式
+ */
+function camelToSnake(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
+}
+
+/**
+ * 生成组件名的所有可能变体（包括大小写、命名风格、container 后缀等）
+ * @param {string} componentName - 组件名称，如 simpleCmp__c
+ * @returns {string[]} 所有可能的变体数组
+ */
+function generateComponentNameVariants(componentName) {
+  if (!componentName) {
+    return [];
+  }
+
+  const variants = new Set();
+
+  // 原始名称
+  variants.add(componentName);
+
+  // 首字母大写
+  const capitalized = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+  variants.add(capitalized);
+
+  // 全小写
+  variants.add(componentName.toLowerCase());
+
+  // 全大写
+  variants.add(componentName.toUpperCase());
+
+  // kebab-case（短横线连接）
+  const kebabCase = camelToKebab(componentName);
+  variants.add(kebabCase);
+
+  // snake_case（下划线连接）
+  const snakeCase = camelToSnake(componentName);
+  variants.add(snakeCase);
+
+  // 首字母大写的 kebab-case
+  const capitalizedKebab = kebabCase.charAt(0).toUpperCase() + kebabCase.slice(1);
+  variants.add(capitalizedKebab);
+
+  // 首字母大写的 snake_case
+  const capitalizedSnake = snakeCase.charAt(0).toUpperCase() + snakeCase.slice(1);
+  variants.add(capitalizedSnake);
+
+  // 生成带 container 后缀的变体
+  const containerSuffixes = ['-container', 'Container', '_container'];
+  const baseVariants = Array.from(variants);
+  baseVariants.forEach((variant) => {
+    containerSuffixes.forEach((suffix) => {
+      variants.add(variant + suffix);
+    });
+  });
+
+  return Array.from(variants);
+}
+
+/**
+ * 检查选择器是否匹配组件名（忽略大小写和命名风格）
+ * @param {string} selector - 选择器，如 .simpleCmp__c 或 #simpleCmp__c
+ * @param {string[]} componentNameVariants - 组件名的所有变体
+ * @returns {boolean} 是否匹配
+ */
+function isComponentRootSelector(selector, componentNameVariants) {
+  if (!selector || !componentNameVariants || componentNameVariants.length === 0) {
+    return false;
+  }
+
+  const trimmedSelector = selector.trim();
+
+  // 提取类选择器或 ID 选择器的名称部分
+  // 匹配 .className 或 #idName 格式
+  const match = trimmedSelector.match(/^[.#]([a-zA-Z0-9_-]+)/);
+  if (!match) {
+    return false;
+  }
+
+  const selectorName = match[1];
+
+  // 检查是否匹配任何组件名变体（忽略大小写）
+  return componentNameVariants.some((variant) => {
+    return selectorName.toLowerCase() === variant.toLowerCase();
+  });
+}
+
+/**
+ * 为样式选择器添加作用域前缀
+ * @param {string} selector - 选择器字符串
+ * @param {string} scopeSelector - 作用域选择器，如 [data-scope="componentName"]
+ * @param {string[]} componentNameVariants - 组件名的所有变体，用于判断是否是最外层选择器
+ * @returns {string} 添加了作用域的选择器
+ */
+function addScopeToSelector(selector, scopeSelector, componentNameVariants = []) {
+  if (!selector || !selector.trim()) {
+    return selector;
+  }
+
+  const trimmedSelector = selector.trim();
+
+  // 处理 :global() 语法，不添加作用域
+  if (trimmedSelector.includes(':global(')) {
+    return selector;
+  }
+
+  // 如果选择器已经是作用域选择器，直接返回
+  if (trimmedSelector.startsWith('[') && trimmedSelector.includes(scopeSelector)) {
+    return selector;
+  }
+
+  // 处理多个选择器（逗号分隔）
+  if (trimmedSelector.includes(',')) {
+    return trimmedSelector
+      .split(',')
+      .map((sel) => addScopeToSelector(sel.trim(), scopeSelector, componentNameVariants))
+      .join(', ');
+  }
+
+  // 处理伪类和伪元素（如 :hover, ::before, :nth-child(2)）
+  // 匹配格式：baseSelector:pseudo 或 baseSelector::pseudo
+  const pseudoMatch = trimmedSelector.match(
+    /^(.+?)(::?[a-zA-Z-]+(?:\([^)]*\))?(?:::?[a-zA-Z-]+(?:\([^)]*\))?)*)$/
+  );
+  if (pseudoMatch) {
+    const baseSelector = pseudoMatch[1].trim();
+    const pseudo = pseudoMatch[2];
+    // 为 baseSelector 添加作用域
+    const scopedBase = addScopeToSelector(baseSelector, scopeSelector, componentNameVariants);
+    return `${scopedBase}${pseudo}`;
+  }
+
+  // 检查是否是最外层组件选择器（类选择器或 ID 选择器）
+  const isRootSelector = isComponentRootSelector(trimmedSelector, componentNameVariants);
+
+  // 处理普通选择器
+  if (trimmedSelector.startsWith('.') || trimmedSelector.startsWith('#')) {
+    // 如果是最外层组件选择器，直接拼接（无空格）
+    // 否则添加空格（包含在 scope 里面）
+    if (isRootSelector) {
+      return `${scopeSelector}${trimmedSelector}`;
+    } else {
+      return `${scopeSelector} ${trimmedSelector}`;
+    }
+  }
+
+  // 如果选择器以 [ 开头（属性选择器），直接拼接
+  if (trimmedSelector.startsWith('[')) {
+    return `${scopeSelector}${trimmedSelector}`;
+  }
+
+  // 处理标签选择器和其他选择器（添加空格）
+  return `${scopeSelector} ${trimmedSelector}`;
+}
+
+/**
+ * 解析样式文件并添加作用域
+ * @param {string} source - 原始样式内容
+ * @param {string} scopeSelector - 作用域选择器
+ * @param {string[]} componentNameVariants - 组件名的所有变体
+ * @returns {string} 添加了作用域的样式内容
+ */
+function addScopeToStyles(source, scopeSelector, componentNameVariants = []) {
+  if (!source || !source.trim()) {
+    return source;
+  }
+
+  let result = '';
+  let i = 0;
+  let depth = 0; // 大括号嵌套深度
+  let inString = false; // 是否在字符串中
+  let stringChar = ''; // 字符串的引号类型
+  let inComment = false; // 是否在注释中
+  let commentType = ''; // 注释类型：'//' 或 '/*'
+  let currentSelector = '';
+  let currentRule = '';
+  let braceStart = -1;
+
+  // 不需要添加作用域的 @ 规则（这些规则应该保持原样）
+  const skipScopeAtRules = ['@import', '@charset', '@namespace', '@font-face'];
+  // 需要递归处理的 @ 规则（内部的选择器也需要添加作用域）
+  const nestedAtRules = ['@media', '@supports', '@keyframes', '@page', '@viewport'];
+  let inAtRule = false;
+  let atRuleName = '';
+  let atRuleType = ''; // 'skip' 或 'nested'
+
+  while (i < source.length) {
+    const char = source[i];
+    const nextChar = source[i + 1] || '';
+
+    // 处理字符串
+    if (!inComment && (char === '"' || char === "'")) {
+      if (!inString) {
+        inString = true;
+        stringChar = char;
+      } else if (char === stringChar && source[i - 1] !== '\\') {
+        inString = false;
+        stringChar = '';
+      }
+      currentRule += char;
+      i++;
+      continue;
+    }
+
+    // 处理注释
+    if (!inString) {
+      if (!inComment && char === '/' && nextChar === '/') {
+        inComment = true;
+        commentType = '//';
+        currentRule += char;
+        i++;
+        continue;
+      }
+      if (!inComment && char === '/' && nextChar === '*') {
+        inComment = true;
+        commentType = '/*';
+        currentRule += char;
+        i++;
+        continue;
+      }
+      if (inComment && commentType === '//' && char === '\n') {
+        inComment = false;
+        commentType = '';
+        currentRule += char;
+        i++;
+        continue;
+      }
+      if (inComment && commentType === '/*' && char === '*' && nextChar === '/') {
+        inComment = false;
+        commentType = '';
+        currentRule += char + nextChar;
+        i += 2;
+        continue;
+      }
+      if (inComment) {
+        currentRule += char;
+        i++;
+        continue;
+      }
+    }
+
+    // 处理 @ 规则
+    if (!inString && !inComment && char === '@' && depth === 0) {
+      const remaining = source.substring(i);
+      // 检查是否是跳过作用域的规则
+      for (const atRule of skipScopeAtRules) {
+        if (remaining.startsWith(atRule)) {
+          inAtRule = true;
+          atRuleName = atRule;
+          atRuleType = 'skip';
+          break;
+        }
+      }
+      // 检查是否是嵌套规则
+      if (!inAtRule) {
+        for (const atRule of nestedAtRules) {
+          if (remaining.startsWith(atRule)) {
+            inAtRule = true;
+            atRuleName = atRule;
+            atRuleType = 'nested';
+            break;
+          }
+        }
+      }
+    }
+
+    // 处理左大括号
+    if (!inString && !inComment && char === '{') {
+      if (depth === 0) {
+        // 保存当前选择器
+        currentSelector = currentRule.trim();
+        currentRule = '';
+        braceStart = i;
+      }
+      depth++;
+      currentRule += char;
+      i++;
+      continue;
+    }
+
+    // 处理右大括号
+    if (!inString && !inComment && char === '}') {
+      depth--;
+      currentRule += char;
+
+      if (depth === 0) {
+        // 处理完整的规则块
+        if (inAtRule) {
+          if (atRuleType === 'skip') {
+            // 跳过作用域的 @ 规则直接添加
+            result += currentSelector + currentRule;
+          } else if (atRuleType === 'nested') {
+            // 嵌套 @ 规则：为内部的选择器添加作用域
+            const innerContent = currentRule.slice(1, -1); // 去掉外层大括号
+            const scopedInnerContent = addScopeToStyles(
+              innerContent,
+              scopeSelector,
+              componentNameVariants
+            );
+            result += currentSelector + '{' + scopedInnerContent + '}';
+          } else {
+            result += currentSelector + currentRule;
+          }
+          inAtRule = false;
+          atRuleName = '';
+          atRuleType = '';
+        } else {
+          // 普通规则，为选择器添加作用域
+          const scopedSelector = addScopeToSelector(
+            currentSelector,
+            scopeSelector,
+            componentNameVariants
+          );
+          result += scopedSelector + currentRule;
+        }
+        currentSelector = '';
+        currentRule = '';
+        braceStart = -1;
+      }
+      i++;
+      continue;
+    }
+
+    // 其他字符
+    currentRule += char;
+    i++;
+  }
+
+  // 处理文件末尾可能剩余的内容
+  if (currentRule.trim()) {
+    if (depth === 0 && currentSelector) {
+      const scopedSelector = addScopeToSelector(
+        currentSelector,
+        scopeSelector,
+        componentNameVariants
+      );
+      result += scopedSelector + currentRule;
+    } else {
+      result += currentRule;
+    }
+  }
+
+  return result || source;
+}
+/**
+ * 自动添加组件样式作用域
+ * @param {string} source - 原始样式内容
+ * @returns {string} 添加了作用域的样式内容
+ * 实现关键路径：
+ * 1. 判断是否是目标文件
+ * 2. 获取组件名
+ * 3. 生成组件名的所有可能变体
+ * 4. 为选择器添加作用域
+ * 5. 返回添加了作用域的样式内容
+ *
+ * 特别说明，组件根节点的样式 需要和组件目录名称 产生关联，不然其根节点的样式会失效。
+ */
+module.exports = function componentScopeStyleLoader(source) {
+  if (typeof this?.cacheable === 'function') {
+    this.cacheable();
+  }
+
+  const options =
+    (typeof this?.getOptions === 'function' && this.getOptions()) || this?.query || {};
+  const scopeKey = options.scopeKey || DEFAULT_SCOPE_KEY;
+  const componentsDir = options.componentsDir || DEFAULT_COMPONENTS_DIR;
+
+  const resourcePath = this.resourcePath || '';
+  const isTargetFile = /(index|style)\.(scss|less)$/i.test(resourcePath);
+  if (!isTargetFile) {
+    return source;
+  }
+
+  const componentsDirAbs = path.isAbsolute(componentsDir)
+    ? componentsDir
+    : path.resolve(process.cwd(), componentsDir);
+
+  const normalizedResourcePath = normalizePath(resourcePath);
+  const normalizedCmpDir = normalizePath(componentsDirAbs + path.sep);
+
+  // 仅处理位于组件目录下的样式文件
+  if (!normalizedResourcePath.startsWith(normalizedCmpDir)) {
+    return source;
+  }
+
+  // 组件目录的第一层子目录名即组件名
+  const relativePath = path.relative(componentsDirAbs, resourcePath);
+  const pathParts = relativePath.split(path.sep);
+  const cmpName = pathParts[0];
+
+  if (!cmpName) {
+    return source;
+  }
+
+  // 非组件直接子目录下的样式也不处理
+  if (pathParts.length > 2) {
+    return source;
+  }
+
+  // 生成组件名的所有可能变体
+  const componentNameVariants = generateComponentNameVariants(cmpName);
+
+  const scopeSelector = `[${scopeKey}="${cmpName}"]`;
+  const scopedContent = addScopeToStyles(source, scopeSelector, componentNameVariants);
+
+  return scopedContent;
+};

package/src/plugin/babel-plugin-add-data-scope.js

@@ -1,15 +1,28 @@
 /**
- * Babel 插件：自动在 React 组件的最外层元素添加 data-scope 属性
+ * Babel 插件：自动在 React 组件的最外层元素添加 scopeKey 属性
  *
  * 使用场景：
- * - 在构建 React 组件时，自动为组件的根元素添加 data-scope 属性
+ * - 在构建 React 组件时，自动为组件的根元素添加 scopeKey 属性
  * - 支持函数组件和类组件
  * - 如果组件返回 Fragment 或数组，会在 Fragment 的第一个子元素或数组的第一个元素上添加
- * - data-scope 的值默认为当前组件所在文件目录的名称
+ * - scopeKey 的值默认为当前组件所在文件目录的名称
  */
 const path = require('path');
 
-module.exports = function ({ types: t }) {
+/**
+ * @param {*} babelParams
+ * babelTypes（即 @babel/types）提供：
+ * 节点类型检查：babelTypes.isJSXElement(node)
+ * 创建节点：babelTypes.jsxAttribute(...)
+ * 节点构造器：babelTypes.stringLiteral('value')
+ * 节点操作：path.get('body')、path.traverse({})
+ *
+ * @param {*} options 插件配置对象
+ * scopeKey 数据作用域的键名，默认为 'data-scope'
+ */
+module.exports = function (babelParams, options) {
+  const { types: babelTypes } = babelParams;
+  const scopeKey = (options || {}).scopeKey || 'data-scope';
   /**
    * 获取文件所在目录的名称
    */
@@ -25,6 +38,275 @@ module.exports = function ({ types: t }) {
       return '';
     }
   }
+  /**
+   * 判断 callee 是否是 React.createElement
+   */
+  function isReactCreateElementCallee(calleePath) {
+    if (!calleePath) {
+      return false;
+    }
+    if (
+      calleePath.isMemberExpression() &&
+      babelTypes.isIdentifier(calleePath.get('object').node, { name: 'React' }) &&
+      babelTypes.isIdentifier(calleePath.get('property').node, { name: 'createElement' })
+    ) {
+      return true;
+    }
+    return calleePath.isIdentifier({ name: 'createElement' });
+  }
+
+  /**
+   * 判断 callee 是否是 React 17 自动 JSX 运行时生成的 jsx/jsxs/jsxDEV 调用
+   * 支持 _jsx/_jsxs 形式（ts 编译后的别名）
+   */
+  const jsxRuntimeCalleeNames = new Set(['jsx', 'jsxs', 'jsxDEV', '_jsx', '_jsxs', '_jsxDEV']);
+  function isReactJSXRuntimeCallee(calleePath) {
+    return (
+      calleePath && calleePath.isIdentifier() && jsxRuntimeCalleeNames.has(calleePath.node.name)
+    );
+  }
+
+  /**
+   * 判断是否是 React 元素生成调用（createElement 或 jsx/jsxs/jsxDEV）
+   */
+  function isReactElementCall(callPath) {
+    if (!callPath || !callPath.isCallExpression()) {
+      return false;
+    }
+    const calleePath = callPath.get('callee');
+    return isReactCreateElementCallee(calleePath) || isReactJSXRuntimeCallee(calleePath);
+  }
+
+  /**
+   * 判断元素类型是否是 Fragment
+   */
+  function isFragmentType(typePath) {
+    if (!typePath || !typePath.node) {
+      return false;
+    }
+    if (babelTypes.isIdentifier(typePath.node, { name: 'Fragment' })) {
+      return true;
+    }
+    if (
+      babelTypes.isMemberExpression(typePath.node) &&
+      babelTypes.isIdentifier(typePath.node.object, { name: 'React' }) &&
+      babelTypes.isIdentifier(typePath.node.property, { name: 'Fragment' })
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * 判断 ObjectExpression 中是否已有 scopeKey
+   */
+  function hasScopeKeyInProps(objectExpressionNode) {
+    return objectExpressionNode.properties.some((prop) => {
+      if (!babelTypes.isObjectProperty(prop) || prop.computed) {
+        return false;
+      }
+      if (babelTypes.isIdentifier(prop.key) && prop.key.name === scopeKey) {
+        return true;
+      }
+      return babelTypes.isStringLiteral(prop.key) && prop.key.value === scopeKey;
+    });
+  }
+
+  /**
+   * 创建一个 scopeKey 的 object property
+   */
+  function createScopeProperty(scopeValue) {
+    const key = babelTypes.isValidIdentifier(scopeKey)
+      ? babelTypes.identifier(scopeKey)
+      : babelTypes.stringLiteral(scopeKey);
+    return babelTypes.objectProperty(key, babelTypes.stringLiteral(scopeValue));
+  }
+
+  /**
+   * 为 props 对象添加 scopeKey
+   */
+  function addScopeToPropsObject(propsPath, scopeValue) {
+    if (!propsPath) {
+      return;
+    }
+
+    // props 为 null/undefined 时直接替换为对象
+    if (propsPath.isNullLiteral() || propsPath.isIdentifier({ name: 'undefined' })) {
+      propsPath.replaceWith(babelTypes.objectExpression([createScopeProperty(scopeValue)]));
+      return;
+    }
+
+    if (propsPath.isObjectExpression()) {
+      if (hasScopeKeyInProps(propsPath.node)) {
+        return;
+      }
+      propsPath.node.properties.unshift(createScopeProperty(scopeValue));
+      return;
+    }
+
+    // 其他类型的 props，使用 Object.assign 合并
+    propsPath.replaceWith(
+      babelTypes.callExpression(
+        babelTypes.memberExpression(
+          babelTypes.identifier('Object'),
+          babelTypes.identifier('assign')
+        ),
+        [babelTypes.objectExpression([createScopeProperty(scopeValue)]), propsPath.node]
+      )
+    );
+  }
+
+  /**
+   * 处理 Fragment 的子元素，找到首个可注入的元素
+   */
+  function processFragmentChildren(callPath, scopeValue) {
+    const args = callPath.get('arguments');
+    // jsx/jsxs 调用的 children 在第二个参数（props.children）
+    const propsPath = args[1];
+    if (propsPath && propsPath.isObjectExpression()) {
+      const propPaths = propsPath.get('properties');
+      for (const propPath of propPaths) {
+        if (
+          propPath.isObjectProperty() &&
+          !propPath.node.computed &&
+          ((babelTypes.isIdentifier(propPath.node.key) && propPath.node.key.name === 'children') ||
+            (babelTypes.isStringLiteral(propPath.node.key) &&
+              propPath.node.key.value === 'children'))
+        ) {
+          const valuePath = propPath.get('value');
+          if (Array.isArray(valuePath)) {
+            // safety: ObjectProperty value returns NodePath, not array
+            continue;
+          }
+          if (processJSXLikePath(valuePath, scopeValue)) {
+            return true;
+          }
+        }
+      }
+    }
+
+    // createElement 形式的 children 在第三个参数开始
+    for (let i = 2; i < args.length; i++) {
+      if (processJSXLikePath(args[i], scopeValue)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 处理 createElement/jsx 调用，向 props 注入 scopeKey
+   */
+  function processCreateElementCall(callPath, scopeValue) {
+    if (!isReactElementCall(callPath)) {
+      return false;
+    }
+
+    const args = callPath.get('arguments');
+    const typePath = args[0];
+    const isFragment = isFragmentType(typePath);
+
+    if (isFragment) {
+      // Fragment 需要把 scopeKey 添加到首个子元素
+      const handled = processFragmentChildren(callPath, scopeValue);
+      if (handled) {
+        return true;
+      }
+      // 如果没有子元素可处理，则回退到为 Fragment props 添加
+    }
+
+    // jsx/jsxs/createElement 的 props 都在第二个参数
+    const propsIndex = 1;
+    if (!args[propsIndex]) {
+      callPath.node.arguments[propsIndex] = babelTypes.objectExpression([]);
+    }
+    const propsPath = callPath.get('arguments')[propsIndex];
+    addScopeToPropsObject(propsPath, scopeValue);
+    return true;
+  }
+
+  /**
+   * 递归判断表达式中是否包含 JSX 或 React 元素调用
+   */
+  function containsJSXLike(nodePath) {
+    if (!nodePath || !nodePath.node) {
+      return false;
+    }
+    if (nodePath.isJSXElement() || nodePath.isJSXFragment()) {
+      return true;
+    }
+    if (nodePath.isArrayExpression()) {
+      return nodePath.get('elements').some((element) => containsJSXLike(element));
+    }
+    if (nodePath.isConditionalExpression()) {
+      return (
+        containsJSXLike(nodePath.get('consequent')) || containsJSXLike(nodePath.get('alternate'))
+      );
+    }
+    if (nodePath.isLogicalExpression()) {
+      return containsJSXLike(nodePath.get('left')) || containsJSXLike(nodePath.get('right'));
+    }
+    if (nodePath.isCallExpression()) {
+      if (isReactElementCall(nodePath)) {
+        return true;
+      }
+      // 进一步查看参数里是否有 JSX 结构
+      return nodePath.get('arguments').some((argPath) => containsJSXLike(argPath));
+    }
+    return false;
+  }
+
+  /**
+   * 递归处理可能的 JSX/React 元素表达式
+   */
+  function processJSXLikePath(nodePath, scopeValue) {
+    if (!nodePath || !nodePath.node) {
+      return false;
+    }
+
+    if (nodePath.isJSXElement()) {
+      addDataScopeAttribute(nodePath.node, scopeValue);
+      return true;
+    }
+
+    if (nodePath.isJSXFragment()) {
+      const children = nodePath.get('children');
+      for (const child of children) {
+        if (processJSXLikePath(child, scopeValue)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    if (nodePath.isArrayExpression()) {
+      const elements = nodePath.get('elements');
+      for (const element of elements) {
+        if (processJSXLikePath(element, scopeValue)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    if (nodePath.isConditionalExpression()) {
+      const handledConsequent = processJSXLikePath(nodePath.get('consequent'), scopeValue);
+      const handledAlternate = processJSXLikePath(nodePath.get('alternate'), scopeValue);
+      return handledConsequent || handledAlternate;
+    }
+
+    if (nodePath.isLogicalExpression()) {
+      const handledLeft = processJSXLikePath(nodePath.get('left'), scopeValue);
+      const handledRight = processJSXLikePath(nodePath.get('right'), scopeValue);
+      return handledLeft || handledRight;
+    }
+
+    if (nodePath.isCallExpression()) {
+      return processCreateElementCall(nodePath, scopeValue);
+    }
+
+    return false;
+  }
   /**
    * 检查函数是否返回 JSX（用于判断是否是 React 组件）
    */
@@ -37,18 +319,17 @@ module.exports = function ({ types: t }) {
       body.traverse({
         ReturnStatement(returnPath) {
           const argument = returnPath.get('argument');
-          if (
-            argument.node &&
-            (argument.isJSXElement() || argument.isJSXFragment() || argument.isArrayExpression())
-          ) {
+          if (argument.node && containsJSXLike(argument)) {
             hasJSXReturn = true;
             returnPath.stop();
           }
         }
       });
       return hasJSXReturn;
-    } else if (body.isJSXElement() || body.isJSXFragment()) {
-      // 箭头函数直接返回 JSX
+    }
+
+    if (containsJSXLike(body)) {
+      // 箭头函数或表达式直接返回 JSX/React 元素调用
       return true;
     }
 
@@ -56,24 +337,24 @@ module.exports = function ({ types: t }) {
   }
 
   /**
-   * 在 JSX 元素上添加 data-scope 属性
+   * 在 JSX 元素上添加 scopeKey 属性
    * @param {Object} jsxElement - JSX 元素节点
-   * @param {string} scopeValue - data-scope 的值，默认为空字符串
+   * @param {string} scopeValue - scopeKey 的值，默认为空字符串
    */
   function addDataScopeAttribute(jsxElement, scopeValue = '') {
     const openingElement = jsxElement.openingElement;
     const attributes = openingElement.attributes;
 
-    // 检查是否已经存在 data-scope 属性
+    // 检查是否已经存在 scopeKey 属性
     const hasDataScope = attributes.some(
-      (attr) => t.isJSXAttribute(attr) && attr.name.name === 'data-scope'
+      (attr) => babelTypes.isJSXAttribute(attr) && attr.name.name === scopeKey
     );
 
     if (!hasDataScope) {
-      // 创建 data-scope 属性，值为目录名
-      const dataScopeAttr = t.jsxAttribute(
-        t.jsxIdentifier('data-scope'),
-        t.stringLiteral(scopeValue)
+      // 创建 scopeKey 属性，值为目录名
+      const dataScopeAttr = babelTypes.jsxAttribute(
+        babelTypes.jsxIdentifier(scopeKey),
+        babelTypes.stringLiteral(scopeValue)
       );
       // 添加到属性列表的开头
       attributes.unshift(dataScopeAttr);
@@ -83,7 +364,7 @@ module.exports = function ({ types: t }) {
   /**
    * 处理返回语句中的 JSX
    * @param {Object} path - Babel path 对象
-   * @param {string} scopeValue - data-scope 的值
+   * @param {string} scopeValue - scopeKey 的值
    */
   function processReturnStatement(path, scopeValue) {
     const argument = path.get('argument');
@@ -92,84 +373,7 @@ module.exports = function ({ types: t }) {
       return;
     }
 
-    // 处理 JSX 元素
-    if (argument.isJSXElement()) {
-      addDataScopeAttribute(argument.node, scopeValue);
-      return;
-    }
-
-    // 处理 JSX Fragment
-    if (argument.isJSXFragment()) {
-      const children = argument.get('children');
-      // 找到第一个 JSX 元素子节点
-      for (const child of children) {
-        if (child.isJSXElement()) {
-          addDataScopeAttribute(child.node, scopeValue);
-          return;
-        }
-        // 如果子节点是 Fragment，递归处理
-        if (child.isJSXFragment()) {
-          processReturnStatement(child, scopeValue);
-          return;
-        }
-      }
-    }
-
-    // 处理数组返回（多个元素）
-    if (argument.isArrayExpression()) {
-      const elements = argument.get('elements');
-      // 找到第一个 JSX 元素
-      for (const element of elements) {
-        if (element.isJSXElement()) {
-          addDataScopeAttribute(element.node, scopeValue);
-          return;
-        }
-        // 如果元素是 Fragment，递归处理
-        if (element.isJSXFragment()) {
-          processReturnStatement(element, scopeValue);
-          return;
-        }
-      }
-    }
-
-    // 处理条件表达式（三元运算符）
-    if (argument.isConditionalExpression()) {
-      // 处理 true 分支
-      const consequent = argument.get('consequent');
-      if (consequent.isJSXElement()) {
-        addDataScopeAttribute(consequent.node, scopeValue);
-      } else if (consequent.isJSXFragment() || consequent.isArrayExpression()) {
-        processReturnStatement(consequent, scopeValue);
-      }
-
-      // 处理 false 分支
-      const alternate = argument.get('alternate');
-      if (alternate.isJSXElement()) {
-        addDataScopeAttribute(alternate.node, scopeValue);
-      } else if (alternate.isJSXFragment() || alternate.isArrayExpression()) {
-        processReturnStatement(alternate, scopeValue);
-      }
-    }
-
-    // 处理逻辑表达式（&& 或 ||）
-    if (argument.isLogicalExpression()) {
-      const left = argument.get('left');
-      const right = argument.get('right');
-      
-      // 处理左侧（可能是 JSX）
-      if (left.isJSXElement()) {
-        addDataScopeAttribute(left.node, scopeValue);
-      } else if (left.isJSXFragment() || left.isArrayExpression()) {
-        processReturnStatement(left, scopeValue);
-      }
-      
-      // 处理右侧（可能是 JSX）
-      if (right.isJSXElement()) {
-        addDataScopeAttribute(right.node, scopeValue);
-      } else if (right.isJSXFragment() || right.isArrayExpression()) {
-        processReturnStatement(right, scopeValue);
-      }
-    }
+    processJSXLikePath(argument, scopeValue);
   }
 
   return {
@@ -194,29 +398,72 @@ module.exports = function ({ types: t }) {
               processReturnStatement(returnPath, scopeValue);
             }
           });
-        } else if (body.isJSXElement()) {
-          // 箭头函数直接返回 JSX
-          addDataScopeAttribute(body.node, scopeValue);
-        } else if (body.isJSXFragment()) {
-          // 箭头函数直接返回 Fragment
-          const children = body.get('children');
-          for (const child of children) {
-            if (child.isJSXElement()) {
-              addDataScopeAttribute(child.node, scopeValue);
-              return;
-            }
-            // 如果子节点是 Fragment，递归处理
-            if (child.isJSXFragment()) {
-              processReturnStatement(child, scopeValue);
-              return;
+        } else {
+          // 箭头函数或表达式体直接返回 React 元素调用
+          processJSXLikePath(body, scopeValue);
+        }
+      },
+
+      // 处理类组件（推荐方式：使用 Class visitor 更可靠）
+      Class(classPath) {
+        // 检查是否是 React 组件类（继承自 React.Component、React.PureComponent 或 BaseCmp）
+        const superClass = classPath.node.superClass;
+        if (!superClass) {
+          return;
+        }
+
+        // 检查是否是 React 组件相关的类
+        // 支持：React.Component、React.PureComponent、BaseCmp 等
+        const isReactComponent =
+          (babelTypes.isIdentifier(superClass) &&
+            (superClass.name === 'Component' ||
+              superClass.name === 'PureComponent' ||
+              superClass.name === 'BaseCmp')) ||
+          (babelTypes.isMemberExpression(superClass) &&
+            babelTypes.isIdentifier(superClass.object) &&
+            superClass.object.name === 'React');
+
+        if (!isReactComponent) {
+          return;
+        }
+
+        // 获取当前文件路径并提取目录名
+        const filePath = classPath.hub?.file?.opts?.filename || '';
+        const scopeValue = getDirectoryName(filePath);
+
+        // 遍历类的方法，查找 render 方法
+        classPath.traverse({
+          ClassMethod(methodPath) {
+            const methodKey = methodPath.node.key;
+            // 检查是否是 render 方法（排除 getter/setter）
+            if (
+              methodPath.node.kind === 'method' &&
+              babelTypes.isIdentifier(methodKey) &&
+              methodKey.name === 'render'
+            ) {
+              const body = methodPath.get('body');
+              if (body.isBlockStatement()) {
+                body.traverse({
+                  ReturnStatement(returnPath) {
+                    processReturnStatement(returnPath, scopeValue);
+                  }
+                });
+              }
             }
           }
-        }
+        });
       },
 
-      // 处理类组件的 render 方法
+      // 处理类组件的 render 方法（备选方案：直接使用 ClassMethod visitor）
       ClassMethod(classMethodPath) {
-        if (classMethodPath.node.kind === 'method' && classMethodPath.node.key.name === 'render') {
+        // 放宽条件判断，只排除 getter/setter
+        const methodKey = classMethodPath.node.key;
+        const isRenderMethod =
+          classMethodPath.node.kind === 'method' &&
+          babelTypes.isIdentifier(methodKey) &&
+          methodKey.name === 'render';
+
+        if (isRenderMethod) {
           // 获取当前文件路径并提取目录名
           const filePath = classMethodPath.hub?.file?.opts?.filename || '';
           const scopeValue = getDirectoryName(filePath);

package/src/utils/loadAsset.ts

@@ -0,0 +1,88 @@
+// 空函数
+export function noop(): void {}
+
+/**
+ * 加载远程 JS脚本
+ * 备注：用于动态加载自定义组件脚本
+ * @param jsSrc js脚本地址
+ * @param callback 加载完成后的回调函数
+ */
+export function loadRemoteJs(jsSrc: string, callback?: (success?: boolean) => void): void {
+  const curCallback = callback || noop;
+
+  // 检查脚本是否已存在
+  const existingScript = document.querySelector(
+    `script[src='${jsSrc}']`
+  ) as HTMLScriptElement | null;
+
+  if (existingScript) {
+    // 检查脚本是否已加载完成
+    const loadStatus = existingScript.getAttribute('script-load-status');
+
+    if (loadStatus === 'true') {
+      // 已加载完成，直接执行回调
+      curCallback(true);
+    } else {
+      // 未加载完成，等待加载完成
+      const waitLoadAction = (): void => {
+        existingScript.removeEventListener('load', waitLoadAction);
+        existingScript.setAttribute('script-load-status', 'true');
+        curCallback(true);
+      };
+
+      const waitErrorAction = (): void => {
+        existingScript.removeEventListener('error', waitErrorAction);
+        curCallback(false);
+      };
+
+      existingScript.addEventListener('load', waitLoadAction);
+      existingScript.addEventListener('error', waitErrorAction);
+    }
+  } else {
+    // 创建新的脚本标签
+    const script = document.createElement('script');
+
+    const waitLoadAction = (): void => {
+      script.removeEventListener('load', waitLoadAction);
+      script.setAttribute('script-load-status', 'true');
+      curCallback(true);
+    };
+
+    const waitErrorAction = (): void => {
+      script.removeEventListener('error', waitErrorAction);
+      curCallback(false);
+    };
+
+    script.addEventListener('load', waitLoadAction);
+    script.addEventListener('error', waitErrorAction);
+    script.src = jsSrc;
+    document.body.appendChild(script);
+  }
+}
+
+export const loadRemoteJsPromise = (url: string) =>
+  new Promise<boolean>((resolve) => {
+    loadRemoteJs(url, (loadResult) => {
+      resolve(loadResult ?? false);
+    });
+  });
+
+/**
+ * 加载远程 CSS
+ * @param cssSrc css地址
+ */
+export function loadRemoteCSS(cssSrc: string): void {
+  const loadedLink = document.querySelector(`link[href='${cssSrc}']`) as HTMLLinkElement | null;
+  if (loadedLink) {
+    // 避免重复加载
+    loadedLink.disabled = false;
+    return;
+  }
+
+  const head = document.getElementsByTagName('head')[0];
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.type = 'text/css';
+  link.href = cssSrc;
+  head.appendChild(link);
+}

package/src/utils/loadAsset.js

@@ -1,47 +0,0 @@
-// 空函数
-export function noop() {}
-
-/**
- * 加载远程 JS脚本
- * @param JsSrc: js脚本地址
- * @param callback
- */
-export function loadRemoteJs(JsSrc, callback) {
-  const curCallback = callback || noop;
-  if (document.querySelector(`script[src='${JsSrc}']`)) {
-    curCallback();
-    return;
-  }
-
-  const script = document.createElement('script');
-
-  const loadAction = () => {
-    script.removeEventListener('load', loadAction);
-    curCallback();
-  };
-
-  script.addEventListener('load', loadAction);
-  script.src = JsSrc;
-  document.body.appendChild(script);
-}
-
-/**
- * 加载远程 CSS
- * @param cssSrc: css地址
- * @param callback
- */
-export function loadRemoteCSS(cssSrc) {
-  const loadedLink = document.querySelector(`link[href='${cssSrc}']`);
-  if (loadedLink) {
-    // 避免重复加载
-    loadedLink.disabled = false;
-    return;
-  }
-
-  const head = document.getElementsByTagName('head')[0];
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.type = 'text/css';
-  link.href = src;
-  head.appendChild(link);
-}