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

package/src/lang/DefaultLangProvider.ts

@@ -0,0 +1,46 @@
+import { isDevelopment } from '@noeldemartin/utils';
+
+import type { LangProvider } from './Lang';
+
+export default class DefaultLangProvider implements LangProvider {
+
+    constructor(
+        private locale: string,
+        private fallbackLocale: string,
+    ) {}
+
+    public getLocale(): string {
+        return this.locale;
+    }
+
+    public async setLocale(locale: string): Promise<void> {
+        this.locale = locale;
+    }
+
+    public getFallbackLocale(): string {
+        return this.fallbackLocale;
+    }
+
+    public async setFallbackLocale(fallbackLocale: string): Promise<void> {
+        this.fallbackLocale = fallbackLocale;
+    }
+
+    public getLocales(): string[] {
+        return ['en'];
+    }
+
+    public translate(key: string): string {
+        // eslint-disable-next-line no-console
+        isDevelopment() && console.warn('Lang provider is missing');
+
+        return key;
+    }
+
+    public translateWithDefault(_: string, defaultMessage: string): string {
+        // eslint-disable-next-line no-console
+        isDevelopment() && console.warn('Lang provider is missing');
+
+        return defaultMessage;
+    }
+
+}

package/src/lang/Lang.state.ts

@@ -0,0 +1,11 @@
+import { defineServiceState } from '@aerogel/core/services/Service';
+
+export default defineServiceState({
+    name: 'lang',
+    persist: ['locale', 'fallbackLocale'],
+    initialState: {
+        locale: null as string | null,
+        locales: ['en'],
+        fallbackLocale: 'en',
+    },
+});

package/src/lang/Lang.ts

@@ -1,21 +1,75 @@
-import { useI18n } from 'vue-i18n';
 import { facade } from '@noeldemartin/utils';
-import type { Composer } from 'vue-i18n';
 
-import Service from '@/services/Service';
+import DefaultLangProvider from './DefaultLangProvider';
+import Service from './Lang.state';
+
+export interface LangProvider {
+    getLocale(): string;
+    setLocale(locale: string): Promise<void>;
+    getFallbackLocale(): string;
+    setFallbackLocale(fallbackLocale: string): Promise<void>;
+    getLocales(): string[];
+    translate(key: string, parameters?: Record<string, unknown> | number): string;
+    translateWithDefault(key: string, defaultMessage: string, parameters?: Record<string, unknown> | number): string;
+}
 
 export class LangService extends Service {
 
-    private i18n?: Composer;
+    private provider: LangProvider;
+
+    constructor() {
+        super();
+
+        this.provider = new DefaultLangProvider(
+            this.getState('locale') ?? this.getBrowserLocale(),
+            this.getState('fallbackLocale'),
+        );
+    }
+
+    public async setProvider(provider: LangProvider): Promise<void> {
+        this.provider = provider;
+        this.locales = provider.getLocales();
+
+        await provider.setLocale(this.locale ?? this.getBrowserLocale());
+        await provider.setFallbackLocale(this.fallbackLocale);
+    }
 
-    public setup(): void {
-        this.i18n = useI18n();
+    public translate(key: string, parameters?: Record<string, unknown> | number): string {
+        return this.provider.translate(key, parameters) ?? key;
     }
 
-    public translate(key: string, parameters: Record<string, unknown> = {}): string {
-        return this.i18n?.t(key, parameters) ?? key;
+    public translateWithDefault(
+        key: string,
+        defaultMessage: string,
+        parameters: Record<string, unknown> | number = {},
+    ): string {
+        return this.provider.translateWithDefault(key, defaultMessage, parameters);
+    }
+
+    public getBrowserLocale(): string {
+        const locales = this.getState('locales');
+
+        return navigator.languages.find((locale) => locales.includes(locale)) ?? 'en';
+    }
+
+    protected override async boot(): Promise<void> {
+        if (!globalThis.document) {
+            return;
+        }
+
+        this.requireStore().$subscribe(
+            async () => {
+                await this.provider.setLocale(this.locale ?? this.getBrowserLocale());
+                await this.provider.setFallbackLocale(this.fallbackLocale);
+
+                this.locale
+                    ? document.querySelector('html')?.setAttribute('lang', this.locale)
+                    : document.querySelector('html')?.removeAttribute('lang');
+            },
+            { immediate: true },
+        );
     }
 
 }
 
-export default facade(new LangService());
+export default facade(LangService);

package/src/lang/index.ts

@@ -1,89 +1,36 @@
-import { createI18n } from 'vue-i18n';
-import { fail, stringMatch } from '@noeldemartin/utils';
-import type { I18nOptions } from 'vue-i18n';
-import type { Plugin } from 'vue';
-
-import { defineBootstrapHook, onAppMounted } from '@/bootstrap/hooks';
-import { bootServices } from '@/services';
-import type { BootstrapOptions } from '@/bootstrap/options';
+import App from '@aerogel/core/services/App';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
 import Lang from './Lang';
+import settings from './settings';
+import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
-const services = { $lang: Lang };
-
-function getLangOptions(options: BootstrapOptions): LangOptions | null {
-    if (options.lang) {
-        return options.lang;
-    }
-
-    if (options.langMessages) {
-        return { messages: options.langMessages };
-    }
-
-    return null;
-}
-
-function getMessageLoaders(messageLoaders: Record<string, unknown>): Record<string, LazyMessages> {
-    return Object.entries(messageLoaders).reduce((loaders, [fileName, loader]) => {
-        const locale = stringMatch<2>(fileName, /.*\/lang\/(.+)\.yaml/)?.[1];
-
-        if (locale) {
-            loaders[locale] = () =>
-                (loader as () => Promise<{ default: Record<string, unknown> }>)().then(
-                    ({ default: messages }) => messages,
-                );
-        }
-
-        return loaders;
-    }, {} as Record<string, LazyMessages>);
-}
-
-async function createAppI18n(options: LangOptions): Promise<Plugin> {
-    const locale = options.defaultLocale ?? 'en';
-    const fallbackLocale = options.fallbackLocale ?? 'en';
-    const messageLoaders = getMessageLoaders(options.messages);
-    const lazyMessages = messageLoaders[locale] ?? fail<LazyMessages>(`Missing messages for '${locale}' locale`);
-    const messages = { [locale]: await lazyMessages() } as I18nOptions['messages'];
+export { Lang, translate, translateWithDefault };
+export type { LangProvider };
 
-    return createI18n({ locale, fallbackLocale, messages });
-}
+const services = { $lang: Lang };
 
 export type LangServices = typeof services;
 
-export type LazyMessages = () => Promise<Record<string, unknown>>;
-
-export interface LangOptions {
-    messages: Record<string, unknown>;
-    defaultLocale?: string;
-    fallbackLocale?: string;
-}
-
-export * from './helpers';
-export { Lang };
-
-export default defineBootstrapHook(async (app, options) => {
-    const langOptions = getLangOptions(options);
+export default definePlugin({
+    async install(app) {
+        app.config.globalProperties.$t ??= translate;
+        app.config.globalProperties.$td = translateWithDefault;
 
-    if (!langOptions) {
-        return;
-    }
-
-    onAppMounted(() => Lang.setup());
-
-    const plugin = await createAppI18n(langOptions);
+        settings.forEach((setting) => App.addSetting(setting));
 
-    app.use(plugin);
-
-    await bootServices(app, services);
+        await bootServices(app, services);
+    },
 });
 
-declare module '@/bootstrap/options' {
-    interface BootstrapOptions {
-        lang?: LangOptions;
-        langMessages?: Record<string, unknown>;
-    }
+declare module '@aerogel/core/services' {
+    export interface Services extends LangServices {}
 }
 
-declare module '@/services' {
-    interface Services extends LangServices {}
+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/lang/utils.ts

@@ -0,0 +1,4 @@
+import Lang from './Lang';
+
+export const translate = Lang.translate.bind(Lang);
+export const translateWithDefault = Lang.translateWithDefault.bind(Lang);

package/src/plugins/Plugin.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
+
+export interface Plugin {
+    name?: string;
+    install(app: App, options: AerogelOptions): void | Promise<void>;
+}

package/src/plugins/index.ts

@@ -0,0 +1,29 @@
+import type { GetClosureArgs } from '@noeldemartin/utils';
+
+import App from '@aerogel/core/services/App';
+
+import type { Plugin } from './Plugin';
+
+export * from './Plugin';
+
+export function definePlugin<T extends Plugin>(plugin: T): T {
+    return plugin;
+}
+
+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;
+                }
+
+                return pluginsMap;
+            },
+            {} as Record<string, Plugin>,
+        ),
+    );
+
+    await Promise.all(plugins.map((plugin) => plugin.install(...args)) ?? []);
+}

package/src/services/App.state.ts

@@ -0,0 +1,50 @@
+import Aerogel from 'virtual:aerogel';
+
+import { getEnv } from '@noeldemartin/utils';
+import type { App, Component } from 'vue';
+
+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: getEnv() ?? 'development',
+        version: Aerogel.version,
+        sourceUrl: Aerogel.sourceUrl,
+        settings: [] as AppSetting[],
+    },
+    computed: {
+        development: (state) => state.environment === 'development',
+        staging: (state) => state.environment === 'staging',
+        testing: (state) => state.environment === 'test' || state.environment === 'testing',
+        versionName(state): string {
+            if (this.development) {
+                return 'dev.' + Aerogel.sourceHash.toString().substring(0, 7);
+            }
+
+            if (this.staging) {
+                return 'staging.' + Aerogel.sourceHash.toString().substring(0, 7);
+            }
+
+            return `v${state.version}`;
+        },
+        versionUrl(state): string {
+            return (
+                state.sourceUrl +
+                (this.development || this.staging ? `/tree/${Aerogel.sourceHash}` : `/releases/tag/${this.versionName}`)
+            );
+        },
+    },
+});

package/src/services/App.ts

@@ -0,0 +1,63 @@
+import Aerogel from 'virtual:aerogel';
+
+import { PromisedValue, facade, forever, updateLocationQueryParameters } from '@noeldemartin/utils';
+import { markRaw } from 'vue';
+
+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;
+    public readonly ready = new PromisedValue<void>();
+    public readonly mounted = new PromisedValue<void>();
+
+    public isReady(): boolean {
+        return this.ready.isResolved();
+    }
+
+    public isMounted(): boolean {
+        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);
+
+        return result;
+    }
+
+    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;
+    }
+
+    public service<T extends keyof Services>(name: T): Services[T] | null {
+        return this.instance?.config.globalProperties[name] ?? null;
+    }
+
+    protected override async boot(): Promise<void> {
+        Events.once('application-ready', () => this.ready.resolve());
+        Events.once('application-mounted', () => this.mounted.resolve());
+    }
+
+}
+
+export default facade(AppService);

package/src/services/Cache.ts

@@ -0,0 +1,43 @@
+import { PromisedValue, facade, tap } from '@noeldemartin/utils';
+
+import Service from '@aerogel/core/services/Service';
+
+export class CacheService extends Service {
+
+    private cache?: PromisedValue<Cache> = undefined;
+
+    public async get(url: string): Promise<Response | null> {
+        const cache = await this.open();
+        const response = await cache.match(url);
+
+        return response ?? null;
+    }
+
+    public async store(url: string, response: Response): Promise<void> {
+        const cache = await this.open();
+
+        await cache.put(url, response);
+    }
+
+    public async replace(url: string, response: Response): Promise<void> {
+        const cache = await this.open();
+        const keys = await cache.keys(url);
+
+        if (keys.length === 0) {
+            return;
+        }
+
+        await cache.put(url, response);
+    }
+
+    protected async open(): Promise<Cache> {
+        return (this.cache =
+            this.cache ??
+            tap(new PromisedValue<Cache>(), (cache) => {
+                caches.open('app').then((instance) => cache.resolve(instance));
+            }));
+    }
+
+}
+
+export default facade(CacheService);

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('application-mounted', () => counter++);
+
+        // Act
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
+
+        // Assert
+        expect(counter).toEqual(3);
+    });
+
+    it('triggers listeners by priority', async () => {
+        // Arrange
+        const storage: string[] = [];
+
+        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('application-mounted');
+
+        // Assert
+        expect(storage).toEqual(['first', 'second', 'third']);
+    });
+
+});