create-esmx 3.0.0-rc.104

package/src/cli.integration.test.ts

@@ -0,0 +1,289 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { cli } from './cli';
+import { getAvailableTemplates } from './template';
+
+async function createTempDir(prefix = 'esmx-test-'): Promise<string> {
+    return mkdtemp(join(tmpdir(), prefix));
+}
+
+async function cleanupTempDir(tempDir: string): Promise<void> {
+    try {
+        await rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+        console.warn(`Failed to cleanup temp directory: ${tempDir}`, error);
+    }
+}
+
+async function verifyProjectStructure(
+    projectPath: string,
+    projectName: string
+): Promise<void> {
+    expect(existsSync(projectPath)).toBe(true);
+    expect(existsSync(join(projectPath, 'src'))).toBe(true);
+
+    const requiredFiles = [
+        'package.json',
+        'tsconfig.json',
+        'README.md',
+        'src/entry.node.ts'
+    ];
+
+    for (const file of requiredFiles) {
+        expect(existsSync(join(projectPath, file))).toBe(true);
+        if (!existsSync(join(projectPath, file))) {
+            throw new Error(`Missing required file: ${file}`);
+        }
+    }
+
+    // Check for entry.client.ts (only .ts extension is allowed)
+    const entryClientTs = join(projectPath, 'src/entry.client.ts');
+    expect(existsSync(entryClientTs)).toBe(true);
+    if (!existsSync(entryClientTs)) {
+        throw new Error('Missing required file: src/entry.client.ts');
+    }
+
+    const packageJson = JSON.parse(
+        readFileSync(join(projectPath, 'package.json'), 'utf-8')
+    );
+
+    const typeCheckCommands = ['vue-tsc --noEmit', 'tsc --noEmit'];
+    const typeGenCommands = [
+        'vue-tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src',
+        'tsc --declaration --emitDeclarationOnly --outDir dist/src && tsc-alias -p tsconfig.json --outDir dist/src'
+    ];
+
+    expect(packageJson).toMatchObject({
+        name: projectName,
+        type: 'module',
+        private: true,
+        scripts: {
+            dev: 'esmx dev',
+            build: 'esmx build',
+            preview: 'esmx preview',
+            start: 'esmx start'
+        },
+        dependencies: {
+            '@esmx/core': expect.any(String)
+        },
+        devDependencies: {
+            typescript: expect.any(String),
+            '@types/node': expect.any(String),
+            'tsc-alias': expect.any(String)
+        }
+    });
+
+    expect(packageJson.scripts['lint:type']).toBeOneOf(typeCheckCommands);
+    expect(packageJson.scripts['build:type']).toBeOneOf(typeGenCommands);
+
+    const tsconfig = JSON.parse(
+        readFileSync(join(projectPath, 'tsconfig.json'), 'utf-8')
+    );
+
+    expect(tsconfig).toMatchObject({
+        compilerOptions: {
+            module: 'ESNext',
+            moduleResolution: 'node',
+            target: 'ESNext',
+            strict: true,
+            baseUrl: '.',
+            paths: {
+                [`${projectName}/src/*`]: ['./src/*'],
+                [`${projectName}/*`]: ['./*']
+            }
+        },
+        include: ['src'],
+        exclude: ['dist', 'node_modules']
+    });
+
+    const readmeContent = readFileSync(join(projectPath, 'README.md'), 'utf-8');
+    expect(readmeContent.length).toBeGreaterThan(0);
+    expect(readmeContent).toContain(projectName);
+}
+
+describe('create-esmx CLI integration tests', () => {
+    let tmpDir: string;
+
+    beforeEach(async () => {
+        tmpDir = await createTempDir();
+    });
+
+    afterEach(async () => {
+        await cleanupTempDir(tmpDir);
+    });
+
+    it('should create project with all available templates', async () => {
+        const templates = getAvailableTemplates();
+        expect(templates.length).toBeGreaterThan(0);
+
+        for (const template of templates) {
+            const projectName = `test-${template.folder}`;
+            const projectPath = join(tmpDir, projectName);
+
+            await cli({
+                argv: [projectName, '--template', template.folder],
+                cwd: tmpDir,
+                userAgent: 'npm/test'
+            });
+
+            await verifyProjectStructure(projectPath, projectName);
+        }
+    });
+
+    it('should handle --force parameter correctly', async () => {
+        const projectPath = join(tmpDir, 'test-project');
+
+        await cli({
+            argv: ['test-project', '--template', 'vue2-csr'],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
+
+        await cli({
+            argv: ['test-project', '--template', 'vue2-csr', '--force'],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src/entry.client.ts'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src/entry.node.ts'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src/entry.server.ts'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src/create-app.ts'))).toBe(true);
+    });
+
+    it('should show help information', async () => {
+        const originalLog = console.log;
+        const logOutput: string[] = [];
+        console.log = (...args: any[]) => {
+            logOutput.push(args.join(' '));
+        };
+
+        try {
+            await cli({
+                argv: ['--help'],
+                cwd: tmpDir,
+                userAgent: 'npm/test'
+            });
+
+            const output = logOutput.join('\n');
+            expect(output).toContain('Usage');
+            expect(output).toContain('Options');
+            expect(output).toContain('Examples');
+        } finally {
+            console.log = originalLog;
+        }
+    });
+
+    it('should show version information', async () => {
+        const originalLog = console.log;
+        const logOutput: string[] = [];
+        console.log = (...args: any[]) => {
+            logOutput.push(args.join(' '));
+        };
+
+        try {
+            await cli({
+                argv: ['--version'],
+                cwd: tmpDir,
+                userAgent: 'npm/test'
+            });
+
+            const output = logOutput.join('\n');
+            expect(output).toMatch(/^\d+\.\d+\.\d+/);
+        } finally {
+            console.log = originalLog;
+        }
+    });
+
+    it('should handle creating directory when target directory does not exist', async () => {
+        const projectPath = join(tmpDir, 'non-existent-parent', 'test-project');
+
+        await cli({
+            argv: [
+                'non-existent-parent/test-project',
+                '--template',
+                'vue2-csr'
+            ],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(projectPath)).toBe(true);
+        expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src'))).toBe(true);
+    });
+
+    it('should handle force overwrite for non-empty directory', async () => {
+        const projectPath = join(tmpDir, 'test-project');
+
+        await mkdir(projectPath, { recursive: true });
+        await writeFile(
+            join(projectPath, 'existing-file.txt'),
+            'existing content'
+        );
+
+        await cli({
+            argv: ['test-project', '--template', 'vue2-csr', '--force'],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
+        expect(existsSync(join(projectPath, 'src'))).toBe(true);
+    });
+
+    it('should handle force overwrite in current directory', async () => {
+        const testFile = join(tmpDir, 'existing-file.txt');
+        await writeFile(testFile, 'existing content');
+
+        await cli({
+            argv: ['.', '--template', 'vue2-csr', '--force'],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(join(tmpDir, 'package.json'))).toBe(true);
+        expect(existsSync(join(tmpDir, 'src'))).toBe(true);
+        expect(existsSync(join(tmpDir, 'src/entry.client.ts'))).toBe(true);
+    });
+
+    it('should create project in current directory when target is "."', async () => {
+        await cli({
+            argv: ['.', '--template', 'vue2-csr'],
+            cwd: tmpDir,
+            userAgent: 'npm/test'
+        });
+
+        expect(existsSync(join(tmpDir, 'package.json'))).toBe(true);
+        expect(existsSync(join(tmpDir, 'src'))).toBe(true);
+        expect(existsSync(join(tmpDir, 'src/entry.client.ts'))).toBe(true);
+    });
+
+    it('should handle various project name formats', async () => {
+        const testCases = [
+            'simple-name',
+            'nested/project-name',
+            'deep/nested/project-name'
+        ];
+
+        for (const projectName of testCases) {
+            const projectPath = join(tmpDir, projectName);
+
+            await cli({
+                argv: [projectName, '--template', 'vue2-csr'],
+                cwd: tmpDir,
+                userAgent: 'npm/test'
+            });
+
+            expect(existsSync(projectPath)).toBe(true);
+            expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
+        }
+    });
+});

package/src/cli.ts

@@ -0,0 +1,214 @@
+import {
+    cancel,
+    intro,
+    isCancel,
+    note,
+    outro,
+    select,
+    text
+} from '@clack/prompts';
+import minimist from 'minimist';
+import color from 'picocolors';
+import { createProjectFromTemplate } from './project';
+import { getAvailableTemplates, getEsmxVersion } from './template';
+import type { CliOptions } from './types';
+import { formatProjectName, getCommand } from './utils/index';
+
+/**
+ * Display help information
+ */
+function showHelp(userAgent?: string): void {
+    const createCmd = getCommand('create', userAgent);
+
+    console.log(`
+${color.reset(color.bold(color.blue('🚀 Create Esmx Project')))}
+
+${color.bold('Usage:')}
+  ${createCmd} [project-name]
+  ${createCmd} [project-name] [options]
+
+${color.bold('Options:')}
+  -t, --template <template>    Template to use (default: vue2-csr)
+  -n, --name <name>            Project name or path
+  -f, --force                  Force overwrite existing directory
+  -h, --help                   Show help information
+  -v, --version                Show version number
+
+${color.bold('Examples:')}
+  ${createCmd} my-project
+  ${createCmd} my-project -t vue2-csr
+  ${createCmd} my-project --force
+  ${createCmd} . -f -t vue2-csr
+
+${color.bold('Available Templates:')}
+${getAvailableTemplates()
+    .map((t) => `  ${t.folder.padEnd(25)} ${t.description}`)
+    .join('\n')}
+
+For more information, visit: ${color.cyan('https://esmx.dev')}
+`);
+}
+
+/**
+ * Get project name from arguments or prompt user
+ */
+async function getProjectName(
+    argName?: string,
+    positionalName?: string
+): Promise<string | symbol> {
+    const providedName = argName || positionalName;
+    if (providedName) {
+        return providedName;
+    }
+
+    const projectName = await text({
+        message: 'Project name or path:',
+        placeholder: 'my-esmx-project',
+        validate: (value: string) => {
+            if (!value.trim()) {
+                return 'Project name or path is required';
+            }
+            if (!/^[a-zA-Z0-9_./@-]+$/.test(value.trim())) {
+                return 'Project name or path should only contain letters, numbers, hyphens, underscores, dots, and slashes';
+            }
+        }
+    });
+
+    return String(projectName).trim();
+}
+
+/**
+ * Get template type from arguments or prompt user
+ */
+async function getTemplateType(argTemplate?: string): Promise<string> {
+    const availableTemplates = getAvailableTemplates();
+
+    if (
+        argTemplate &&
+        availableTemplates.some((t) => t.folder === argTemplate)
+    ) {
+        return argTemplate;
+    }
+
+    const options = availableTemplates.map((t) => ({
+        label: color.reset(color.gray(`${t.folder} - `) + color.bold(t.name)),
+        value: t.folder,
+        hint: t.description
+    }));
+
+    const template = await select({
+        message: 'Select a template:',
+        options: options
+    });
+
+    return String(template);
+}
+
+/**
+ * Main function to create a project
+ */
+export async function cli(options: CliOptions = {}): Promise<void> {
+    const { argv, cwd, userAgent, version } = options;
+    const commandLineArgs = argv || process.argv.slice(2);
+    const workingDir = cwd || process.cwd();
+
+    const parsedArgs = minimist(commandLineArgs, {
+        string: ['template', 'name'],
+        boolean: ['help', 'version', 'force'],
+        alias: {
+            t: 'template',
+            n: 'name',
+            f: 'force',
+            h: 'help',
+            v: 'version'
+        }
+    });
+
+    if (parsedArgs.help) {
+        showHelp(userAgent);
+        return;
+    }
+
+    if (parsedArgs.version) {
+        console.log(getEsmxVersion());
+        return;
+    }
+
+    console.log();
+    intro(
+        color.reset(
+            color.bold(color.blue('🚀 Welcome to Esmx Project Creator!'))
+        )
+    );
+
+    const projectNameInput = await getProjectName(
+        parsedArgs.name,
+        parsedArgs._[0]
+    );
+    if (isCancel(projectNameInput)) {
+        cancel('Operation cancelled');
+        return;
+    }
+
+    let name: string;
+    let root: string;
+
+    if (parsedArgs.name && parsedArgs._[0]) {
+        name = parsedArgs.name;
+        root = formatProjectName(parsedArgs._[0], workingDir).root;
+    } else {
+        const result = formatProjectName(projectNameInput, workingDir);
+        name = result.name;
+        root = result.root;
+    }
+
+    const templateType = await getTemplateType(parsedArgs.template);
+    if (isCancel(templateType)) {
+        cancel('Operation cancelled');
+        return;
+    }
+
+    const installCommand = getCommand('install', userAgent);
+    const devCommand = getCommand('dev', userAgent);
+    const buildCommand = getCommand('build', userAgent);
+    const startCommand = getCommand('start', userAgent);
+    const buildTypeCommand = getCommand('build:type', userAgent);
+    const lintTypeCommand = getCommand('lint:type', userAgent);
+
+    await createProjectFromTemplate(
+        root,
+        templateType,
+        workingDir,
+        parsedArgs.force,
+        {
+            projectName: name,
+            esmxVersion: version || getEsmxVersion(),
+            installCommand,
+            devCommand,
+            buildCommand,
+            startCommand,
+            buildTypeCommand,
+            lintTypeCommand
+        }
+    );
+    const installCmd = installCommand;
+    const devCmd = devCommand;
+
+    const targetDirForDisplay =
+        projectNameInput === '.' ? '.' : projectNameInput;
+
+    const steps = [
+        projectNameInput !== '.' ? `cd ${targetDirForDisplay}` : null,
+        installCmd,
+        `git init ${color.gray('(optional)')}`,
+        devCmd
+    ].filter(Boolean);
+
+    const nextSteps = steps.map((step, index) => {
+        return color.reset(`${index + 1}. ${color.cyan(step)}`);
+    });
+
+    note(nextSteps.join('\n'), 'Next steps');
+
+    outro(color.reset(color.green('Happy coding! 🎉')));
+}

package/src/create.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { cli } from './cli';
+
+cli().catch((error) => {
+    console.error('Error creating project:', error);
+    process.exit(1);
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+export { cli } from './cli';
+export { getAvailableTemplates } from './template';
+export type { TemplateInfo } from './types';