@aerogel/cli 0.0.0-next.0be1479064cfd43fb6eafa2552cb7f8775554d93 → 0.0.0-next.3e4851f6fd2a4f0f0362da0c88820a5f4b082052

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`);
+        await Shell.run(`npm install ${this.getNpmPackageName()}@next --save-exact ${flags}`);
     }
 
     protected async updateBootstrapConfig(editor: Editor): Promise<void> {
@@ -86,10 +101,29 @@ 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,
-            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrapApplication',
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
             skip: SyntaxKind.ImportDeclaration,
         });
         const bootstrapOptions = bootstrapAppCall?.getArguments()[1];
@@ -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,10 +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 Log from '@/lib/Log';
-import { findDescendant } from '@/lib/utils/edit';
 import { isLinkedLocalApp } from '@/lib/utils/app';
 import { packagePath } from '@/lib/utils/paths';
 import type { Editor } from '@/lib/Editor';
@@ -16,50 +13,66 @@ 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);
     }
 
     protected async installNpmDependencies(): Promise<void> {
-        await Shell.run('npm install soukai-solid@next');
+        await Shell.run('npm install soukai-solid@next --save-exact');
+        await Shell.run('npm install @solid/community-server@7 --save');
         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\'';
+    protected async updateNpmScripts(editor: Editor): Promise<void> {
+        Log.info('Updating npm scripts...');
 
-            if (!contentArray) {
-                return Log.fail(`
-                    Could not find content array in tailwind config, please add the following manually:
+        const packageJson = File.read('package.json');
 
-                    ${contentValue}
-                `);
-            }
+        if (!packageJson) {
+            return Log.fail('Could not find package.json file');
+        }
 
-            contentArray.addElement(contentValue);
+        File.write(
+            'package.json',
+            packageJson
+                .replace(
+                    '"cy:dev": "concurrently --kill-others \\"npm run test:serve-app\\" \\"npm run cy:open\\"",',
+                    '"cy:dev": "concurrently --kill-others ' +
+                        '\\"npm run test:serve-app\\" \\"npm run test:serve-pod\\" \\"npm run cy:open\\"",',
+                )
+                .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",',
+                )
+                .replace(
+                    '"dev": "vite",',
+                    '"dev": "vite",\n' +
+                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -p 4000 -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"',
+                ),
+        );
 
-            await editor.save(tailwindConfig);
-        });
+        editor.addModifiedFile('package.json');
     }
 
-    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();
+    protected async updateGitIgnore(): Promise<void> {
+        Log.info('Updating .gitignore');
 
-        if (!Node.isArrayLiteralExpression(contentArray)) {
-            return null;
-        }
+        const gitignore = File.read('.gitignore') ?? '';
 
-        return contentArray;
+        File.write('.gitignore', `${gitignore}/solid-data\n`);
     }
 
 }

package/src/plugins/Soukai.ts

@@ -8,7 +8,7 @@ export class Soukai extends Plugin {
     }
 
     protected async installNpmDependencies(): Promise<void> {
-        await Shell.run('npm install soukai@next');
+        await Shell.run('npm install soukai@next --save-exact');
         await super.installNpmDependencies();
     }
 

package/src/testing/setup.ts

@@ -47,10 +47,6 @@ vi.mock('@/lib/utils/edit', async () => {
 vi.mock('@/lib/utils/paths', async () => {
     const original = (await vi.importActual('@/lib/utils/paths')) as object;
 
-    function cliBasePath(path: string = '') {
-        return resolve(__dirname, '../../', path);
-    }
-
     function basePath(path: string = '') {
         return resolve(__dirname, '../../', path);
     }
@@ -59,11 +55,15 @@ vi.mock('@/lib/utils/paths', async () => {
         return basePath(`../${packageName}`);
     }
 
+    function templatePath(name: string = '') {
+        return resolve(__dirname, `../../templates/${name}`);
+    }
+
     return {
         ...original,
         basePath,
-        cliBasePath,
         packagePath,
+        templatePath,
     };
 });
 

package/src/testing/stubs/ProgramStub.ts

@@ -0,0 +1,35 @@
+import type { Command as Program } from 'commander';
+import type { Constructor } from '@noeldemartin/utils';
+
+import type Command from '@/commands/Command';
+
+export default class ProgramStub<T extends Constructor<Command> = Constructor<Command>> {
+
+    private runner?: (...args: ConstructorParameters<T>) => Promise<void>;
+
+    public async run(...args: ConstructorParameters<T>): Promise<void> {
+        await this.runner?.(...args);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public command(): any {
+        return { description: () => this };
+    }
+
+    public argument(): this {
+        return this;
+    }
+
+    public option(): this {
+        return this;
+    }
+
+    public action(runner: Function): this {
+        this.runner = runner as (...args: ConstructorParameters<T>) => Promise<void>;
+
+        return this;
+    }
+
+}
+
+export default interface ProgramStub extends Program {}

package/src/testing/utils.ts

@@ -0,0 +1,14 @@
+import type { Constructor } from '@noeldemartin/utils';
+
+import ProgramStub from '@/testing/stubs/ProgramStub';
+import type Command from '@/commands/Command';
+
+export type StubCommandRunner<T extends Constructor<Command>> = (...args: ConstructorParameters<T>) => Promise<void>;
+
+export function stubCommandRunner<T extends Constructor<Command>>(commandClass: T): StubCommandRunner<T> {
+    const program = new ProgramStub();
+
+    (commandClass as unknown as typeof Command).define(program);
+
+    return (...args) => program.run(...args);
+}

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

@@ -12,6 +12,18 @@ jobs:
                   node-version-file: '.nvmrc'
             - run: npm ci
             - run: npm run lint
-            - run: npm run test:ci
-            - run: npm run cy:test
             - run: npm run build
+            - run: npm run test:ci
+            - run: npm run cy:test-snapshots:ci
+            - name: Upload Cypress screenshots
+              uses: actions/upload-artifact@v3
+              if: ${{ failure() }}
+              with:
+                  name: cypress_screenshots
+                  path: cypress/screenshots
+            - name: Upload Cypress snapshots
+              uses: actions/upload-artifact@v3
+              if: ${{ failure() }}
+              with:
+                  name: cypress_snapshots
+                  path: cypress/snapshots

package/templates/app/README.md

@@ -0,0 +1,3 @@
+# <% app.name %>
+
+App created with [AerogelJS](https://aerogel.js.org)

package/templates/app/{cypress.config.ts → cypress/cypress.config.ts}

@@ -5,6 +5,10 @@ export default defineConfig({
     e2e: {
         baseUrl: 'http://localhost:5001',
         video: false,
+        retries: {
+            runMode: 3,
+            openMode: 0,
+        },
         setupNodeEvents(on) {
             install(on);
         },

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\"",
@@ -33,6 +33,7 @@
         "@aerogel/cli": "<% &dependencies.aerogelCli %>",
         "@aerogel/cypress": "<% &dependencies.aerogelCypress %>",
         "@aerogel/vite": "<% &dependencies.aerogelVite %>",
+        "@iconify/json": "^2.2.134",
         "@noeldemartin/eslint-config-vue": "next",
         "@noeldemartin/scripts": "next",
         "@total-typescript/ts-reset": "^0.4.2",
@@ -50,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

@@ -1,11 +1,11 @@
 import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
-import { bootstrapApplication } from '@aerogel/core';
+import { bootstrap } from '@aerogel/core';
 
-import './assets/styles.css';
+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 }) }),

package/templates/app/tsconfig.json

@@ -6,6 +6,7 @@
         "strict": true,
         "jsx": "preserve",
         "noUncheckedIndexedAccess": true,
+        "skipLibCheck": true,
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "lib": ["esnext", "dom"],

package/templates/app/vite.config.ts

@@ -3,21 +3,27 @@ import Components from 'unplugin-vue-components/vite';
 import I18n from '@intlify/unplugin-vue-i18n/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
+import { defineConfig } from 'vitest/config';
 import { resolve } from 'path';
 
-export default {
+export default defineConfig({
+    publicDir: resolve(__dirname, './src/assets/public/'),
     plugins: [
-        Aerogel(),
+        Aerogel({ name: '<% app.name %>' }),
         Components({
             dts: false,
             resolvers: [AerogelResolver(), IconsResolver()],
         }),
         I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
-        Icons(),
+        Icons({
+            iconCustomizer(_, __, props) {
+                props['aria-hidden'] = 'true';
+            },
+        }),
     ],
     resolve: {
         alias: {
             '@': resolve(__dirname, './src'),
         },
     },
-};
+});

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

@@ -0,0 +1,32 @@
+<template>
+    <AGHeadlessButton :class="colorClasses">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import { Colors, enumProp } from '@aerogel/core';
+import { computed } from 'vue';
+
+const props = defineProps({
+    color: enumProp(Colors, Colors.Primary),
+});
+
+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 '';
+    }
+});
+</script>

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

@@ -0,0 +1,71 @@
+<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="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(3, 200px) !important;
+}
+
+.story-<% component.slug %> .variant-playground,
+.story-<% component.slug %> .variant-colors{
+    grid-column: 1 / -1;
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+    <AGHeadlessInput v-bind="props">
+        <AGHeadlessInputLabel />
+        <AGHeadlessInputInput v-bind="attrs" />
+        <AGHeadlessInputError />
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { useInputAttrs, useInputProps } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps(useInputProps());
+const [attrs] = useInputAttrs();
+</script>