@aerogel/core 0.0.0-next.97312fd206b83ac5ae520da32b1bb3f12fb55969 → 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.97312fd206b83ac5ae520da32b1bb3f12fb55969",
+    "version": "0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.5.1-next.6ecd7cf01a5bad8fbc0dc06312906c9700e79510",
+        "@noeldemartin/utils": "0.5.1-next.49cc6c9b4a20930cbf922a949135981791acc5c3",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
         "pinia": "^2.1.6",

package/src/bootstrap/index.ts

@@ -6,6 +6,7 @@ import errors from '@/errors';
 import Events from '@/services/Events';
 import lang from '@/lang';
 import services from '@/services';
+import testing from '@/testing';
 import ui from '@/ui';
 import { installPlugins } from '@/plugins';
 import type { AerogelOptions } from '@/bootstrap/options';
@@ -13,12 +14,11 @@ import type { AerogelOptions } from '@/bootstrap/options';
 export { AerogelOptions };
 
 export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
-    const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+    const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
 
     await installPlugins(plugins, app, options);
     await options.install?.(app);
-
-    Events.emit('application-ready');
+    await Events.emit('application-ready');
 }
 
 export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
@@ -29,11 +29,12 @@ export async function bootstrap(rootComponent: Component, options: AerogelOption
     app.mount('#app');
     app._container?.classList.remove('loading');
 
-    Events.emit('application-mounted');
+    await Events.emit('application-mounted');
 }
 
 declare module '@/services/Events' {
     export interface EventsPayload {
+        'application-ready': void;
         'application-mounted': void;
     }
 }

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

@@ -10,7 +10,7 @@ import { objectWithoutEmpty } from '@noeldemartin/utils';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 
-const { href, url, route, routeParams, routeQuery, submit } = defineProps({
+const props = defineProps({
     href: stringProp(),
     url: stringProp(),
     route: stringProp(),
@@ -20,32 +20,32 @@ const { href, url, route, routeParams, routeQuery, submit } = defineProps({
 });
 
 const component = computed(() => {
-    if (route) {
+    if (props.route) {
         return {
             tag: 'router-link',
             props: {
                 to: objectWithoutEmpty({
-                    name: route,
-                    params: routeParams,
-                    query: routeQuery,
+                    name: props.route,
+                    params: props.routeParams,
+                    query: props.routeQuery,
                 }),
             },
         };
     }
 
-    if (href || url) {
+    if (props.href || props.url) {
         return {
             tag: 'a',
             props: {
                 target: '_blank',
-                href: href || url,
+                href: props.href || props.url,
             },
         };
     }
 
     return {
         tag: 'button',
-        props: { type: submit ? 'submit' : 'button' },
+        props: { type: props.submit ? 'submit' : 'button' },
     };
 });
 </script>

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

@@ -2,6 +2,7 @@
     <input
         :id="input.id"
         ref="$input"
+        :name="name"
         :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
@@ -26,6 +27,7 @@ const input = injectReactiveOrFail<IAGHeadlessInput>(
     'input',
     '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
 );
+const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
 const checked = computed(() => {
     if (props.type !== 'checkbox') {

package/src/components/lib/AGErrorMessage.vue

@@ -5,12 +5,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import Errors from '@/errors/Errors';
 import { requiredObjectProp } from '@/utils/vue';
+import { getErrorMessage } from '@/errors/utils';
 import type { ErrorSource } from '@/errors/Errors.state';
 
 import AGMarkdown from './AGMarkdown.vue';
 
 const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
-const message = computed(() => Errors.getErrorMessage(props.error));
+const message = computed(() => getErrorMessage(props.error));
 </script>

package/src/errors/Errors.ts

@@ -7,6 +7,7 @@ import { translateWithDefault } from '@/lang/utils';
 
 import Service from './Errors.state';
 import { Colors } from '@/components/constants';
+import { Events } from '@/services';
 import type { AGErrorReportModalProps } from '@/components/modals/AGErrorReportModal';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 import type { ModalComponent } from '@/ui/UI.state';
@@ -39,7 +40,13 @@ export class ErrorsService extends Service {
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
-        if (App.development || App.testing) {
+        await Events.emit('error', { error, message });
+
+        if (App.testing) {
+            throw error;
+        }
+
+        if (App.development) {
             this.logError(error);
         }
 
@@ -110,22 +117,6 @@ export class ErrorsService extends Service {
         });
     }
 
-    public getErrorMessage(error: ErrorSource): string {
-        if (typeof error === 'string') {
-            return error;
-        }
-
-        if (error instanceof Error || error instanceof JSError) {
-            return error.message;
-        }
-
-        if (isObject(error)) {
-            return toString(error['message'] ?? error['description'] ?? 'Unknown error object');
-        }
-
-        return translateWithDefault('errors.unknown', 'Unknown Error');
-    }
-
     private logError(error: unknown): void {
         // eslint-disable-next-line no-console
         console.error(error);
@@ -185,4 +176,10 @@ export class ErrorsService extends Service {
 
 }
 
-export default facade(new ErrorsService());
+export default facade(ErrorsService);
+
+declare module '@/services/Events' {
+    export interface EventsPayload {
+        error: { error: ErrorSource; message?: string };
+    }
+}

package/src/errors/index.ts

@@ -6,20 +6,11 @@ import { definePlugin } from '@/plugins';
 import Errors from './Errors';
 import { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
+export * from './utils';
 export { Errors, ErrorSource, ErrorReport, ErrorReportLog };
 
 const services = { $errors: Errors };
 const frameworkHandler: ErrorHandler = (error) => {
-    if (!Errors.instance) {
-        // eslint-disable-next-line no-console
-        console.warn('Errors service hasn\'t been initialized properly!');
-
-        // eslint-disable-next-line no-console
-        console.error(error);
-
-        return true;
-    }
-
     Errors.report(error);
 
     return true;

package/src/errors/utils.ts

@@ -0,0 +1,19 @@
+import { JSError, isObject, toString } from '@noeldemartin/utils';
+import { translateWithDefault } from '@/lang/utils';
+import type { ErrorSource } from './Errors.state';
+
+export function getErrorMessage(error: ErrorSource): string {
+    if (typeof error === 'string') {
+        return error;
+    }
+
+    if (error instanceof Error || error instanceof JSError) {
+        return error.message;
+    }
+
+    if (isObject(error)) {
+        return toString(error['message'] ?? error['description'] ?? 'Unknown error object');
+    }
+
+    return translateWithDefault('errors.unknown', 'Unknown Error');
+}

package/src/jobs/Job.ts

@@ -0,0 +1,5 @@
+export default abstract class Job {
+
+    public abstract run(): Promise<void>;
+
+}

package/src/jobs/index.ts

@@ -0,0 +1,7 @@
+import Job from './Job';
+
+export { Job };
+
+export async function dispatch(job: Job): Promise<void> {
+    await job.run();
+}

package/src/lang/Lang.ts

@@ -1,10 +1,11 @@
-import { facade, toString } from '@noeldemartin/utils';
+import { facade } from '@noeldemartin/utils';
 
 import App from '@/services/App';
 import Service from '@/services/Service';
 
 export interface LangProvider {
     translate(key: string, parameters?: Record<string, unknown>): string;
+    translateWithDefault(key: string, defaultMessage: string, parameters?: Record<string, unknown>): string;
 }
 
 export class LangService extends Service {
@@ -21,6 +22,12 @@ export class LangService extends Service {
 
                 return key;
             },
+            translateWithDefault: (_, defaultMessage) => {
+                // eslint-disable-next-line no-console
+                App.development && console.warn('Lang provider is missing');
+
+                return defaultMessage;
+            },
         };
     }
 
@@ -32,29 +39,10 @@ export class LangService extends Service {
         return this.provider.translate(key, parameters) ?? key;
     }
 
-    public translateWithDefault(key: string, defaultMessage: string): string;
-    public translateWithDefault(key: string, parameters: Record<string, unknown>, defaultMessage: string): string;
-    public translateWithDefault(
-        key: string,
-        defaultMessageOrParameters?: string | Record<string, unknown>,
-        defaultMessage?: string,
-    ): string {
-        defaultMessage ??= defaultMessageOrParameters as string;
-
-        const parameters = typeof defaultMessageOrParameters === 'string' ? {} : defaultMessageOrParameters ?? {};
-        const message = this.provider.translate(key, parameters) ?? key;
-
-        if (message === key) {
-            return Object.entries(parameters).reduce(
-                (renderedMessage, [name, value]) =>
-                    renderedMessage.replace(new RegExp(`\\{\\s*${name}\\s*\\}`, 'g'), toString(value)),
-                defaultMessage,
-            );
-        }
-
-        return message;
+    public translateWithDefault(key: string, defaultMessage: string, parameters: Record<string, unknown> = {}): string {
+        return this.provider.translateWithDefault(key, defaultMessage, parameters);
     }
 
 }
 
-export default facade(new LangService());
+export default facade(LangService);

package/src/main.ts

@@ -2,8 +2,10 @@ export * from './bootstrap';
 export * from './components';
 export * from './errors';
 export * from './forms';
+export * from './jobs';
 export * from './lang';
 export * from './plugins';
 export * from './services';
+export * from './testing';
 export * from './ui';
 export * from './utils';

package/src/services/App.state.ts

@@ -12,6 +12,6 @@ export default defineServiceState({
     },
     computed: {
         development: (state) => state.environment === 'development',
-        testing: (state) => state.environment === 'testing',
+        testing: (state) => state.environment === 'test' || state.environment === 'testing',
     },
 });

package/src/services/App.ts

@@ -18,6 +18,12 @@ export class AppService extends Service {
         return this.mounted.isResolved();
     }
 
+    public async whenReady<T>(callback: () => T): Promise<T> {
+        const result = await this.ready.then(callback);
+
+        return result;
+    }
+
     public async reload(queryParameters?: Record<string, string | undefined>): Promise<void> {
         queryParameters && updateLocationQueryParameters(queryParameters);
 
@@ -38,4 +44,4 @@ export class AppService extends Service {
 
 }
 
-export default facade(new AppService());
+export default facade(AppService);

package/src/services/Events.test.ts

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import Events, { EventListenerPriorities } from './Events';
+
+describe('Events', () => {
+
+    beforeEach(() => void Events.reset());
+
+    it('registers listeners', async () => {
+        // Arrange
+        let counter = 0;
+
+        Events.on('trigger', () => counter++);
+
+        // Act
+        await Events.emit('trigger');
+        await Events.emit('trigger');
+        await Events.emit('trigger');
+
+        // Assert
+        expect(counter).toEqual(3);
+    });
+
+    it('triggers listeners by priority', async () => {
+        // Arrange
+        const storage: string[] = [];
+
+        Events.on('trigger', () => storage.push('second'));
+        Events.on('trigger', { priority: EventListenerPriorities.Low }, () => storage.push('third'));
+        Events.on('trigger', { priority: EventListenerPriorities.High }, () => storage.push('first'));
+
+        // Act
+        await Events.emit('trigger');
+
+        // Assert
+        expect(storage).toEqual(['first', 'second', 'third']);
+    });
+
+});

package/src/services/Events.ts

@@ -1,9 +1,13 @@
-import { arr, facade, tap } from '@noeldemartin/utils';
-import type { FluentArray } from '@noeldemartin/utils';
+import { arrayRemove, facade, fail, tap } from '@noeldemartin/utils';
 
 import Service from '@/services/Service';
 
 export interface EventsPayload {}
+export interface EventListenerOptions {
+    priority: number;
+}
+export type AerogelGlobalEvents = Partial<{ [Event in EventWithoutPayload]: () => unknown }> &
+    Partial<{ [Event in EventWithPayload]: EventListener<EventsPayload[Event]> }>;
 
 export type EventListener<T = unknown> = (payload: T) => unknown;
 export type UnknownEvent<T> = T extends keyof EventsPayload ? never : T;
@@ -16,70 +20,136 @@ export type EventWithPayload = {
     [K in keyof EventsPayload]: EventsPayload[K] extends void ? never : K;
 }[keyof EventsPayload];
 
+export const EventListenerPriorities = {
+    Low: -256,
+    Default: 0,
+    High: 256,
+} as const;
+
 export class EventsService extends Service {
 
-    private listeners: Record<string, FluentArray<EventListener>> = {};
+    private listeners: Record<string, { priorities: number[]; handlers: Record<number, EventListener[]> }> = {};
+
+    protected async boot(): Promise<void> {
+        Object.entries(globalThis.__aerogelEvents__ ?? {}).forEach(([event, listener]) =>
+            this.on(event as string, listener as EventListener));
+    }
 
     public emit<Event extends EventWithoutPayload>(event: Event): Promise<void>;
     public emit<Event extends EventWithPayload>(event: Event, payload: EventsPayload[Event]): Promise<void>;
     public emit<Event extends string>(event: UnknownEvent<Event>, payload?: unknown): Promise<void>;
     public async emit(event: string, payload?: unknown): Promise<void> {
-        const listeners = [...(this.listeners[event] ?? [])];
+        const listeners = this.listeners[event] ?? { priorities: [], handlers: {} };
 
-        await Promise.all(listeners.map((listener) => listener(payload)) ?? []);
+        for (const priority of listeners.priorities) {
+            await Promise.all(listeners.handlers[priority]?.map((listener) => listener(payload)) ?? []);
+        }
     }
 
+    /* eslint-disable max-len */
     public on<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): () => void;
-    public on<Event extends EventWithPayload>(
-        event: Event,
-        listener: EventListener<EventsPayload[Event]>
-    ): () => void | void;
-
+    public on<Event extends EventWithoutPayload>(event: Event, options: Partial<EventListenerOptions>, listener: () => unknown): () => void; // prettier-ignore
+    public on<Event extends EventWithPayload>(event: Event, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
+    public on<Event extends EventWithPayload>(event: Event, options: Partial<EventListenerOptions>, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public on<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): () => void;
-    public on(event: string, listener: EventListener): () => void {
-        (this.listeners[event] ??= arr<EventListener>([])).push(listener);
+    public on<Event extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
+    /* eslint-enable max-len */
 
-        return () => this.off(event, listener);
+    public on(
+        event: string,
+        optionsOrListener: Partial<EventListenerOptions> | EventListener,
+        listener?: EventListener,
+    ): () => void {
+        const options = typeof optionsOrListener === 'function' ? {} : optionsOrListener;
+        const handler = typeof optionsOrListener === 'function' ? optionsOrListener : (listener as EventListener);
+
+        this.registerListener(event, options, handler);
+
+        return () => this.off(event, handler);
     }
 
+    /* eslint-disable max-len */
     public once<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): () => void;
-    public once<Event extends EventWithPayload>(
-        event: Event,
-        listener: EventListener<EventsPayload[Event]>
-    ): () => void | void;
-
+    public once<Event extends EventWithoutPayload>(event: Event, options: Partial<EventListenerOptions>, listener: () => unknown): () => void; // prettier-ignore
+    public once<Event extends EventWithPayload>(event: Event, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
+    public once<Event extends EventWithPayload>(event: Event, options: Partial<EventListenerOptions>, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public once<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): () => void;
-    public once(event: string, listener: EventListener): () => void {
+    public once<Event extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
+    /* eslint-enable max-len */
+
+    public once(
+        event: string,
+        optionsOrListener: Partial<EventListenerOptions> | EventListener,
+        listener?: EventListener,
+    ): () => void {
         let onceListener: EventListener | null = null;
+        const options = typeof optionsOrListener === 'function' ? {} : optionsOrListener;
+        const handler = typeof optionsOrListener === 'function' ? optionsOrListener : (listener as EventListener);
 
         return tap(
             () => onceListener && this.off(event, onceListener),
             (off) => {
-                (this.listeners[event] ??= arr<EventListener>([])).push(
-                    (onceListener = (...args) => {
-                        off();
+                onceListener = (...args) => {
+                    off();
 
-                        return listener(...args);
-                    }),
-                );
+                    return handler(...args);
+                };
+
+                this.registerListener(event, options, handler);
             },
         );
     }
 
     public off(event: string, listener: EventListener): void {
-        const eventListeners = this.listeners[event];
+        const listeners = this.listeners[event];
 
-        if (!eventListeners) {
+        if (!listeners) {
             return;
         }
 
-        eventListeners.remove(listener);
+        const priorities = [...listeners.priorities];
+
+        for (const priority of priorities) {
+            arrayRemove(listeners.handlers[priority] ?? [], listener);
 
-        if (eventListeners.isEmpty()) {
+            if (listeners.handlers[priority]?.length === 0) {
+                delete listeners.handlers[priority];
+                arrayRemove(listeners.priorities, priority);
+            }
+        }
+
+        if (listeners.priorities.length === 0) {
             delete this.listeners[event];
         }
     }
 
+    protected registerListener(event: string, options: Partial<EventListenerOptions>, handler: EventListener): void {
+        const priority = options.priority ?? 0;
+
+        if (!(event in this.listeners)) {
+            this.listeners[event] = { priorities: [], handlers: {} };
+        }
+
+        const priorities =
+            this.listeners[event]?.priorities ?? fail<number[]>(`priorities missing for event '${event}'`);
+        const handlers =
+            this.listeners[event]?.handlers ??
+            fail<Record<number, EventListener[]>>(`handlers missing for event '${event}'`);
+
+        if (!priorities.includes(priority)) {
+            priorities.push(priority);
+            priorities.sort((a, b) => b - a);
+            handlers[priority] = [];
+        }
+
+        handlers[priority]?.push(handler);
+    }
+
 }
 
-export default facade(new EventsService());
+export default facade(EventsService);
+
+declare global {
+    // eslint-disable-next-line no-var
+    var __aerogelEvents__: AerogelGlobalEvents | undefined;
+}

package/src/services/Service.ts

@@ -14,7 +14,7 @@ export type UnrefServiceState<State extends ServiceState> = {
 };
 
 export type ComputedStateDefinition<TState extends ServiceState, TComputedState extends ServiceState> = {
-    [K in keyof TComputedState]: (state: TState) => TComputedState[K];
+    [K in keyof TComputedState]: (state: UnrefServiceState<TState>) => TComputedState[K];
 } & ThisType<{
     readonly [K in keyof TComputedState]: TComputedState[K];
 }>;
@@ -24,7 +24,7 @@ export function defineServiceState<
     ComputedState extends ServiceState = {}
 >(options: {
     name: string;
-    initialState: State;
+    initialState: State | (() => State);
     persist?: (keyof State)[];
     computed?: ComputedStateDefinition<State, ComputedState>;
     serialize?: (state: Partial<State>) => Partial<State>;
@@ -44,7 +44,27 @@ export function defineServiceState<
         }
 
         protected getInitialState(): UnrefServiceState<State> {
-            return options.initialState;
+            if (typeof options.initialState === 'function') {
+                return options.initialState();
+            }
+
+            return Object.entries(options.initialState).reduce((state, [key, value]) => {
+                try {
+                    value = structuredClone(value);
+                } catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.warn(
+                        `Could not clone '${key}' state from ${this.getName()} service, ` +
+                            'this may cause problems if you\'re using multiple instances of the service ' +
+                            '(for example, in unit tests).\n' +
+                            'To fix this problem, declare your initialState as a function instead.',
+                    );
+                }
+
+                state[key as keyof State] = value;
+
+                return state;
+            }, {} as UnrefServiceState<State>);
         }
 
         protected getComputedStateDefinition(): ComputedStateDefinition<UnrefServiceState<State>, ComputedState> {
@@ -54,7 +74,7 @@ export function defineServiceState<
         protected serializePersistedState(state: Partial<State>): Partial<State> {
             return options.serialize?.(state) ?? state;
         }
-    
+
     } as unknown as Constructor<UnrefServiceState<State>> &
         Constructor<ComputedState> &
         Constructor<Service<UnrefServiceState<State>, ComputedState, Partial<UnrefServiceState<State>>>>;
@@ -71,7 +91,7 @@ export default class Service<
     protected _name: string;
     private _booted: PromisedValue<void>;
     private _computedStateKeys: Set<keyof State>;
-    private _store?: Store | false;
+    private _store: Store | false;
 
     constructor() {
         super();
@@ -110,6 +130,10 @@ export default class Service<
         return this._booted;
     }
 
+    public hasPersistedState(): boolean {
+        return Storage.has(this._name);
+    }
+
     public hasState<P extends keyof State>(property: P): boolean {
         if (!this._store) {
             return false;

package/src/services/index.ts

@@ -10,6 +10,7 @@ import { getPiniaStore } from './store';
 export * from './App';
 export * from './Events';
 export * from './Service';
+export * from './store';
 
 export { App, Events, Service };