@blocklet/component-studio-cli 0.4.134

package/README.md

@@ -0,0 +1,84 @@
+# Component Studio CLI
+
+A powerful CLI tool for building, developing, and publishing components with [Component Studio](https://github.com/blocklet/pages-kit).
+
+## Installation
+
+```bash
+# Global installation
+npm install -g @blocklet/component-studio-cli
+
+# Or use npx directly
+npx @blocklet/component-studio-cli init my-component
+```
+
+## Commands
+
+### Initialize a new project
+
+```bash
+component-studio init [project-name]
+```
+
+Creates a new component project with a minimal directory structure.
+
+### Start development server
+
+```bash
+component-studio dev
+```
+
+Starts a development server with a hidden configuration, making development simpler.
+
+### Add components or tools
+
+```bash
+component-studio add [name] [-t, --template <template>]
+```
+
+Adds a component or tool from template to your project.
+
+### Migrate components
+
+```bash
+component-studio migrate <url> [--output-dir <dir>]
+```
+
+Migrates components from an existing pages-kit project.
+
+### Update dependencies
+
+```bash
+component-studio update
+```
+
+Updates both workspace and project dependencies.
+
+## Features
+
+- **Simple Development**: Hide complex configuration from developers
+- **Flexible Templates**: Choose from different component templates
+- **Component Addition**: Easy to add new components from templates
+- **Component Migration**: Import components from existing pages-kit projects
+- **Easy Updates**: Keep dependencies up-to-date with a single command
+
+## Project Structure
+
+When using Component Studio CLI, your project structure will look like this:
+
+```
+my-component/
+  ├── src/
+  │   ├── components/        # Component files
+  │   │   ├── MyComponent.tsx      # Example component
+  │   │   └── @metadata.json       # Component metadata
+  │   └── index.ts           # Main entry point
+  ├── package.json
+  ├── tsconfig.json
+  ├── vite.config.ts         # Minimal config, enhanced by CLI
+  └── README.md
+```
+
+## License
+
+ISC

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import PrettyError from 'pretty-error';
+import { createComponentStudioCommand } from './commands/component-studio';
+import { displayLogo } from './utils/display-logo';
+displayLogo();
+createComponentStudioCommand()
+    .parseAsync()
+    .catch((error) => {
+    console.error(new PrettyError().render(error));
+    process.exit(1);
+});

package/dist/commands/add.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare function createAddCommand(): Command;

package/dist/commands/add.js

@@ -0,0 +1,140 @@
+import chalk from 'chalk';
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import { camelCase, upperFirst } from 'lodash';
+import { existsSync, mkdirSync, readdirSync } 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';
+// 模板目录常量
+const TOOLS_DIR = 'tools';
+const COMPONENTS_DIR = 'components';
+export function createAddCommand() {
+    return new Command('add')
+        .description('Add the component or tool from template to your project')
+        .argument('[name]', 'Component name', '')
+        .option('-t, --template <template>', 'Specify template to use')
+        .action(async (name, options) => {
+        const projectPath = getProjectPath();
+        const addTemplateDir = join(__dirname, '../../templates/add');
+        // 检查add模板目录是否存在
+        if (!existsSync(addTemplateDir)) {
+            console.log(chalk.red('Add templates directory not found. Please check your installation.'));
+            process.exit(1);
+        }
+        // 加载可用模板
+        const spinner = ora('Loading add templates...').start();
+        const templates = loadTemplates(addTemplateDir);
+        spinner.succeed(`Templates loaded: ${templates.length} templates available`);
+        // 确保至少有一个模板
+        if (templates.length === 0) {
+            console.log(chalk.red('No add templates found. Please check your installation.'));
+            process.exit(1);
+        }
+        // 让用户选择模板类型
+        let templateKey = options.template;
+        if (!templateKey) {
+            templateKey = await selectTemplate(templates, undefined, true);
+        }
+        // 验证所选模板是否存在
+        const selectedTemplate = validateTemplate(templateKey, templates);
+        if (!selectedTemplate) {
+            process.exit(1);
+        }
+        console.log(chalk.blue(`\nSelected template: "${selectedTemplate.name}"`));
+        // 解析模板类型
+        const templatePathParts = selectedTemplate.key.split('/');
+        const templateType = templatePathParts[0]; // 获取第一级目录名
+        const templatePath = getTemplatePath(selectedTemplate.key, addTemplateDir);
+        if (!existsSync(templatePath)) {
+            console.log(chalk.red(`Template directory "${selectedTemplate.name}" not found.`));
+            process.exit(1);
+        }
+        // 处理工具类模板
+        if (templateType === TOOLS_DIR) {
+            const firstDir = readdirSync(templatePath)[0];
+            const targetDir = join(projectPath, firstDir || '');
+            // 如果模板名称和项目中同名文件夹冲突，提示是否覆盖
+            const canContinue = await checkTargetDirectoryExists(targetDir, projectPath);
+            if (!canContinue) {
+                process.exit(0);
+            }
+            // 对于工具类模板，直接复制到项目根目录
+            spinner.start(`Adding tool "${selectedTemplate.name}" to project...`);
+            try {
+                // 复制模板文件，排除元数据
+                await copyTemplateFilesExcept(templatePath, projectPath);
+                spinner.succeed(chalk.green(`Tool "${selectedTemplate.name}" added successfully!`));
+                console.log(`\n🚀 Tool files have been added to your project`);
+            }
+            catch (error) {
+                spinner.fail(chalk.red('Failed to add tool'));
+                console.error(error);
+                process.exit(1);
+            }
+        }
+        else if (templateType === COMPONENTS_DIR) {
+            // 处理组件类模板
+            // 如果没有提供名称，询问用户
+            let componentName = name;
+            if (!componentName) {
+                const answers = await inquirer.prompt([
+                    {
+                        type: 'input',
+                        name: 'componentName',
+                        message: 'Component name:',
+                        default: upperFirst(camelCase(selectedTemplate.name)) ?? 'NewComponent',
+                        validate: (input) => {
+                            if (input.trim() === '')
+                                return 'Component name cannot be empty.';
+                            return true;
+                        },
+                    },
+                ]);
+                componentName = answers.componentName;
+            }
+            // 自动计算目标目录
+            let targetBaseDir = join(projectPath, 'src', 'components');
+            // 尝试查找最近的包含@metadata.json的目录
+            spinner.start('Detecting components directory...');
+            const closestDir = await findClosestMetadataDir(projectPath);
+            if (closestDir) {
+                targetBaseDir = closestDir;
+                spinner.succeed(`Found components directory: ${chalk.cyan(relative(projectPath, targetBaseDir))}`);
+            }
+            else {
+                spinner.info(`Using default components directory: ${chalk.cyan('src/components')}`);
+            }
+            // 确定目标目录
+            const targetDir = join(targetBaseDir, componentName);
+            // 检查目录
+            const canContinue = await checkTargetDirectoryExists(targetDir, targetBaseDir);
+            if (!canContinue) {
+                process.exit(0);
+            }
+            // 创建目标目录
+            spinner.start(`Creating component "${componentName}"...`);
+            try {
+                mkdirSync(targetDir, { recursive: true });
+                // 复制模板文件，排除元数据
+                await copyTemplateFilesExcept(templatePath, targetDir);
+                // 替换模板中的占位符
+                await replaceInDirectory(targetDir, {
+                    '{{COMPONENT_NAME}}': componentName,
+                    '{{component_name}}': componentName.toLowerCase(),
+                    '{{ComponentName}}': componentName.charAt(0).toUpperCase() + componentName.slice(1),
+                });
+                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`);
+            }
+            catch (error) {
+                spinner.fail(chalk.red('Failed to create component'));
+                console.error(error);
+                process.exit(1);
+            }
+        }
+    })
+        .showHelpAfterError(true)
+        .showSuggestionAfterError(true);
+}

package/dist/commands/component-studio.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare function createComponentStudioCommand(): Command;

package/dist/commands/component-studio.js

@@ -0,0 +1,70 @@
+import chalk from 'chalk';
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import pkg from '../../package.json' with { type: 'json' };
+import { isCommandAvailable, installGlobalPackage } from '../utils/helper';
+import { createAddCommand } from './add';
+import { createDevCommand } from './dev';
+import { createInitCommand } from './init';
+import { createMigrateCommand } from './migrate';
+import { createUpdateCommand } from './update';
+/**
+ * 检查必要的命令依赖是否已安装
+ */
+async function checkDependencies() {
+    const missingDeps = [];
+    // 检查 blocklet 命令
+    if (!isCommandAvailable('blocklet')) {
+        missingDeps.push({ name: 'blocklet', package: '@blocklet/cli' });
+    }
+    // 检查 pnpm 命令
+    if (!isCommandAvailable('pnpm')) {
+        missingDeps.push({ name: 'pnpm', package: 'pnpm' });
+    }
+    // 如果有缺失的依赖
+    if (missingDeps.length > 0) {
+        console.log(chalk.yellow('Missing dependencies detected:'));
+        for (const dep of missingDeps) {
+            console.log(chalk.yellow(`- ${dep.name} (${dep.package})`));
+        }
+        // 询问用户是否自动安装
+        const answers = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'autoInstall',
+                message: 'Do you want to install these dependencies automatically?',
+                default: true,
+            },
+        ]);
+        const missingPackagesText = missingDeps.map((dep) => dep.package).join(' ');
+        if (answers.autoInstall) {
+            await installGlobalPackage(missingPackagesText);
+        }
+        else {
+            // 提供手动安装指令
+            console.log(chalk.blue('\nPlease install the following dependencies manually:'));
+            console.log(chalk.blue(`  npm install -g ${missingPackagesText}`));
+            console.log('');
+        }
+    }
+}
+export function createComponentStudioCommand() {
+    const program = new Command()
+        .name('component-studio')
+        .description('CLI for Component Studio')
+        .version(pkg.version)
+        .addCommand(createInitCommand()) // 初始化项目
+        .addCommand(createDevCommand()) // 开发模式
+        .addCommand(createUpdateCommand()) // 更新依赖
+        .addCommand(createAddCommand()) // 添加组件
+        .addCommand(createMigrateCommand()) // 迁移组件
+        .showHelpAfterError(true)
+        .showSuggestionAfterError(true);
+    // 添加依赖检查逻辑
+    const originalParse = program.parseAsync;
+    program.parseAsync = async (argv) => {
+        await checkDependencies();
+        return originalParse.call(program, argv);
+    };
+    return program;
+}

package/dist/commands/dev.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare function createDevCommand(): Command;

package/dist/commands/dev.js

@@ -0,0 +1,87 @@
+import chalk from 'chalk';
+import { spawn } from 'child_process';
+import { Command } from 'commander';
+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';
+async function createDevServer(projectPath, _options) {
+    // 1. 创建工作区
+    const workspacePath = getWorkspacePath();
+    const workspaceSpinner = ora({ text: 'Creating workspace...', color: 'blue' }).start();
+    const workspacePathText = chalk.blue(`The workspace directory: ${workspacePath}`);
+    // 2. 准备基础环境
+    if (!existsSync(workspacePath)) {
+        const workspaceTemplatePath = getWorkspaceTemplatePath();
+        await fs.copy(workspaceTemplatePath, workspacePath);
+        workspaceSpinner.succeed(chalk.green(`Workspace created successfully! ${workspacePathText}`));
+    }
+    else {
+        workspaceSpinner.succeed(chalk.green(`Using existing workspace! ${workspacePathText}`));
+    }
+    // 3. 确保目录中有projects目录
+    const projectsDir = join(workspacePath, 'projects');
+    if (existsSync(projectsDir)) {
+        await fs.remove(projectsDir);
+    }
+    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. 安装依赖
+    if (shouldInstallWorkspaceDeps || shouldInstallProjectDeps) {
+        const dirsToInstall = {};
+        if (shouldInstallWorkspaceDeps) {
+            dirsToInstall['Workspace'] = workspacePath;
+        }
+        if (shouldInstallProjectDeps) {
+            dirsToInstall['Project'] = projectPath;
+        }
+        const result = await installDependencies(dirsToInstall);
+        if (!result) {
+            process.exit(1);
+        }
+    }
+    const devServerSpinner = ora({ text: 'Creating development server...', color: 'blue' }).start();
+    const devProcess = spawn('pnpm', ['run', 'dev'], {
+        cwd: workspacePath,
+        stdio: 'inherit',
+    });
+    devServerSpinner.succeed(chalk.green('Development server created successfully!'));
+    // 返回清理函数
+    return {
+        close: async () => {
+            if (devProcess && !devProcess.killed) {
+                const closeSpinner = ora({ text: 'Shutting down development server...', color: 'yellow' }).start();
+                devProcess.kill();
+                closeSpinner.succeed(chalk.green('Development server stopped'));
+            }
+        },
+    };
+}
+export function createDevCommand() {
+    return new Command('dev').description('Start development server').action(async (options) => {
+        const projectPath = getProjectPath();
+        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);
+        }
+        catch (error) {
+            console.error(chalk.red('Failed to start development server:'));
+            console.error(error);
+            process.exit(1);
+        }
+    });
+}

package/dist/commands/init.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare function createInitCommand(): Command;

package/dist/commands/init.js

@@ -0,0 +1,114 @@
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import { Command } from 'commander';
+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';
+export function createInitCommand() {
+    return new Command('init')
+        .description('Initialize a new component project')
+        .argument('[path]', 'Path to create the project directory', '.')
+        .action(async (_path, options) => {
+        let path = _path;
+        const initTemplateDir = join(__dirname, '../../templates/init');
+        if (path === '.') {
+            const answers = await inquirer.prompt([
+                {
+                    type: 'input',
+                    name: 'projectName',
+                    message: 'Project name:',
+                    default: _path !== '.' ? _path : 'my-component-project',
+                    validate: (input) => {
+                        if (input.trim() === '')
+                            return 'Project name cannot be empty.';
+                        // Check for valid package name format
+                        if (!/^[a-z0-9-_.]+$/.test(input)) {
+                            return 'Project name can only contain lowercase letters, numbers, hyphens, underscores, and dots.';
+                        }
+                        return true;
+                    },
+                },
+            ]);
+            path = answers.projectName;
+        }
+        path = isAbsolute(path) ? path : resolve(process.cwd(), path);
+        const isPathNotEmpty = existsSync(path) && readdirSync(path).length > 0;
+        if (isPathNotEmpty) {
+            const answers = await inquirer.prompt([
+                {
+                    type: 'confirm',
+                    name: 'overwrite',
+                    message: `The directory "${path}" is not empty. Do you want to remove its contents?`,
+                    default: false,
+                },
+            ]);
+            if (!answers.overwrite) {
+                console.log(chalk.yellow('Operation cancelled.'));
+                process.exit(0);
+            }
+        }
+        // 加载可用模板
+        const spinner = ora('Loading templates...').start();
+        const templates = loadTemplates(initTemplateDir);
+        spinner.succeed(`Templates loaded ${templates.length} templates`);
+        // 确保至少有一个模板
+        if (templates.length === 0) {
+            console.log(chalk.red('No templates found. Please check your installation.'));
+            process.exit(1);
+        }
+        // 如果命令行没有指定模板，则提示用户选择
+        let templateKey = options.template;
+        if (!templateKey) {
+            templateKey = await selectTemplate(templates);
+        }
+        // 验证所选模板是否存在
+        const selectedTemplate = validateTemplate(templateKey, templates);
+        if (!selectedTemplate) {
+            process.exit(1);
+        }
+        console.log(chalk.blue(`\nCreating project with "${selectedTemplate.name}" template...`));
+        // 1. 创建项目目录
+        mkdirSync(path, { recursive: true });
+        // 2. 使用 npm init 初始化项目
+        spinner.start('Initializing project...');
+        try {
+            execSync('npm init -y', { cwd: path, stdio: 'ignore' });
+            spinner.succeed('Initialize npm project successfully!');
+        }
+        catch (error) {
+            spinner.fail('Initialize npm project failed');
+            console.error(chalk.red('Error:'), error);
+            process.exit(1);
+        }
+        // 3. 复制模板文件，但排除@template.json
+        const templatePath = getTemplatePath(selectedTemplate.key, initTemplateDir);
+        if (!existsSync(templatePath)) {
+            console.log(chalk.red(`Template directory "${selectedTemplate.name}" not found.`));
+            process.exit(1);
+        }
+        spinner.start('Copying template files...');
+        try {
+            // 使用新的函数复制文件，排除@template.json
+            await copyTemplateFilesExcept(templatePath, path);
+            spinner.succeed('Copy template files successfully!');
+        }
+        catch (error) {
+            spinner.fail('Copy template files failed');
+            console.error(chalk.red('Error:'), error);
+            process.exit(1);
+        }
+        // 4. 合并 package.json
+        spinner.start('Merging package.json...');
+        await mergePackageJson(path, templatePath);
+        spinner.succeed('Merge package.json successfully!');
+        console.log(chalk.green('\n🎉 Create project successfully!'));
+        console.log(`\nNext 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/commands/migrate.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare function createMigrateCommand(): Command;