@aerogel/cli 0.0.0-next.47ed8ee3c048720794026e45140e9b700cb428b9 → 0.0.0-next.5953e1862a7c89a8fc80da087467d67d4f4e8c73

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/cli",
     "description": "Aerogel CLI",
-    "version": "0.0.0-next.47ed8ee3c048720794026e45140e9b700cb428b9",
+    "version": "0.0.0-next.5953e1862a7c89a8fc80da087467d67d4f4e8c73",
     "main": "dist/aerogel-cli.cjs.js",
     "module": "dist/aerogel-cli.esm.js",
     "types": "dist/aerogel-cli.d.ts",
@@ -15,7 +15,8 @@
         "build:types": "noeldemartin-build-types",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run"
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose"
     },
     "engines": {
         "node": ">=18.x"
@@ -35,12 +36,18 @@
         "url": "https://github.com/NoelDeMartin/aerogeljs/issues"
     },
     "dependencies": {
-        "@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
+        "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
         "chalk": "^4.1.2",
         "commander": "^11.0.0",
-        "mustache": "^4.2.0"
+        "mustache": "^4.2.0",
+        "ts-morph": "^20.0.0"
     },
     "devDependencies": {
         "@types/node": "^20.4.0"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-typescript"
+        ]
     }
 }

package/src/cli.ts

@@ -3,6 +3,8 @@ import { CreateCommand } from '@/commands/create';
 import { facade } from '@noeldemartin/utils';
 import { GenerateComponentCommand } from '@/commands/generate-component';
 import { GenerateModelCommand } from '@/commands/generate-model';
+import { GenerateServiceCommand } from '@/commands/generate-service';
+import { InstallCommand } from '@/commands/install';
 
 export class CLIService {
 
@@ -14,6 +16,8 @@ export class CLIService {
         CreateCommand.define(program);
         GenerateComponentCommand.define(program);
         GenerateModelCommand.define(program);
+        GenerateServiceCommand.define(program);
+        InstallCommand.define(program);
 
         program.parse(argv);
     }

package/src/commands/create.test.ts

@@ -7,20 +7,37 @@ import { CreateCommand } from './create';
 
 describe('Create command', () => {
 
-    it('works', async () => {
+    it('creates apps', async () => {
         // Act
         await CreateCommand.run('./app', { name: 'My App' });
 
         // Assert
         FileMock.expectCreated('./app/.gitignore').toContain('node_modules');
         FileMock.expectCreated('./app/package.json').toContain('"name": "my-app"');
-        FileMock.expectCreated('./app/index.html').toContain('My App');
-        FileMock.expectCreated('./app/src/App.vue').toContain(
-            '<h1 class="text-4xl font-semibold">{{ $t(\'home.title\') }}</h1>',
-        );
+        FileMock.expectCreated('./app/package.json').toContain('"@aerogel/core": "next"');
+        FileMock.expectCreated('./app/index.html').toContain('{{ app.name }}');
+        FileMock.expectCreated('./app/README.md').toContain('My App');
+        FileMock.expectCreated('./app/src/App.vue').toContain('<h1 class="text-4xl font-semibold">');
+        FileMock.expectCreated('./app/src/App.vue').toContain('{{ $t(\'home.title\') }}');
 
         ShellMock.expectRan('npm install');
         ShellMock.expectRan('git init');
     });
 
+    it('creates apps for local core development', async () => {
+        // Act
+        await CreateCommand.run('./app', { name: 'My App', local: true });
+
+        // Assert
+        FileMock.expectCreated('./app/package.json').toMatch(/"@aerogel\/core": "file:[^"]+\/packages\/core"/);
+    });
+
+    it('infers app name from path', async () => {
+        // Act
+        await CreateCommand.run('./my-app');
+
+        // Assert
+        FileMock.expectCreated('./my-app/package.json').toContain('"name": "my-app"');
+    });
+
 });

package/src/commands/create.ts

@@ -1,10 +1,16 @@
+import { basename } from 'path';
+import { stringToTitleCase } from '@noeldemartin/utils';
+
 import App from '@/lib/App';
 import Command from '@/commands/Command';
 import Log from '@/lib/Log';
 import Shell from '@/lib/Shell';
+import type { CommandOptions } from '@/commands/Command';
 
 export interface Options {
     name?: string;
+    local?: boolean;
+    copy?: boolean;
 }
 
 export class CreateCommand extends Command {
@@ -12,14 +18,22 @@ export class CreateCommand extends Command {
     public static command: string = 'create';
     public static description: string = 'Create AerogelJS app';
     public static parameters: [string, string][] = [['path', 'Application path']];
-    public static options: Record<string, string> = {
+    public static options: CommandOptions = {
         name: 'Application name',
+        local: {
+            type: 'boolean',
+            description: 'Whether to create an app using local Aerogel packages (used for core development)',
+        },
+        copy: {
+            type: 'boolean',
+            description: 'Whether to create an app linked to local Aerogel packages (used in CI)',
+        },
     };
 
     private path: string;
     private options: Options;
 
-    constructor(path: string, options: Options) {
+    constructor(path: string, options: Options = {}) {
         super();
 
         this.path = path;
@@ -28,7 +42,7 @@ export class CreateCommand extends Command {
 
     public async run(): Promise<void> {
         const path = this.path;
-        const name = this.options.name ?? 'Aerogel App';
+        const name = this.options.name ?? stringToTitleCase(basename(path));
 
         Shell.setWorkingDirectory(path);
 
@@ -36,20 +50,24 @@ export class CreateCommand extends Command {
         await this.installDependencies();
         await this.initializeGit();
 
-        Log.success([
-            '',
-            `That's it! You can start working on **${name}** doing the following:`,
-            `    cd ${path}`,
-            '    npm run dev',
-            '',
-            'Have fun!',
-        ]);
+        Log.success(`
+
+            That's it! You can start working on **${name}** doing the following:
+
+                cd ${path}
+                npm run dev
+
+            Have fun!
+        `);
     }
 
     protected async createApp(name: string, path: string): Promise<void> {
         Log.info(`Creating **${name}**...`);
 
-        new App(name).create(path);
+        new App(name, {
+            local: this.options.local,
+            linkedLocal: this.options.local && !this.options.copy,
+        }).create(path);
     }
 
     protected async installDependencies(): Promise<void> {

package/src/commands/generate-component.test.ts

@@ -4,7 +4,7 @@ import FileMock from '@/lib/File.mock';
 
 import { GenerateComponentCommand } from './generate-component';
 
-describe('Generate component command', () => {
+describe('Generate Component command', () => {
 
     it('generates components', async () => {
         // Arrange
@@ -17,10 +17,26 @@ describe('Generate component command', () => {
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<div>FooBar</div>');
     });
 
-    it('generates components with stories', async () => {
+    it('generates components in subfolders', async () => {
         // Arrange
         FileMock.stub('package.json', '@aerogel/core');
-        FileMock.stub('src/main.histoire.ts');
+
+        // Act
+        await GenerateComponentCommand.run('module/FooBar');
+
+        // Assert
+        FileMock.expectCreated('src/components/module/FooBar.vue').toContain('<div>FooBar</div>');
+    });
+
+    it('generates components with stories', async () => {
+        // Arrange
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
 
         // Act
         await GenerateComponentCommand.run('FooBar', { story: true });
@@ -30,4 +46,25 @@ describe('Generate component command', () => {
         FileMock.expectCreated('src/components/FooBar.story.vue').toContain('<FooBar />');
     });
 
+    it('generates input components with stories', async () => {
+        // Arrange
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
+
+        // Act
+        await GenerateComponentCommand.run('FooBar', { input: true, story: true });
+
+        // Assert
+        FileMock.expectCreated('src/components/FooBar.vue').toContain('<AGHeadlessInputInput v-bind="attrs" />');
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
+        FileMock.expectCreated('src/components/FooBar.story.vue').toContain(
+            '<FooBar name="food" :label="label" :placeholder="placeholder" />',
+        );
+    });
+
 });

package/src/commands/generate-component.ts

@@ -1,65 +1,188 @@
+import { arrayFrom, stringToSlug } from '@noeldemartin/utils';
+import { Node, SyntaxKind } from 'ts-morph';
+import type { ArrayLiteralExpression, CallExpression, SourceFile } from 'ts-morph';
+
 import Command from '@/commands/Command';
 import File from '@/lib/File';
 import Log from '@/lib/Log';
 import Template from '@/lib/Template';
-import { basePath } from '@/lib/utils';
+import { app } from '@/lib/utils/app';
+import { editFiles, findDescendant } from '@/lib/utils/edit';
+import { templatePath } from '@/lib/utils/paths';
 import type { CommandOptions } from '@/commands/Command';
 
 export interface Options {
     story?: boolean;
+    input?: boolean;
 }
 
 export class GenerateComponentCommand extends Command {
 
     public static command: string = 'generate:component';
-    public static description: string = 'Generate an AerogelJS component';
-    public static parameters: [string, string][] = [['name', 'Component name']];
+    public static description: string = 'Generate an AerogelJS Component';
+    public static parameters: [string, string][] = [
+        ['path', 'Component path (relative to components folder; extension not necessary)'],
+    ];
+
     public static options: CommandOptions = {
         story: {
             description: 'Create component story using Histoire',
             type: 'boolean',
         },
+        input: {
+            description: 'Create a custom input',
+            type: 'boolean',
+        },
     };
 
-    private name: string;
+    private path: string;
     private options: Options;
 
-    constructor(name: string, options: Options = {}) {
+    constructor(path: string, options: Options = {}) {
         super();
 
-        this.name = name;
+        this.path = path;
         this.options = options;
     }
 
     public async run(): Promise<void> {
         this.assertAerogelOrDirectory('src/components');
-        this.options.story && this.assertHistoireInstalled();
+        this.assertHistoireInstalled();
+
+        const files = new Set<string>();
+        const [directoryName, componentName] = this.parsePathComponents();
+
+        await this.createComponent(directoryName, componentName, files);
+        await this.createStory(directoryName, componentName, files);
+        await this.declareComponents();
 
-        if (File.exists(`src/components/${this.name}.vue`)) {
-            Log.fail(`${this.name} component already exists!`);
+        const filesList = arrayFrom(files)
+            .map((file) => `- ${file}`)
+            .join('\n');
+
+        Log.info(`${componentName} component created successfully! The following files were created:\n\n${filesList}`);
+    }
+
+    protected assertHistoireInstalled(): void {
+        if (!this.options.story) {
+            return;
         }
 
-        const files = Template.instantiate(basePath('templates/component'), 'src/components', {
-            component: { name: this.name },
+        if (!File.contains('package.json', '"histoire"') && !File.contains('package.json', '"@aerogel/histoire"')) {
+            Log.fail(`
+                Histoire is not installed yet! You can install it running:
+                npx ag install histoire
+            `);
+        }
+    }
+
+    protected async createComponent(directoryName: string, componentName: string, files: Set<string>): Promise<void> {
+        await Log.animate('Creating component', async () => {
+            if (File.exists(`src/components/${this.path}.vue`)) {
+                Log.fail(`${this.path} component already exists!`);
+            }
+
+            const templateName = this.options.input ? 'component-input' : 'component';
+            const componentFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
+                component: {
+                    name: componentName,
+                    slug: stringToSlug(componentName),
+                },
+            });
+
+            componentFiles.forEach((file) => files.add(file));
         });
+    }
 
-        if (this.options.story) {
-            const storyFiles = Template.instantiate(basePath('templates/component-story'), 'src/components', {
-                component: { name: this.name },
+    protected async createStory(directoryName: string, componentName: string, files: Set<string>): Promise<void> {
+        if (!this.options.story) {
+            return;
+        }
+
+        await Log.animate('Creating story', async () => {
+            const templateName = this.options.input ? 'component-input-story' : 'component-story';
+            const storyFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
+                component: {
+                    name: componentName,
+                    slug: stringToSlug(componentName),
+                },
             });
 
-            files.push(...storyFiles);
+            storyFiles.forEach((file) => files.add(file));
+        });
+    }
+
+    protected async declareComponents(): Promise<void> {
+        if (!editFiles()) {
+            return;
         }
 
-        const filesList = files.map((file) => `- ${file}`).join('\n');
+        const editor = app().edit();
+        const viteConfig = editor.requireSourceFile('vite.config.ts');
+        const componentDirsArray = this.getComponentDirsArray(viteConfig);
 
-        Log.info(`${this.name} component created successfully! The following files were created:\n\n${filesList}`);
+        if (!componentDirsArray) {
+            return Log.fail('Could not find component dirs declaration in vite config!');
+        }
+
+        if (
+            componentDirsArray
+                .getDescendantsOfKind(SyntaxKind.StringLiteral)
+                .some((literal) => literal.getText() === '\'src/components\'')
+        ) {
+            return;
+        }
+
+        await Log.animate('Updating vite config', async () => {
+            componentDirsArray.addElement('\'src/components\'');
+
+            await editor.save(viteConfig);
+        });
+
+        await editor.format();
     }
 
-    protected assertHistoireInstalled(): void {
-        if (!File.exists('src/main.histoire.ts')) {
-            Log.fail('Histoire is not installed yet!');
+    protected getComponentDirsArray(viteConfig: SourceFile): ArrayLiteralExpression | null {
+        const pluginCall = findDescendant(viteConfig, {
+            guard: Node.isCallExpression,
+            validate: (callExpression) => callExpression.getText().startsWith('Components('),
+            skip: SyntaxKind.ImportDeclaration,
+        });
+
+        if (!pluginCall) {
+            return null;
+        }
+
+        const dirsAssignment = findDescendant(pluginCall, {
+            guard: Node.isPropertyAssignment,
+            validate: (propertyAssignment) => propertyAssignment.getName() === 'dirs',
+        });
+
+        const dirsArray = dirsAssignment?.getInitializer();
+
+        if (!Node.isArrayLiteralExpression(dirsArray)) {
+            return this.declareComponentDirsArray(pluginCall);
         }
+
+        return dirsArray;
+    }
+
+    protected declareComponentDirsArray(pluginCall: CallExpression): ArrayLiteralExpression | null {
+        const pluginOptions = findDescendant(pluginCall, { guard: Node.isObjectLiteralExpression });
+        const dirsAssignment = pluginOptions?.addPropertyAssignment({
+            name: 'dirs',
+            initializer: '[]',
+        });
+
+        return (dirsAssignment?.getInitializer() as ArrayLiteralExpression) ?? null;
+    }
+
+    protected parsePathComponents(): [string, string] {
+        const lastSlashIndex = this.path.lastIndexOf('/');
+
+        return lastSlashIndex === -1
+            ? ['', this.path]
+            : [this.path.substring(0, lastSlashIndex), this.path.substring(lastSlashIndex + 1)];
     }
 
 }

package/src/commands/generate-model.test.ts

@@ -1,11 +1,11 @@
 import { describe, it } from 'vitest';
+import { formatCodeBlock } from '@noeldemartin/utils';
 
 import FileMock from '@/lib/File.mock';
-import { formatCodeBlock } from '@/lib/utils';
 
 import { GenerateModelCommand } from './generate-model';
 
-describe('Generate model command', () => {
+describe('Generate Model command', () => {
 
     it('generates models', async () => {
         // Arrange
@@ -21,7 +21,7 @@ describe('Generate model command', () => {
 
         // Act
         await GenerateModelCommand.run('FooBar', {
-            fields: 'name:string,age:number,birth:Date',
+            fields: 'name:string:required,age:number,birth:Date',
         });
 
         // Assert
@@ -30,7 +30,10 @@ describe('Generate model command', () => {
             formatCodeBlock(`
                 defineModelSchema({
                     fields: {
-                        name: FieldType.String,
+                        name: {
+                            type: FieldType.String,
+                            required: true,
+                        },
                         age: FieldType.Number,
                         birth: FieldType.Date,
                     },

package/src/commands/generate-model.ts

@@ -1,10 +1,10 @@
-import { stringToStudlyCase } from '@noeldemartin/utils';
+import { formatCodeBlock, stringToStudlyCase } from '@noeldemartin/utils';
 
 import Command from '@/commands/Command';
 import File from '@/lib/File';
 import Log from '@/lib/Log';
 import Template from '@/lib/Template';
-import { basePath, formatCodeBlock } from '@/lib/utils';
+import { templatePath } from '@/lib/utils/paths';
 import type { CommandOptions } from '@/commands/Command';
 
 interface Options {
@@ -14,7 +14,7 @@ interface Options {
 export class GenerateModelCommand extends Command {
 
     public static command: string = 'generate:model';
-    public static description: string = 'Generate an AerogelJS model';
+    public static description: string = 'Generate an AerogelJS Model';
     public static parameters: [string, string][] = [['name', 'Model name']];
     public static options: CommandOptions = {
         fields: 'Create model with the given fields',
@@ -39,15 +39,17 @@ export class GenerateModelCommand extends Command {
 
         this.assertSoukaiInstalled();
 
-        const files = Template.instantiate(basePath('templates/model'), 'src/models', {
-            model: {
-                name: this.name,
-                fieldsDefinition: this.getFieldsDefinition(),
-            },
-            soukaiImports: this.options.fields ? 'FieldType, defineModelSchema' : 'defineModelSchema',
-        });
+        const filesList = await Log.animate('Creating model', async () => {
+            const files = Template.instantiate(templatePath('model'), 'src/models', {
+                model: {
+                    name: this.name,
+                    fieldsDefinition: this.getFieldsDefinition(),
+                },
+                soukaiImports: this.options.fields ? 'FieldType, defineModelSchema' : 'defineModelSchema',
+            });
 
-        const filesList = files.map((file) => `- ${file}`).join('\n');
+            return files.map((file) => `- ${file}`).join('\n');
+        });
 
         Log.info(`${this.name} model created successfully! The following files were created:\n\n${filesList}`);
     }
@@ -60,21 +62,36 @@ export class GenerateModelCommand extends Command {
         const code = this.options.fields
             .split(',')
             .map((field) => {
-                const [name, type] = field.split(':');
+                const [name, type, rules] = field.split(':');
 
                 return {
                     name,
                     type: stringToStudlyCase(type ?? 'string'),
+                    required: rules === 'required',
                 };
             })
-            .reduce((definition, field) => definition + `\n${field.name}: FieldType.${field.type},`, '');
+            .reduce((definition, field) => {
+                const fieldDefinition = field.required
+                    ? formatCodeBlock(`
+                        ${field.name}: {
+                            type: FieldType.${field.type},
+                            required: true,
+                        }
+                    `)
+                    : `${field.name}: FieldType.${field.type}`;
+
+                return definition + `\n${fieldDefinition},`;
+            }, '');
 
         return formatCodeBlock(code, { indent: 8 });
     }
 
     protected assertSoukaiInstalled(): void {
-        if (!File.contains('package.json', '"soukai"')) {
-            Log.fail('Soukai is not installed yet!');
+        if (!File.contains('package.json', '"soukai"') && !File.contains('package.json', '"@aerogel/plugin-soukai"')) {
+            Log.fail(`
+                Soukai is not installed yet! You can install it running:
+                npx ag install soukai
+            `);
         }
     }
 

package/src/commands/generate-service.test.ts

@@ -0,0 +1,21 @@
+import { describe, it } from 'vitest';
+
+import FileMock from '@/lib/File.mock';
+
+import { GenerateServiceCommand } from './generate-service';
+
+describe('Generate Service command', () => {
+
+    it('generates services', async () => {
+        // Arrange
+        FileMock.stub('package.json', '@aerogel/core');
+
+        // Act
+        await GenerateServiceCommand.run('FooBar');
+
+        // Assert
+        FileMock.expectCreated('src/services/FooBar.ts').toContain('class FooBarService extends Service');
+        FileMock.expectCreated('src/services/FooBar.ts').toContain('export default facade(new FooBarService());');
+    });
+
+});