@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c3236837f7f8fc319a4a56022accb32757b3db89

package/src/lang/DefaultLangProvider.ts

@@ -1,10 +1,13 @@
-import App from '@/services/App';
+import { isDevelopment } from '@noeldemartin/utils';
 
 import type { LangProvider } from './Lang';
 
 export default class DefaultLangProvider implements LangProvider {
 
-    constructor(private locale: string, private fallbackLocale: string) {}
+    constructor(
+        private locale: string,
+        private fallbackLocale: string,
+    ) {}
 
     public getLocale(): string {
         return this.locale;
@@ -28,14 +31,14 @@ export default class DefaultLangProvider implements LangProvider {
 
     public translate(key: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return key;
     }
 
     public translateWithDefault(_: string, defaultMessage: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return defaultMessage;
     }

package/src/lang/Lang.state.ts

@@ -1,4 +1,4 @@
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
 
 export default defineServiceState({
     name: 'lang',

package/src/lang/Lang.ts

@@ -52,7 +52,7 @@ export class LangService extends Service {
         return navigator.languages.find((locale) => locales.includes(locale)) ?? 'en';
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         if (!globalThis.document) {
             return;
         }

package/src/lang/index.ts

@@ -1,10 +1,14 @@
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import App from '@aerogel/core/services/App';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
-import Lang, { LangProvider } from './Lang';
+import Lang from './Lang';
+import settings from './settings';
 import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
-export { Lang, LangProvider, translate, translateWithDefault };
+export { Lang, translate, translateWithDefault };
+export type { LangProvider };
 
 const services = { $lang: Lang };
 
@@ -15,15 +19,17 @@ export default definePlugin({
         app.config.globalProperties.$t ??= translate;
         app.config.globalProperties.$td = translateWithDefault;
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends LangServices {}
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties {
         $td: typeof translateWithDefault;
     }

package/src/lang/settings/Language.vue

@@ -0,0 +1,48 @@
+<template>
+    <Select
+        v-model="$lang.locale"
+        class="flex flex-col items-start md:flex-row"
+        as="div"
+        :options
+        :render-option="renderLocale"
+    >
+        <div class="grow">
+            <SelectLabel class="text-base font-semibold">
+                {{ $td('settings.locale', 'Language') }}
+            </SelectLabel>
+            <Markdown
+                lang-key="settings.localeDescription"
+                lang-default="Choose the application's language."
+                class="mt-1 text-sm text-gray-500"
+            />
+        </div>
+        <Button variant="ghost" :as="SelectTrigger" class="grid w-auto outline-none" />
+        <SelectOptions />
+    </Select>
+</template>
+
+<script setup lang="ts">
+import Aerogel from 'virtual:aerogel';
+
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Select from '@aerogel/core/components/ui/Select.vue';
+import SelectLabel from '@aerogel/core/components/ui/SelectLabel.vue';
+import SelectTrigger from '@aerogel/core/components/ui/SelectTrigger.vue';
+import SelectOptions from '@aerogel/core/components/ui/SelectOptions.vue';
+import { Lang, translateWithDefault } from '@aerogel/core/lang';
+
+const browserLocale = Lang.getBrowserLocale();
+const options = computed(() => [null, ...Lang.locales]);
+
+function renderLocale(locale: string | null): string {
+    return (
+        (locale && Aerogel.locales[locale]) ??
+        translateWithDefault('settings.localeDefault', '{locale} (default)', {
+            locale: Aerogel.locales[browserLocale] ?? browserLocale,
+        })
+    );
+}
+</script>

package/src/lang/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core/services';
+
+import Language from './Language.vue';
+
+export default defineSettings([
+    {
+        priority: 100,
+        component: Language,
+    },
+]);

package/src/plugins/Plugin.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 
-import type { AerogelOptions } from '@/bootstrap/options';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
 
 export interface Plugin {
     name?: string;

package/src/plugins/index.ts

@@ -1,6 +1,6 @@
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
-import App from '@/services/App';
+import App from '@aerogel/core/services/App';
 
 import type { Plugin } from './Plugin';
 
@@ -13,13 +13,16 @@ export function definePlugin<T extends Plugin>(plugin: T): T {
 export async function installPlugins(plugins: Plugin[], ...args: GetClosureArgs<Plugin['install']>): Promise<void> {
     App.setState(
         'plugins',
-        plugins.reduce((pluginsMap, plugin) => {
-            if (plugin.name) {
-                pluginsMap[plugin.name] = plugin;
-            }
+        plugins.reduce(
+            (pluginsMap, plugin) => {
+                if (plugin.name) {
+                    pluginsMap[plugin.name] = plugin;
+                }
 
-            return pluginsMap;
-        }, {} as Record<string, Plugin>),
+                return pluginsMap;
+            },
+            {} as Record<string, Plugin>,
+        ),
     );
 
     await Promise.all(plugins.map((plugin) => plugin.install(...args)) ?? []);

package/src/services/App.state.ts

@@ -1,18 +1,29 @@
 import Aerogel from 'virtual:aerogel';
 
-import type { App } from 'vue';
+import { getEnv } from '@noeldemartin/utils';
+import type { App, Component } from 'vue';
 
-import { defineServiceState } from '@/services/Service';
-import type { Plugin } from '@/plugins/Plugin';
+import { defineServiceState } from '@aerogel/core/services/Service';
+import type { Plugin } from '@aerogel/core/plugins/Plugin';
+
+export interface AppSetting {
+    component: Component;
+    priority: number;
+}
+
+export function defineSettings<T extends AppSetting[]>(settings: T): T {
+    return settings;
+}
 
 export default defineServiceState({
     name: 'app',
     initialState: {
         plugins: {} as Record<string, Plugin>,
         instance: null as App | null,
-        environment: Aerogel.environment,
+        environment: getEnv() ?? 'development',
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
+        settings: [] as AppSetting[],
     },
     computed: {
         development: (state) => state.environment === 'development',

package/src/services/App.ts

@@ -1,13 +1,17 @@
 import Aerogel from 'virtual:aerogel';
 
 import { PromisedValue, facade, forever, updateLocationQueryParameters } from '@noeldemartin/utils';
+import { markRaw } from 'vue';
 
-import Events from '@/services/Events';
-import type { Plugin } from '@/plugins';
-import type { Services } from '@/services';
+import Events from '@aerogel/core/services/Events';
+import type { Plugin } from '@aerogel/core/plugins';
+import type { AppSetting, Services } from '@aerogel/core/services';
 
 import Service from './App.state';
 
+export { defineSettings } from './App.state';
+export type { AppSetting } from './App.state';
+
 export class AppService extends Service {
 
     public readonly name = Aerogel.name;
@@ -22,6 +26,10 @@ export class AppService extends Service {
         return this.mounted.isResolved();
     }
 
+    public addSetting(setting: AppSetting): void {
+        this.settings.push(markRaw(setting));
+    }
+
     public async whenReady<T>(callback: () => T): Promise<T> {
         const result = await this.ready.then(callback);
 
@@ -45,7 +53,7 @@ export class AppService extends Service {
         return this.instance?.config.globalProperties[name] ?? null;
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         Events.once('application-ready', () => this.ready.resolve());
         Events.once('application-mounted', () => this.mounted.resolve());
     }

package/src/services/Cache.ts

@@ -1,6 +1,6 @@
 import { PromisedValue, facade, tap } from '@noeldemartin/utils';
 
-import Service from '@/services/Service';
+import Service from '@aerogel/core/services/Service';
 
 export class CacheService extends Service {
 

package/src/services/Events.test.ts

@@ -10,12 +10,12 @@ describe('Events', () => {
         // Arrange
         let counter = 0;
 
-        Events.on('trigger', () => counter++);
+        Events.on('application-mounted', () => counter++);
 
         // Act
-        await Events.emit('trigger');
-        await Events.emit('trigger');
-        await Events.emit('trigger');
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
 
         // Assert
         expect(counter).toEqual(3);
@@ -25,12 +25,12 @@ describe('Events', () => {
         // 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'));
+        Events.on('application-mounted', () => storage.push('second'));
+        Events.on('application-mounted', { priority: EventListenerPriorities.Low }, () => storage.push('third'));
+        Events.on('application-mounted', { priority: EventListenerPriorities.High }, () => storage.push('first'));
 
         // Act
-        await Events.emit('trigger');
+        await Events.emit('application-mounted');
 
         // Assert
         expect(storage).toEqual(['first', 'second', 'third']);

package/src/services/Events.ts

@@ -1,6 +1,6 @@
 import { arrayRemove, facade, fail, tap } from '@noeldemartin/utils';
 
-import Service from '@/services/Service';
+import Service from '@aerogel/core/services/Service';
 
 export interface EventsPayload {}
 export interface EventListenerOptions {
@@ -10,7 +10,6 @@ export type AerogelGlobalEvents = Partial<{ [Event in EventWithoutPayload]: () =
     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;
 
 export type EventWithoutPayload = {
     [K in keyof EventsPayload]: EventsPayload[K] extends void ? K : never;
@@ -32,14 +31,14 @@ export class EventsService extends Service {
 
     private listeners: Record<string, { priorities: number[]; handlers: Record<number, EventListener[]> }> = {};
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         Object.entries(globalThis.__aerogelEvents__ ?? {}).forEach(([event, listener]) =>
-            this.on(event as string, listener as EventListener));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.on(event as any, 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] ?? { priorities: [], handlers: {} };
 
@@ -55,9 +54,6 @@ export class EventsService extends Service {
     public on<Event extends EventWithPayload>(event: Event, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public on<Event extends EventWithPayload>(event: Event, priority: EventListenerPriority, 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 extends string>(event: UnknownEvent<Event>, priority: EventListenerPriority, listener: EventListener): () => void; // prettier-ignore
-    public on<Event extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
     /* eslint-enable max-len */
 
     public on(
@@ -83,8 +79,6 @@ export class EventsService extends Service {
     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 extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
     /* eslint-enable max-len */
 
     public once(

package/src/services/Service.ts

@@ -11,9 +11,9 @@ import {
 import type { Constructor, Nullable } from '@noeldemartin/utils';
 import type { Store } from 'pinia';
 
-import ServiceBootError from '@/errors/ServiceBootError';
-import { defineServiceStore } from '@/services/store';
-import type { Unref } from '@/utils/vue';
+import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
+import { defineServiceStore } from '@aerogel/core/services/store';
+import type { Unref } from '@aerogel/core/utils/vue';
 
 export type ServiceState = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 export type DefaultServiceState = any; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -32,7 +32,7 @@ export type StateWatchers<TService extends Service, TState extends ServiceState>
 export type ServiceWithState<
     State extends ServiceState = ServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 > = Constructor<Unref<State>> &
     Constructor<ComputedState> &
     Constructor<Service<Unref<State>, ComputedState, Unref<ServiceStorage>>>;
@@ -40,7 +40,7 @@ export type ServiceWithState<
 export function defineServiceState<
     State extends ServiceState = ServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 >(options: {
     name: string;
     initialState: State | (() => State);
@@ -52,17 +52,17 @@ export function defineServiceState<
 }): ServiceWithState<State, ComputedState, ServiceStorage> {
     return class extends Service<Unref<State>, ComputedState, ServiceStorage> {
 
-        public static persist = (options.persist as string[]) ?? [];
+        public static override persist = (options.persist as string[]) ?? [];
 
-        protected usesStore(): boolean {
+        protected override usesStore(): boolean {
             return true;
         }
 
-        protected getName(): string | null {
+        protected override getName(): string | null {
             return options.name ?? null;
         }
 
-        protected getInitialState(): Unref<State> {
+        protected override getInitialState(): Unref<State> {
             if (typeof options.initialState === 'function') {
                 return options.initialState();
             }
@@ -86,19 +86,19 @@ export function defineServiceState<
             }, {} as Unref<State>);
         }
 
-        protected getComputedStateDefinition(): ComputedStateDefinition<Unref<State>, ComputedState> {
+        protected override getComputedStateDefinition(): ComputedStateDefinition<Unref<State>, ComputedState> {
             return (options.computed ?? {}) as ComputedStateDefinition<Unref<State>, ComputedState>;
         }
 
-        protected getStateWatchers(): StateWatchers<Service, Unref<State>> {
+        protected override getStateWatchers(): StateWatchers<Service, Unref<State>> {
             return (options.watch ?? {}) as StateWatchers<Service, Unref<State>>;
         }
 
-        protected serializePersistedState(state: Partial<State>): ServiceStorage {
+        protected override serializePersistedState(state: Partial<State>): ServiceStorage {
             return options.serialize?.(state) ?? (state as ServiceStorage);
         }
 
-        protected deserializePersistedState(state: ServiceStorage): Partial<State> {
+        protected override deserializePersistedState(state: ServiceStorage): Partial<State> {
             return options.restore?.(state) ?? (state as Partial<State>);
         }
     
@@ -108,7 +108,7 @@ export function defineServiceState<
 export default class Service<
     State extends ServiceState = DefaultServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 > extends MagicObject {
 
     public static persist: string[] = [];
@@ -142,9 +142,9 @@ export default class Service<
         return this._booted;
     }
 
-    public static<T extends typeof Service>(): T;
-    public static<T extends typeof Service, K extends keyof T>(property: K): T[K];
-    public static<T extends typeof Service, K extends keyof T>(property?: K): T | T[K] {
+    public override static<T extends typeof Service>(): T;
+    public override static<T extends typeof Service, K extends keyof T>(property: K): T[K];
+    public override static<T extends typeof Service, K extends keyof T>(property?: K): T | T[K] {
         return super.static<T, K>(property as K);
     }
 
@@ -182,10 +182,10 @@ export default class Service<
         const store = this._store as any;
 
         if (property) {
-            return store ? store[property] : undefined;
+            return store ? store[property] : (undefined as State[P]);
         }
 
-        return store ? store : {};
+        return store ? store : ({} as State);
     }
 
     public setState<P extends keyof State>(property: P, value: State[P]): void;
@@ -219,7 +219,7 @@ export default class Service<
         this.onPersistentStateUpdated(state);
     }
 
-    protected __get(property: string): unknown {
+    protected override __get(property: string): unknown {
         if (this.hasState(property)) {
             return this.getState(property);
         }
@@ -227,7 +227,7 @@ export default class Service<
         return super.__get(property);
     }
 
-    protected __set(property: string, value: unknown): void {
+    protected override __set(property: string, value: unknown): void {
         this.setState({ [property]: value } as Partial<State>);
     }
 

package/src/services/Storage.ts

@@ -1,7 +1,7 @@
 import { facade } from '@noeldemartin/utils';
 
-import Events from '@/services/Events';
-import Service from '@/services/Service';
+import Events from '@aerogel/core/services/Events';
+import Service from '@aerogel/core/services/Service';
 
 export class StorageService extends Service {
 
@@ -13,7 +13,7 @@ export class StorageService extends Service {
 
 export default facade(StorageService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'purge-storage': void;
     }

package/src/services/index.ts

@@ -1,6 +1,7 @@
-import type { App as VueApp } from 'vue';
+import type { App as AppInstance } from 'vue';
 
-import { definePlugin } from '@/plugins';
+import { definePlugin } from '@aerogel/core/plugins';
+import { isDevelopment, isTesting } from '@noeldemartin/utils';
 
 import App from './App';
 import Cache from './Cache';
@@ -8,6 +9,7 @@ import Events from './Events';
 import Service from './Service';
 import Storage from './Storage';
 import { getPiniaStore } from './store';
+import type { AppSetting } from './App.state';
 
 export * from './App';
 export * from './Cache';
@@ -28,7 +30,7 @@ export type DefaultServices = typeof defaultServices;
 
 export interface Services extends DefaultServices {}
 
-export async function bootServices(app: VueApp, services: Record<string, Service>): Promise<void> {
+export async function bootServices(app: AppInstance, services: Record<string, Service>): Promise<void> {
     await Promise.all(
         Object.entries(services).map(async ([name, service]) => {
             await service
@@ -39,7 +41,7 @@ export async function bootServices(app: VueApp, services: Record<string, Service
 
     Object.assign(app.config.globalProperties, services);
 
-    if (App.development || App.testing) {
+    if (isDevelopment() || isTesting()) {
         Object.assign(globalThis, services);
     }
 }
@@ -52,17 +54,19 @@ export default definePlugin({
         };
 
         app.use(getPiniaStore());
+        options.settings?.forEach((setting) => App.addSetting(setting));
 
         await bootServices(app, services);
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
+        settings?: AppSetting[];
     }
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties extends Services {}
 }

package/src/services/utils.ts

@@ -2,14 +2,14 @@ import { objectOnly } from '@noeldemartin/utils';
 
 export type Replace<
     TOriginal extends Record<string, unknown>,
-    TReplacements extends Partial<Record<keyof TOriginal, unknown>>
+    TReplacements extends Partial<Record<keyof TOriginal, unknown>>,
 > = {
     [K in keyof TOriginal]: TReplacements extends Record<K, infer Replacement> ? Replacement : TOriginal[K];
 };
 
 export function replaceExisting<
     TOriginal extends Record<string, unknown>,
-    TReplacements extends Partial<Record<keyof TOriginal, unknown>>
+    TReplacements extends Partial<Record<keyof TOriginal, unknown>>,
 >(original: TOriginal, replacements: TReplacements): Replace<TOriginal, TReplacements> {
     return {
         ...original,

package/src/testing/index.ts

@@ -1,20 +1,25 @@
+import { isTesting } from '@noeldemartin/utils';
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
-import Events from '@/services/Events';
-import { definePlugin } from '@/plugins';
+import Events from '@aerogel/core/services/Events';
+import { App } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
+import type { Services } from '@aerogel/core/services';
 
 export interface AerogelTestingRuntime {
     on: (typeof Events)['on'];
+    service<T extends keyof Services>(name: T): Services[T] | null;
 }
 
 export default definePlugin({
     async install() {
-        if (import.meta.env.MODE !== 'testing') {
+        if (!isTesting()) {
             return;
         }
 
         globalThis.testingRuntime = {
             on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            service: (name) => App.service(name),
         };
     },
 });

package/src/testing/setup.ts

@@ -1,27 +1,11 @@
-import { mock, tap, toString } from '@noeldemartin/utils';
+import { FakeLocalStorage } from '@noeldemartin/testing';
 import { beforeEach, vi } from 'vitest';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-tap(globalThis, (global: any) => {
-    const localStorage: Record<string, string> = {};
-
-    global.jest = vi;
-    global.navigator = { languages: ['en'] };
-    global.localStorage = mock<Storage>({
-        getItem: (key) => localStorage[key] ?? null,
-        setItem(key, value) {
-            localStorage[key] = toString(value);
-        },
-    });
-});
-
 vi.mock('dompurify', async () => {
     return { default: { sanitize: (html: string) => html } };
 });
 
 beforeEach(() => {
-    vi.stubGlobal('document', {
-        querySelector: () => null,
-        getElementById: () => null,
-    });
+    FakeLocalStorage.reset();
+    FakeLocalStorage.patchGlobal();
 });