npm - @aerogel/cli - Versions diffs - 0.0.0-next.7e89f52eb37d9154f4879a5ccd058d27d476dada → 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c - Mend

@aerogel/cli 0.0.0-next.7e89f52eb37d9154f4879a5ccd058d27d476dada → 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/aerogel-cli.cjs.js +1 -1
package/dist/aerogel-cli.cjs.js.map +1 -1
package/dist/aerogel-cli.esm.js +1 -1
package/dist/aerogel-cli.esm.js.map +1 -1
package/package.json +10 -4
package/src/commands/Command.ts +15 -7
package/src/commands/create.test.ts +21 -4
package/src/commands/create.ts +10 -7
package/src/commands/generate-component.test.ts +59 -6
package/src/commands/generate-component.ts +49 -14
package/src/commands/generate-model.test.ts +11 -3
package/src/commands/generate-model.ts +7 -8
package/src/commands/generate-service.test.ts +10 -2
package/src/commands/generate-service.ts +5 -6
package/src/commands/install.test.ts +36 -5
package/src/commands/install.ts +6 -5
package/src/lib/Editor.ts +16 -9
package/src/lib/Shell.mock.ts +1 -1
package/src/lib/Template.ts +5 -1
package/src/lib/utils/app.ts +1 -1
package/src/lib/utils/paths.ts +1 -1
package/src/plugins/Histoire.ts +105 -0
package/src/plugins/Plugin.ts +57 -4
package/src/plugins/Solid.ts +47 -34
package/src/plugins/Soukai.ts +1 -1
package/src/testing/stubs/ProgramStub.ts +35 -0
package/src/testing/utils.ts +14 -0
package/templates/app/.github/workflows/ci.yml +14 -2
package/templates/app/README.md +3 -0
package/templates/app/{cypress.config.ts → cypress/cypress.config.ts} +4 -0
package/templates/app/index.html +3 -2
package/templates/app/package.json +14 -2
package/templates/app/src/App.vue +2 -2
package/templates/app/src/assets/public/robots.txt +2 -0
package/templates/app/src/main.ts +1 -1
package/templates/app/tsconfig.json +1 -0
package/templates/app/vite.config.ts +10 -4
package/templates/component-button/[component.name].vue +32 -0
package/templates/component-button-story/[component.name].story.vue +71 -0
package/templates/component-input/[component.name].vue +16 -0
package/templates/component-input-story/[component.name].story.vue +63 -0
package/templates/histoire/histoire.config.ts +7 -0
package/templates/histoire/patches/histoire+0.17.6.patch +13 -0
package/templates/histoire/src/main.histoire.ts +8 -0
package/templates/postcss-pseudo-classes/postcss.config.js +15 -0
package/.eslintrc.js +0 -7
package/noeldemartin.config.js +0 -14
package/src/lib/utils/format.test.ts +0 -33
package/src/lib/utils/format.ts +0 -38
package/templates/app/.eslintrc.js +0 -3
package/templates/app/prettier.config.js +0 -5
/package/bin/{ag → gel} +0 -0
/package/templates/app/src/assets/{styles.css → css/styles.css} +0 -0

package/src/testing/utils.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

package/templates/app/src/main.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
 import { bootstrapApplication } from '@aerogel/core';
-import './assets/styles.css';
+import './assets/css/styles.css';
 import App from './App.vue';
 bootstrapApplication(App, {

package/templates/app/tsconfig.json CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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'),
+});

package/templates/postcss-pseudo-classes/postcss.config.js ADDED Viewed

@@ -0,0 +1,15 @@
+const plugins = {
+    tailwindcss: {},
+    autoprefixer: {},
+};
+if (process.env.NODE_ENV === 'development') {
+    plugins['postcss-pseudo-classes'] = {
+        blacklist: [],
+        restrictTo: ['hover', 'focus-visible', 'focus'],
+        allCombinations: true,
+        preserveBeforeAfter: false,
+    };
+}
+module.exports = { plugins };

package/.eslintrc.js DELETED Viewed

@@ -1,7 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: ['@noeldemartin/eslint-config-typescript'],
-};

package/noeldemartin.config.js DELETED Viewed

@@ -1,14 +0,0 @@
-/** @type {import('@noeldemartin/scripts').Config} */
-module.exports = {
-    external: [
-        '@noeldemartin/utils',
-        'chalk',
-        'child_process',
-        'commander',
-        'fs',
-        'mustache',
-        'path',
-        'readline',
-        'ts-morph',
-    ],
-};

package/src/lib/utils/format.test.ts DELETED Viewed

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { formatCodeBlock } from './format';
-describe('Format utils', () => {
-    it('Formats code blocks', () => {
-        // Arrange
-        const raw = `
-            const foo = 'bar';
-            if (foo) {
-                doSomething();
-            }
-        `;
-        const formatted = [
-            'const foo = \'bar\';', //
-            '', //
-            'if (foo) {', //
-            '    doSomething();', //
-            '}', //
-        ].join('\n');
-        // Act
-        const actual = formatCodeBlock(raw);
-        // Assert
-        expect(actual).toEqual(formatted);
-    });
-});

package/src/lib/utils/format.ts DELETED Viewed

@@ -1,38 +0,0 @@
-export interface FormatCodeBlockOptions {
-    indent?: number;
-}
-export function formatCodeBlock(code: string, options: FormatCodeBlockOptions = {}): string {
-    const lines = code.split('\n');
-    const indent = options.indent ?? 0;
-    let originalIndent = 0;
-    let formatted = '';
-    for (const line of lines) {
-        const trimmedLine = line.trim();
-        const isEmptyLine = trimmedLine.length === 0;
-        if (formatted.length === 0) {
-            if (isEmptyLine) {
-                continue;
-            }
-            originalIndent = line.indexOf(trimmedLine[0] ?? '');
-            formatted += `${' '.repeat(indent)}${trimmedLine}\n`;
-            continue;
-        }
-        if (isEmptyLine) {
-            formatted += '\n';
-            continue;
-        }
-        const lineIndent = line.indexOf(trimmedLine[0] ?? '');
-        formatted += `${' '.repeat(indent + lineIndent - originalIndent)}${trimmedLine}\n`;
-    }
-    return formatted.trimEnd();
-}

package/templates/app/.eslintrc.js DELETED Viewed

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: ['@noeldemartin/eslint-config-vue'],
-};

package/templates/app/prettier.config.js DELETED Viewed

@@ -1,5 +0,0 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-    plugins: [require('prettier-plugin-tailwindcss')],
-    printWidth: 120,
-};

/package/bin/{ag → gel} RENAMED Viewed

File without changes

/package/templates/app/src/assets/{styles.css → css/styles.css} RENAMED Viewed

File without changes