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

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,105 @@
+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;
+    private installedPostCSSPseudoClasses: boolean = false;
+
+    constructor() {
+        super('histoire');
+    }
+
+    public async beforeInstall(): Promise<void> {
+        this.installedPatchPackage = false;
+        this.installedPostCSSPseudoClasses = 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;
+        }
+
+        if (!File.contains('package.json', '"postcss-pseudo-classes"')) {
+            await Shell.run('npm install postcss-pseudo-classes --save-dev');
+
+            this.installedPostCSSPseudoClasses = 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'));
+
+        if (this.installedPostCSSPseudoClasses) {
+            Template.instantiate(templatePath('postcss-pseudo-classes'));
+        }
+    }
+
+    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,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,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);
@@ -25,32 +26,11 @@ 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();
     }
 
-    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...');
 
@@ -71,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"',
                 ),
         );
 
@@ -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/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

@@ -0,0 +1,42 @@
+<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

@@ -0,0 +1,77 @@
+<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-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>

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

@@ -0,0 +1,63 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form">
+                <<% component.name %> name="food" :label="label" :placeholder="placeholder" />
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+                <HstText v-model="placeholder" title="Placeholder" />
+                <HstCheckbox v-model="hasErrors" title="Errors" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" />
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm">
+                <<% component.name %>
+                    name="food"
+                    label="What's the best food?"
+                    placeholder="Ramen"
+                    class=":focus :focus-visible"
+                />
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredStringInput, useForm } from '@aerogel/core';
+import { ref, watchEffect } from 'vue';
+
+const form = useForm({ food: requiredStringInput() });
+const errorForm = useForm({ food: requiredStringInput() });
+const label = ref('What\'s the best food?');
+const placeholder = ref('Ramen');
+const hasErrors = ref(false);
+
+errorForm.submit();
+
+watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>

package/templates/histoire/histoire.config.ts

@@ -0,0 +1,7 @@
+import HstAerogel from '@aerogel/histoire/dist/plugin';
+import { defineConfig } from 'histoire';
+
+export default defineConfig({
+    setupFile: '/src/main.histoire.ts',
+    plugins: [HstAerogel()],
+});

package/templates/histoire/patches/histoire+0.17.6.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/histoire/dist/node/collect/index.js b/node_modules/histoire/dist/node/collect/index.js
+index 8ffd507..37be43e 100644
+--- a/node_modules/histoire/dist/node/collect/index.js
++++ b/node_modules/histoire/dist/node/collect/index.js
+@@ -22,7 +22,7 @@ export function useCollectStories(options, ctx) {
+                 /vite\w*\/dist\/client\/(client|env).mjs/,
+                 ...ctx.config.viteNodeInlineDeps ?? [],
+             ],
+-            fallbackCJS: true,
++            fallbackCJS: false,
+         },
+         transformMode: ctx.config.viteNodeTransformMode,
+     });

package/templates/histoire/src/main.histoire.ts

@@ -0,0 +1,8 @@
+import '@aerogel/histoire/dist/styles.css';
+import { defineSetupAerogel } from '@aerogel/histoire';
+
+import './assets/css/styles.css';
+
+export const setupVue3 = defineSetupAerogel({
+    messages: import.meta.glob('@/lang/*.yaml'),
+});