@aerogel/core 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2 → 0.0.0-next.9aa7c279868edbedbcee075aef52212597d803fb

package/src/errors/Errors.ts

@@ -2,15 +2,12 @@ import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
-import UI, { UIComponents } from '@aerogel/core/ui/UI';
+import UI from '@aerogel/core/ui/UI';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
+import { Events } from '@aerogel/core/services';
 
 import Service from './Errors.state';
-import { Colors } from '@aerogel/core/components/constants';
-import { Events } from '@aerogel/core/services';
-import type { AGErrorReportModalProps } from '@aerogel/core/components/modals/AGErrorReportModal';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
-import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 export class ErrorsService extends Service {
 
@@ -34,9 +31,7 @@ export class ErrorsService extends Service {
             return;
         }
 
-        UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
-            reports,
-        });
+        UI.openModal(UI.requireComponent('error-report-modal'), { reports });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
@@ -71,20 +66,16 @@ export class ErrorsService extends Service {
             date: new Date(),
         };
 
-        UI.showSnackbar(
+        UI.toast(
             message ??
                 translateWithDefault('errors.notice', 'Something went wrong, but it\'s not your fault. Try again!'),
             {
-                color: Colors.Danger,
+                variant: 'danger',
                 actions: [
                     {
-                        text: translateWithDefault('errors.viewDetails', 'View details'),
+                        label: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
-                        handler: () =>
-                            UI.openModal<ModalComponent<AGErrorReportModalProps>>(
-                                UI.requireComponent(UIComponents.ErrorReportModal),
-                                { reports: [report] },
-                            ),
+                        click: () => UI.openModal(UI.requireComponent('error-report-modal'), { reports: [report] }),
                     },
                 ],
             },

package/src/forms/{Form.test.ts → FormController.test.ts}

@@ -1,11 +1,18 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
+import { tt } from '@noeldemartin/testing';
+import type { Equals } from '@noeldemartin/utils';
+import type { Expect } from '@noeldemartin/testing';
 
-import { useForm } from '@aerogel/core/forms/composition';
-import { numberInput, requiredStringInput } from '@aerogel/core/forms/utils';
+import {
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 
-import { FormFieldTypes } from './Form';
-
-describe('Form', () => {
+describe('FormController', () => {
 
     it('defines magic fields', () => {
         const form = useForm({
@@ -21,7 +28,7 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -39,7 +46,7 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -60,11 +67,11 @@ describe('Form', () => {
         // Arrange
         const form = useForm({
             trimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
             untrimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
                 trim: false,
             },
@@ -84,4 +91,20 @@ describe('Form', () => {
         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 }>(),
+        });
+
+        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 }>>
+        >();
+    });
+
 });

package/src/forms/{Form.ts → FormController.ts}

@@ -1,33 +1,32 @@
 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 } from './validation';
+
+export const __objectType: unique symbol = Symbol();
 
-export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
+export interface FormFieldDefinition<
+    TType extends FormFieldType = FormFieldType,
+    TRules extends string = string,
+    TObjectType = object,
+> {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
+    [__objectType]?: TObjectType;
 }
 
-export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
-export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
+export type FormFieldType = 'string' | '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 TObjectType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType>
-            : GetFormFieldValue<TType> | null
+            ? GetFormFieldValue<TType, TObjectType>
+            : GetFormFieldValue<TType, TObjectType> | null
         : never;
 };
 
@@ -35,24 +34,26 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
+export type GetFormFieldValue<TType, TObjectType = object> = 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
+        : TType extends 'object'
+          ? TObjectType extends object
+              ? TObjectType
+              : object
+          : TType extends 'date'
             ? Date
             : never;
 
-const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
 export type SubmitFormListener = () => unknown;
 export type FocusFormListener = (input: string) => unknown;
 
-export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
+export default class FormController<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
@@ -91,7 +92,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             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;
 
@@ -207,10 +208,10 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return {} as FormData<Fields>;
         }
 
-        const data = Object.entries(fields).reduce((formData, [name, definition]) => {
-            formData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
+        const data = Object.entries(fields).reduce((initialData, [name, definition]) => {
+            initialData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
 
-            return formData;
+            return initialData;
         }, {} as FormData<Fields>);
 
         return reactive(data) as FormData<Fields>;

package/src/forms/index.ts

@@ -1,5 +1,4 @@
-export * from './composition';
-export * from './Form';
+export * from './FormController';
 export * from './utils';
 export * from './validation';
-export { default as Form } from './Form';
+export { default as FormController } from './FormController';

package/src/forms/utils.ts

@@ -1,84 +1,84 @@
-import { FormFieldTypes } from './Form';
-import type { FormFieldDefinition } from './Form';
+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: FormFieldTypes.Boolean,
+        type: 'boolean',
         rules: options.rules,
     };
 }
 
-export function dateInput(
-    defaultValue?: Date,
-    options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Date,
+        type: 'date',
         rules: options.rules,
     };
 }
 
-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 requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'number',
         rules: 'required',
     };
 }
 
-export function requiredStringInput(
-    defaultValue?: string,
-): FormFieldDefinition<typeof FormFieldTypes.String, 'required'> {
+export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.String,
+        type: 'object',
         rules: 'required',
     };
 }
 
-export function numberInput(
-    defaultValue?: number,
-    options: { rules?: string } = {},
-): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
     return {
         default: defaultValue,
-        type: FormFieldTypes.Number,
+        type: 'string',
+        rules: 'required',
+    };
+}
+
+export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+    return {
+        default: defaultValue,
+        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/index.css

@@ -0,0 +1,72 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@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-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);
+}
+
+.clickable {
+    position: relative;
+}
+
+.clickable::after {
+    --clickable-size: 44px;
+    --clickable-inset-by: min(0px, calc((100% - var(--clickable-size)) / 2));
+
+    content: '';
+    position: absolute;
+    top: var(--clickable-inset-by);
+    left: var(--clickable-inset-by);
+    right: var(--clickable-inset-by);
+    bottom: var(--clickable-inset-by);
+}
+
+input[type='number'].appearance-textfield {
+    appearance: textfield;
+}
+
+input[type='number'].appearance-textfield::-webkit-outer-spin-button,
+input[type='number'].appearance-textfield::-webkit-inner-spin-button {
+    appearance: none;
+}
+
+button[data-markdown-action] {
+    color: var(--tw-prose-links);
+    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

@@ -1,7 +1,9 @@
+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 type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
 
@@ -17,6 +19,8 @@ export default definePlugin({
         app.config.globalProperties.$t ??= translate;
         app.config.globalProperties.$td = translateWithDefault;
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });

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>
+                {{ $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/services/App.state.ts

@@ -1,11 +1,20 @@
 import Aerogel from 'virtual:aerogel';
 
 import { getEnv } from '@noeldemartin/utils';
-import type { App } from 'vue';
+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: {
@@ -14,6 +23,7 @@ export default defineServiceState({
         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 '@aerogel/core/services/Events';
 import type { Plugin } from '@aerogel/core/plugins';
-import type { Services } from '@aerogel/core/services';
+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);
 

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(