@aerogel/core 0.0.0-next.9487bb13082b9d479112445804d906125ded5cbc → 0.0.0-next.a56c0f4966eb71571173f8502f3f36d357ceebc7

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.a56c0f4966eb71571173f8502f3f36d357ceebc7",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -9,12 +9,13 @@
     "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",
+        "build:types": "noeldemartin-build-types",
         "histoire:dev": "histoire dev",
         "histoire:prod": "histoire build",
         "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 +36,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",
@@ -46,5 +47,10 @@
         "@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/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.vue

@@ -21,7 +21,7 @@ import AGModal from './AGModal.vue';
 import type { IAGModalSlotProps } 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.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/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/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;
-}