@aerogel/core 0.0.0-next.fcfbfdc3428c34c4d1c0e781b61d244f13232fc9 → 0.1.0-next.c4b24f52d8b652bd5c14c2d12e1b38b779ab7682

package/src/forms/FormController.test.ts

@@ -1,9 +1,17 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
-
-import { useForm } from '@aerogel/core/forms/composition';
-import { numberInput, requiredStringInput } from '@aerogel/core/forms/utils';
-
-import { FormFieldTypes } from './FormController';
+import { tt } from '@noeldemartin/testing';
+import type { Equals } from '@noeldemartin/utils';
+import type { Expect } from '@noeldemartin/testing';
+
+import {
+    enumInput,
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 
 describe('FormController', () => {
 
@@ -21,7 +29,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -39,7 +47,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -60,11 +68,11 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             trimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
             untrimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
                 trim: false,
             },
@@ -84,4 +92,22 @@ describe('FormController', () => {
         expect(form.errors).toEqual({ trimmed: ['required'], untrimmed: null });
     });
 
+    it('infers field types', () => {
+        const form = useForm({
+            one: stringInput(),
+            two: requiredStringInput(),
+            three: objectInput(),
+            four: requiredObjectInput<{ foo: string; bar?: number }>(),
+            five: enumInput(['foo', 'bar']),
+        });
+
+        tt<
+            | Expect<Equals<typeof form.one, string | null>>
+            | Expect<Equals<typeof form.two, string>>
+            | Expect<Equals<typeof form.three, object | null>>
+            | Expect<Equals<typeof form.four, { foo: string; bar?: number }>>
+            | Expect<Equals<typeof form.five, 'foo' | 'bar' | null>>
+        >();
+    });
+
 });

package/src/forms/FormController.ts

@@ -1,33 +1,33 @@
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
 import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
-import { validate } from './validation';
-import type { ObjectValues } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
-export const FormFieldTypes = {
-    String: 'string',
-    Number: 'number',
-    Boolean: 'boolean',
-    Object: 'object',
-    Date: 'date',
-} as const;
+import { validate, validateType } from './validation';
 
-export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
+export const __valueType: unique symbol = Symbol();
+
+export interface FormFieldDefinition<
+    TType extends FormFieldType = FormFieldType,
+    TRules extends string = string,
+    TValueType = unknown,
+> {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
+    values?: readonly TValueType[];
+    [__valueType]?: TValueType;
 }
 
-export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
-export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
+export type FormFieldType = 'string' | 'enum' | 'number' | 'boolean' | 'object' | 'date';
 export type FormFieldValue = GetFormFieldValue<FormFieldType>;
+export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 
 export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TValueType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType>
-            : GetFormFieldValue<TType> | null
+            ? GetFormFieldValue<TType, TValueType>
+            : GetFormFieldValue<TType, TValueType> | null
         : never;
 };
 
@@ -35,17 +35,21 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
+export type GetFormFieldValue<TType, TValueType = unknown> = TType extends 'string'
     ? string
-    : TType extends typeof FormFieldTypes.Number
+    : TType extends 'number'
       ? number
-      : TType extends typeof FormFieldTypes.Boolean
+      : TType extends 'boolean'
         ? boolean
-        : TType extends typeof FormFieldTypes.Object
-          ? object
-          : TType extends typeof FormFieldTypes.Date
-            ? Date
-            : never;
+        : TType extends 'enum'
+          ? TValueType
+          : TType extends 'object'
+            ? TValueType extends object
+                ? TValueType
+                : object
+            : TType extends 'date'
+              ? Date
+              : never;
 
 const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
@@ -91,7 +95,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
             this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
 
         this._data[field] =
-            definition.type === FormFieldTypes.String && (definition.trim ?? true)
+            definition.type === 'string' && (definition.trim ?? true)
                 ? (toString(value).trim() as FormData<Fields>[T])
                 : value;
 
@@ -108,6 +112,10 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         return this._fields[field]?.rules?.split('|') ?? [];
     }
 
+    public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
+        return this._fields[field]?.type ?? null;
+    }
+
     public data(): FormData<Fields> {
         return { ...this._data };
     }
@@ -191,6 +199,8 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         const value = this._data[name];
         const rules = definition.rules?.split('|') ?? [];
 
+        errors.push(...validateType(value, definition));
+
         for (const rule of rules) {
             if (rule !== 'required' && (value === null || value === undefined)) {
                 continue;

package/src/forms/index.ts

@@ -1,4 +1,3 @@
-export * from './composition';
 export * from './FormController';
 export * from './utils';
 export * from './validation';

package/src/forms/utils.ts

@@ -1,84 +1,109 @@
-import { FormFieldTypes } from './FormController';
 import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(
-    defaultValue?: boolean,
-    options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
+export function booleanInput(defaultValue?: boolean, options: { rules?: string } = {}): FormFieldDefinition<'boolean'> {
+    return {
+        default: defaultValue,
+        type: 'boolean',
+        rules: options.rules,
+    };
+}
+
+export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'date',
         rules: options.rules,
     };
 }
 
-export function dateInput(
-    defaultValue?: Date,
+export function enumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
     options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Date> {
+): FormFieldDefinition<'enum', string, T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'enum',
         rules: options.rules,
+        values,
     };
 }
 
-export function requiredBooleanInput(
-    defaultValue?: boolean,
-): FormFieldDefinition<typeof FormFieldTypes.Boolean, 'required'> {
+export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Boolean,
+        type: 'boolean',
         rules: 'required',
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'date',
         rules: 'required',
     };
 }
 
-export function requiredNumberInput(
-    defaultValue?: number,
-): FormFieldDefinition<typeof FormFieldTypes.Number, 'required'> {
+export function requiredEnumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
+): FormFieldDefinition<'enum', 'required', T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'enum',
         rules: 'required',
+        values,
     };
 }
 
-export function requiredStringInput(
-    defaultValue?: string,
-): FormFieldDefinition<typeof FormFieldTypes.String, 'required'> {
+export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'number',
         rules: 'required',
     };
 }
 
-export function numberInput(
-    defaultValue?: number,
-    options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
+    return {
+        default: defaultValue,
+        type: 'object',
+        rules: 'required',
+    };
+}
+
+export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
+    return {
+        default: defaultValue,
+        type: 'string',
+        rules: 'required',
+    };
+}
+
+export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'number',
         rules: options.rules,
     };
 }
 
-export function stringInput(
-    defaultValue?: string,
+export function objectInput<T extends object>(
+    defaultValue?: T,
     options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.String> {
+): FormFieldDefinition<'object', string, T> {
+    return {
+        default: defaultValue,
+        type: 'object',
+        rules: options.rules,
+    };
+}
+
+export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'string',
         rules: options.rules,
     };
 }

package/src/forms/validation.ts

@@ -1,9 +1,32 @@
 import { arrayFrom } from '@noeldemartin/utils';
 
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+
 const builtInRules: Record<string, FormFieldValidator> = {
     required: (value) => (value ? undefined : 'required'),
 };
 
+function isValidType(value: unknown, definition: FormFieldDefinition): boolean {
+    if (value === undefined || value === null) {
+        return true;
+    }
+
+    switch (definition.type) {
+        case 'string':
+            return typeof value === 'string';
+        case 'enum':
+            return !!definition.values?.includes(value);
+        case 'number':
+            return typeof value === 'number';
+        case 'boolean':
+            return typeof value === 'boolean';
+        case 'date':
+            return value instanceof Date;
+        case 'object':
+            return typeof value === 'object';
+    }
+}
+
 export type FormFieldValidator<T = unknown> = (value: T) => string | string[] | undefined;
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
@@ -12,6 +35,14 @@ export function defineFormValidationRule<T>(rule: string, validator: FormFieldVa
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
+    if (isValidType(value, definition)) {
+        return [];
+    }
+
+    return ['invalid_value'];
+}
+
 export function validate(value: unknown, rule: string): string[] {
     const errors = validators[rule]?.(value);
 

package/src/index.css

@@ -6,20 +6,24 @@
 @source './';
 
 @theme {
-    --color-background: oklch(1 0 0);
-
     --color-primary: oklch(0.205 0 0);
-    --color-primary-50: color-mix(in_oklab, var(--color-primary-600) 5%, transparent);
-    --color-primary-100: color-mix(in_oklab, var(--color-primary-600) 15%, transparent);
-    --color-primary-200: color-mix(in_oklab, var(--color-primary-600) 30%, transparent);
-    --color-primary-300: color-mix(in_oklab, var(--color-primary-600) 50%, transparent);
-    --color-primary-400: color-mix(in_oklab, var(--color-primary-600) 65%, transparent);
-    --color-primary-500: color-mix(in_oklab, var(--color-primary-600) 80%, transparent);
+    --color-primary-50: color-mix(in oklab, var(--color-primary-600) 5%, transparent);
+    --color-primary-100: color-mix(in oklab, var(--color-primary-600) 15%, transparent);
+    --color-primary-200: color-mix(in oklab, var(--color-primary-600) 30%, transparent);
+    --color-primary-300: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
+    --color-primary-400: color-mix(in oklab, var(--color-primary-600) 65%, transparent);
+    --color-primary-500: color-mix(in oklab, var(--color-primary-600) 80%, transparent);
     --color-primary-600: var(--color-primary);
-    --color-primary-700: color-mix(in_oklab, var(--color-primary-600) 90%, black);
-    --color-primary-800: color-mix(in_oklab, var(--color-primary-600) 80%, black);
-    --color-primary-900: color-mix(in_oklab, var(--color-primary-600) 70%, black);
-    --color-primary-950: color-mix(in_oklab, var(--color-primary-600) 50%, black);
+    --color-primary-700: color-mix(in oklab, var(--color-primary-600) 90%, black);
+    --color-primary-800: color-mix(in oklab, var(--color-primary-600) 80%, black);
+    --color-primary-900: color-mix(in oklab, var(--color-primary-600) 70%, black);
+    --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
+
+    --color-background: oklch(1 0 0);
+    --color-links: var(--color-primary);
+
+    --breakpoint-content: var(--breakpoint-md);
+    --spacing-edge: 1rem;
 }
 
 .clickable {
@@ -52,3 +56,21 @@ button[data-markdown-action] {
     text-decoration: underline;
     font-weight: 500;
 }
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes grow {
+    0% {
+        scale: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/src/lang/index.ts

@@ -4,8 +4,8 @@ import { definePlugin } from '@aerogel/core/plugins';
 
 import Lang from './Lang';
 import settings from './settings';
-import type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
 export { Lang, translate, translateWithDefault };
 export type { LangProvider };

package/src/lang/settings/Language.vue

@@ -7,7 +7,7 @@
         :render-option="renderLocale"
     >
         <div class="grow">
-            <SelectLabel>
+            <SelectLabel class="text-base font-semibold">
                 {{ $td('settings.locale', 'Language') }}
             </SelectLabel>
             <Markdown

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

@@ -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;
@@ -34,12 +33,12 @@ export class EventsService extends Service {
 
     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

@@ -12,6 +12,7 @@ import type { Constructor, Nullable } from '@noeldemartin/utils';
 import type { Store } from 'pinia';
 
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
+import { appNamespace } from '@aerogel/core/utils/app';
 import { defineServiceStore } from '@aerogel/core/services/store';
 import type { Unref } from '@aerogel/core/utils/vue';
 
@@ -164,7 +165,7 @@ export default class Service<
     }
 
     public hasPersistedState(): boolean {
-        return Storage.has(this._name);
+        return Storage.has(this.storageKey);
     }
 
     public hasState<P extends keyof State>(property: P): boolean {
@@ -231,6 +232,10 @@ export default class Service<
         this.setState({ [property]: value } as Partial<State>);
     }
 
+    protected get storageKey(): string {
+        return `${appNamespace()}:${this._name}`;
+    }
+
     protected onStateUpdated(update: Partial<State>, old: Partial<State>): void {
         const persisted = objectOnly(update, this.static('persist'));
 
@@ -250,13 +255,13 @@ export default class Service<
     }
 
     protected onPersistentStateUpdated(persisted: Partial<State>): void {
-        const storage = Storage.get<ServiceStorage>(this._name);
+        const storage = Storage.get<ServiceStorage>(this.storageKey);
 
         if (!storage) {
             return;
         }
 
-        Storage.set(this._name, {
+        Storage.set(this.storageKey, {
             ...storage,
             ...this.serializePersistedState(objectDeepClone(persisted) as Partial<State>),
         });
@@ -303,14 +308,14 @@ export default class Service<
             return;
         }
 
-        if (Storage.has(this._name)) {
-            const persisted = Storage.require<ServiceStorage>(this._name);
+        if (Storage.has(this.storageKey)) {
+            const persisted = Storage.require<ServiceStorage>(this.storageKey);
             this.setState(this.deserializePersistedState(persisted));
 
             return;
         }
 
-        Storage.set(this._name, objectOnly(this.getState(), this.static('persist')));
+        Storage.set(this.storageKey, objectOnly(this.getState(), this.static('persist')));
     }
 
     protected requireStore(): Store<string, State, ComputedState, {}> {

package/src/services/index.ts

@@ -1,4 +1,4 @@
-import type { App as VueApp } from 'vue';
+import type { App as AppInstance } from 'vue';
 
 import { definePlugin } from '@aerogel/core/plugins';
 import { isDevelopment, isTesting } from '@noeldemartin/utils';
@@ -30,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

package/src/testing/index.ts

@@ -2,10 +2,13 @@ import { isTesting } from '@noeldemartin/utils';
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
 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({
@@ -16,6 +19,7 @@ export default definePlugin({
 
         globalThis.testingRuntime = {
             on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            service: (name) => App.service(name),
         };
     },
 });