@aerogel/cli 0.0.0-next.4d82ed613002ee486648f88f720678424e7263f1 → 0.0.0-next.5953e1862a7c89a8fc80da087467d67d4f4e8c73

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

@@ -30,8 +30,13 @@ describe('Generate Component command', () => {
 
     it('generates components with stories', async () => {
         // Arrange
-        FileMock.stub('package.json', '@aerogel/core');
-        FileMock.stub('src/main.histoire.ts');
+        FileMock.stub(
+            'package.json',
+            `
+                "@aerogel/core": "*",
+                "histoire": "*"
+            `,
+        );
 
         // Act
         await GenerateComponentCommand.run('FooBar', { story: true });
@@ -41,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,4 +1,4 @@
-import { arrayFrom } from '@noeldemartin/utils';
+import { arrayFrom, stringToSlug } from '@noeldemartin/utils';
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ArrayLiteralExpression, CallExpression, SourceFile } from 'ts-morph';
 
@@ -13,6 +13,7 @@ import type { CommandOptions } from '@/commands/Command';
 
 export interface Options {
     story?: boolean;
+    input?: boolean;
 }
 
 export class GenerateComponentCommand extends Command {
@@ -28,6 +29,10 @@ export class GenerateComponentCommand extends Command {
             description: 'Create component story using Histoire',
             type: 'boolean',
         },
+        input: {
+            description: 'Create a custom input',
+            type: 'boolean',
+        },
     };
 
     private path: string;
@@ -48,7 +53,7 @@ export class GenerateComponentCommand extends Command {
         const [directoryName, componentName] = this.parsePathComponents();
 
         await this.createComponent(directoryName, componentName, files);
-        await this.createStory(componentName, files);
+        await this.createStory(directoryName, componentName, files);
         await this.declareComponents();
 
         const filesList = arrayFrom(files)
@@ -63,8 +68,11 @@ export class GenerateComponentCommand extends Command {
             return;
         }
 
-        if (!File.exists('src/main.histoire.ts')) {
-            Log.fail('Histoire is not installed yet!');
+        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
+            `);
         }
     }
 
@@ -74,22 +82,30 @@ export class GenerateComponentCommand extends Command {
                 Log.fail(`${this.path} component already exists!`);
             }
 
-            const componentFiles = Template.instantiate(templatePath('component'), `src/components/${directoryName}`, {
-                component: { name: componentName },
+            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));
         });
     }
 
-    protected async createStory(componentName: string, files: Set<string>): Promise<void> {
+    protected async createStory(directoryName: string, componentName: string, files: Set<string>): Promise<void> {
         if (!this.options.story) {
             return;
         }
 
         await Log.animate('Creating story', async () => {
-            const storyFiles = Template.instantiate(templatePath('component-story'), 'src/components', {
-                component: { name: componentName },
+            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),
+                },
             });
 
             storyFiles.forEach((file) => files.add(file));

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

@@ -1,7 +1,7 @@
 import { describe, it } from 'vitest';
+import { formatCodeBlock } from '@noeldemartin/utils';
 
 import FileMock from '@/lib/File.mock';
-import { formatCodeBlock } from '@/lib/utils/format';
 
 import { GenerateModelCommand } from './generate-model';
 

package/src/commands/generate-model.ts

@@ -1,11 +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 { templatePath } from '@/lib/utils/paths';
-import { formatCodeBlock } from '@/lib/utils/format';
 import type { CommandOptions } from '@/commands/Command';
 
 interface Options {

package/src/commands/generate-service.ts

@@ -1,4 +1,4 @@
-import { arrayFrom, stringToCamelCase } from '@noeldemartin/utils';
+import { arrayFrom, formatCodeBlock, stringToCamelCase } from '@noeldemartin/utils';
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ObjectLiteralExpression, SourceFile } from 'ts-morph';
 
@@ -9,7 +9,6 @@ import Template from '@/lib/Template';
 import { app } from '@/lib/utils/app';
 import { templatePath } from '@/lib/utils/paths';
 import { editFiles, findDescendant } from '@/lib/utils/edit';
-import { formatCodeBlock } from '@/lib/utils/format';
 import type { Editor } from '@/lib/Editor';
 
 export class GenerateServiceCommand extends Command {

package/src/commands/install.test.ts

@@ -1,12 +1,13 @@
 import { describe, it } from 'vitest';
 
+import FileMock from '@/lib/File.mock';
 import ShellMock from '@/lib/Shell.mock';
 
 import { InstallCommand } from './install';
 
 describe('Install plugin command', () => {
 
-    it('installs plugins', async () => {
+    it('installs solid', async () => {
         // Act
         await InstallCommand.run('solid');
 
@@ -15,4 +16,26 @@ describe('Install plugin command', () => {
         ShellMock.expectRan('npm install @aerogel/plugin-solid@next --save-exact');
     });
 
+    it('installs soukai', async () => {
+        // Act
+        await InstallCommand.run('soukai');
+
+        // Assert
+        ShellMock.expectRan('npm install soukai@next --save-exact');
+        ShellMock.expectRan('npm install @aerogel/plugin-soukai@next --save-exact');
+    });
+
+    it('installs histoire', async () => {
+        // Arrange
+        FileMock.stub('package.json', '"@aerogel/core"');
+
+        // Act
+        await InstallCommand.run('histoire');
+
+        // Assert
+        ShellMock.expectRan('npm install histoire@0.17.6 --save-dev');
+        ShellMock.expectRan('npm install @aerogel/histoire@next --save-exact --save-dev');
+        ShellMock.expectRan('npm install patch-package --save-dev');
+    });
+
 });

package/src/commands/install.ts

@@ -1,10 +1,11 @@
 import Command from '@/commands/Command';
 import Log from '@/lib/Log';
+import { Histoire } from '@/plugins/Histoire';
 import { Solid } from '@/plugins/Solid';
 import { Soukai } from '@/plugins/Soukai';
 import type Plugin from '@/plugins/Plugin';
 
-const plugins = [new Soukai(), new Solid()].reduce(
+const plugins = [new Soukai(), new Solid(), new Histoire()].reduce(
     (pluginsObject, plugin) => Object.assign(pluginsObject, { [plugin.name]: plugin }),
     {} as Record<string, Plugin>,
 );

package/src/lib/Editor.ts

@@ -31,15 +31,17 @@ export class Editor {
 
     public async format(): Promise<void> {
         await Log.animate('Formatting modified files', async () => {
-            const usingPrettier = File.exists('prettier.config.js');
-            const usingESLint = File.exists('.eslintrc.js');
-
-            await Promise.all(
-                arrayFrom(this.modifiedFiles).map(async (file) => {
+            const usingPrettier = File.exists('prettier.config.js') || File.contains('package.json', '"prettier": {');
+            const usingESLint = File.exists('.eslintrc.js') || File.contains('package.json', '"eslintConfig"');
+            const usingPrettierESLint = File.contains('package.json', '"prettier-eslint-cli"');
+            const formatFile = usingPrettierESLint
+                ? (file: string) => Shell.run(`npx prettier-eslint ${file} --write`)
+                : async (file: string) => {
                     usingPrettier && (await Shell.run(`npx prettier ${file} --write`));
                     file.match(/\.(ts|js|vue)$/) && usingESLint && (await Shell.run(`npx eslint ${file} --fix`));
-                }),
-            );
+                };
+
+            await Promise.all(arrayFrom(this.modifiedFiles).map(async (file) => formatFile(file)));
         });
     }
 

package/src/lib/Shell.mock.ts

@@ -8,7 +8,7 @@ export class ShellServiceMock extends ShellService {
     private history: string[] = [];
 
     public async run(command: string): Promise<void> {
-        this.history.push(command);
+        this.history.push(command.trim());
     }
 
     public expectRan(command: string): void {

package/src/lib/Template.ts

@@ -6,7 +6,11 @@ import File from '@/lib/File';
 
 export default class Template {
 
-    public static instantiate(path: string, destination: string, replacements: Record<string, unknown>): string[] {
+    public static instantiate(
+        path: string,
+        destination: string = './',
+        replacements: Record<string, unknown> = {},
+    ): string[] {
         const template = new Template(path);
 
         return template.instantiate(destination, replacements);

package/src/lib/utils/app.ts

@@ -7,7 +7,7 @@ export function app(): App {
 }
 
 export function isLocalApp(): boolean {
-    return File.contains('package.json', 'file');
+    return File.contains('package.json', '"@aerogel/core": "file:');
 }
 
 export function isLinkedLocalApp(): boolean {

package/src/lib/utils/paths.ts

@@ -10,7 +10,7 @@ export function basePath(path: string = ''): string {
     }
 
     const packageJson = File.read(resolve(__dirname, '../../../../package.json'));
-    const matches = stringMatch<2>(packageJson ?? '', /"@aerogel\/cli": "file:(.*)\/aerogel-cli-[\d.]*\.tgz"/);
+    const matches = stringMatch<2>(packageJson ?? '', /"@aerogel\/core": "file:(.*)\/aerogel-core-[\d.]*\.tgz"/);
     const cliPath = matches?.[1] ?? Log.fail<string>('Could not determine base path');
 
     return resolve(cliPath, path);

package/src/plugins/Histoire.ts

@@ -0,0 +1,93 @@
+import File from '@/lib/File';
+import Log from '@/lib/Log';
+import Plugin from '@/plugins/Plugin';
+import Shell from '@/lib/Shell';
+import Template from '@/lib/Template';
+import { isLinkedLocalApp } from '@/lib/utils/app';
+import { packagePath, templatePath } from '@/lib/utils/paths';
+import type { Editor } from '@/lib/Editor';
+
+export class Histoire extends Plugin {
+
+    private installedPatchPackage: boolean = false;
+
+    constructor() {
+        super('histoire');
+    }
+
+    public async beforeInstall(): Promise<void> {
+        this.installedPatchPackage = false;
+    }
+
+    protected async afterInstall(): Promise<void> {
+        if (!this.installedPatchPackage) {
+            return;
+        }
+
+        await Log.animate('Patching dependencies', async () => {
+            await Shell.run('npx patch-package');
+        });
+    }
+
+    protected async updateFiles(editor: Editor): Promise<void> {
+        await this.updateTailwindConfig(editor, {
+            content: isLinkedLocalApp()
+                ? `'${packagePath('histoire')}/dist/**/*.js'`
+                : '\'./node_modules/@aerogel/histoire/dist/**/*.js\'',
+        });
+
+        await this.updateNpmScripts(editor);
+        await this.createConfigFiles();
+        await super.updateFiles(editor);
+    }
+
+    protected async installNpmDependencies(): Promise<void> {
+        // We need this specific version because we're patching it using patch-package
+        await Shell.run('npm install histoire@0.17.6 --save-dev');
+
+        if (!File.contains('package.json', '"patch-package"')) {
+            await Shell.run('npm install patch-package --save-dev');
+
+            this.installedPatchPackage = true;
+        }
+
+        await super.installNpmDependencies();
+    }
+
+    protected getLocalPackageName(): string {
+        return this.name;
+    }
+
+    protected async updateNpmScripts(editor: Editor): Promise<void> {
+        Log.info('Updating npm scripts...');
+
+        const packageJson = File.read('package.json');
+
+        if (!packageJson) {
+            return Log.fail('Could not find package.json file');
+        }
+
+        File.write(
+            'package.json',
+            packageJson.replace(
+                '"lint": "noeldemartin-lint src",',
+                this.installedPatchPackage
+                    ? '"histoire": "histoire dev", "lint": "noeldemartin-lint src", "postinstall": "patch-package",'
+                    : '"histoire": "histoire dev", "lint": "noeldemartin-lint src",',
+            ),
+        );
+
+        editor.addModifiedFile('package.json');
+    }
+
+    protected async createConfigFiles(): Promise<void> {
+        Log.info('Creating config files...');
+
+        Template.instantiate(templatePath('histoire'));
+    }
+
+    protected isForDevelopment(): boolean {
+        return true;
+    }
+
+}

package/src/plugins/Plugin.ts

@@ -20,6 +20,7 @@ export default abstract class Plugin {
     public async install(): Promise<void> {
         this.assertNotInstalled();
 
+        await this.beforeInstall();
         await this.installDependencies();
 
         if (editFiles()) {
@@ -29,6 +30,8 @@ export default abstract class Plugin {
             await editor.format();
         }
 
+        await this.afterInstall();
+
         Log.info(`Plugin ${this.name} installed!`);
     }
 
@@ -38,6 +41,14 @@ export default abstract class Plugin {
         }
     }
 
+    protected async beforeInstall(): Promise<void> {
+        // Placeholder for overrides, don't place any functionality here.
+    }
+
+    protected async afterInstall(): Promise<void> {
+        // Placeholder for overrides, don't place any functionality here.
+    }
+
     protected async installDependencies(): Promise<void> {
         await Log.animate('Installing plugin dependencies', async () => {
             await this.installNpmDependencies();
@@ -45,12 +56,16 @@ export default abstract class Plugin {
     }
 
     protected async updateFiles(editor: Editor): Promise<void> {
-        await this.updateBootstrapConfig(editor);
+        if (!this.isForDevelopment()) {
+            await this.updateBootstrapConfig(editor);
+        }
     }
 
     protected async installNpmDependencies(): Promise<void> {
+        const flags = this.isForDevelopment() ? '--save-dev' : '';
+
         if (isLinkedLocalApp()) {
-            await Shell.run(`npm install file:${packagePath(this.getLocalPackageName())}`);
+            await Shell.run(`npm install file:${packagePath(this.getLocalPackageName())} ${flags}`);
 
             return;
         }
@@ -58,12 +73,12 @@ export default abstract class Plugin {
         if (isLocalApp()) {
             const packPath = packagePackPath(this.getLocalPackageName()) ?? packNotFound(this.getLocalPackageName());
 
-            await Shell.run(`npm install file:${packPath}`);
+            await Shell.run(`npm install file:${packPath} ${flags}`);
 
             return;
         }
 
-        await Shell.run(`npm install ${this.getNpmPackageName()}@next --save-exact`);
+        await Shell.run(`npm install ${this.getNpmPackageName()}@next --save-exact ${flags}`);
     }
 
     protected async updateBootstrapConfig(editor: Editor): Promise<void> {
@@ -86,6 +101,25 @@ export default abstract class Plugin {
         });
     }
 
+    protected async updateTailwindConfig(editor: Editor, options: { content: string }): Promise<void> {
+        await Log.animate('Updating tailwind configuration', async () => {
+            const tailwindConfig = editor.requireSourceFile('tailwind.config.js');
+            const contentArray = this.getTailwindContentArray(tailwindConfig);
+
+            if (!contentArray) {
+                return Log.fail(`
+                    Could not find content array in tailwind config, please add the following manually:
+
+                    ${options.content}
+                `);
+            }
+
+            contentArray.addElement(options.content);
+
+            await editor.save(tailwindConfig);
+        });
+    }
+
     protected getBootstrapPluginsDeclaration(mainConfig: SourceFile): ArrayLiteralExpression | null {
         const bootstrapAppCall = findDescendant(mainConfig, {
             guard: Node.isCallExpression,
@@ -103,6 +137,21 @@ export default abstract class Plugin {
         return pluginsArray;
     }
 
+    protected getTailwindContentArray(tailwindConfig: SourceFile): ArrayLiteralExpression | null {
+        const contentAssignment = findDescendant(tailwindConfig, {
+            guard: Node.isPropertyAssignment,
+            validate: (propertyAssignment) => propertyAssignment.getName() === 'content',
+            skip: SyntaxKind.JSDoc,
+        });
+        const contentArray = contentAssignment?.getInitializer();
+
+        if (!Node.isArrayLiteralExpression(contentArray)) {
+            return null;
+        }
+
+        return contentArray;
+    }
+
     protected getBootstrapImport(): OptionalKind<ImportDeclarationStructure> {
         return {
             defaultImport: this.name,
@@ -118,6 +167,10 @@ export default abstract class Plugin {
         return `plugin-${this.name}`;
     }
 
+    protected isForDevelopment(): boolean {
+        return false;
+    }
+
     protected getBootstrapConfig(): string {
         return `${this.name}()`;
     }

package/src/plugins/Solid.ts

@@ -1,11 +1,7 @@
-import { Node, SyntaxKind } from 'ts-morph';
-import type { ArrayLiteralExpression, SourceFile } from 'ts-morph';
-
 import File from '@/lib/File';
 import Log from '@/lib/Log';
 import Plugin from '@/plugins/Plugin';
 import Shell from '@/lib/Shell';
-import { findDescendant } from '@/lib/utils/edit';
 import { isLinkedLocalApp } from '@/lib/utils/app';
 import { packagePath } from '@/lib/utils/paths';
 import type { Editor } from '@/lib/Editor';
@@ -17,7 +13,12 @@ export class Solid extends Plugin {
     }
 
     protected async updateFiles(editor: Editor): Promise<void> {
-        await this.updateTailwindConfig(editor);
+        await this.updateTailwindConfig(editor, {
+            content: isLinkedLocalApp()
+                ? `'${packagePath('plugin-solid')}/dist/**/*.js'`
+                : '\'./node_modules/@aerogel/plugin-solid/dist/**/*.js\'',
+        });
+
         await this.updateNpmScripts(editor);
         await this.updateGitIgnore();
         await super.updateFiles(editor);
@@ -29,28 +30,6 @@ export class Solid extends Plugin {
         await super.installNpmDependencies();
     }
 
-    protected async updateTailwindConfig(editor: Editor): Promise<void> {
-        await Log.animate('Updating tailwind configuration', async () => {
-            const tailwindConfig = editor.requireSourceFile('tailwind.config.js');
-            const contentArray = this.getTailwindContentArray(tailwindConfig);
-            const contentValue = isLinkedLocalApp()
-                ? `'${packagePath('plugin-solid')}/dist/**/*.js'`
-                : '\'./node_modules/@aerogel/plugin-solid/dist/**/*.js\'';
-
-            if (!contentArray) {
-                return Log.fail(`
-                    Could not find content array in tailwind config, please add the following manually:
-
-                    ${contentValue}
-                `);
-            }
-
-            contentArray.addElement(contentValue);
-
-            await editor.save(tailwindConfig);
-        });
-    }
-
     protected async updateNpmScripts(editor: Editor): Promise<void> {
         Log.info('Updating npm scripts...');
 
@@ -96,19 +75,4 @@ export class Solid extends Plugin {
         File.write('.gitignore', `${gitignore}/solid-data\n`);
     }
 
-    protected getTailwindContentArray(tailwindConfig: SourceFile): ArrayLiteralExpression | null {
-        const contentAssignment = findDescendant(tailwindConfig, {
-            guard: Node.isPropertyAssignment,
-            validate: (propertyAssignment) => propertyAssignment.getName() === 'content',
-            skip: SyntaxKind.JSDoc,
-        });
-        const contentArray = contentAssignment?.getInitializer();
-
-        if (!Node.isArrayLiteralExpression(contentArray)) {
-            return null;
-        }
-
-        return contentArray;
-    }
-
 }

package/templates/app/index.html

@@ -3,10 +3,11 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title><% app.name %></title>
+        <title>{{ app.name }}</title>
+        {{ socialMeta() }}
     </head>
     <body class="h-full w-full text-base font-normal leading-tight text-gray-900 antialiased">
-        <div id="app" class="h-full"></div>
+        <div id="app" class="loading h-full"></div>
         <script type="module" src="./src/main.ts"></script>
     </body>
 </html>

package/templates/app/package.json

@@ -5,8 +5,8 @@
     "scripts": {
         "build": "vite build",
         "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
-        "cy:open": "cypress open --e2e --browser chromium",
-        "cy:run": "cypress run",
+        "cy:open": "cypress open --config-file ./cypress/cypress.config.ts --e2e --browser chromium",
+        "cy:run": "cypress run --config-file ./cypress/cypress.config.ts",
         "cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",
         "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\"",
@@ -51,5 +51,16 @@
         "vite": "^4.3.0",
         "vitest": "^0.33.0",
         "vue-tsc": "^1.8.15"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
+    },
+    "prettier": {
+        "plugins": [
+            "prettier-plugin-tailwindcss"
+        ],
+        "printWidth": 120
     }
 }

package/templates/app/src/App.vue

@@ -1,6 +1,6 @@
 <template>
-    <AGAppLayout>
-        <main class="flex flex-grow flex-col items-center justify-center bg-blue-50">
+    <AGAppLayout class="bg-blue-50">
+        <main class="flex flex-grow flex-col items-center justify-center">
             <h1 class="text-4xl font-semibold">
                 {{ $t('home.title') }}
             </h1>

package/templates/app/src/assets/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/templates/app/src/main.ts

@@ -2,7 +2,7 @@ import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
 import { bootstrapApplication } from '@aerogel/core';
 
-import './assets/styles.css';
+import './assets/css/styles.css';
 import App from './App.vue';
 
 bootstrapApplication(App, {

package/templates/app/vite.config.ts

@@ -7,8 +7,9 @@ import { defineConfig } from 'vitest/config';
 import { resolve } from 'path';
 
 export default defineConfig({
+    publicDir: resolve(__dirname, './src/assets/public/'),
     plugins: [
-        Aerogel(),
+        Aerogel({ name: '<% app.name %>' }),
         Components({
             dts: false,
             resolvers: [AerogelResolver(), IconsResolver()],