@aerogel/cli 0.0.0-next.7b6199e0666e235c949739bdbc7cca2d54c8636e → 0.0.0-next.7f369b50c025aaa1a8024b6e53c659a6d7d617b5

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/lib/App.ts

@@ -1,19 +1,11 @@
-import { stringToSlug } from '@noeldemartin/utils';
+import { resolve } from 'node:path';
 
 import File from '@aerogel/cli/lib/File';
 import Log from '@aerogel/cli/lib/Log';
 import Template from '@aerogel/cli/lib/Template';
 import { packNotFound, packagePackPath, packagePath, templatePath } from '@aerogel/cli/lib/utils/paths';
 import { Editor } from '@aerogel/cli/lib/Editor';
-
-interface Dependencies {
-    aerogelCli: string;
-    aerogelCore: string;
-    aerogelCypress: string;
-    aerogelPluginI18n: string;
-    aerogelPluginSoukai: string;
-    aerogelVite: string;
-}
+import { simpleGit } from 'simple-git';
 
 export interface Options {
     local?: boolean;
@@ -27,28 +19,36 @@ export default class App {
         protected options: Options = {},
     ) {}
 
-    public create(path: string): void {
+    public async create(path: string): Promise<void> {
         if (File.exists(path) && (!File.isDirectory(path) || !File.isEmptyDirectory(path))) {
             Log.fail(`Folder at '${path}' already exists!`);
         }
 
-        Template.instantiate(templatePath('app'), path, {
-            app: {
-                name: this.name,
-                slug: stringToSlug(this.name),
-            },
-            dependencies: this.getDependencies(),
-            contentPath: this.options.linkedLocal
-                ? `${packagePath('core')}/dist/**/*.js`
-                : './node_modules/@aerogel/core/dist/**/*.js',
-        });
+        // Clone repository
+        await simpleGit().clone('https://github.com/NoelDeMartin/aerogel-template.git', path);
+
+        // Apply replacements
+        const dependencies = this.getDependencies();
+
+        File.replace(
+            resolve(path, 'vite.config.ts'),
+            'Aerogel({ name: \'Aerogel\' })',
+            `Aerogel({ name: '${this.name}' })`,
+        );
+
+        for (const [name, version] of Object.entries(dependencies)) {
+            File.replace(resolve(path, 'package.json'), new RegExp(`"${name}": ".*?"`, 'g'), `"${name}": "${version}"`);
+        }
+
+        // Copy template
+        Template.instantiate(templatePath('app'), path, { app: { name: this.name } });
     }
 
     public edit(): Editor {
         return new Editor();
     }
 
-    protected getDependencies(): Dependencies {
+    protected getDependencies(): Record<string, string> {
         const withFilePrefix = <T extends Record<string, string>>(paths: T) =>
             Object.entries(paths).reduce(
                 (pathsWithFile, [name, path]) => Object.assign(pathsWithFile, { [name]: `file:${path}` }) as T,
@@ -57,34 +57,27 @@ export default class App {
 
         if (this.options.linkedLocal) {
             return withFilePrefix({
-                aerogelCli: packagePath('cli'),
-                aerogelCore: packagePath('core'),
-                aerogelCypress: packagePath('cypress'),
-                aerogelPluginI18n: packagePath('plugin-i18n'),
-                aerogelPluginSoukai: packagePath('plugin-soukai'),
-                aerogelVite: packagePath('vite'),
+                '@aerogel/cli': packagePath('cli'),
+                '@aerogel/core': packagePath('core'),
+                '@aerogel/cypress': packagePath('cypress'),
+                '@aerogel/plugin-i18n': packagePath('plugin-i18n'),
+                '@aerogel/plugin-soukai': packagePath('plugin-soukai'),
+                '@aerogel/vite': packagePath('vite'),
             });
         }
 
         if (this.options.local) {
             return withFilePrefix({
-                aerogelCli: packagePackPath('cli') ?? packNotFound('cli'),
-                aerogelCore: packagePackPath('core') ?? packNotFound('core'),
-                aerogelCypress: packagePackPath('cypress') ?? packNotFound('cypress'),
-                aerogelPluginI18n: packagePackPath('plugin-i18n') ?? packNotFound('plugin-i18n'),
-                aerogelPluginSoukai: packagePackPath('plugin-soukai') ?? packNotFound('plugin-soukai'),
-                aerogelVite: packagePackPath('vite') ?? packNotFound('vite'),
+                '@aerogel/cli': packagePackPath('cli') ?? packNotFound('cli'),
+                '@aerogel/core': packagePackPath('core') ?? packNotFound('core'),
+                '@aerogel/cypress': packagePackPath('cypress') ?? packNotFound('cypress'),
+                '@aerogel/plugin-i18n': packagePackPath('plugin-i18n') ?? packNotFound('plugin-i18n'),
+                '@aerogel/plugin-soukai': packagePackPath('plugin-soukai') ?? packNotFound('plugin-soukai'),
+                '@aerogel/vite': packagePackPath('vite') ?? packNotFound('vite'),
             });
         }
 
-        return {
-            aerogelCli: 'next',
-            aerogelCore: 'next',
-            aerogelCypress: 'next',
-            aerogelPluginI18n: 'next',
-            aerogelPluginSoukai: 'next',
-            aerogelVite: 'next',
-        };
+        return {};
     }
 
 }

package/src/lib/File.ts

@@ -1,7 +1,8 @@
 import { existsSync, lstatSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
-import { facade } from '@noeldemartin/utils';
 import { dirname, resolve } from 'node:path';
 
+import { facade } from '@noeldemartin/utils';
+
 export class FileService {
 
     public contains(path: string, contents: string): boolean {
@@ -26,6 +27,16 @@ export class FileService {
         return readFileSync(path).toString();
     }
 
+    public replace(path: string, search: string | RegExp, replacement: string): void {
+        const contents = this.read(path);
+
+        if (!contents) {
+            return;
+        }
+
+        this.write(path, contents.replaceAll(search, replacement));
+    }
+
     public getFiles(directoryPath: string): string[] {
         const children = readdirSync(directoryPath, { withFileTypes: true });
         const files: string[] = [];

package/src/testing/setup.ts

@@ -48,6 +48,12 @@ vi.mock('@aerogel/cli/lib/utils/edit', async () => {
     };
 });
 
+vi.mock('simple-git', () => ({
+    simpleGit: () => ({
+        clone: () => Promise.resolve(),
+    }),
+}));
+
 // 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;

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

@@ -1,29 +0,0 @@
-name: CI
-
-on: [push, pull_request]
-
-jobs:
-    ci:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-            - uses: actions/setup-node@v4
-              with:
-                  node-version-file: '.nvmrc'
-            - run: npm ci
-            - run: npm run lint
-            - 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/.gitignore.template

@@ -1,2 +0,0 @@
-/dist
-/node_modules

package/templates/app/.nvmrc

@@ -1 +0,0 @@
-v22.9.0

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

@@ -1,17 +0,0 @@
-{
-    "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

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

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

@@ -1,14 +0,0 @@
-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/e2e/app.cy.ts

@@ -1,9 +0,0 @@
-describe('App', () => {
-
-    beforeEach(() => cy.visit('/'));
-
-    it('Shows get started link', () => {
-        cy.see('Get started');
-    });
-
-});

package/templates/app/cypress/support/e2e.ts

@@ -1 +0,0 @@
-import '@aerogel/cypress/support';

package/templates/app/cypress/tsconfig.json

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

package/templates/app/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<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="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

@@ -1,67 +0,0 @@
-{
-    "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 --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 cypress",
-        "test": "vitest --run",
-        "test:ci": "vitest --run --reporter verbose",
-        "test:serve-app": "vite --port 5001 --mode testing"
-    },
-    "dependencies": {
-        "@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": "<% &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": "^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": "^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,12 +0,0 @@
-<template>
-    <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>
-            <a href="https://aerogel.js.org" target="_blank" class="mt-2 underline opacity-75 hover:opacity-100">
-                {{ $t('home.getStarted') }}
-            </a>
-        </main>
-    </AppLayout>
-</template>

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

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

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

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

package/templates/app/src/lang/en.yaml

@@ -1,3 +0,0 @@
-home:
-  title: Aerogel
-  getStarted: Get started

package/templates/app/src/main.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-describe('App', () => {
-
-    it('works', () => {
-        expect(true).toBe(true);
-    });
-
-});

package/templates/app/src/main.ts

@@ -1,13 +0,0 @@
-import i18n from '@aerogel/plugin-i18n';
-import soukai from '@aerogel/plugin-soukai';
-import { bootstrap } from '@aerogel/core';
-
-import './assets/css/main.css';
-import App from './App.vue';
-
-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,2 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vue-i18n" />

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

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-    import type { ComponentOptions } from 'vue';
-
-    const component: ComponentOptions;
-
-    export default component;
-}

package/templates/app/src/types/ts-reset.d.ts

@@ -1 +0,0 @@
-/// <reference types="@total-typescript/ts-reset" />

package/templates/app/tsconfig.json

@@ -1,12 +0,0 @@
-{
-    "extends": "@vue/tsconfig/tsconfig.dom.json",
-    "compilerOptions": {
-        "baseUrl": ".",
-        "module": "ESNext",
-        "moduleResolution": "Bundler",
-        "paths": {
-            "@/*": ["./src/*"]
-        }
-    },
-    "include": ["src/**/*.ts", "src/**/*.vue"]
-}

package/templates/app/vite.config.ts

@@ -1,31 +0,0 @@
-import { URL, fileURLToPath } from 'node:url';
-
-import Aerogel, { AerogelResolver } from '@aerogel/vite';
-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';
-
-export default defineConfig({
-    build: { sourcemap: true },
-    publicDir: fileURLToPath(new URL('./src/assets/public/', import.meta.url)),
-    plugins: [
-        Aerogel({ name: '<% app.name %>' }),
-        Components({
-            dts: false,
-            resolvers: [AerogelResolver(), IconsResolver()],
-        }),
-        I18n({ include: fileURLToPath(new URL('./src/lang/**/*.yaml', import.meta.url)) }),
-        Icons({
-            iconCustomizer(_, __, props) {
-                props['aria-hidden'] = 'true';
-            },
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
-        },
-    },
-});

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

@@ -1,42 +0,0 @@
-<template>
-    <HeadlessButton :class="variantClasses" :disabled="disabled">
-        <slot />
-    </HeadlessButton>
-</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>