react-nest-cli 1.0.3 → 1.0.5

package/packages/cli/src/commands/base/init.ts

@@ -0,0 +1,73 @@
+import type { Command } from 'commander'
+import prompts from 'prompts'
+import promptsConfig from '../../configs/prompts.config.ts'
+import consola from 'consola'
+import fsExtra from 'fs-extra'
+import path from 'node:path'
+import { cwd } from 'node:process'
+import { downloadTemplate } from 'giget'
+import ora from 'ora'
+
+export default function init(program: Command) {
+    program
+        .command('init')
+        .description('初始化项目')
+        .argument('[project-name]', '项目名称')
+        .option('--template <template-name>', '项目模板名称')
+        .action(async (projectName, rest) => {
+            let { template } = rest || {}
+            // 如果projectName没有提供，让用户输入
+            if (!projectName) {
+                const response = await prompts({
+                    type: 'text',
+                    initial: 'my-project', // 默认值
+                    name: 'projectName',
+                    message: '请输入项目名称',
+                    // validate: value => value.length ? true : '请输入项目名称'
+                })
+                projectName = response.projectName
+            }
+
+            // 如果template没有提供或者template不存在，让用户选择
+            const noTemplate =
+                template &&
+                !promptsConfig.templates.find((item) => item.value === template)
+            if (!template || noTemplate) {
+                if (noTemplate) {
+                    consola.error(`项目模板 ${template} 不存在, 请选择其他模板`)
+                }
+                const response = await prompts({
+                    type: 'select',
+                    name: 'template',
+                    message: '请选择项目模板',
+                    choices: promptsConfig.templates,
+                    initial: 0, // 默认选择第一个
+                })
+                template = response.template
+            }
+
+            const tip = `初始化项目 ${projectName}，模板 ${template}`
+            const spinner = ora({
+                text: tip,
+                color: 'blue',
+                // spinner: 'growVertical',
+                // isEnabled: false
+            })
+            spinner.start()
+
+            const projectDir = path.resolve(cwd(), projectName)
+            if (fsExtra.existsSync(projectDir)) {
+                spinner.fail(`💥初始化失败: 项目目录 ${projectName} 已存在`)
+                return
+            }
+
+            const res = await downloadTemplate(
+                `github:liaolonghui/react-nest-cli/packages/templates/${template}#main`,
+                {
+                    dir: projectDir,
+                }
+            )
+            const { dir } = res
+            spinner.succeed(`项目初始化成功，项目目录：${dir}`)
+        })
+}

package/packages/cli/src/commands/base/initComponent.ts

@@ -0,0 +1,174 @@
+import { type Command } from 'commander'
+import consola from 'consola'
+import fs from 'node:fs'
+import path from 'node:path'
+import { cwd } from 'node:process'
+import ora from 'ora'
+import prompts from 'prompts'
+
+const firstCharUpperCase = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+// 确保目录存在
+const ensureDir = (dir: string) => {
+    return new Promise((resolve) => {
+        fs.mkdir(dir, { recursive: true }, (err) => {
+            if (err) {
+                consola.error(`创建目录 ${dir} 失败`)
+                resolve(false)
+            } else {
+                resolve(true)
+            }
+        })
+    })
+}
+
+// 检查路径是否存在
+const existsPath = (path: string) => {
+    return new Promise((resolve) => {
+        fs.stat(path, (err) => {
+            // consola.log(err)
+            if (err) {
+                resolve(false)
+            } else {
+                resolve(true)
+            }
+        })
+    })
+}
+
+const safeSaveFile = async (
+    path: string,
+    content: string,
+    force: boolean = false
+) => {
+    return new Promise((resolve, reject) => {
+        existsPath(path)
+            .then((exists) => {
+                if (exists) {
+                    if (!force) {
+                        consola.error(`文件${path} 已存在`)
+                        reject(false)
+                        return
+                    }
+                } else {
+                    fs.writeFile(path, content, 'utf-8', (err) => {
+                        if (err) {
+                            consola.error(`文件${path} 写入失败`)
+                            reject(false)
+                        } else {
+                            resolve(true)
+                        }
+                    })
+                }
+            })
+            .catch(() => {
+                reject(false)
+            })
+    })
+}
+
+const initComponent = (program: Command) => {
+    program
+        .command('init:component')
+        .alias('init:c')
+        .alias('init:comp')
+        .argument('[component-name]', '组件名称(如Button、Text、Card)')
+        .description('初始化React组件 TSX + CSS')
+        .option(
+            '-d, --dir <dir>',
+            '生成组件目录，默认src/components',
+            'src/components'
+        )
+        .option('-s, --style <style>', '使用哪种样式方案，默认css', 'css')
+        .option('-j, --jsx', '是否使用JSX文件，默认TSX', false)
+        .option('-f, --force', '是否强制覆盖已存在组件', false)
+        .action(async (componentName, rest) => {
+            const { dir, style, jsx, force } = rest || {}
+            if (!componentName) {
+                const response = await prompts({
+                    type: 'text',
+                    initial: 'Button', // 默认值
+                    name: 'componentName',
+                    message: '请输入组件名称',
+                })
+                componentName = response.componentName
+            }
+            if (!componentName || !componentName.trim()) {
+                process.stderr.write('组件名称不能为空\n')
+                process.exit(1)
+            }
+
+            componentName = firstCharUpperCase(componentName)
+
+            // 组件目录
+            const inputComponentDir = path.join(
+                'apps/components',
+                componentName
+            )
+            const outputComponentDir = path.resolve(cwd(), dir, componentName)
+
+            const inputExists = await existsPath(inputComponentDir)
+            // consola.log(inputExists)
+            if (!inputExists) {
+                consola.error(`组件 ${componentName} 不存在`)
+                process.exit(1)
+            }
+
+            const tip = `初始化组件 ${componentName}`
+            const spinner = ora(tip).start()
+
+            // 初始化组件   确保输出组件目录存在
+            const dirExists = await ensureDir(outputComponentDir)
+            if (!dirExists) {
+                spinner.fail(
+                    `组件 ${componentName} 初始化失败, 目录 ${outputComponentDir} 创建失败`
+                )
+                return
+            }
+
+            let esFileExt = 'tsx'
+            let styleFileExt = 'css'
+            if (jsx) {
+                esFileExt = 'jsx'
+            }
+            if (style === 'less') {
+                styleFileExt = 'less'
+            }
+
+            const esPath = path.resolve(
+                outputComponentDir,
+                `index.${esFileExt}`
+            )
+            const stylePath = path.resolve(
+                outputComponentDir,
+                `index.${styleFileExt}`
+            )
+            let esContent = fs.readFileSync(
+                path.resolve(inputComponentDir, `index.${esFileExt}`),
+                'utf-8'
+            )
+            const styleContent = fs.readFileSync(
+                path.resolve(inputComponentDir, `index.${styleFileExt}`),
+                'utf-8'
+            )
+            // 需要手动给esContent导入对应的style文件
+            esContent = `import './index.${styleFileExt}';\n${esContent}`
+
+            Promise.all([
+                safeSaveFile(esPath, esContent, force),
+                safeSaveFile(stylePath, styleContent, force),
+            ])
+                .then(() => {
+                    spinner.succeed(
+                        `组件 ${componentName} 初始化成功, 目录 ${outputComponentDir}`
+                    )
+                })
+                .catch(() => {
+                    spinner.fail(`组件 ${componentName} 初始化失败`)
+                })
+        })
+}
+
+export default initComponent

package/packages/cli/src/commands/base/version.ts

@@ -0,0 +1,16 @@
+import type { Command } from 'commander'
+import consola from 'consola'
+import figlet from 'figlet'
+import textConfig from '../../configs/text.config.ts'
+
+export default function version(program: Command) {
+    // 输出版本号
+    program
+        .command('version')
+        .description('输出版本号')
+        .action(() => {
+            consola.info(
+                figlet.textSync(`version ==> ${program.version()}`, textConfig)
+            )
+        })
+}

package/packages/cli/src/commands/baseRegisterCommands.ts

@@ -0,0 +1,9 @@
+import type { Command } from 'commander'
+
+function baseRegisterCommands(program: Command) {
+    return function registerCommand(fn: (program: Command) => void) {
+        fn(program)
+    }
+}
+
+export default baseRegisterCommands

package/packages/cli/src/configs/prompts.config.ts

@@ -1,8 +1,23 @@
-
-
 export default {
     templates: [
-        { title: 'React + Nest', value: 'react-nest', description: '这个模板包含了 React + Nest 项目的基本配置', disabled: false },
-        { title: 'React + Nest + TypeScript', value: 'react-nest-ts', description: '这个模板包含了 React + Nest + TypeScript 项目的基本配置', disabled: false },
-    ]
-}
+        {
+            title: 'React + Nest',
+            value: 'react-nest',
+            description: '这个模板包含了 React + Nest 项目的基本配置',
+            disabled: false,
+        },
+        {
+            title: 'React + Nest + TypeScript',
+            value: 'react-nest-ts',
+            description:
+                '这个模板包含了 React + Nest + TypeScript 项目的基本配置',
+            disabled: false,
+        },
+        {
+            title: 'Vue',
+            value: 'vue-template',
+            description: '这个模板包含了 Vue 项目的基本配置',
+            disabled: false,
+        },
+    ],
+}

package/packages/cli/src/index.ts

@@ -1,112 +1,32 @@
 #!/usr/bin/env node
-import { program } from "commander";
-import picocolors from "picocolors"; // 也可用chalk
-import figlet from 'figlet';
-import prompts from 'prompts'; // 也可用inquirer、手动readline等
-import consola from "consola";
-import ora from 'ora';
-import { downloadTemplate } from 'giget';
-import path from 'node:path';
-import fsExtra from 'fs-extra';
-import textConfig from './configs/text.config.ts';
-import promptsConfig from "./configs/prompts.config.ts";
-
-
-// 输出项目信息
-const logInfo = () => {
-    console.info(picocolors.yellow(figlet.textSync('React Nest CLI', textConfig)))
-    consola.start(picocolors.yellow(program.description()))
-    consola.info(picocolors.yellow(program.version()))
-}
+import { program } from 'commander'
+import packageJson from '../package.json' with { type: 'json' }
+import baseRegisterCommands from './commands/baseRegisterCommands.ts'
+import info, { logInfo } from './commands/base/info.ts'
+import version from './commands/base/version.ts'
+import init from './commands/base/init.ts'
+import initComponent from './commands/base/initComponent.ts'
 
 // import.meta.dirname 指向当前文件所在目录
 // process.cwd() 指向当前工作目录 （实际运行时目录，不是当前文件所在目录）
-const cwd = process.cwd();
-const dirname = import.meta.dirname;
-const packageJsonPath = path.resolve(dirname, '../../../package.json');
-const packageJson = JSON.parse(fsExtra.readFileSync(packageJsonPath, 'utf-8'));
-
-// console.log(packageJsonPath, packageJson);
+// const cwd = process.cwd();
+// const dirname = import.meta.dirname;
 
 program
     .version(packageJson.version, '-V, --version', '输出版本号')
     .helpOption('-h, --help', '输出帮助信息')
     // .help((str) => '帮助信息：\n' + str)
     .description(packageJson.description)
-    .action(logInfo);
-
-// 输出项目信息
-program
-    .command('info')
-    .description('输出项目信息')
-    .action(logInfo);
-
-// 初始化项目
-program
-    .command('init')
-    .description('初始化项目')
-    .argument('[project-name]', '项目名称')
-    .option('--template <template-name>', '项目模板名称')
-    .action(async (projectName, rest) => {
-        let { template } = rest || {};
-        // 如果projectName没有提供，让用户输入
-        if (!projectName) {
-            const response = await prompts({
-                type: 'text',
-                initial: 'my-project', // 默认值
-                name: 'projectName',
-                message: '请输入项目名称',
-                // validate: value => value.length ? true : '请输入项目名称'
-            });
-            projectName = response.projectName;
-        }
-
-        // 如果template没有提供或者template不存在，让用户选择
-        const noTemplate = (template && !promptsConfig.templates.find(item => item.value === template));
-        if (!template || noTemplate) {
-            if (noTemplate) {
-                consola.error(`项目模板 ${template} 不存在, 请选择其他模板`);
-            }
-            const response = await prompts({
-                type: 'select',
-                name: 'template',
-                message: '请选择项目模板',
-                choices: promptsConfig.templates,
-                initial: 0, // 默认选择第一个
-            });
-            template = response.template;
-        }
-
-        const tip = `初始化项目 ${projectName}，模板 ${template}`;
-        const spinner = ora({
-            text: tip,
-            color: 'blue',
-            // spinner: 'growVertical',
-            // isEnabled: false
-        });
-        spinner.start();
-
-        const projectDir = path.resolve(cwd, projectName);
-        if (fsExtra.existsSync(projectDir)) {
-            spinner.fail(`💥初始化失败: 项目目录 ${projectName} 已存在`);
-            return;
-        }
-
-        const res = await downloadTemplate(`github:liaolonghui/react-nest-cli/packages/templates/${template}#main`, {
-            dir: projectDir,
-        });
-        const { dir } = res;
-        spinner.succeed(`项目初始化成功，项目目录：${dir}`);
-        // console.log(res);
-
-    });
-
-// 输出版本号
-program.command('version')
-    .description('输出版本号')
-    .action(() => {
-        // 全局option -V, --version 已被注册，这里无需再注册version命令，只是为了演示
-        consola.info(figlet.textSync(`version ==> ${program.version()}`, textConfig));
-    });
-
-program.parse();
+    .action(() => logInfo(program))
+
+const registerCommand = baseRegisterCommands(program)
+// 注册info命令
+registerCommand(info)
+// 初始化项目命令
+registerCommand(init)
+// 初始化组件命令
+registerCommand(initComponent)
+// 输出版本号命令
+registerCommand(version)
+
+program.parse(process.argv)

package/packages/templates/react-nest/index.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+h1 {
+  color: red;
+}

package/packages/templates/react-nest/index.js

@@ -0,0 +1 @@
+console.log('react-nest template')

package/packages/templates/react-nest-ts/index.js

@@ -0,0 +1 @@
+console.log('react-nest-ts template')

package/pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 packages:
-  - 'src/packages/**'
-  - 'src/app/**'
+  - 'packages/*'
+  - 'apps/*'

package/prettier.config.js

@@ -0,0 +1,6 @@
+export default {
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+}

package/stylelint.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import("stylelint").Config} */
+export default {
+  "customSyntax" : "postcss-styled-syntax",
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "unit-allowed-list": [
+      "px",
+      "em",
+      "rem"
+    ],
+    "block-no-empty": true,
+    "declaration-property-value-keyword-no-deprecated": true,
+    "comment-no-empty": true,
+    "comment-empty-line-before": null,
+    "selector-not-notation": null
+  }
+};

package/tsconfig.json

@@ -1,47 +1,48 @@
 {
-  // Visit https://aka.ms/tsconfig to read more about this file
-  "compilerOptions": {
-    // File Layout
-    // "rootDir": "./src",
-    // "outDir": "./dist",
+    // Visit https://aka.ms/tsconfig to read more about this file
+    "compilerOptions": {
+        // File Layout
+        // "rootDir": "./src",
+        // "outDir": "./dist",
 
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    "module": "nodenext",
-    "target": "esnext",
-    // For nodejs:
-    "lib": ["esnext"],
-    "types": ["node"],
-    // and npm install -D @types/node
+        // Environment Settings
+        // See also https://aka.ms/tsconfig/module
+        "module": "nodenext",
+        "target": "esnext",
+        // For nodejs:
+        "lib": ["esnext", "dom", "DOM.Iterable"],
+        "types": ["node"],
+        // and npm install -D @types/node
 
-    "emitDeclarationOnly": true,
-    "allowImportingTsExtensions": true,
+        // "noEmit": true,
+        "emitDeclarationOnly": true,
+        "allowImportingTsExtensions": true,
 
+        // Other Outputs
+        "sourceMap": true,
+        "declaration": true,
+        "declarationMap": true,
 
-    // Other Outputs
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,
+        // Stricter Typechecking Options
+        "noUncheckedIndexedAccess": true,
+        "exactOptionalPropertyTypes": true,
 
-    // Stricter Typechecking Options
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
+        // Style Options
+        // "noImplicitReturns": true,
+        // "noImplicitOverride": true,
+        // "noUnusedLocals": true,
+        // "noUnusedParameters": true,
+        // "noFallthroughCasesInSwitch": true,
+        // "noPropertyAccessFromIndexSignature": true,
 
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-    "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
+        // Recommended Options
+        "strict": true,
+        "jsx": "react-jsx",
+        "verbatimModuleSyntax": true,
+        "isolatedModules": true,
+        "noUncheckedSideEffectImports": true,
+        "moduleDetection": "force",
+        "skipLibCheck": true
+    },
+    "exclude": ["node_modules", "apps/**/*"]
 }

package/tsup.config.ts

@@ -1,11 +1,18 @@
-import { defineConfig } from "tsup";
-
+import { defineConfig } from 'tsup'
 
 export default defineConfig({
-    entry: ['packages/cli/src/index.ts'],
+    entry: ['packages/cli/src'],
     outDir: 'packages/cli/dist',
-    format: ['esm'],
+    format: ['esm'], // ['esm', 'cjs', 'iife'],
+    bundle: true,
     dts: true,
     sourcemap: true,
     clean: true,
-})
+    splitting: true,
+    minify: false,
+    outExtension() {
+        return {
+            js: `.js`,
+        }
+    },
+})