@aerogel/cli 0.0.0-next.47ed8ee3c048720794026e45140e9b700cb428b9 → 0.0.0-next.4b4da752b2ea1e9ee76a4d33a1e616bf87478f69

package/src/lib/utils/paths.ts

@@ -0,0 +1,42 @@
+import { URL, fileURLToPath } from 'node:url';
+import { stringMatch } from '@noeldemartin/utils';
+import { resolve } from 'node:path';
+
+import File from '@aerogel/cli/lib/File';
+import Log from '@aerogel/cli/lib/Log';
+
+export function basePath(path: string = ''): string {
+    if (
+        File.contains(
+            fileURLToPath(new URL(/* @vite-ignore */ '../../../package.json', import.meta.url)),
+            '"packages/create-aerogel"',
+        )
+    ) {
+        return resolve(fileURLToPath(new URL(/* @vite-ignore */ '../', import.meta.url)), path);
+    }
+
+    const packageJson = File.read(
+        fileURLToPath(new URL(/* @vite-ignore */ '../../../../package.json', import.meta.url)),
+    );
+    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);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function packNotFound(packageName: string): any {
+    return Log.fail(`Could not find ${packageName} pack file, did you run 'npm pack'?`);
+}
+
+export function packagePackPath(packageName: string): string | null {
+    return File.getFiles(packagePath(packageName)).find((file) => file.endsWith('.tgz')) ?? null;
+}
+
+export function packagePath(packageName: string): string {
+    return basePath(`../${packageName}`);
+}
+
+export function templatePath(name: string): string {
+    return fileURLToPath(new URL(/* @vite-ignore */ `../templates/${name}`, import.meta.url));
+}

package/src/plugins/Plugin.ts

@@ -0,0 +1,159 @@
+import { Node, SyntaxKind } from 'ts-morph';
+import type { ArrayLiteralExpression, ImportDeclarationStructure, OptionalKind, SourceFile } from 'ts-morph';
+
+import Log from '@aerogel/cli/lib/Log';
+import Shell from '@aerogel/cli/lib/Shell';
+import File from '@aerogel/cli/lib/File';
+import { app, isLinkedLocalApp, isLocalApp } from '@aerogel/cli/lib/utils/app';
+import { editFiles, findDescendant, when } from '@aerogel/cli/lib/utils/edit';
+import { packNotFound, packagePackPath, packagePath } from '@aerogel/cli/lib/utils/paths';
+import type { Editor } from '@aerogel/cli/lib/Editor';
+
+export default abstract class Plugin {
+
+    public readonly name: string;
+
+    constructor(name: string) {
+        this.name = name;
+    }
+
+    public async install(): Promise<void> {
+        this.assertNotInstalled();
+
+        await this.beforeInstall();
+        await this.installDependencies();
+
+        if (editFiles()) {
+            const editor = app().edit();
+
+            await this.updateFiles(editor);
+            await editor.format();
+        }
+
+        await this.afterInstall();
+
+        Log.info(`Plugin ${this.name} installed!`);
+    }
+
+    protected assertNotInstalled(): void {
+        if (File.contains('package.json', `"${this.getNpmPackageName()}"`)) {
+            Log.fail(`${this.name} is already installed!`);
+        }
+    }
+
+    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();
+        });
+    }
+
+    protected async updateFiles(editor: Editor): Promise<void> {
+        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())} ${flags}`);
+
+            return;
+        }
+
+        if (isLocalApp()) {
+            const packPath = packagePackPath(this.getLocalPackageName()) ?? packNotFound(this.getLocalPackageName());
+
+            await Shell.run(`npm install file:${packPath} ${flags}`);
+
+            return;
+        }
+
+        await Shell.run(`npm install ${this.getNpmPackageName()}@next --save-exact ${flags}`);
+    }
+
+    protected async updateBootstrapConfig(editor: Editor): Promise<void> {
+        await Log.animate('Injecting plugin in bootstrap configuration', async () => {
+            const mainConfig = editor.requireSourceFile('src/main.ts');
+            const pluginsArray = this.getBootstrapPluginsDeclaration(mainConfig);
+
+            if (!pluginsArray) {
+                return Log.fail(`
+                    Could not find plugins array in bootstrap config, please add the following manually:
+
+                    ${this.getBootstrapConfig()}
+                `);
+            }
+
+            mainConfig.addImportDeclaration(this.getBootstrapImport());
+            pluginsArray.addElement(this.getBootstrapConfig());
+
+            await editor.save(mainConfig);
+        });
+    }
+
+    protected getBootstrapPluginsDeclaration(mainConfig: SourceFile): ArrayLiteralExpression | null {
+        const bootstrapAppCall = findDescendant(mainConfig, {
+            guard: Node.isCallExpression,
+            validate: (callExpression) => callExpression.getExpression().getText() === 'bootstrap',
+            skip: SyntaxKind.ImportDeclaration,
+        });
+        const bootstrapOptions = bootstrapAppCall?.getArguments()[1];
+        const pluginsOption = when(bootstrapOptions, Node.isObjectLiteralExpression)?.getProperty('plugins');
+        const pluginsArray = when(pluginsOption, Node.isPropertyAssignment)?.getInitializer();
+
+        if (!Node.isArrayLiteralExpression(pluginsArray)) {
+            return null;
+        }
+
+        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,
+            moduleSpecifier: `@aerogel/plugin-${this.name}`,
+        };
+    }
+
+    protected getNpmPackageName(): string {
+        return `@aerogel/${this.getLocalPackageName()}`;
+    }
+
+    protected getLocalPackageName(): string {
+        return `plugin-${this.name}`;
+    }
+
+    protected isForDevelopment(): boolean {
+        return false;
+    }
+
+    protected getBootstrapConfig(): string {
+        return `${this.name}()`;
+    }
+
+}

package/src/plugins/Solid.ts

@@ -0,0 +1,71 @@
+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 type { Editor } from '@aerogel/cli/lib/Editor';
+
+export class Solid extends Plugin {
+
+    constructor() {
+        super('solid');
+    }
+
+    protected override async updateFiles(editor: Editor): Promise<void> {
+        await this.updateNpmScripts(editor);
+        await this.updateGitIgnore();
+        await super.updateFiles(editor);
+    }
+
+    protected override 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.1.6 --save-dev -E');
+        await super.installNpmDependencies();
+    }
+
+    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(
+                    '"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:3000 cy:run",',
+                )
+                .replace(
+                    '"dev": "vite",',
+                    '"dev": "vite",\n' +
+                        '"dev:serve-pod": "community-solid-server -c @css:config/file.json -f ./solid",',
+                )
+                .replace(
+                    '"test:serve-app": "vite --port 5001 --mode testing"',
+                    '"test:serve-app": "vite --port 5001 --mode testing",\n' +
+                        '"test:serve-pod": "community-solid-server -l warn"',
+                ),
+        );
+
+        editor.addModifiedFile('package.json');
+    }
+
+    protected async updateGitIgnore(): Promise<void> {
+        Log.info('Updating .gitignore');
+
+        const gitignore = File.read('.gitignore') ?? '';
+
+        File.write('.gitignore', `${gitignore}/solid\n`);
+    }
+
+}

package/src/plugins/Soukai.ts

@@ -0,0 +1,19 @@
+import Plugin from '@aerogel/cli/plugins/Plugin';
+import Shell from '@aerogel/cli/lib/Shell';
+
+export class Soukai extends Plugin {
+
+    constructor() {
+        super('soukai');
+    }
+
+    protected override async installNpmDependencies(): Promise<void> {
+        await Shell.run('npm install soukai@next --save-exact');
+        await super.installNpmDependencies();
+    }
+
+    protected override getBootstrapConfig(): string {
+        return 'soukai({ models: import.meta.glob(\'@/models/*\', { eager: true }) })';
+    }
+
+}

package/src/testing/setup.ts

@@ -1,42 +1,73 @@
-import { beforeEach, vi } from 'vitest';
-import { resolve } from 'path';
-import { setTestingNamespace } from '@noeldemartin/utils';
+import { beforeAll, beforeEach, vi } from 'vitest';
+import { resolve } from 'node:path';
+import { setupFacadeMocks } from '@noeldemartin/testing';
 
-import File from '@/lib/File';
-import FileMock from '@/lib/File.mock';
-import Log from '@/lib/Log';
-import LogMock from '@/lib/Log.mock';
-import Shell from '@/lib/Shell';
-import ShellMock from '@/lib/Shell.mock';
+import ShellMock from '@aerogel/cli/lib/Shell.mock';
+import File from '@aerogel/cli/lib/File';
+import FileMock from '@aerogel/cli/lib/File.mock';
+import Log from '@aerogel/cli/lib/Log';
+import LogMock from '@aerogel/cli/lib/Log.mock';
+import Shell from '@aerogel/cli/lib/Shell';
 
-setTestingNamespace(vi);
-
-File.setMockInstance(FileMock);
-Log.setMockInstance(LogMock);
-Shell.setMockInstance(ShellMock);
+beforeAll(() => {
+    File.setMockFacade(FileMock);
+    Log.setMockFacade(LogMock);
+    Shell.setMockFacade(ShellMock);
+});
 
 beforeEach(() => {
-    FileMock.reset();
     File.mock();
     Log.mock();
     Shell.mock();
 });
 
-// TODO find out why these need to be mocked
+vi.mock('@noeldemartin/utils', async () => {
+    const original = (await vi.importActual('@noeldemartin/utils')) as object;
 
-vi.mock('@/lib/utils', async () => {
-    const utils = (await vi.importActual('@/lib/utils')) as object;
+    setupFacadeMocks();
+
+    return original;
+});
+
+vi.mock('@aerogel/cli/lib/utils/app', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/app')) as object;
 
     return {
-        ...utils,
-        basePath(path: string) {
-            return resolve(__dirname, '../../', path);
-        },
+        ...original,
+        isLocalApp: () => false,
+        isLinkedLocalApp: () => false,
     };
 });
 
-vi.mock('mustache', async () => {
-    const mustache = (await vi.importActual('mustache')) as { default: unknown };
+vi.mock('@aerogel/cli/lib/utils/edit', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/edit')) as object;
 
-    return mustache.default;
+    return {
+        ...original,
+        editFiles: () => false,
+    };
+});
+
+// TODO find out why these need to be mocked
+vi.mock('@aerogel/cli/lib/utils/paths', async () => {
+    const original = (await vi.importActual('@aerogel/cli/lib/utils/paths')) as object;
+
+    function basePath(path: string = '') {
+        return resolve(__dirname, '../../', path);
+    }
+
+    function packagePath(packageName: string) {
+        return basePath(`../${packageName}`);
+    }
+
+    function templatePath(name: string = '') {
+        return resolve(__dirname, `../../templates/${name}`);
+    }
+
+    return {
+        ...original,
+        basePath,
+        packagePath,
+        templatePath,
+    };
 });

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

@@ -6,12 +6,24 @@ 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
             - 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@v4
+              if: ${{ failure() }}
+              with:
+                  name: cypress_screenshots
+                  path: cypress/screenshots
+            - name: Upload Cypress snapshots
+              uses: actions/upload-artifact@v4
+              if: ${{ failure() }}
+              with:
+                  name: cypress_snapshots
+                  path: cypress/snapshots

package/templates/app/.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+v22.9.0

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

@@ -0,0 +1,17 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "runtimeVersion": "22.14.0",
+            "request": "launch",
+            "name": "Debug Current Test File",
+            "autoAttachChildProcesses": true,
+            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+            "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+            "args": ["run", "${fileBasenameNoExtension}"],
+            "smartStep": true,
+            "console": "integratedTerminal"
+        }
+    ]
+}

package/templates/app/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "emeraldwalk.runonsave": {
+        "commands": [
+            {
+                "match": ".*",
+                "cmd": "npx prettier-eslint ${file} --write"
+            }
+        ]
+    }
+}

package/templates/app/README.md

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

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

@@ -0,0 +1,14 @@
+import { setupAerogelNodeEvents } from '@aerogel/cypress/config';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+    e2e: {
+        baseUrl: 'http://localhost:5001',
+        video: false,
+        retries: {
+            runMode: 3,
+            openMode: 0,
+        },
+        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/cypress/tsconfig.json

@@ -1,12 +1,11 @@
 {
+    "extends": "@tsconfig/node22/tsconfig.json",
+    "include": ["**/*.ts"],
     "compilerOptions": {
-        "target": "es5",
-        "lib": ["es5", "dom"],
-        "types": ["cypress", "node"],
         "baseUrl": ".",
-        "paths": {
-            "@cy/*": ["./*"]
-        }
-    },
-    "include": ["**/*.ts"]
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "lib": ["DOM"],
+        "types": ["node", "cypress"]
+    }
 }

package/templates/app/index.html

@@ -1,12 +1,13 @@
 <!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>
+        <title>{{ app.name }}</title>
+        {{ socialMeta() }}
     </head>
-    <body class="h-full w-full">
-        <div id="app" class="h-full"></div>
+    <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>
 </html>

package/templates/app/package.json

@@ -2,43 +2,66 @@
     "name": "<% app.slug %>",
     "version": "0.0.0",
     "private": true,
+    "type": "module",
     "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\"",
         "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"
+        "test:serve-app": "vite --port 5001 --mode testing"
     },
     "dependencies": {
-        "@aerogel/core": "next",
-        "@aerogel/plugin-i18n": "next",
-        "@intlify/unplugin-vue-i18n": "^0.12.2",
-        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.9",
-        "soukai": "^0.5.1",
-        "tailwindcss": "^3.3.2",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19",
-        "vue-router": "^4.2.1"
+        "@aerogel/core": "<% &dependencies.aerogelCore %>",
+        "@aerogel/plugin-i18n": "<% &dependencies.aerogelPluginI18n %>",
+        "@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
+        "@intlify/unplugin-vue-i18n": "^6.0.5",
+        "@noeldemartin/utils": "next",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "soukai": "next",
+        "tailwindcss": "^4.1.1",
+        "vue": "^3.5.13",
+        "vue-i18n": "^11.1.2"
     },
     "devDependencies": {
-        "@aerogel/cli": "next",
-        "@aerogel/cypress": "next",
-        "@aerogel/vite": "next",
-        "@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
+        "@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",
+        "@tsconfig/node22": "^22.0.1",
         "@types/node": "^20.3.1",
+        "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^10.4.14",
         "concurrently": "^8.2.0",
-        "cypress": "^12.17.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",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.0",
-        "vitest": "^0.33.0"
+        "vite": "^6.2.2",
+        "vitest": "^3.0.9",
+        "vue-tsc": "^2.2.8"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
+    },
+    "prettier": {
+        "printWidth": 120,
+        "plugins": [
+            "prettier-plugin-tailwindcss"
+        ]
     }
 }

package/templates/app/src/App.vue

@@ -1,7 +1,9 @@
 <template>
-    <AGAppLayout>
-        <main class="flex flex-grow flex-col items-center justify-center bg-blue-50">
-            <h1 class="text-4xl font-semibold">{{ $t('home.title') }}</h1>
+    <AGAppLayout class="bg-blue-50">
+        <main class="flex grow flex-col items-center justify-center">
+            <h1 class="text-4xl font-semibold">
+                {{ $t('home.title') }}
+            </h1>
             <a href="https://aerogel.js.org" target="_blank" class="mt-2 underline opacity-75 hover:opacity-100">
                 {{ $t('home.getStarted') }}
             </a>

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

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@source '../../../node_modules/@aerogel/core';

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

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

package/templates/app/src/main.ts

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

package/templates/app/src/types/globals.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="vite/client" />
-/// <reference types="vue-router" />
 /// <reference types="vue-i18n" />