@aerogel/cli 0.0.0-next.deed5f96c88f54b3908a9da7fe630324e78aa4ac → 0.0.0-next.e3690204fb6f5fb723525710ac64e3b3fe4fd487

package/src/commands/generate-component.ts

@@ -1,4 +1,4 @@
-import { arrayFilter, arrayFrom, stringToSlug } from '@noeldemartin/utils';
+import { arrayFrom, stringToSlug } from '@noeldemartin/utils';
 import { Node, SyntaxKind } from 'ts-morph';
 import type { ArrayLiteralExpression, CallExpression, SourceFile } from 'ts-morph';
 
@@ -9,7 +9,6 @@ import Template from '@aerogel/cli/lib/Template';
 import { app } from '@aerogel/cli/lib/utils/app';
 import { editFiles, findDescendant } from '@aerogel/cli/lib/utils/edit';
 import { templatePath } from '@aerogel/cli/lib/utils/paths';
-import type { CommandOptions } from '@aerogel/cli/commands/Command';
 
 export interface Options {
     button?: boolean;
@@ -26,52 +25,21 @@ export class GenerateComponentCommand extends Command {
         ['path', 'Component path (relative to components folder; extension not necessary)'],
     ];
 
-    protected static override options: CommandOptions = {
-        button: {
-            description: 'Create a custom button',
-            type: 'boolean',
-        },
-        checkbox: {
-            description: 'Create a custom checkbox',
-            type: 'boolean',
-        },
-        input: {
-            description: 'Create a custom input',
-            type: 'boolean',
-        },
-        story: {
-            description: 'Create component story using Histoire',
-            type: 'boolean',
-        },
-    };
-
     private path: string;
-    private options: Options;
 
-    constructor(path: string, options: Options = {}) {
+    constructor(path: string) {
         super();
 
         this.path = path;
-        this.options = options;
-    }
-
-    protected override async validate(): Promise<void> {
-        const components = arrayFilter([this.options.button, this.options.input, this.options.checkbox]).length;
-
-        if (components > 1) {
-            Log.fail('Can only use one of \'button\', \'input\', or \'checkbox\' flags!');
-        }
     }
 
     protected override async run(): Promise<void> {
         this.assertAerogelOrDirectory('src/components');
-        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();
 
         const filesList = arrayFrom(files)
@@ -81,33 +49,13 @@ export class GenerateComponentCommand extends Command {
         Log.info(`${componentName} component created successfully! The following files were created:\n\n${filesList}`);
     }
 
-    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 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'
-                : this.options.button
-                    ? 'component-button'
-                    : this.options.checkbox
-                        ? 'component-checkbox'
-                        : 'component';
-            const componentFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
+            const componentFiles = Template.instantiate(templatePath('component'), `src/components/${directoryName}`, {
                 component: {
                     name: componentName,
                     slug: stringToSlug(componentName),
@@ -118,30 +66,6 @@ export class GenerateComponentCommand extends Command {
         });
     }
 
-    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'
-                : this.options.button
-                    ? 'component-button-story'
-                    : this.options.checkbox
-                        ? 'component-checkbox-story'
-                        : 'component-story';
-            const storyFiles = Template.instantiate(templatePath(templateName), `src/components/${directoryName}`, {
-                component: {
-                    name: componentName,
-                    slug: stringToSlug(componentName),
-                },
-            });
-
-            storyFiles.forEach((file) => files.add(file));
-        });
-    }
-
     protected async declareComponents(): Promise<void> {
         if (!editFiles()) {
             return;

package/src/commands/install.test.ts

@@ -24,4 +24,12 @@ describe('Install plugin command', () => {
         ShellMock.expectRan('npm install @aerogel/plugin-soukai@next --save-exact');
     });
 
+    it('installs local-first', async () => {
+        // Act
+        await InstallCommand.run('local-first');
+
+        // Assert
+        ShellMock.expectRan('npm install @aerogel/plugin-local-first@next --save-exact');
+    });
+
 });

package/src/commands/install.ts

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

package/src/lib/Editor.ts

@@ -16,7 +16,6 @@ export class Editor {
         this.modifiedFiles = new Set();
 
         this.project.addSourceFilesAtPaths('src/**/*.ts');
-        this.project.addSourceFilesAtPaths('tailwind.config.js');
         this.project.addSourceFilesAtPaths('vite.config.ts');
         this.project.addSourceFilesAtPaths('package.json');
     }

package/src/plugins/LocalFirst.ts

@@ -0,0 +1,9 @@
+import Plugin from '@aerogel/cli/plugins/Plugin';
+
+export default class LocalFirst extends Plugin {
+
+    constructor() {
+        super('local-first');
+    }
+
+}

package/src/plugins/Plugin.ts

@@ -1,4 +1,5 @@
 import { Node, SyntaxKind } from 'ts-morph';
+import { stringToCamelCase } from '@noeldemartin/utils';
 import type { ArrayLiteralExpression, ImportDeclarationStructure, OptionalKind, SourceFile } from 'ts-morph';
 
 import Log from '@aerogel/cli/lib/Log';
@@ -101,25 +102,6 @@ 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,
@@ -154,7 +136,7 @@ export default abstract class Plugin {
 
     protected getBootstrapImport(): OptionalKind<ImportDeclarationStructure> {
         return {
-            defaultImport: this.name,
+            defaultImport: stringToCamelCase(this.name),
             moduleSpecifier: `@aerogel/plugin-${this.name}`,
         };
     }
@@ -172,7 +154,7 @@ export default abstract class Plugin {
     }
 
     protected getBootstrapConfig(): string {
-        return `${this.name}()`;
+        return `${stringToCamelCase(this.name)}()`;
     }
 
 }

package/src/plugins/Solid.ts

@@ -2,23 +2,15 @@ import File from '@aerogel/cli/lib/File';
 import Log from '@aerogel/cli/lib/Log';
 import Plugin from '@aerogel/cli/plugins/Plugin';
 import Shell from '@aerogel/cli/lib/Shell';
-import { isLinkedLocalApp } from '@aerogel/cli/lib/utils/app';
-import { packagePath } from '@aerogel/cli/lib/utils/paths';
 import type { Editor } from '@aerogel/cli/lib/Editor';
 
-export class Solid extends Plugin {
+export default class Solid extends Plugin {
 
     constructor() {
         super('solid');
     }
 
     protected override async updateFiles(editor: Editor): Promise<void> {
-        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);

package/src/plugins/Soukai.ts

@@ -1,7 +1,7 @@
 import Plugin from '@aerogel/cli/plugins/Plugin';
 import Shell from '@aerogel/cli/lib/Shell';
 
-export class Soukai extends Plugin {
+export default class Soukai extends Plugin {
 
     constructor() {
         super('soukai');

package/templates/app/.vscode/launch.json

@@ -3,6 +3,7 @@
     "configurations": [
         {
             "type": "node",
+            "runtimeVersion": "22.14.0",
             "request": "launch",
             "name": "Debug Current Test File",
             "autoAttachChildProcesses": true,

package/templates/app/index.html

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

package/templates/app/package.json

@@ -21,14 +21,14 @@
         "@aerogel/core": "<% &dependencies.aerogelCore %>",
         "@aerogel/plugin-i18n": "<% &dependencies.aerogelPluginI18n %>",
         "@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
-        "@intlify/unplugin-vue-i18n": "^0.12.2",
+        "@intlify/unplugin-vue-i18n": "^6.0.5",
         "@noeldemartin/utils": "next",
-        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
         "soukai": "next",
-        "tailwindcss": "^3.3.2",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19"
+        "tailwindcss": "^4.1.1",
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.1.2"
     },
     "devDependencies": {
         "@aerogel/cli": "<% &dependencies.aerogelCli %>",
@@ -43,7 +43,8 @@
         "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^10.4.14",
         "concurrently": "^8.2.0",
-        "cypress": "^14.2.0",
+        "cypress": "14.2.0",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "start-server-and-test": "^2.0.0",
         "typescript": "^5.8.2",
         "unplugin-icons": "^0.16.3",

package/templates/app/src/App.vue

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

package/templates/app/src/assets/css/main.css

@@ -1,3 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import '@aerogel/core';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';

package/src/commands/generate-overrides.ts

@@ -1,85 +0,0 @@
-import { arrayFrom } from '@noeldemartin/utils';
-
-import Command from '@aerogel/cli/commands/Command';
-import File from '@aerogel/cli/lib/File';
-import Log from '@aerogel/cli/lib/Log';
-import Template from '@aerogel/cli/lib/Template';
-import { templatePath } from '@aerogel/cli/lib/utils/paths';
-import type { CommandOptions } from '@aerogel/cli/commands/Command';
-
-export interface Options {
-    story?: boolean;
-}
-
-export class GenerateOverridesCommand extends Command {
-
-    protected static override command: string = 'generate:overrides';
-    protected static override description: string = 'Generate AerogelJS component overrides';
-
-    protected static override options: CommandOptions = {
-        story: {
-            description: 'Create overrides story using Histoire',
-            type: 'boolean',
-        },
-    };
-
-    private options: Options;
-
-    constructor(options: Options = {}) {
-        super();
-
-        this.options = options;
-    }
-
-    protected override 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/templates/app/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};

package/templates/app/tailwind.config.js

@@ -1,5 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./index.html', './src/**/*.{vue,ts}', '<% &contentPath %>'],
-    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
-};

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

@@ -1,42 +0,0 @@
-<template>
-    <AGHeadlessButton :class="variantClasses" :disabled="disabled">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-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(() => {
-    switch (props.color) {
-        case Colors.Secondary:
-            // Add your custom color classes here.
-            return '';
-        case Colors.Clear:
-            // Add your custom color classes here.
-            return '';
-        case Colors.Danger:
-            // Add your custom color classes here.
-            return '';
-        case Colors.Primary:
-        default:
-            // Add your custom color classes here.
-            return '';
-    }
-});
-
-const variantClasses = computed(() => {
-    if (props.disabled) {
-        // Add additional classes for disabled state here.
-        return removeInteractiveClasses(colorClasses.value);
-    }
-
-    return colorClasses.value;
-});
-</script>

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

@@ -1,77 +0,0 @@
-<template>
-    <Story :layout="{ type: 'grid' }">
-        <Variant title="Playground">
-            <<% component.name %> :color="color">
-                {{ content }}
-            </<% component.name %>>
-
-            <template #controls>
-                <HstText v-model="content" title="Content" />
-                <HstSelect v-model="color" title="Color" :options="colorOptions" />
-            </template>
-        </Variant>
-
-        <Variant title="Default">
-            <<% component.name %>>
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Hover">
-            <<% component.name %> class=":hover">
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Focus">
-            <<% component.name %> class=":focus :focus-visible">
-                Click me!
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Disabled">
-            <<% component.name %> disabled>
-                You can't click me
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Colors" :layout="{ width: '300px' }">
-            <div class="flex items-center gap-2">
-                <<% component.name %> color="primary">
-                    Primary
-                </<% component.name %>>
-                <<% component.name %> color="secondary">
-                    Secondary
-                </<% component.name %>>
-                <<% component.name %> color="danger">
-                    Danger
-                </<% component.name %>>
-                <<% component.name %> color="clear">
-                    Clear
-                </<% component.name %>>
-            </div>
-        </Variant>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { Colors } from '@aerogel/core';
-import { invert } from '@noeldemartin/utils';
-import { ref } from 'vue';
-import type { Color } from '@aerogel/core';
-
-const content = ref('Click me!');
-const color = ref<Color>(Colors.Primary);
-const colorOptions = invert(Colors);
-</script>
-
-<style>
-.story-<% component.slug %> {
-    grid-template-columns: repeat(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground,
-.story-<% component.slug %> .variant-colors{
-    grid-column: 1 / -1;
-}
-</style>

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

@@ -1,34 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        :name="name"
-        :class="className"
-        :label="label"
-    >
-        <AGHeadlessInputInput
-            v-bind="attrs"
-            type="checkbox"
-        />
-        <div v-if="$slots.default">
-            <AGHeadlessInputLabel>
-                <slot />
-            </AGHeadlessInputLabel>
-            <AGHeadlessInputError />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { AGHeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
-import type { IAGHeadlessInput } from '@aerogel/core';
-
-defineOptions({ inheritAttrs: false });
-defineProps({
-    name: stringProp(),
-    label: stringProp(),
-    inputClass: stringProp(''),
-});
-
-const $input = componentRef<IAGHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>

package/templates/component-checkbox-story/[component.name].story.vue

@@ -1,63 +0,0 @@
-<template>
-    <Story group="base" :layout="{ type: 'grid' }">
-        <Variant title="Playground">
-            <AGForm :form="form" class="m-1">
-                <<% component.name %> name="accept" :form="form">
-                    {{ label }}
-                </<% component.name %>>
-            </AGForm>
-
-            <template #controls>
-                <HstText v-model="label" title="Label" />
-            </template>
-        </Variant>
-
-        <Variant title="Default">
-            <<% component.name %> class="m-1">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Hover">
-            <<% component.name %> class="m-1" input-class=":hover">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Focus">
-            <<% component.name %> class="m-1" input-class=":focus :focus-visible">
-                Accept Terms & Conditions
-            </<% component.name %>>
-        </Variant>
-
-        <Variant title="Error">
-            <AGForm :form="errorForm" class="m-1">
-                <<% component.name %> name="accept">
-                    Accept Terms & Conditions
-                </<% component.name %>>
-            </AGForm>
-        </Variant>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { requiredBooleanInput, useForm } from '@aerogel/core';
-import { ref } from 'vue';
-
-const form = useForm({ accept: requiredBooleanInput(true) });
-const errorForm = useForm({ accept: requiredBooleanInput() });
-const label = ref('Accept Terms & Conditions');
-
-form.submit();
-errorForm.submit();
-</script>
-
-<style>
-.story-<% component.slug %> {
-    grid-template-columns: repeat(2, 300px) !important;
-}
-
-.story-<% component.slug %> .variant-playground {
-    grid-column: 1 / -1;
-}
-</style>