@aerogel/core 0.0.0-next.9487bb13082b9d479112445804d906125ded5cbc → 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.9487bb13082b9d479112445804d906125ded5cbc",
+    "version": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -9,12 +9,12 @@
     "scripts": {
         "build": "rm dist -rf && npm run build:js && npm run build:types",
         "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types && cp src/types/virtual.d.ts dist",
-        "histoire:dev": "histoire dev",
-        "histoire:prod": "histoire build",
+        "build:types": "noeldemartin-build-types",
+        "histoire": "histoire dev",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run"
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose"
     },
     "engines": {
         "node": ">=18.x"
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.4.0-next.2549ce58d5c94a6009ecdd37d6fe2fcd76b6038e",
+        "@noeldemartin/utils": "0.5.0-next.dce7f1ca99862fde01601bb39d71d0eaaed3abe5",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
         "pinia": "^2.1.6",
@@ -43,8 +43,14 @@
     },
     "devDependencies": {
         "@aerogel/vite": "*",
+        "@histoire/plugin-vue": "^0.17.6",
         "@types/dompurify": "^3.0.2",
         "@types/marked": "^5.0.0",
         "tailwindcss": "^3.3.5"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
     }
 }

package/src/bootstrap/bootstrap.test.ts

@@ -11,6 +11,7 @@ import { bootstrapApplication } from './index';
 describe('Aerogel', () => {
 
     beforeEach(() => {
+        vi.stubGlobal('document', { getElementById: () => null });
         vi.mock('vue', async () => {
             const vue = (await vi.importActual('vue')) as Object;
 

package/src/bootstrap/index.ts

@@ -21,3 +21,9 @@ export async function bootstrapApplication(rootComponent: Component, options: Ae
 
     Events.emit('application-mounted');
 }
+
+declare module '@/services/Events' {
+    export interface EventsPayload {
+        'application-mounted': void;
+    }
+}

package/src/components/AGAppLayout.vue

@@ -1,6 +1,9 @@
 <template>
-    <div class="flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
-        <slot />
+    <div class="flex min-h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
+        <slot v-if="$errors.hasStartupErrors" name="startup-crash">
+            <AGStartupCrash />
+        </slot>
+        <slot v-else />
 
         <AGAppOverlays />
     </div>
@@ -8,4 +11,5 @@
 
 <script setup lang="ts">
 import AGAppOverlays from './AGAppOverlays.vue';
+import AGStartupCrash from './lib/AGStartupCrash.vue';
 </script>

package/src/components/AGAppSnackbars.vue

@@ -1,6 +1,6 @@
 <template>
     <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
-        <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <div class="flex w-full flex-col items-end space-y-4">
             <component
                 :is="snackbar.component"
                 v-for="snackbar of $ui.snackbars"

package/src/components/headless/forms/AGHeadlessInput.ts

@@ -1,8 +1,33 @@
 import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 
+import { stringProp } from '@/utils';
+
 export interface IAGHeadlessInput {
     id: string;
+    name: ComputedRef<string | null>;
+    label: ComputedRef<string | null>;
     value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
     update(value: string | number | boolean | null): void;
 }
+
+export const inputProps = {
+    name: stringProp(),
+    label: stringProp(),
+};
+
+export function useInputProps(): typeof inputProps {
+    return inputProps;
+}
+
+export function extractInputProps<T extends Record<keyof typeof inputProps, unknown>>(
+    componentProps: T,
+): Pick<T, keyof typeof inputProps> {
+    return Object.keys(inputProps).reduce((extractedProps, selectProp) => {
+        const prop = selectProp as keyof typeof inputProps;
+
+        extractedProps[prop] = componentProps[prop];
+
+        return extractedProps;
+    }, {} as Pick<T, keyof typeof inputProps>);
+}

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -12,13 +12,14 @@ import { uuid } from '@noeldemartin/utils';
 import { mixedProp, stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
+import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     as: stringProp('div'),
-    name: stringProp(),
     modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
+    ...useInputProps(),
 });
 const errors = computed(() => {
     if (!form || !props.name) {
@@ -30,6 +31,8 @@ const errors = computed(() => {
 const form = inject<Form | null>('form', null);
 const api: IAGHeadlessInput = {
     id: `input-${uuid()}`,
+    name: computed(() => props.name),
+    label: computed(() => props.label),
     value: computed(() => {
         if (form && props.name) {
             return form.getFieldValue(props.name) as string | number | boolean | null;

package/src/components/headless/forms/AGHeadlessInputLabel.vue

@@ -1,10 +1,14 @@
 <template>
-    <label :for="input.id">
-        <slot />
+    <label v-if="show" :for="input.id">
+        <slot>
+            {{ input.label }}
+        </slot>
     </label>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
 import { injectReactiveOrFail } from '@/utils/vue';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
@@ -13,4 +17,6 @@ const input = injectReactiveOrFail<IAGHeadlessInput>(
     'input',
     '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
 );
+const slots = useSlots();
+const show = computed(() => !!(input.label || slots.default));
 </script>

package/src/components/headless/forms/AGHeadlessSelect.ts

@@ -21,8 +21,9 @@ export interface IAGHeadlessSelect {
 }
 
 export const selectProps = {
-    options: requiredArrayProp<IAGSelectOptionValue>(),
+    name: stringProp(),
     label: stringProp(),
+    options: requiredArrayProp<IAGSelectOptionValue>(),
     noSelectionText: stringProp(),
 };
 

package/src/components/headless/forms/AGHeadlessSelect.vue

@@ -13,7 +13,7 @@ import { computed, inject, provide } from 'vue';
 import { isObject, toString, uuid } from '@noeldemartin/utils';
 import { Listbox } from '@headlessui/vue';
 
-import { mixedProp, stringProp } from '@/utils/vue';
+import { mixedProp } from '@/utils/vue';
 import { translateWithDefault } from '@/lang/utils';
 import type Form from '@/forms/Form';
 import type { ComponentProps } from '@/utils/vue';
@@ -23,7 +23,6 @@ import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from '.
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
-    name: stringProp(),
     modelValue: mixedProp<IAGSelectOptionValue>(),
     ...useSelectProps(),
 });

package/src/components/headless/forms/AGHeadlessSelectLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <ListboxLabel v-if="select.label" v-slot="{ open, disabled }: ComponentProps">
+    <ListboxLabel v-if="show" v-slot="{ open, disabled }: ComponentProps">
         <slot :open="open" :disabled="disabled">
             {{ select.label }}
         </slot>
@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
 import { ListboxLabel } from '@headlessui/vue';
 
 import { injectReactiveOrFail } from '@/utils/vue';
@@ -18,4 +19,6 @@ const select = injectReactiveOrFail<IAGHeadlessSelect>(
     'select',
     '<AGHeadlessSelectLabel> must be a child of a <AGHeadlessSelect>',
 );
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
 </script>

package/src/components/headless/modals/AGHeadlessModal.ts

@@ -1,7 +1,16 @@
 import type { IAGModal } from '@/components/modals/AGModal';
+import { booleanProp } from '@/utils';
 
 export interface IAGHeadlessModal extends IAGModal {}
 
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+export const modalProps = {
+    cancellable: booleanProp(true),
+};
+
+export function useModalProps(): typeof modalProps {
+    return modalProps;
+}

package/src/components/headless/modals/index.ts

@@ -1,6 +1,4 @@
-import AGHeadlessModal from './AGHeadlessModal.vue';
-import AGHeadlessModalPanel from './AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from './AGHeadlessModalTitle.vue';
-import type { IAGHeadlessModal } from './AGHeadlessModal';
-
-export { AGHeadlessModal, AGHeadlessModalPanel, AGHeadlessModalTitle, IAGHeadlessModal };
+export * from './AGHeadlessModal';
+export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
+export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
+export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';

package/src/components/index.ts

@@ -3,9 +3,9 @@ import AGAppOverlays from './AGAppOverlays.vue';
 
 export { AGAppLayout, AGAppOverlays };
 
-export * from './basic';
 export * from './constants';
 export * from './forms';
 export * from './headless';
+export * from './lib';
 export * from './modals';
 export * from './snackbars';

package/src/components/lib/AGStartupCrash.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="grid flex-grow place-items-center">
+        <div class="flex flex-col items-center space-y-6 p-8">
+            <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
+                {{ $td('startupCrash.title', 'Something went wrong!') }}
+            </h1>
+            <AGMarkdown
+                :text="
+                    $td(
+                        'startupCrash.message',
+                        'Something failed trying to start the application.\n\nHere\'s some things you can do:'
+                    )
+                "
+                class="mt-4 text-center"
+            />
+            <div class="mt-4 flex flex-col space-y-4">
+                <AGButton color="danger" @click="$app.reload()">
+                    {{ $td('startupCrash.reload', 'Try again') }}
+                </AGButton>
+                <AGButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                    {{ $td('startupCrash.inspect', 'View error details') }}
+                </AGButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AGMarkdown from './AGMarkdown.vue';
+import AGButton from '../forms/AGButton.vue';
+</script>

package/src/components/lib/index.ts

@@ -0,0 +1,4 @@
+export { default as AGErrorMessage } from './AGErrorMessage.vue';
+export { default as AGLink } from './AGLink.vue';
+export { default as AGMarkdown } from './AGMarkdown.vue';
+export { default as AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/modals/AGAlertModal.vue

@@ -16,7 +16,7 @@ import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 defineProps({
     title: stringProp(),

package/src/components/modals/AGConfirmModal.ts

@@ -0,0 +1,10 @@
+import { requiredStringProp, stringProp } from '@/utils';
+
+export const confirmModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+};
+
+export function useConfirmModalProps(): typeof confirmModalProps {
+    return confirmModalProps;
+}

package/src/components/modals/AGConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalSlotProps" :cancellable="false">
+    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
         <AGMarkdown v-if="title" :text="title" as="h1" />
         <AGMarkdown :text="message" />
 
@@ -18,10 +18,10 @@
 import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
-import type { IAGModalSlotProps } from './AGModal';
+import type { IAGModalDefaultSlotProps } from './AGModal';
 
 import AGButton from '../forms/AGButton.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 defineProps({
     title: stringProp(),

package/src/components/modals/AGErrorReportModal.vue

@@ -53,7 +53,7 @@ import { useErrorReportModalProps } from './AGErrorReportModal';
 import AGButton from '../forms/AGButton.vue';
 import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
 import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 import AGModal from './AGModal.vue';
 
 const props = defineProps(useErrorReportModalProps());

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -8,7 +8,7 @@ import { computed } from 'vue';
 import { numberProp, requiredObjectProp } from '@/utils/vue';
 import type { ErrorReport } from '@/errors';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps({
     report: requiredObjectProp<ErrorReport>(),

package/src/components/modals/AGLoadingModal.ts

@@ -0,0 +1,9 @@
+import { stringProp } from '@/utils';
+
+export const loadingModalProps = {
+    message: stringProp(),
+};
+
+export function useLoadingModalProps(): typeof loadingModalProps {
+    return loadingModalProps;
+}

package/src/components/modals/AGLoadingModal.vue

@@ -12,7 +12,7 @@ import { translateWithDefault } from '@/lang/utils';
 
 import AGModal from './AGModal.vue';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps({ message: stringProp() });
 const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));

package/src/components/modals/AGModal.ts

@@ -2,9 +2,9 @@ import type { Ref } from 'vue';
 
 export interface IAGModal {
     cancellable: Ref<boolean>;
-    close(): Promise<void>;
+    close(result?: unknown): Promise<void>;
 }
 
-export interface IAGModalSlotProps {
+export interface IAGModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }

package/src/components/modals/index.ts

@@ -7,7 +7,9 @@ import AGModal from './AGModal.vue';
 import AGModalTitle from './AGModalTitle.vue';
 import AGModalContext from './AGModalContext.vue';
 
+export * from './AGConfirmModal';
 export * from './AGErrorReportModal';
+export * from './AGLoadingModal';
 export * from './AGModal';
 export * from './AGModalContext';
 

package/src/components/snackbars/AGSnackbar.vue

@@ -22,7 +22,7 @@ import type { SnackbarAction } from '@/components/headless';
 
 import AGButton from '../forms/AGButton.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps(useSnackbarProps());
 const styleClasses = computed(() => {

package/src/errors/index.ts

@@ -1,4 +1,4 @@
-import { tap } from '@noeldemartin/utils';
+import type { App } from 'vue';
 
 import { bootServices } from '@/services';
 import { definePlugin } from '@/plugins';
@@ -25,14 +25,12 @@ const frameworkHandler: ErrorHandler = (error) => {
     return true;
 };
 
-function setUpErrorHandler(baseHandler: ErrorHandler = () => false): ErrorHandler {
-    return tap(
-        (error) => baseHandler(error) || frameworkHandler(error),
-        (errorHandler) => {
-            globalThis.onerror = (message, _, __, ___, error) => errorHandler(error ?? message);
-            globalThis.onunhandledrejection = (event) => errorHandler(event.reason);
-        },
-    );
+function setUpErrorHandler(app: App, baseHandler: ErrorHandler = () => false): void {
+    const errorHandler: ErrorHandler = (error) => baseHandler(error) || frameworkHandler(error);
+
+    app.config.errorHandler = errorHandler;
+    globalThis.onerror = (event, _, __, ___, error) => errorHandler(error ?? event);
+    globalThis.onunhandledrejection = (event) => errorHandler(event.reason);
 }
 
 export type ErrorHandler = (error: ErrorSource) => boolean;
@@ -40,9 +38,7 @@ export type ErrorsServices = typeof services;
 
 export default definePlugin({
     async install(app, options) {
-        const errorHandler = setUpErrorHandler(options.handleError);
-
-        app.config.errorHandler = errorHandler;
+        setUpErrorHandler(app, options.handleError);
 
         await bootServices(app, services);
     },

package/src/services/App.state.ts

@@ -1,4 +1,4 @@
-import Build from 'virtual:aerogel';
+import Aerogel from 'virtual:aerogel';
 
 import { defineServiceState } from '@/services/Service';
 import type { Plugin } from '@/plugins/Plugin';
@@ -7,8 +7,8 @@ export default defineServiceState({
     name: 'app',
     initialState: {
         plugins: {} as Record<string, Plugin>,
-        environment: Build.environment,
-        sourceUrl: Build.sourceUrl,
+        environment: Aerogel.environment,
+        sourceUrl: Aerogel.sourceUrl,
         isMounted: false,
     },
     computed: {

package/src/services/App.ts

@@ -1,4 +1,4 @@
-import { facade } from '@noeldemartin/utils';
+import { facade, forever, updateLocationQueryParameters } from '@noeldemartin/utils';
 
 import Events from '@/services/Events';
 import type { Plugin } from '@/plugins';
@@ -7,6 +7,15 @@ import Service from './App.state';
 
 export class AppService extends Service {
 
+    public async reload(queryParameters?: Record<string, string | undefined>): Promise<void> {
+        queryParameters && updateLocationQueryParameters(queryParameters);
+
+        location.reload();
+
+        // Stall until the reload happens
+        await forever();
+    }
+
     public plugin<T extends Plugin = Plugin>(name: string): T | null {
         return (this.plugins[name] as T) ?? null;
     }

package/src/services/Service.ts

@@ -162,7 +162,11 @@ export default class Service<
             return;
         }
 
-        const storage = Storage.require<ServiceStorage>(this._name);
+        const storage = Storage.get<ServiceStorage>(this._name);
+
+        if (!storage) {
+            return;
+        }
 
         Storage.set(this._name, {
             ...storage,
@@ -191,14 +195,14 @@ export default class Service<
     }
 
     protected async frameworkBoot(): Promise<void> {
-        this.restorePersistedState();
+        this.initializePersistedState();
     }
 
     protected async boot(): Promise<void> {
-        // Override.
+        // Placeholder for overrides, don't place any functionality here.
     }
 
-    protected restorePersistedState(): void {
+    protected initializePersistedState(): void {
         // TODO fix this.static()
         const persist = (this.constructor as unknown as { persist: string[] }).persist;
 

package/src/ui/UI.ts

@@ -1,4 +1,4 @@
-import { facade, fail, uuid } from '@noeldemartin/utils';
+import { after, facade, fail, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
 import type { Component } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
@@ -72,11 +72,14 @@ export class UIService extends Service {
 
         const message = typeof messageOrOperation === 'string' ? messageOrOperation : undefined;
         const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), { message });
-        const result = await operation;
 
-        await this.closeModal(modal.id);
+        try {
+            const [result] = await Promise.all([operation, after({ seconds: 1 })]);
 
-        return result;
+            return result;
+        } finally {
+            await this.closeModal(modal.id);
+        }
     }
 
     public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
@@ -138,6 +141,7 @@ export class UIService extends Service {
 
     protected async boot(): Promise<void> {
         this.watchModalEvents();
+        this.watchMountedEvent();
     }
 
     private watchModalEvents(): void {
@@ -165,6 +169,24 @@ export class UIService extends Service {
         });
     }
 
+    private watchMountedEvent(): void {
+        Events.once('application-mounted', async () => {
+            const splash = document.getElementById('splash');
+
+            if (!splash) {
+                return;
+            }
+
+            if (window.getComputedStyle(splash).opacity !== '0') {
+                splash.style.opacity = '0';
+
+                await after({ ms: 600 });
+            }
+
+            splash.remove();
+        });
+    }
+
 }
 
 export default facade(new UIService());

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "types": ["unplugin-icons/types/vue3"],
+        "types": ["unplugin-icons/types/vue3", "@aerogel/vite/dist/virtual"],
         "baseUrl": ".",
         "paths": {
             "@/*": ["./src/*"]

package/.eslintrc.js

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

package/dist/virtual.d.ts

@@ -1,11 +0,0 @@
-declare module 'virtual:aerogel' {
-    interface AerogelBuild {
-        environment: 'production' | 'development' | 'testing';
-        basePath?: string;
-        sourceUrl?: string;
-    }
-
-    const build: AerogelBuild;
-
-    export default build;
-}

package/src/components/basic/index.ts

@@ -1,5 +0,0 @@
-import AGErrorMessage from './AGErrorMessage.vue';
-import AGLink from './AGLink.vue';
-import AGMarkdown from './AGMarkdown.vue';
-
-export { AGErrorMessage, AGLink, AGMarkdown };

package/src/types/virtual.d.ts

@@ -1,11 +0,0 @@
-declare module 'virtual:aerogel' {
-    interface AerogelBuild {
-        environment: 'production' | 'development' | 'testing';
-        basePath?: string;
-        sourceUrl?: string;
-    }
-
-    const build: AerogelBuild;
-
-    export default build;
-}