generator-mico-cli 0.1.29 → 0.2.2-8.beta.1

package/generators/subapp-umd/index.js

@@ -0,0 +1,309 @@
+'use strict';
+
+const Generator = require('yeoman-generator');
+const fs = require('node:fs');
+const path = require('node:path');
+const {
+  toKebab,
+  toPascal,
+  toCamel,
+  collectFiles,
+  transformDestPath,
+  isTemplateFile,
+  detectPackageScope,
+  setupErrorHandlers,
+  createLogger,
+  loadMicorc,
+} = require('../../lib/utils');
+
+const IGNORE_LIST = require('./ignore-list.json');
+
+setupErrorHandlers();
+
+module.exports = class extends Generator {
+  initializing() {
+    this.monorepoRoot = process.cwd();
+    this.logger = createLogger(this);
+
+    this.isDryRun = this.options.dryRun || process.env.MICO_DRY_RUN === '1';
+
+    const { config: rcConfig, configPath } = loadMicorc(this.monorepoRoot);
+    this.rcConfig = rcConfig;
+    if (configPath) {
+      this.logger.verbose('Loaded config from:', configPath);
+    }
+
+    const packagesDir = path.join(this.monorepoRoot, 'packages');
+    const workspaceFile = path.join(this.monorepoRoot, 'pnpm-workspace.yaml');
+
+    if (!fs.existsSync(packagesDir)) {
+      console.error('');
+      console.error('❌ Error: packages directory not found.');
+      console.error('');
+      console.error('   This generator must be run from a monorepo root that contains a "packages" directory.');
+      console.error(`   Current directory: ${this.monorepoRoot}`);
+      console.error('');
+      process.exit(1);
+    }
+
+    if (!fs.existsSync(workspaceFile)) {
+      console.warn('');
+      console.warn('⚠️  Warning: pnpm-workspace.yaml not found.');
+      console.warn('   Make sure you are in the correct monorepo.');
+      console.warn('');
+    }
+  }
+
+  async prompting() {
+    try {
+      const detectedScope = detectPackageScope(this.monorepoRoot);
+      const rc = this.rcConfig || {};
+
+      this.answers = await this.prompt([
+        {
+          type: 'input',
+          name: 'appName',
+          message: 'Package name (e.g. my-widget)',
+          default: rc.defaultUmdName || 'my-widget',
+          filter: (input) => toKebab(input),
+          validate: (input) => {
+            const value = toKebab(input);
+            if (!value) return 'Package name is required';
+            const destDir = path.join(this.monorepoRoot, 'packages', value);
+            if (fs.existsSync(destDir)) {
+              return `Target already exists: packages/${value}`;
+            }
+            return true;
+          },
+        },
+        {
+          type: 'input',
+          name: 'umdGlobalName',
+          message: 'UMD global variable name (e.g. MyWidget)',
+          default: (answers) => toPascal(answers.appName),
+          validate: (input) => {
+            if (!input) return 'UMD global name is required';
+            if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(input)) {
+              return 'Must be a valid JavaScript identifier';
+            }
+            return true;
+          },
+        },
+        {
+          type: 'input',
+          name: 'packageScope',
+          message: 'Package scope',
+          default: rc.packageScope || detectedScope || '@my-project',
+          validate: (input) => {
+            if (!input) return 'Package scope is required';
+            if (!input.startsWith('@')) return 'Package scope must start with @';
+            return true;
+          },
+        },
+        {
+          type: 'input',
+          name: 'devPort',
+          message: 'Dev server port',
+          default: rc.umdDevPort || '9100',
+          validate: (input) => {
+            const port = Number(input);
+            if (!Number.isInteger(port) || port < 1024 || port > 65535) {
+              return 'Port must be an integer between 1024 and 65535';
+            }
+            return true;
+          },
+        },
+      ]);
+
+      this.appName = toKebab(this.answers.appName);
+      this.appNamePascal = toPascal(this.appName);
+      this.appNameCamel = toCamel(this.appName);
+      this.umdGlobalName = this.answers.umdGlobalName;
+      this.packageScope = this.answers.packageScope;
+      this.devPort = this.answers.devPort;
+      this.templateDir = this.templatePath();
+      this.destDir = path.join(this.monorepoRoot, 'packages', this.appName);
+    } catch (error) {
+      console.error('');
+      console.error('❌ Error during prompting:');
+      console.error(`   ${error.message}`);
+      console.error('');
+      process.exit(1);
+    }
+  }
+
+  async writing() {
+    try {
+      if (!fs.existsSync(this.templateDir)) {
+        console.error('');
+        console.error('❌ Error: Template directory not found.');
+        console.error(`   Expected: ${this.templateDir}`);
+        console.error('');
+        process.exit(1);
+      }
+
+      this.logger.verbose('Template directory:', this.templateDir);
+      this.logger.verbose('Destination directory:', this.destDir);
+
+      const templateData = {
+        appName: this.appName,
+        AppName: this.appNamePascal,
+        appNameCamel: this.appNameCamel,
+        umdGlobalName: this.umdGlobalName,
+        packageScope: this.packageScope,
+        devPort: this.devPort,
+      };
+
+      this.logger.verbose('Template data:', JSON.stringify(templateData, null, 2));
+
+      const files = collectFiles(this.templateDir, this.templateDir, IGNORE_LIST);
+
+      if (files.length === 0) {
+        console.error('');
+        console.error('❌ Error: No template files found.');
+        console.error(`   Template directory: ${this.templateDir}`);
+        console.error('');
+        process.exit(1);
+      }
+
+      if (this.isDryRun) {
+        this.log('');
+        this.log('\x1b[33m📋 Dry run mode - no files will be created\x1b[0m');
+        this.log('');
+        this.log(`   Package: ${this.appName}`);
+        this.log(`   UMD global: ${this.umdGlobalName}`);
+        this.log(`   Scope: ${this.packageScope}`);
+        this.log(`   Dev port: ${this.devPort}`);
+        this.log(`   Destination: packages/${this.appName}`);
+        this.log('');
+        this.log('   Would create the following files:');
+        this.log('');
+
+        let templateCount = 0;
+        let copyCount = 0;
+
+        for (const relPath of files) {
+          const destRelPath = transformDestPath(relPath);
+          const isTemplate = isTemplateFile(relPath);
+          const tag = isTemplate ? '\x1b[32m[tpl]\x1b[0m' : '\x1b[36m[cpy]\x1b[0m';
+          this.log(`   ${tag} packages/${this.appName}/${destRelPath}`);
+
+          if (isTemplate) {
+            templateCount++;
+          } else {
+            copyCount++;
+          }
+        }
+
+        this.log('');
+        this.log(`   Total: ${files.length} files (${templateCount} templates, ${copyCount} static)`);
+        this.log('');
+        this.log('   Run without --dry-run to actually create these files.');
+        this.log('');
+
+        this._skipInstall = true;
+        return;
+      }
+
+      this.log('');
+      this.log(`📦 Creating UMD package: ${this.appName}`);
+      this.log(`   UMD global: ${this.umdGlobalName}`);
+      this.log(`   Destination: packages/${this.appName}`);
+      this.log('');
+
+      let templateCount = 0;
+      let copyCount = 0;
+
+      for (const relPath of files) {
+        const srcPath = path.join(this.templateDir, relPath);
+        const destRelPath = transformDestPath(relPath);
+        const destPath = path.join(this.destDir, destRelPath);
+
+        if (isTemplateFile(relPath)) {
+          this.logger.file('template', destRelPath);
+          this.fs.copyTpl(srcPath, destPath, templateData);
+          templateCount++;
+        } else {
+          this.logger.file('copy', destRelPath);
+          this.fs.copy(srcPath, destPath);
+          copyCount++;
+        }
+      }
+
+      this.logger.verbose(`Processed: ${templateCount} templates, ${copyCount} copied`);
+    } catch (error) {
+      console.error('');
+      console.error('❌ Error during file generation:');
+      console.error(`   ${error.message}`);
+      console.error('');
+      process.exit(1);
+    }
+  }
+
+  install() {
+    if (this._skipInstall) return;
+
+    this.log('');
+    this.log('📦 正在安装依赖...');
+    try {
+      this.spawnCommandSync('pnpm', ['install'], {
+        cwd: this.monorepoRoot,
+      });
+    } catch (e) {
+      this._installFailed = true;
+      this.log('');
+      this.log('⚠️  依赖安装失败，但 UMD 包文件已全部生成。');
+      this.logger.verbose('Install error:', e.message);
+      return;
+    }
+
+    // 依赖安装成功后，格式化生成的文件
+    const prettierConfig = path.join(this.monorepoRoot, 'apps/layout/.prettierrc');
+    if (fs.existsSync(prettierConfig)) {
+      try {
+        this.spawnCommandSync(
+          'pnpm',
+          [
+            '-C', 'apps/layout', 'exec', 'prettier',
+            '--config', prettierConfig,
+            '--write',
+            `${this.destDir}/**/*.{ts,tsx,js,jsx,json,less,md}`,
+          ],
+          { cwd: this.monorepoRoot },
+        );
+      } catch (e) {
+        this.logger.verbose('Formatting failed (non-critical):', e.message);
+      }
+    }
+  }
+
+  end() {
+    if (this._skipInstall) return;
+
+    this.log('');
+
+    if (this._installFailed) {
+      this.log('⚠️  UMD 包文件已创建，但依赖安装未完成。');
+      this.log('');
+      this.log('   请手动安装依赖:');
+      this.log('');
+      this.log('   pnpm install');
+      this.log('');
+      this.log('   如果安装仍然失败，可尝试:');
+      this.log('   pnpm install --network-concurrency 4');
+    } else {
+      this.log('✅ UMD 包创建成功！');
+    }
+
+    this.log('');
+    this.log('   后续步骤:');
+    this.log('');
+    this.log(`   cd packages/${this.appName}`);
+    this.log('   pnpm dev');
+    this.log('');
+    this.log('   开发模式:');
+    this.log(`   • 预览页面: http://localhost:${this.devPort}/`);
+    this.log(`   • UMD 文件: http://localhost:${this.devPort}/${this.appName}.umd.js`);
+    this.log('');
+  }
+};

package/generators/subapp-umd/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "subapp-umd",
+  "description": "在现有 Monorepo 中创建 UMD 组件包（Webpack 构建）",
+  "usage": "cd <monorepo-root> && mico create subapp-umd",
+  "features": [
+    "Webpack UMD 构建",
+    "React 18 + TypeScript",
+    "dev server 同时提供 HTML 预览和 UMD JS",
+    "Source Map 源码调试"
+  ]
+}

package/generators/subapp-umd/templates/README.md

@@ -0,0 +1,94 @@
+# <%= AppName %>
+
+UMD 组件包，基于 Webpack 构建，支持通过 `<script>` 标签加载。
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+# 在项目根目录执行
+pnpm install
+```
+
+### 本地开发
+
+```bash
+pnpm dev
+```
+
+启动后可通过两种方式使用：
+
+| URL | 用途 |
+|---|---|
+| `http://localhost:<%= devPort %>/` | HTML 预览页，独立调试组件 |
+| `http://localhost:<%= devPort %>/<%= appName %>.umd.js` | UMD JS 文件，供主应用联调 |
+
+DevTools Sources 面板中可在 `webpack://<%= appName %>/src/` 下定位原始 TypeScript 源码进行断点调试。
+
+### 构建
+
+```bash
+pnpm build
+```
+
+产物输出到 `dist/` 目录：
+- `dist/<%= appName %>.umd.js` — UMD bundle
+- `dist/<%= appName %>.css` — 样式文件（如有）
+
+### 在浏览器中使用
+
+```html
+<!-- 1. 加载 React（宿主环境提供） -->
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+
+<!-- 2. 加载 UMD 组件 -->
+<link rel="stylesheet" href="path/to/<%= appName %>.css" />
+<script src="path/to/<%= appName %>.umd.js"></script>
+
+<!-- 3. 使用 -->
+<script>
+  var App = window['<%= umdGlobalName %>'].default;
+  var root = ReactDOM.createRoot(document.getElementById('root'));
+  root.render(React.createElement(App));
+</script>
+```
+
+### 主应用联调
+
+在主应用的 mock 菜单中配置 `jsUrls` 指向本地 dev server：
+
+```json
+{
+  "jsUrls": ["//localhost:<%= devPort %>/<%= appName %>.umd.js"]
+}
+```
+
+## 目录结构
+
+```
+<%= appName %>/
+├── public/
+│   └── index.html          # 本地开发预览页
+├── src/
+│   ├── index.ts            # UMD 入口
+│   ├── App.tsx             # 主组件
+│   └── App.less            # 样式
+├── webpack.config.js       # Webpack 配置
+├── tsconfig.json           # TypeScript 配置
+└── package.json
+```
+
+## 全局变量
+
+UMD 包加载后，可通过 `window.<%= umdGlobalName %>` 访问导出内容。
+
+## External 依赖
+
+以下依赖不打入包体，需由宿主环境提供：
+
+| 包名 | 全局变量 |
+|---|---|
+| `react` | `React` |
+| `react-dom` | `ReactDOM` |

package/generators/subapp-umd/templates/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "<%= packageScope %>/<%= appName %>",
+  "version": "0.0.1",
+  "description": "UMD package - <%= appName %>",
+  "main": "./dist/<%= appName %>.umd.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "build:development": "webpack --mode development",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@mico-platform/ui": ">=0.0.13"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "less": "^4.3.0",
+    "less-loader": "^12.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
+  }
+}

package/generators/subapp-umd/templates/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title><%= AppName %> - UMD Dev Preview</title>
+  <style>
+    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    #root { padding: 24px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+
+  <!-- React (external, provided by host environment) -->
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+  <!-- UMD Bundle -->
+  <script src="/<%= appName %>.umd.js"></script>
+
+  <script>
+    var mod = window['<%= umdGlobalName %>'];
+    var App = mod && (mod.default || mod.App || mod);
+    if (App) {
+      var root = ReactDOM.createRoot(document.getElementById('root'));
+      root.render(React.createElement(App));
+    } else {
+      document.getElementById('root').innerHTML =
+        '<p style="color:red">Error: window.<%= umdGlobalName %> not found. Check UMD global name.</p>';
+    }
+  </script>
+</body>
+</html>

package/generators/subapp-umd/templates/src/App.less

@@ -0,0 +1,15 @@
+.<%= appName %>-container {
+  padding: 16px;
+
+  h2 {
+    margin: 0 0 8px;
+    font-size: 20px;
+    color: #1d2129;
+  }
+
+  p {
+    margin: 0;
+    color: #86909c;
+    font-size: 14px;
+  }
+}

package/generators/subapp-umd/templates/src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.less';
+
+const App: React.FC = () => {
+  return (
+    <div className="<%= appName %>-container">
+      <h2><%= AppName %></h2>
+      <p>UMD component is working.</p>
+    </div>
+  );
+};
+
+export default App;

package/generators/subapp-umd/templates/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './App';
+export { default as App } from './App';

package/generators/subapp-umd/templates/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/generators/subapp-umd/templates/webpack.config.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = (env, argv) => {
+  const isProd = argv.mode === 'production';
+  const outputFilename = '<%= appName %>.umd.js';
+
+  return {
+    entry: './src/index.ts',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: outputFilename,
+      publicPath: '/',
+      library: '<%= umdGlobalName %>',
+      libraryTarget: 'umd',
+      umdNamedDefine: true,
+      globalObject: 'typeof self !== "undefined" ? self : this',
+      clean: true,
+    },
+    externals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      '@mico-platform/ui': 'micoUI',
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.less$/,
+          use: ['style-loader', 'css-loader', 'less-loader'],
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './public/index.html',
+        inject: false,
+      }),
+      ...(isProd
+        ? [new MiniCssExtractPlugin({ filename: '<%= appName %>.css' })]
+        : []),
+    ],
+    devtool: isProd ? false : 'source-map',
+    devServer: {
+      port: <%= devPort %>,
+      hot: true,
+      open: false,
+      allowedHosts: 'all',
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET',
+      },
+      static: {
+        directory: path.join(__dirname, 'public'),
+      },
+    },
+  };
+};