@aerogel/cli 0.0.0-next.a5b6ecb68fdca29d00c8b8906d00aa5bf64a9d7c → 0.0.0-next.a68f133e2c9a1ae9ba84b4e2e42df909289e5fba

package/src/cli.ts

@@ -1,9 +1,14 @@
 import { Command } from 'commander';
+import { facade, fail } from '@noeldemartin/utils';
+import { resolve } from 'path';
+import { existsSync, readFileSync } from 'fs';
+
 import { CreateCommand } from '@/commands/create';
-import { facade } from '@noeldemartin/utils';
 import { GenerateComponentCommand } from '@/commands/generate-component';
 import { GenerateModelCommand } from '@/commands/generate-model';
+import { GenerateOverridesCommand } from '@/commands/generate-overrides';
 import { GenerateServiceCommand } from '@/commands/generate-service';
+import { InfoCommand } from '@/commands/info';
 import { InstallCommand } from '@/commands/install';
 
 export class CLIService {
@@ -11,17 +16,32 @@ export class CLIService {
     public run(argv?: string[]): void {
         const program = new Command();
 
-        program.name('ag').description('AerogelJS CLI').version('0.0.0');
+        program.name('gel').description('AerogelJS CLI').version(this.getVersion());
 
         CreateCommand.define(program);
         GenerateComponentCommand.define(program);
         GenerateModelCommand.define(program);
+        GenerateOverridesCommand.define(program);
         GenerateServiceCommand.define(program);
+        InfoCommand.define(program);
         InstallCommand.define(program);
 
         program.parse(argv);
     }
 
+    public getVersion(): string {
+        const errorMessage = 'Could not find CLI\'s version, please report this bug.';
+        const packageJsonPath = resolve(__dirname, '../package.json');
+
+        if (!existsSync(packageJsonPath)) {
+            throw new Error(errorMessage);
+        }
+
+        const packageJson = JSON.parse(readFileSync(packageJsonPath).toString()) as { version?: string };
+
+        return packageJson.version ?? fail(errorMessage);
+    }
+
 }
 
-export default facade(new CLIService());
+export default facade(CLIService);

package/src/commands/Command.ts

@@ -30,10 +30,7 @@ export default class Command {
         program = program.action((...args) => this.run.call(this, ...args));
     }
 
-    protected static async run<T extends CommandConstructor>(
-        this: T,
-        ...args: ConstructorParameters<T>
-    ): Promise<void> {
+    public static async run<T extends CommandConstructor>(this: T, ...args: ConstructorParameters<T>): Promise<void> {
         const instance = new this(...args);
 
         await instance.validate();

package/src/commands/create.test.ts

@@ -1,23 +1,15 @@
-import { beforeEach, describe, it } from 'vitest';
+import { describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
 import ShellMock from '@/lib/Shell.mock';
-import { stubCommandRunner } from '@/testing/utils';
-import type { StubCommandRunner } from '@/testing/utils';
 
 import { CreateCommand } from './create';
 
 describe('Create command', () => {
 
-    let run: StubCommandRunner<typeof CreateCommand>;
-
-    beforeEach(() => {
-        run = stubCommandRunner(CreateCommand);
-    });
-
     it('creates apps', async () => {
         // Act
-        await run('./app', { name: 'My App' });
+        await CreateCommand.run('./app', { name: 'My App' });
 
         // Assert
         FileMock.expectCreated('./app/.gitignore').toContain('node_modules');
@@ -34,7 +26,7 @@ describe('Create command', () => {
 
     it('creates apps for local core development', async () => {
         // Act
-        await run('./app', { name: 'My App', local: true });
+        await CreateCommand.run('./app', { name: 'My App', local: true });
 
         // Assert
         FileMock.expectCreated('./app/package.json').toMatch(/"@aerogel\/core": "file:[^"]+\/packages\/core"/);
@@ -42,7 +34,7 @@ describe('Create command', () => {
 
     it('infers app name from path', async () => {
         // Act
-        await run('./my-app');
+        await CreateCommand.run('./my-app');
 
         // Assert
         FileMock.expectCreated('./my-app/package.json').toContain('"name": "my-app"');

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

@@ -1,25 +1,17 @@
-import { beforeEach, describe, it } from 'vitest';
+import { describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
-import { stubCommandRunner } from '@/testing/utils';
-import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateComponentCommand } from './generate-component';
 
 describe('Generate Component command', () => {
 
-    let run: StubCommandRunner<typeof GenerateComponentCommand>;
-
-    beforeEach(() => {
-        run = stubCommandRunner(GenerateComponentCommand);
-    });
-
     it('generates components', async () => {
         // Arrange
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await run('FooBar');
+        await GenerateComponentCommand.run('FooBar');
 
         // Assert
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<div>FooBar</div>');
@@ -30,7 +22,7 @@ describe('Generate Component command', () => {
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await run('module/FooBar');
+        await GenerateComponentCommand.run('module/FooBar');
 
         // Assert
         FileMock.expectCreated('src/components/module/FooBar.vue').toContain('<div>FooBar</div>');
@@ -47,7 +39,7 @@ describe('Generate Component command', () => {
         );
 
         // Act
-        await run('FooBar', { story: true });
+        await GenerateComponentCommand.run('FooBar', { story: true });
 
         // Assert
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<div>FooBar</div>');
@@ -65,7 +57,7 @@ describe('Generate Component command', () => {
         );
 
         // Act
-        await run('FooBar', { input: true, story: true });
+        await GenerateComponentCommand.run('FooBar', { input: true, story: true });
 
         // Assert
         FileMock.expectCreated('src/components/FooBar.vue').toContain('<AGHeadlessInputInput v-bind="attrs" />');
@@ -86,10 +78,12 @@ describe('Generate Component command', () => {
         );
 
         // Act
-        await run('FooBar', { button: true, story: true });
+        await GenerateComponentCommand.run('FooBar', { button: true, story: true });
 
         // Assert
-        FileMock.expectCreated('src/components/FooBar.vue').toContain('<AGHeadlessButton :class="colorClasses">');
+        FileMock.expectCreated('src/components/FooBar.vue').toContain(
+            '<AGHeadlessButton :class="variantClasses" :disabled="disabled">',
+        );
         FileMock.expectCreated('src/components/FooBar.story.vue').toContain('.story-foobar .variant-playground');
         FileMock.expectCreated('src/components/FooBar.story.vue').toContain('<FooBar :color="color">');
     });

package/src/commands/generate-component.ts

@@ -82,7 +82,7 @@ export class GenerateComponentCommand extends Command {
         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
+                npx gel install histoire
             `);
         }
     }

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

@@ -1,20 +1,12 @@
-import { beforeEach, describe, it } from 'vitest';
+import { describe, it } from 'vitest';
 import { formatCodeBlock } from '@noeldemartin/utils';
 
 import FileMock from '@/lib/File.mock';
-import { stubCommandRunner } from '@/testing/utils';
-import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateModelCommand } from './generate-model';
 
 describe('Generate Model command', () => {
 
-    let run: StubCommandRunner<typeof GenerateModelCommand>;
-
-    beforeEach(() => {
-        run = stubCommandRunner(GenerateModelCommand);
-    });
-
     it('generates models', async () => {
         // Arrange
         FileMock.stub(
@@ -28,7 +20,7 @@ describe('Generate Model command', () => {
         );
 
         // Act
-        await run('FooBar', {
+        await GenerateModelCommand.run('FooBar', {
             fields: 'name:string:required,age:number,birth:Date',
         });
 

package/src/commands/generate-model.ts

@@ -90,7 +90,7 @@ export class GenerateModelCommand extends Command {
         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
+                npx gel install soukai
             `);
         }
     }

package/src/commands/generate-overrides.ts

@@ -0,0 +1,85 @@
+import { arrayFrom } from '@noeldemartin/utils';
+
+import Command from '@/commands/Command';
+import File from '@/lib/File';
+import Log from '@/lib/Log';
+import Template from '@/lib/Template';
+import { templatePath } from '@/lib/utils/paths';
+import type { CommandOptions } from '@/commands/Command';
+
+export interface Options {
+    story?: boolean;
+}
+
+export class GenerateOverridesCommand extends Command {
+
+    protected static command: string = 'generate:overrides';
+    protected static description: string = 'Generate AerogelJS component overrides';
+
+    protected static options: CommandOptions = {
+        story: {
+            description: 'Create overrides story using Histoire',
+            type: 'boolean',
+        },
+    };
+
+    private options: Options;
+
+    constructor(options: Options = {}) {
+        super();
+
+        this.options = options;
+    }
+
+    protected async run(): Promise<void> {
+        this.assertAerogelOrDirectory('src/components');
+        this.assertHistoireInstalled();
+
+        const files = new Set<string>();
+
+        await this.createComponents(files);
+        await this.createStory(files);
+
+        const filesList = arrayFrom(files)
+            .map((file) => `- ${file}`)
+            .join('\n');
+
+        Log.info(`Overrides created successfully! The following files were created:\n\n${filesList}`);
+        Log.info('\nRemember to declare your components in main.ts and main.histoire.ts!');
+    }
+
+    protected assertHistoireInstalled(): void {
+        if (!this.options.story) {
+            return;
+        }
+
+        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 gel install histoire
+            `);
+        }
+    }
+
+    protected async createComponents(files: Set<string>): Promise<void> {
+        await Log.animate('Creating components', async () => {
+            if (File.exists('src/components/ModalWrapper.vue')) {
+                Log.fail('ModalWrapper component already exists!');
+            }
+
+            Template.instantiate(templatePath('overrides'), 'src').forEach((file) => files.add(file));
+        });
+    }
+
+    protected async createStory(files: Set<string>): Promise<void> {
+        if (!this.options.story) {
+            return;
+        }
+
+        await Log.animate('Creating story', async () => {
+            Template.instantiate(templatePath('overrides-story'), 'src/components/overrides/').forEach((file) =>
+                files.add(file));
+        });
+    }
+
+}

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

@@ -1,29 +1,21 @@
-import { beforeEach, describe, it } from 'vitest';
+import { describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
-import { stubCommandRunner } from '@/testing/utils';
-import type { StubCommandRunner } from '@/testing/utils';
 
 import { GenerateServiceCommand } from './generate-service';
 
 describe('Generate Service command', () => {
 
-    let run: StubCommandRunner<typeof GenerateServiceCommand>;
-
-    beforeEach(() => {
-        run = stubCommandRunner(GenerateServiceCommand);
-    });
-
     it('generates services', async () => {
         // Arrange
         FileMock.stub('package.json', '@aerogel/core');
 
         // Act
-        await run('FooBar');
+        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());');
+        FileMock.expectCreated('src/services/FooBar.ts').toContain('export default facade(FooBarService);');
     });
 
 });

package/src/commands/generate-service.ts

@@ -122,7 +122,7 @@ export class GenerateServiceCommand extends Command {
     protected getBootstrapOptions(mainConfig: SourceFile): ObjectLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,
-            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrapApplication',
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
             skip: SyntaxKind.ImportDeclaration,
         });
         const bootstrapOptions = bootstrapAppCall?.getArguments()[1];

package/src/commands/info.ts

@@ -0,0 +1,14 @@
+import Command from '@/commands/Command';
+import Log from '@/lib/Log';
+
+export class InfoCommand extends Command {
+
+    protected static command: string = 'info';
+    protected static description: string = 'Show debugging information about the CLI';
+
+    protected async run(): Promise<void> {
+        Log.info('[AerogelJS CLI info]');
+        Log.info('Installation directory: ' + __dirname);
+    }
+
+}

package/src/commands/install.test.ts

@@ -1,23 +1,15 @@
-import { beforeEach, describe, it } from 'vitest';
+import { describe, it } from 'vitest';
 
 import FileMock from '@/lib/File.mock';
 import ShellMock from '@/lib/Shell.mock';
-import { stubCommandRunner } from '@/testing/utils';
-import type { StubCommandRunner } from '@/testing/utils';
 
 import { InstallCommand } from './install';
 
 describe('Install plugin command', () => {
 
-    let run: StubCommandRunner<typeof InstallCommand>;
-
-    beforeEach(() => {
-        run = stubCommandRunner(InstallCommand);
-    });
-
     it('installs solid', async () => {
         // Act
-        await run('solid');
+        await InstallCommand.run('solid');
 
         // Assert
         ShellMock.expectRan('npm install soukai-solid@next --save-exact');
@@ -26,7 +18,7 @@ describe('Install plugin command', () => {
 
     it('installs soukai', async () => {
         // Act
-        await run('soukai');
+        await InstallCommand.run('soukai');
 
         // Assert
         ShellMock.expectRan('npm install soukai@next --save-exact');
@@ -38,7 +30,7 @@ describe('Install plugin command', () => {
         FileMock.stub('package.json', '"@aerogel/core"');
 
         // Act
-        await run('histoire');
+        await InstallCommand.run('histoire');
 
         // Assert
         ShellMock.expectRan('npm install histoire@0.17.6 --save-dev');

package/src/lib/File.mock.ts

@@ -41,10 +41,6 @@ export class FileMockService extends FileService {
         this.virtualFilesystem[path] = contents;
     }
 
-    public reset(): void {
-        this.virtualFilesystem = {};
-    }
-
     public expectCreated(path: string, expectContent?: (contents: string) => void): Assertion<string> {
         expect(typeof this.virtualFilesystem[path] === 'string', `expected '${path}' file to have been created`).toBe(
             true,
@@ -63,4 +59,4 @@ export class FileMockService extends FileService {
 
 }
 
-export default facade(new FileMockService());
+export default facade(FileMockService);

package/src/lib/File.ts

@@ -73,4 +73,4 @@ export class FileService {
 
 }
 
-export default facade(new FileService());
+export default facade(FileService);

package/src/lib/Log.mock.ts

@@ -24,14 +24,10 @@ export class LogServiceMock extends LogService {
         throw new Error(`Fail: ${message}`);
     }
 
-    public reset(): void {
-        this.logs = [];
-    }
-
     protected stdout(): void {
         //
     }
 
 }
 
-export default facade(new LogServiceMock());
+export default facade(LogServiceMock);

package/src/lib/Log.ts

@@ -92,4 +92,4 @@ export class LogService {
 
 }
 
-export default facade(new LogService());
+export default facade(LogService);

package/src/lib/Shell.mock.ts

@@ -17,4 +17,4 @@ export class ShellServiceMock extends ShellService {
 
 }
 
-export default facade(new ShellServiceMock());
+export default facade(ShellServiceMock);

package/src/lib/Shell.ts

@@ -25,4 +25,4 @@ export class ShellService {
 
 }
 
-export default facade(new ShellService());
+export default facade(ShellService);

package/src/plugins/Plugin.ts

@@ -123,7 +123,7 @@ export default abstract class Plugin {
     protected getBootstrapPluginsDeclaration(mainConfig: SourceFile): ArrayLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,
-            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrapApplication',
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
             skip: SyntaxKind.ImportDeclaration,
         });
         const bootstrapOptions = bootstrapAppCall?.getArguments()[1];

package/src/plugins/Solid.ts

@@ -26,6 +26,7 @@ export class Solid extends Plugin {
 
     protected async installNpmDependencies(): Promise<void> {
         await Shell.run('npm install soukai-solid@next --save-exact');
+        await Shell.run('npm install @noeldemartin/solid-utils@next --save-exact');
         await Shell.run('npm install @solid/community-server@7 --save');
         await super.installNpmDependencies();
     }
@@ -50,17 +51,16 @@ export class Solid extends Plugin {
                 .replace(
                     '"cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",',
                     '"cy:test": "start-server-and-test ' +
-                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:4000 cy:run",',
+                        'test:serve-app http-get://localhost:5001 test:serve-pod http-get://localhost:3000 cy:run",',
                 )
                 .replace(
                     '"dev": "vite",',
                     '"dev": "vite",\n' +
-                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -p 4000 -f ./solid-data",',
+                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -f ./solid-data",',
                 )
                 .replace(
                     '"test:serve-app": "vite --port 5001"',
-                    '"test:serve-app": "vite --port 5001",\n' +
-                        '"test:serve-pod": "community-solid-server -p 4000 -l warn"',
+                    '"test:serve-app": "vite --port 5001",\n"test:serve-pod": "community-solid-server -l warn"',
                 ),
         );
 

package/src/testing/setup.ts

@@ -11,14 +11,11 @@ import ShellMock from '@/lib/Shell.mock';
 
 setTestingNamespace(vi);
 
-File.setMockInstance(FileMock);
-Log.setMockInstance(LogMock);
-Shell.setMockInstance(ShellMock);
+File.setMockFacade(FileMock);
+Log.setMockFacade(LogMock);
+Shell.setMockFacade(ShellMock);
 
 beforeEach(() => {
-    FileMock.reset();
-    LogMock.reset();
-
     File.mock();
     Log.mock();
     Shell.mock();

package/templates/app/.github/workflows/ci.yml

@@ -6,8 +6,8 @@ jobs:
     ci:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version-file: '.nvmrc'
             - run: npm ci
@@ -16,13 +16,13 @@ jobs:
             - run: npm run test:ci
             - run: npm run cy:test-snapshots:ci
             - name: Upload Cypress screenshots
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               if: ${{ failure() }}
               with:
                   name: cypress_screenshots
                   path: cypress/screenshots
             - name: Upload Cypress snapshots
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               if: ${{ failure() }}
               with:
                   name: cypress_snapshots

package/templates/app/cypress/cypress.config.ts

@@ -1,4 +1,4 @@
-import install from '@aerogel/cypress/dist/plugin';
+import { setupAerogelNodeEvents } from '@aerogel/cypress/config';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
@@ -9,8 +9,6 @@ export default defineConfig({
             runMode: 3,
             openMode: 0,
         },
-        setupNodeEvents(on) {
-            install(on);
-        },
+        setupNodeEvents: setupAerogelNodeEvents,
     },
 });

package/templates/app/cypress/support/e2e.ts

@@ -1,3 +1 @@
-import install from '@aerogel/cypress';
-
-install();
+import '@aerogel/cypress/support';

package/templates/app/package.json

@@ -11,7 +11,7 @@
         "cy:test-snapshots": "docker run -it -u `id -u ${whoami}` -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "cy:test-snapshots:ci": "docker run -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "dev": "vite",
-        "lint": "noeldemartin-lint src",
+        "lint": "noeldemartin-lint src cypress",
         "test": "vitest --run",
         "test:ci": "vitest --run --reporter verbose",
         "test:serve-app": "vite --port 5001"

package/templates/app/src/main.ts

@@ -1,13 +1,13 @@
 import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
-import { bootstrapApplication } from '@aerogel/core';
+import { bootstrap } from '@aerogel/core';
 
 import './assets/css/styles.css';
 import App from './App.vue';
 
-bootstrapApplication(App, {
+bootstrap(App, {
     plugins: [
         i18n({ messages: import.meta.glob('@/lang/*.yaml') }),
-        soukai({ models: import.meta.glob('@/models/*', { eager: true }) }),
+        soukai({ models: import.meta.glob(['@/models/*', '!**/*.test.ts'], { eager: true }) }),
     ],
 });

package/templates/component-button/[component.name].vue

@@ -1,15 +1,16 @@
 <template>
-    <AGHeadlessButton :class="colorClasses">
+    <AGHeadlessButton :class="variantClasses" :disabled="disabled">
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
-import { Colors, enumProp } from '@aerogel/core';
+import { Colors, booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
 import { computed } from 'vue';
 
 const props = defineProps({
     color: enumProp(Colors, Colors.Primary),
+    disabled: booleanProp(),
 });
 
 const colorClasses = computed(() => {
@@ -29,4 +30,13 @@ const colorClasses = computed(() => {
             return '';
     }
 });
+
+const variantClasses = computed(() => {
+    if (props.disabled) {
+        // Add additional classes for disabled state here.
+        return removeInteractiveClasses(colorClasses.value);
+    }
+
+    return colorClasses.value;
+});
 </script>