@blocklet/component-studio-cli 0.4.146 → 0.4.148

package/dist/commands/add.js

@@ -2,7 +2,8 @@ import chalk from 'chalk';
 import { Command } from 'commander';
 import inquirer from 'inquirer';
 import { camelCase, upperFirst } from 'lodash-es';
-import { existsSync, mkdirSync, readdirSync } from 'node:fs';
+import { nanoid } from 'nanoid';
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join, relative } from 'node:path';
 import ora from 'ora';
 import { copyTemplateFilesExcept, loadTemplates, selectTemplate, validateTemplate, getTemplatePath, getProjectPath, replaceInDirectory, findClosestMetadataDir, checkTargetDirectoryExists, } from '../utils/helper.js';
@@ -124,6 +125,11 @@ export function createAddCommand() {
                     '{{component_name}}': componentName.toLowerCase(),
                     '{{ComponentName}}': componentName.charAt(0).toUpperCase() + componentName.slice(1),
                 });
+                // 替换 @metadata.json 中的 id，确保实例不重复
+                const metadataPath = join(targetDir, '@metadata.json');
+                const metadata = JSON.parse(readFileSync(metadataPath, 'utf-8'));
+                metadata.id = nanoid();
+                writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
                 spinner.succeed(chalk.green(`Component "${componentName}" created successfully!`));
                 console.log(`\n🚀 Component added to ${chalk.cyan(relative(projectPath, targetDir))}`);
                 console.log(`\n💡 Next steps: import and use your component in your application`);

package/dist/commands/dev.js

@@ -5,7 +5,7 @@ import fs from 'fs-extra';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import ora from 'ora';
-import { getWorkspaceTemplatePath, installDependencies, getWorkspacePath, getProjectPath } from '../utils/helper.js';
+import { getWorkspaceTemplatePath, installDependencies, getWorkspacePath, getProjectPath, replaceInDirectoryFileNameWithExample, } from '../utils/helper.js';
 async function createDevServer(projectPath, _options) {
     // 1. 创建工作区
     const workspacePath = getWorkspacePath();
@@ -15,8 +15,8 @@ async function createDevServer(projectPath, _options) {
     if (!existsSync(workspacePath)) {
         const workspaceTemplatePath = getWorkspaceTemplatePath();
         await fs.copy(workspaceTemplatePath, workspacePath);
-        // 修改 workspace 目录中的 .npmrc_example 文件 为 .npmrc，因为 npm 包默认会把 .npmrc 忽略
-        await fs.rename(join(workspacePath, '.npmrc_example'), join(workspacePath, '.npmrc'));
+        // 修改 workspace 目录中，_example 后缀的文件名，删除 _example 后缀
+        await replaceInDirectoryFileNameWithExample(workspacePath);
         workspaceSpinner.succeed(chalk.green(`Workspace created successfully! ${workspacePathText}`));
     }
     else {
@@ -24,15 +24,36 @@ async function createDevServer(projectPath, _options) {
     }
     // 3. 确保目录中有projects目录
     const projectsDir = join(workspacePath, 'projects');
+    const projectLinkDir = join(projectsDir, 'user-project');
+    const projectLinkSpinner = ora({ text: 'Setting up project to workspace...', color: 'blue' }).start();
+    // 检查是否已经正确链接
+    let needsNewLink = true;
     if (existsSync(projectsDir)) {
-        await fs.remove(projectsDir);
+        try {
+            const stats = await fs.lstat(projectLinkDir);
+            if (stats.isSymbolicLink()) {
+                const currentTarget = await fs.readlink(projectLinkDir);
+                if (currentTarget === projectPath) {
+                    needsNewLink = false;
+                    projectLinkSpinner.succeed(chalk.green('Project already linked to workspace!'));
+                }
+                else {
+                    await fs.remove(projectsDir);
+                }
+            }
+            else {
+                await fs.remove(projectsDir);
+            }
+        }
+        catch (error) {
+            await fs.remove(projectsDir);
+        }
+    }
+    if (needsNewLink) {
+        await fs.ensureDir(projectsDir);
+        await fs.ensureSymlink(projectPath, projectLinkDir);
+        projectLinkSpinner.succeed(chalk.green('Project linked to workspace successfully!'));
     }
-    await fs.ensureDir(projectsDir);
-    // 4. 将用户项目目录链接到目录的projects下
-    const projectLinkSpinner = ora({ text: 'Setting up project to workspace...', color: 'blue' }).start();
-    const projectLinkDir = join(projectsDir, 'user-project');
-    await fs.ensureSymlink(projectPath, projectLinkDir);
-    projectLinkSpinner.succeed(chalk.green('Project linked to workspace successfully!'));
     let shouldInstallWorkspaceDeps = !(await fs.exists(join(workspacePath, 'node_modules')));
     let shouldInstallProjectDeps = !(await fs.exists(join(projectPath, 'node_modules')));
     // 5. 安装依赖
@@ -53,14 +74,24 @@ async function createDevServer(projectPath, _options) {
     const devProcess = spawn('pnpm', ['run', 'dev'], {
         cwd: workspacePath,
         stdio: 'inherit',
+        detached: false,
+    });
+    // 确保子进程能正确接收和处理信号
+    process.on('SIGINT', () => {
+        devProcess.kill('SIGINT');
+    });
+    process.on('SIGTERM', () => {
+        devProcess.kill('SIGTERM');
     });
     devServerSpinner.succeed(chalk.green('Development server created successfully!'));
     // 返回清理函数
     return {
+        shouldInstallWorkspaceDeps,
+        shouldInstallProjectDeps,
         close: async () => {
-            if (devProcess && !devProcess.killed) {
+            if (devProcess) {
                 const closeSpinner = ora({ text: 'Shutting down development server...', color: 'yellow' }).start();
-                devProcess.kill();
+                devProcess.kill('SIGTERM');
                 closeSpinner.succeed(chalk.green('Development server stopped'));
             }
         },
@@ -69,20 +100,23 @@ async function createDevServer(projectPath, _options) {
 export function createDevCommand() {
     return new Command('dev').description('Start development server').action(async (options) => {
         const projectPath = getProjectPath();
+        const server = await createDevServer(projectPath, options);
+        // 处理终止信号
+        const handleTermination = async (signal) => {
+            console.log(chalk.yellow(`\nReceived ${signal} signal. Shutting down...`));
+            await server.close();
+            process.exit(0);
+        };
         try {
-            const server = await createDevServer(projectPath, options);
-            // 处理终止信号
-            const handleTermination = async () => {
-                await server.close();
-                process.exit(0);
-            };
-            process.on('SIGINT', handleTermination);
-            process.on('SIGTERM', handleTermination);
-            process.on('SIGHUP', handleTermination);
+            // 使用 once 而不是 on，确保信号处理程序只被注册一次
+            process.once('SIGINT', () => handleTermination('SIGINT'));
+            process.once('SIGTERM', () => handleTermination('SIGTERM'));
+            process.once('SIGHUP', () => handleTermination('SIGHUP'));
         }
         catch (error) {
             console.error(chalk.red('Failed to start development server:'));
             console.error(error);
+            await server.close();
             process.exit(1);
         }
     });

package/dist/commands/init.js

@@ -5,7 +5,7 @@ import inquirer from 'inquirer';
 import { existsSync, mkdirSync, readdirSync } from 'node:fs';
 import { isAbsolute, join, relative, resolve } from 'node:path';
 import ora from 'ora';
-import { copyTemplateFilesExcept, mergePackageJson, loadTemplates, selectTemplate, validateTemplate, getTemplatePath, } from '../utils/helper.js';
+import { copyTemplateFilesExcept, mergePackageJson, loadTemplates, selectTemplate, validateTemplate, getTemplatePath, replaceInDirectoryFileNameWithExample, } from '../utils/helper.js';
 export function createInitCommand() {
     return new Command('init')
         .description('Initialize a new component project')
@@ -92,6 +92,8 @@ export function createInitCommand() {
         try {
             // 使用新的函数复制文件，排除@template.json
             await copyTemplateFilesExcept(templatePath, path);
+            // 替换目录中的文件名带 _example 后缀的文件名，删除 _example 后缀
+            await replaceInDirectoryFileNameWithExample(path);
             spinner.succeed('Copy template files successfully!');
         }
         catch (error) {
@@ -104,10 +106,9 @@ export function createInitCommand() {
         await mergePackageJson(path, templatePath);
         spinner.succeed('Merge package.json successfully!');
         console.log(chalk.green('\n🎉 Create project successfully!'));
-        console.log(`\nNext steps:`);
+        console.log(`\n💡 Next steps:`);
         console.log(`  1. ${chalk.cyan(`cd ${relative(process.cwd(), path)}`)}`);
         console.log(`  2. ${chalk.cyan('pnpm run dev')}`);
-        console.log(`\nHappy coding! 🚀`);
     })
         .showHelpAfterError(true)
         .showSuggestionAfterError(true);

package/dist/utils/helper.d.ts

@@ -66,6 +66,11 @@ export declare function replaceInFile(filePath: string, replacements: Record<str
  * @param replacements - 替换对象，键为占位符，值为替换内容
  */
 export declare function replaceInDirectory(dirPath: string, replacements: Record<string, string>): Promise<void>;
+/**
+ * 替换目录中的文件名带 _example 后缀的文件名，删除 _example 后缀
+ * @param dirPath - 目录路径
+ */
+export declare function replaceInDirectoryFileNameWithExample(dirPath: string): Promise<void>;
 /**
  * 查找最接近指定目录的包含@metadata.json的目录
  * @param startDir - 起始目录

package/dist/utils/helper.js

@@ -1,5 +1,6 @@
 import chalk from 'chalk';
 import { execSync, spawn } from 'child_process';
+import fs from 'fs-extra';
 import { glob } from 'glob';
 import inquirer from 'inquirer';
 import { existsSync, readFileSync, readdirSync } from 'node:fs';
@@ -103,18 +104,33 @@ export async function installDependencies(dirs, operation = 'install') {
     try {
         const installPromises = Object.entries(dirs).map(([dirType, dirPath]) => {
             return new Promise((resolve, reject) => {
+                let errorOutput = '';
                 const process = spawn('pnpm', ['update:deps'], {
                     cwd: dirPath,
-                    // stdio: 'inherit',
+                    stdio: ['inherit', 'pipe', 'pipe'], // 将 stdout 和 stderr 设为 pipe
+                });
+                // 收集错误输出
+                process.stderr?.on('data', (data) => {
+                    errorOutput += data.toString();
+                });
+                // 收集标准输出（可能包含错误信息）
+                process.stdout?.on('data', (data) => {
+                    const output = data.toString();
+                    if (output.toLowerCase().includes('error')) {
+                        errorOutput += output;
+                    }
                 });
                 process.on('close', (code) => {
                     if (code === 0) {
                         resolve();
                     }
                     else {
-                        reject(new Error(`${dirType} dependencies install failed with code ${code}`));
+                        reject(new Error(`${dirType} dependencies install failed with code ${code}.\nError details:\n${errorOutput?.trimStart()}`));
                     }
                 });
+                process.on('error', (error) => {
+                    reject(new Error(`${dirType} process error: ${error.message}\n${errorOutput}`));
+                });
             });
         });
         // 制作一个假进度条，每秒增加 1%
@@ -141,7 +157,7 @@ export async function installDependencies(dirs, operation = 'install') {
     }
     catch (error) {
         depsSpinner.fail(chalk.red('Failed to install dependencies'));
-        console.error(error);
+        console.error(error.message); // 只输出错误消息，包含了我们收集的详细错误信息
         return false;
     }
 }
@@ -353,6 +369,27 @@ export async function replaceInDirectory(dirPath, replacements) {
         throw error;
     }
 }
+/**
+ * 替换目录中的文件名带 _example 后缀的文件名，删除 _example 后缀
+ * @param dirPath - 目录路径
+ */
+export async function replaceInDirectoryFileNameWithExample(dirPath) {
+    try {
+        // 读取目录内容
+        const entries = await readdir(dirPath, { withFileTypes: true });
+        // 处理每个条目
+        for (const entry of entries) {
+            if (entry.isFile() && entry.name.endsWith('_example')) {
+                const newName = entry.name.replace('_example', '');
+                await fs.rename(join(dirPath, entry.name), join(dirPath, newName));
+            }
+        }
+    }
+    catch (error) {
+        console.error(chalk.red(`Error replacing directory file names in ${dirPath}:`), error);
+        throw error;
+    }
+}
 /**
  * 查找最接近指定目录的包含@metadata.json的目录
  * @param startDir - 起始目录

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/component-studio-cli",
-  "version": "0.4.146",
+  "version": "0.4.148",
   "description": "CLI for Component Studio",
   "publishConfig": {
     "access": "public"
@@ -37,6 +37,7 @@
     "gradient-string": "^3.0.0",
     "inquirer": "^12.5.2",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.3.7",
     "node-fetch": "^2.7.0",
     "ora": "^8.2.0",
     "pretty-error": "^4.0.0",

package/templates/init/0-basic/.gitignore_example

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Production
+dist
+build
+lib
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor
+.idea
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+logs
+*.log 

package/templates/init/1-professional/.gitignore_example

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Production
+dist
+build
+lib
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor
+.idea
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+logs
+*.log 

package/templates/init/2-blank/.gitignore_example

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Production
+dist
+build
+lib
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor
+.idea
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Logs
+logs
+*.log 

package/templates/workspace/.gitignore_example

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+.pnp
+.pnp.js
+.DS_Store
+node_modules
+
+# testing
+coverage
+
+# production
+build
+dist
+dist-ssr
+.blocklet
+.next
+
+# local env files
+*.local
+
+# Log files
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*