@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.8323c60b905020dcb3bd9d4b0bc8d9b6529e1082

package/package.json

@@ -1,49 +1,51 @@
 {
     "name": "@aerogel/core",
-    "description": "The Lightest Solid",
-    "version": "0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea",
-    "main": "dist/aerogel-core.cjs.js",
-    "module": "dist/aerogel-core.esm.js",
-    "types": "dist/aerogel-core.d.ts",
+    "version": "0.0.0-next.8323c60b905020dcb3bd9d4b0bc8d9b6529e1082",
+    "type": "module",
     "sideEffects": false,
-    "scripts": {
-        "build": "rm dist -rf && npm run build:js && npm run build:types",
-        "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types",
-        "lint": "noeldemartin-lint src",
-        "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run"
-    },
-    "engines": {
-        "node": ">=18.x"
+    "exports": {
+        "types": "./dist/aerogel-core.d.ts",
+        "style": "./src/index.css",
+        "default": "./dist/aerogel-core.js"
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/NoelDeMartin/aerogeljs.git"
-    },
-    "keywords": [
-        "javascript",
-        "framework",
-        "solid"
+    "files": [
+        "src",
+        "dist"
     ],
-    "author": "Noel De Martin",
     "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/NoelDeMartin/aerogeljs/issues"
+    "author": "Noel De Martin",
+    "repository": "github:NoelDeMartin/aerogel",
+    "scripts": {
+        "build": "vite build && ./scripts/fix-types.sh",
+        "lint": "noeldemartin-lint src",
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose",
+        "verify": "noeldemartin-verify"
+    },
+    "peerDependencies": {
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "tailwindcss": "^4.1.4",
+        "vue": "^3.5.0"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.4.0-next.65c07a35cd02a0aa1ed9e742f72036354eba5fa8",
-        "dompurify": "^3.0.3",
-        "marked": "^5.0.4",
-        "soukai": "^0.5.1",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19",
-        "vue-router": "^4.2.1"
+        "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dompurify": "^3.2.4",
+        "eruda": "^3.4.1",
+        "marked": "^15.0.7",
+        "pinia": "^2.1.6",
+        "reka-ui": "^2.2.0",
+        "tailwind-merge": "^3.1.0",
+        "vue-component-type-helpers": "^2.2.8"
     },
     "devDependencies": {
-        "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0",
-        "@vitejs/plugin-vue": "^4.2.3"
+        "@aerogel/vite": "*"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
     }
 }

package/src/bootstrap/bootstrap.test.ts

@@ -1,15 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { createI18n } from 'vue-i18n';
-import { IndexedDBEngine, requireBootedModel, requireEngine } from 'soukai';
-import { mock } from '@noeldemartin/utils';
+import { mock } from '@noeldemartin/testing';
 import type { Component } from 'vue';
 
-import Events from '@/services/Events';
-import initialFocus from '@/directives/initial-focus';
-import User from '@/testing/stubs/models/User';
+import Events from '@aerogel/core/services/Events';
+import measure from '@aerogel/core/directives/measure';
 
-import { bootstrapApplication } from './index';
+import { bootstrap } from './index';
 
 describe('Aerogel', () => {
 
@@ -29,65 +26,12 @@ describe('Aerogel', () => {
         });
     });
 
-    it('Initializes Soukai', async () => {
-        // Arrange
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            models: import.meta.glob('@/testing/stubs/models/*', { eager: true }),
-        });
-
-        // Assert
-        expect(requireBootedModel('User')).toEqual(User);
-        expect(requireEngine()).toBeInstanceOf(IndexedDBEngine);
-    });
-
-    it('Initializes routes', async () => {
-        // Arrange
-        vi.mock('vue-router', () => ({
-            createRouter: vi.fn(() => ({ routerMock: true })),
-            createWebHistory: vi.fn(),
-        }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            routes: [],
-        });
-
-        // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.use).toHaveBeenCalledWith({ routerMock: true });
-    });
-
-    it('Initializes lang', async () => {
-        // Arrange
-        vi.mock('vue-i18n', () => ({ createI18n: vi.fn(() => ({ i18nMock: true })) }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            langMessages: import.meta.glob('@/testing/stubs/lang/*'),
-        });
-
-        // Assert
-        const mockedCreateI18n = vi.mocked(createI18n);
-        const mockedCreateApp = vi.mocked(createApp);
-
-        expect(mockedCreateI18n).toHaveBeenCalled();
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages).key('en').to.exist;
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages?.['en']).key('foo').to.exist;
-        expect(mockedCreateApp.mock.results[0]?.value.use).toHaveBeenCalledWith({ i18nMock: true });
-    });
-
     it('Boots services', async () => {
         // Arrange
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
         const globals = vi.mocked(createApp).mock.results[0]?.value.config.globalProperties;
@@ -101,13 +45,10 @@ describe('Aerogel', () => {
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(
-            'initial-focus',
-            initialFocus,
-        );
+        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith('measure', measure);
     });
 
 });

package/src/bootstrap/index.ts

@@ -1,36 +1,49 @@
-import { createApp, h } from 'vue';
-import type { Component } from 'vue';
-
-import directives from '@/directives';
-import lang from '@/lang';
-import models from '@/models';
-import routing from '@/routing';
-import services from '@/services';
-import ui from '@/ui';
-import { runAppMountedHooks } from '@/bootstrap/hooks';
-import type { BootstrapOptions } from '@/bootstrap/options';
-
-export async function bootstrapApplication(rootComponent: Component, options: BootstrapOptions = {}): Promise<void> {
-    const hooks = [directives, lang, models, routing, services, ui];
-    const app = createApp({
-        data: () => ({
-            ready: false,
-        }),
-        mounted() {
-            runAppMountedHooks();
-
-            this.ready = true;
-        },
-        render() {
-            if (!this.ready) {
-                return null;
-            }
-
-            return h(rootComponent);
-        },
-    });
-
-    await Promise.all(hooks.map((hook) => hook(app, options)));
+import { createApp } from 'vue';
+import { isDevelopment } from '@noeldemartin/utils';
+import type { App as AppInstance, Component } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import directives from '@aerogel/core/directives';
+import errors from '@aerogel/core/errors';
+import Events from '@aerogel/core/services/Events';
+import lang from '@aerogel/core/lang';
+import services from '@aerogel/core/services';
+import testing from '@aerogel/core/testing';
+import ui from '@aerogel/core/ui';
+import { installPlugins } from '@aerogel/core/plugins';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
+
+export type { AerogelOptions };
+
+export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
+    const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+
+    App.instance = app;
+
+    await installPlugins(plugins, app, options);
+    await options.install?.(app);
+    await Events.emit('application-ready');
+}
+
+export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+    const app = createApp(rootComponent);
+
+    if (isDevelopment()) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).$aerogel = app;
+    }
+
+    await bootstrapApplication(app, options);
 
     app.mount('#app');
+    app._container?.classList.remove('loading');
+
+    await Events.emit('application-mounted');
+}
+
+declare module '@aerogel/core/services/Events' {
+    export interface EventsPayload {
+        'application-ready': void;
+        'application-mounted': void;
+    }
 }

package/src/bootstrap/options.ts

@@ -1 +1,8 @@
-export interface BootstrapOptions {}
+import type { App } from 'vue';
+
+import type { Plugin } from '@aerogel/core/plugins';
+
+export interface AerogelOptions {
+    plugins?: Plugin[];
+    install?(app: App): void | Promise<void>;
+}

package/src/components/AppLayout.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
+        <slot v-if="$errors.hasStartupErrors" name="startup-crash">
+            <component :is="$ui.requireComponent('startup-crash')" />
+        </slot>
+        <slot v-else />
+
+        <AppOverlays />
+    </div>
+</template>
+
+<script setup lang="ts">
+import AppOverlays from './AppOverlays.vue';
+</script>

package/src/components/AppModals.vue

@@ -0,0 +1,14 @@
+<template>
+    <aside v-if="modal">
+        <ModalContext :child-index="1" :modal />
+    </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
+import UI from '@aerogel/core/ui/UI';
+
+const modal = computed(() => UI.modals[0] ?? null);
+</script>

package/src/components/AppOverlays.vue

@@ -0,0 +1,9 @@
+<template>
+    <AppModals />
+    <AppToasts />
+</template>
+
+<script setup lang="ts">
+import AppModals from './AppModals.vue';
+import AppToasts from './AppToasts.vue';
+</script>

package/src/components/AppToasts.vue

@@ -0,0 +1,16 @@
+<template>
+    <ToastProvider>
+        <component
+            :is="toast.component"
+            v-for="toast of $ui.toasts"
+            :id="toast.id"
+            :key="toast.id"
+            v-bind="toast.properties"
+        />
+        <ToastViewport class="fixed right-0 bottom-0 z-50 flex flex-col items-end space-y-4 px-4 py-6 sm:p-6" />
+    </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { ToastProvider, ToastViewport } from 'reka-ui';
+</script>

package/src/components/contracts/AlertModal.ts

@@ -0,0 +1,19 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export interface AlertModalProps {
+    title?: string;
+    message: string;
+}
+
+export interface AlertModalExpose extends ModalExpose<void> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useAlertModal(props: AlertModalProps) {
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.alert', 'Alert'));
+    const titleHidden = computed(() => !props.title);
+
+    return { renderedTitle, titleHidden };
+}

package/src/components/contracts/Button.ts

@@ -0,0 +1,16 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
+export interface ButtonProps extends PrimitiveProps {
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    size?: ButtonSize;
+    submit?: boolean;
+    variant?: ButtonVariant;
+}

package/src/components/contracts/ConfirmModal.ts

@@ -0,0 +1,48 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import { useForm } from '@aerogel/core/utils/composition/forms';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+import type { Nullable } from '@noeldemartin/utils';
+
+export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+
+export interface ConfirmModalProps {
+    title?: string;
+    message: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    checkboxes?: ConfirmModalCheckboxes;
+    actions?: Record<string, () => unknown>;
+    required?: boolean;
+}
+
+export interface ConfirmModalExpose extends ModalExpose<boolean | [boolean, Record<string, Nullable<boolean>>]> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useConfirmModal(props: ConfirmModalProps) {
+    const form = useForm(
+        Object.entries(props.checkboxes ?? {}).reduce(
+            (values, [name, checkbox]) => ({
+                [name]: {
+                    type: 'boolean',
+                    default: checkbox.default,
+                    required: checkbox.required ? 'required' : undefined,
+                },
+                ...values,
+            }),
+            {} as Record<string, FormFieldDefinition<'boolean'>>,
+        ),
+    );
+
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.confirm', 'Confirm'));
+    const titleHidden = computed(() => !props.title);
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/DropdownMenu.ts

@@ -0,0 +1,25 @@
+import type { DropdownMenuContentProps } from 'reka-ui';
+
+import type { Falsifiable } from '@aerogel/core/utils/types';
+
+export type DropdownMenuOptionData = {
+    label: string;
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    click?: () => unknown;
+    class?: string;
+};
+
+export interface DropdownMenuProps {
+    align?: DropdownMenuContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    options?: readonly Falsifiable<DropdownMenuOptionData>[];
+}
+
+export interface DropdownMenuExpose {
+    align?: DropdownMenuContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    options?: readonly DropdownMenuOptionData[];
+}

package/src/components/contracts/ErrorReportModal.ts

@@ -0,0 +1,33 @@
+import { computed, ref } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ErrorReport } from '@aerogel/core/errors';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export interface ErrorReportModalProps {
+    report: ErrorReport;
+    reports: ErrorReport[];
+}
+
+export interface ErrorReportModalExpose extends ModalExpose {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useErrorReportModal(props: ErrorReportModalProps) {
+    const activeReportIndex = ref(props.reports.includes(props.report) ? props.reports.indexOf(props.report) : 0);
+    const activeReport = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+    const details = computed(
+        () =>
+            activeReport.value.details?.trim() ||
+            translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
+    );
+    const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
+    const nextReportText = translateWithDefault('errors.nextReport', 'Show next report');
+
+    return {
+        activeReportIndex,
+        details,
+        nextReportText,
+        previousReportText,
+        activeReport,
+    };
+}

package/src/components/contracts/Input.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
+
+import type { FormFieldValue } from '@aerogel/core/forms';
+
+export interface InputProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
+    name?: string;
+    label?: string;
+    description?: string;
+    modelValue?: T;
+}
+
+export interface InputEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
+    'update:modelValue': [value: T];
+}
+
+export interface InputExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
+    id: string;
+    name: ComputedRef<Nullable<string>>;
+    label: ComputedRef<Nullable<string>>;
+    description: ComputedRef<Nullable<string | boolean>>;
+    value: ComputedRef<T>;
+    required: ComputedRef<Nullable<boolean>>;
+    errors: DeepReadonly<Ref<Nullable<string[]>>>;
+    update(value: T): void;
+}

package/src/components/contracts/LoadingModal.ts

@@ -0,0 +1,26 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { Job } from '@aerogel/core/jobs';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export interface LoadingModalProps {
+    title?: string;
+    message?: string;
+    progress?: number;
+    job?: Job;
+}
+
+export interface LoadingModalExpose extends ModalExpose {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLoadingModal(props: LoadingModalProps) {
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.loading', 'Loading'));
+    const renderedMessage = computed(
+        () => props.message ?? translateWithDefault('ui.loadingInProgress', 'Loading in progress...'),
+    );
+    const showProgress = computed(() => typeof props.progress === 'number' || !!props.job);
+    const titleHidden = computed(() => !props.title);
+
+    return { renderedTitle, renderedMessage, titleHidden, showProgress };
+}

package/src/components/contracts/Modal.ts

@@ -0,0 +1,21 @@
+import type { Nullable } from '@noeldemartin/utils';
+import type { DialogContent } from 'reka-ui';
+
+export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
+
+export interface ModalProps {
+    persistent?: boolean;
+    title?: string;
+    titleHidden?: boolean;
+    description?: string;
+    descriptionHidden?: boolean;
+}
+
+export interface ModalSlots<Result = void> {
+    default(props: { close(result?: Result): Promise<void> }): unknown;
+}
+
+export interface ModalExpose<Result = void> {
+    close(result?: Result): Promise<void>;
+    $content: ModalContentInstance;
+}

package/src/components/contracts/PromptModal.ts

@@ -0,0 +1,34 @@
+import { computed } from 'vue';
+
+import { useForm } from '@aerogel/core/utils/composition/forms';
+import { requiredStringInput } from '@aerogel/core/forms/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export interface PromptModalProps {
+    title?: string;
+    message: string;
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+}
+
+export interface PromptModalExpose extends ModalExpose<string> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function usePromptModal(props: PromptModalProps) {
+    const form = useForm({
+        draft: requiredStringInput(props.defaultValue ?? ''),
+    });
+    const renderedTitle = computed(() => props.title ?? props.message);
+    const renderedMessage = computed(() => (props.title ? props.message : null));
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/Select.ts

@@ -0,0 +1,45 @@
+import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
+import type { Component, ComputedRef, HTMLAttributes } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
+
+import type { FormFieldValue } from '@aerogel/core/forms';
+
+import type { InputEmits, InputExpose, InputProps } from './Input';
+
+export type SelectOptionData = {
+    key: string;
+    label: string;
+    value: AcceptableValue;
+};
+
+export interface HasSelectOptionLabel {
+    label: string | (() => string);
+}
+
+export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputProps<T> {
+    as?: AsTag | Component;
+    options?: readonly T[];
+    placeholder?: string;
+    renderOption?: (option: T) => string;
+    compareOptions?: (a: T, b: T) => boolean;
+    labelClass?: HTMLAttributes['class'];
+    optionsClass?: HTMLAttributes['class'];
+    align?: SelectContentProps['align'];
+    side?: SelectContentProps['side'];
+}
+
+export interface SelectEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputEmits<T> {}
+
+export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputExpose<T> {
+    options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
+    selectedOption: ComputedRef<Nullable<SelectOptionData>>;
+    placeholder: ComputedRef<string>;
+    labelClass?: HTMLAttributes['class'];
+    optionsClass?: HTMLAttributes['class'];
+    align?: SelectContentProps['align'];
+    side?: SelectContentProps['side'];
+}
+
+export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {
+    return typeof option === 'object' && option !== null && 'label' in option;
+}