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

package/src/services/index.ts

@@ -1,6 +1,7 @@
 import type { App as VueApp } 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';
@@ -39,7 +40,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);
     }
 }
@@ -57,12 +58,12 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
     }
 }
 
-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,7 +1,8 @@
+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 { definePlugin } from '@aerogel/core/plugins';
 
 export interface AerogelTestingRuntime {
     on: (typeof Events)['on'];
@@ -9,7 +10,7 @@ export interface AerogelTestingRuntime {
 
 export default definePlugin({
     async install() {
-        if (import.meta.env.MODE !== 'testing') {
+        if (!isTesting()) {
             return;
         }
 

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();
 });

package/src/ui/UI.state.ts

@@ -1,10 +1,10 @@
 import type { Component } from 'vue';
 
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
 
 import { Layouts, getCurrentLayout } from './utils';
 
-export interface Modal<T = unknown> {
+export interface UIModal<T = unknown> {
     id: string;
     properties: Record<string, unknown>;
     component: Component;
@@ -12,14 +12,19 @@ export interface Modal<T = unknown> {
     afterClose: Promise<T | undefined>;
 }
 
+export interface UIModalContext {
+    modal: UIModal;
+    childIndex?: number;
+}
+
 export interface ModalComponent<
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Properties extends Record<string, unknown> = Record<string, unknown>,
+    Properties extends object = object,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Result = unknown
+    Result = unknown,
 > {}
 
-export interface Snackbar {
+export interface UIToast {
     id: string;
     component: Component;
     properties: Record<string, unknown>;
@@ -28,8 +33,8 @@ export interface Snackbar {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as Modal[],
-        snackbars: [] as Snackbar[],
+        modals: [] as UIModal[],
+        toasts: [] as UIToast[],
         layout: getCurrentLayout(),
     },
     computed: {

package/src/ui/UI.ts

@@ -1,18 +1,21 @@
-import { after, facade, fail, required, uuid } from '@noeldemartin/utils';
+import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
 import type { Component } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
 
-import App from '@/services/App';
-import Events from '@/services/Events';
-import type { AcceptRefs } from '@/utils';
-import type { Color } from '@/components/constants';
-import type { SnackbarAction, SnackbarColor } from '@/components/headless/snackbars';
-import type { AGAlertModalProps, AGConfirmModalProps, AGLoadingModalProps, AGPromptModalProps } from '@/components';
+import App from '@aerogel/core/services/App';
+import Events from '@aerogel/core/services/Events';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ConfirmModalCheckboxes, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { ToastAction, ToastVariant } from '@aerogel/core/components/contracts/Toast';
 
 import Service from './UI.state';
 import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
-import type { Modal, ModalComponent, Snackbar } from './UI.state';
+import type { ModalComponent, UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -20,9 +23,8 @@ interface ModalCallbacks<T = unknown> {
 }
 
 type ModalProperties<TComponent> = TComponent extends ModalComponent<infer TProperties, unknown> ? TProperties : never;
-type ModalResult<TComponent> = TComponent extends ModalComponent<Record<string, unknown>, infer TResult>
-    ? TResult
-    : never;
+type ModalResult<TComponent> =
+    TComponent extends ModalComponent<Record<string, unknown>, infer TResult> ? TResult : never;
 
 export const UIComponents = {
     AlertModal: 'alert-modal',
@@ -30,19 +32,17 @@ export const UIComponents = {
     ErrorReportModal: 'error-report-modal',
     LoadingModal: 'loading-modal',
     PromptModal: 'prompt-modal',
-    Snackbar: 'snackbar',
+    Toast: 'toast',
     StartupCrash: 'startup-crash',
 } as const;
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
-export type ConfirmCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
-
 export type ConfirmOptions = AcceptRefs<{
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     actions?: Record<string, () => unknown>;
     required?: boolean;
 }>;
@@ -53,7 +53,8 @@ export type LoadingOptions = AcceptRefs<{
     progress?: number;
 }>;
 
-export interface ConfirmOptionsWithCheckboxes<T extends ConfirmCheckboxes = ConfirmCheckboxes> extends ConfirmOptions {
+export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
+    extends ConfirmOptions {
     checkboxes?: T;
 }
 
@@ -62,16 +63,16 @@ export type PromptOptions = AcceptRefs<{
     defaultValue?: string;
     placeholder?: string;
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     trim?: boolean;
 }>;
 
-export interface ShowSnackbarOptions {
+export interface ToastOptions {
     component?: Component;
-    color?: SnackbarColor;
-    actions?: SnackbarAction[];
+    variant?: ToastVariant;
+    actions?: ToastAction[];
 }
 
 export class UIService extends Service {
@@ -86,7 +87,7 @@ export class UIService extends Service {
     public alert(message: string): void;
     public alert(title: string, message: string): void;
     public alert(messageOrTitle: string, message?: string): void {
-        const getProperties = (): AGAlertModalProps => {
+        const getProperties = (): AlertModalProps => {
             if (typeof message !== 'string') {
                 return { message: messageOrTitle };
             }
@@ -97,14 +98,17 @@ export class UIService extends Service {
             };
         };
 
-        this.openModal(this.requireComponent(UIComponents.AlertModal), getProperties());
+        this.openModal<ModalComponent<AlertModalProps>>(
+            this.requireComponent(UIComponents.AlertModal),
+            getProperties(),
+        );
     }
 
     /* eslint-disable max-len */
     public async confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
     public async confirm(title: string, message: string, options?: ConfirmOptions): Promise<boolean>;
-    public async confirm<T extends ConfirmCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
-    public async confirm<T extends ConfirmCheckboxes>(title: string, message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmModalCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmModalCheckboxes>(title: string, message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
     /* eslint-enable max-len */
 
     public async confirm(
@@ -112,7 +116,7 @@ export class UIService extends Service {
         messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
         options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
     ): Promise<boolean | [boolean, Record<string, boolean>]> {
-        const getProperties = (): AGConfirmModalProps => {
+        const getProperties = (): AcceptRefs<ConfirmModalProps> => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     ...(messageOrOptions ?? {}),
@@ -128,13 +132,20 @@ export class UIService extends Service {
                 required: !!options?.required,
             };
         };
+
+        type ConfirmModalComponent = ModalComponent<
+            AcceptRefs<ConfirmModalProps>,
+            boolean | [boolean, Record<string, boolean>]
+        >;
+
         const properties = getProperties();
-        const modal = await this.openModal<
-            ModalComponent<AGConfirmModalProps, boolean | [boolean, Record<string, boolean>]>
-        >(this.requireComponent(UIComponents.ConfirmModal), properties);
+        const modal = await this.openModal<ConfirmModalComponent>(
+            this.requireComponent(UIComponents.ConfirmModal),
+            properties,
+        );
         const result = await modal.beforeClose;
 
-        const confirmed = typeof result === 'object' ? result[0] : result ?? false;
+        const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
         const checkboxes =
             typeof result === 'object'
                 ? result[1]
@@ -151,7 +162,7 @@ export class UIService extends Service {
                 continue;
             }
 
-            if (confirmed && App.development) {
+            if (confirmed && isDevelopment()) {
                 // eslint-disable-next-line no-console
                 console.warn(`Confirmed confirm modal was suppressed because required '${name}' checkbox was missing`);
             }
@@ -170,22 +181,22 @@ export class UIService extends Service {
         options?: PromptOptions,
     ): Promise<string | null> {
         const trim = options?.trim ?? true;
-        const getProperties = (): AGPromptModalProps => {
+        const getProperties = (): PromptModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
-                } as AGPromptModalProps;
+                } as PromptModalProps;
             }
 
             return {
                 title: messageOrTitle,
                 message: messageOrOptions,
                 ...(options ?? {}),
-            } as AGPromptModalProps;
+            } as PromptModalProps;
         };
 
-        const modal = await this.openModal<ModalComponent<AGPromptModalProps, string | null>>(
+        const modal = await this.openModal<ModalComponent<PromptModalProps, string | null>>(
             this.requireComponent(UIComponents.PromptModal),
             getProperties(),
         );
@@ -203,7 +214,7 @@ export class UIService extends Service {
         operation?: Promise<T> | (() => T),
     ): Promise<T> {
         const processOperation = (o: Promise<T> | (() => T)) => (typeof o === 'function' ? Promise.resolve(o()) : o);
-        const processArgs = (): { operationPromise: Promise<T>; props?: AGLoadingModalProps } => {
+        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
             if (typeof operationOrMessageOrOptions === 'string') {
                 return {
                     props: { message: operationOrMessageOrOptions },
@@ -225,7 +236,9 @@ export class UIService extends Service {
         const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), props);
 
         try {
-            const [result] = await Promise.all([operationPromise, after({ seconds: 1 })]);
+            const result = await operationPromise;
+
+            await after({ ms: 500 });
 
             return result;
         } finally {
@@ -233,23 +246,15 @@ export class UIService extends Service {
         }
     }
 
-    public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
-        const snackbar: Snackbar = {
+    public toast(message: string, options: ToastOptions = {}): void {
+        const { component, ...otherOptions } = options;
+        const toast: UIToast = {
             id: uuid(),
-            properties: { message, ...options },
-            component: markRaw(options.component ?? this.requireComponent(UIComponents.Snackbar)),
+            properties: { message, ...otherOptions },
+            component: markRaw(component ?? this.requireComponent(UIComponents.Toast)),
         };
 
-        this.setState('snackbars', this.snackbars.concat(snackbar));
-
-        setTimeout(() => this.hideSnackbar(snackbar.id), 5000);
-    }
-
-    public hideSnackbar(id: string): void {
-        this.setState(
-            'snackbars',
-            this.snackbars.filter((snackbar) => snackbar.id !== id),
-        );
+        this.setState('toasts', this.toasts.concat(toast));
     }
 
     public registerComponent(name: UIComponent, component: Component): void {
@@ -259,10 +264,10 @@ export class UIService extends Service {
     public async openModal<TModalComponent extends ModalComponent>(
         component: TModalComponent,
         properties?: ModalProperties<TModalComponent>,
-    ): Promise<Modal<ModalResult<TModalComponent>>> {
+    ): Promise<UIModal<ModalResult<TModalComponent>>> {
         const id = uuid();
         const callbacks: Partial<ModalCallbacks<ModalResult<TModalComponent>>> = {};
-        const modal: Modal<ModalResult<TModalComponent>> = {
+        const modal: UIModal<ModalResult<TModalComponent>> = {
             id,
             properties: properties ?? {},
             component: markRaw(component),
@@ -302,7 +307,7 @@ export class UIService extends Service {
         }
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         this.watchModalEvents();
         this.watchMountedEvent();
         this.watchViewportBreakpoints();
@@ -373,13 +378,13 @@ export class UIService extends Service {
 
 export default facade(UIService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'close-modal': { id: string; result?: unknown };
         'hide-modal': { id: string };
         'hide-overlays-backdrop': void;
-        'modal-closed': { modal: Modal; result?: unknown };
-        'modal-will-close': { modal: Modal; result?: unknown };
+        'modal-closed': { modal: UIModal; result?: unknown };
+        'modal-will-close': { modal: UIModal; result?: unknown };
         'show-modal': { id: string };
         'show-overlays-backdrop': void;
     }

package/src/ui/index.ts

@@ -1,16 +1,16 @@
 import type { Component } from 'vue';
 
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import AlertModal from '@aerogel/core/components/ui/AlertModal.vue';
+import ConfirmModal from '@aerogel/core/components/ui/ConfirmModal.vue';
+import ErrorReportModal from '@aerogel/core/components/ui/ErrorReportModal.vue';
+import LoadingModal from '@aerogel/core/components/ui/LoadingModal.vue';
+import PromptModal from '@aerogel/core/components/ui/PromptModal.vue';
+import StartupCrash from '@aerogel/core/components/ui/StartupCrash.vue';
+import Toast from '@aerogel/core/components/ui/Toast.vue';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
 import UI, { UIComponents } from './UI';
-import AGAlertModal from '../components/modals/AGAlertModal.vue';
-import AGConfirmModal from '../components/modals/AGConfirmModal.vue';
-import AGErrorReportModal from '../components/modals/AGErrorReportModal.vue';
-import AGLoadingModal from '../components/modals/AGLoadingModal.vue';
-import AGPromptModal from '../components/modals/AGPromptModal.vue';
-import AGSnackbar from '../components/snackbars/AGSnackbar.vue';
-import AGStartupCrash from '../components/lib/AGStartupCrash.vue';
 import type { UIComponent } from './UI';
 
 const services = { $ui: UI };
@@ -24,13 +24,13 @@ export type UIServices = typeof services;
 export default definePlugin({
     async install(app, options) {
         const defaultComponents = {
-            [UIComponents.AlertModal]: AGAlertModal,
-            [UIComponents.ConfirmModal]: AGConfirmModal,
-            [UIComponents.ErrorReportModal]: AGErrorReportModal,
-            [UIComponents.LoadingModal]: AGLoadingModal,
-            [UIComponents.PromptModal]: AGPromptModal,
-            [UIComponents.Snackbar]: AGSnackbar,
-            [UIComponents.StartupCrash]: AGStartupCrash,
+            [UIComponents.AlertModal]: AlertModal,
+            [UIComponents.ConfirmModal]: ConfirmModal,
+            [UIComponents.ErrorReportModal]: ErrorReportModal,
+            [UIComponents.LoadingModal]: LoadingModal,
+            [UIComponents.PromptModal]: PromptModal,
+            [UIComponents.Toast]: Toast,
+            [UIComponents.StartupCrash]: StartupCrash,
         };
 
         Object.entries({
@@ -42,12 +42,12 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         components?: Partial<Record<UIComponent, Component>>;
     }
 }
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends UIServices {}
 }

package/src/utils/composition/events.ts

@@ -1,13 +1,13 @@
 import { onUnmounted } from 'vue';
 
-import Events from '@/services/Events';
+import Events from '@aerogel/core/services/Events';
 import type {
     EventListener,
     EventWithPayload,
     EventWithoutPayload,
     EventsPayload,
     UnknownEvent,
-} from '@/services/Events';
+} from '@aerogel/core/services/Events';
 
 export function useEvent<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): void;
 export function useEvent<Event extends EventWithPayload>(

package/src/utils/composition/forms.ts

@@ -1,11 +1,12 @@
 import { objectWithout } from '@noeldemartin/utils';
 import { computed, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
 import type { ComputedRef } from 'vue';
 
-export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<unknown>] {
+export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<ClassValue>] {
     const attrs = useAttrs();
-    const className = computed(() => attrs.class);
+    const classes = computed(() => attrs.class);
     const inputAttrs = computed(() => objectWithout(attrs, 'class'));
 
-    return [inputAttrs, className];
+    return [inputAttrs, classes as ComputedRef<ClassValue>];
 }

package/src/utils/markdown.ts

@@ -4,8 +4,8 @@ import { Renderer, marked } from 'marked';
 
 function makeRenderer(): Renderer {
     return tap(new Renderer(), (renderer) => {
-        renderer.link = function(href, title, text) {
-            return Renderer.prototype.link.apply(this, [href, title, text]).replace('<a', '<a target="_blank"');
+        renderer.link = function(link) {
+            return Renderer.prototype.link.apply(this, [link]).replace('<a', '<a target="_blank"');
         };
     });
 }
@@ -21,7 +21,7 @@ function renderActionLinks(html: string): string {
 }
 
 export function renderMarkdown(markdown: string): string {
-    let html = marked(markdown, { mangle: false, headerIds: false, renderer: makeRenderer() });
+    let html = marked(markdown, { renderer: makeRenderer(), async: false });
 
     html = safeHtml(html);
     html = renderActionLinks(html);
@@ -30,7 +30,5 @@ export function renderMarkdown(markdown: string): string {
 }
 
 export function safeHtml(html: string): string {
-    // TODO improve target="_blank" exception
-    // See https://github.com/cure53/DOMPurify/issues/317
     return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
 }

package/src/utils/vdom.ts

@@ -0,0 +1,31 @@
+import { Comment, Static, Text } from 'vue';
+import { toString } from '@noeldemartin/utils';
+import type { VNode } from 'vue';
+
+function renderAttrs(node: VNode): string {
+    return Object.entries(node.props ?? {}).reduce((attrs, [name, value]) => {
+        return attrs + `${name}="${toString(value)}"`;
+    }, '');
+}
+
+export function renderNode(node: VNode | string): string {
+    if (typeof node === 'string') {
+        return node;
+    }
+
+    if (node.type === Comment) {
+        return '';
+    }
+
+    if (node.type === Text || node.type === Static) {
+        return node.children as string;
+    }
+
+    if (node.type === 'br') {
+        return '\n\n';
+    }
+
+    return `<${node.type} ${renderAttrs(node)}>${Array.from(node.children as Array<VNode | string>)
+        .map(renderNode)
+        .join('')}</${node.type}>`;
+}

package/src/utils/vue.ts

@@ -1,18 +1,13 @@
-import { fail } from '@noeldemartin/utils';
+import { fail, toString } from '@noeldemartin/utils';
 import { computed, inject, reactive, ref, watch } from 'vue';
 import type { Directive, InjectionKey, MaybeRef, PropType, Ref, UnwrapNestedRefs } from 'vue';
 
-type BaseProp<T> = {
-    type?: PropType<T>;
-    validator?(value: unknown): boolean;
-};
-
-type RequiredProp<T> = BaseProp<T> & { required: true };
-type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
-
 export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
-export type ComponentProps = Record<string, unknown>;
+export type BaseProp<T> = { type?: PropType<T>; validator?(value: unknown): boolean };
+export type ComponentProps<T = {}> = T & Record<string, unknown>;
+export type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
 export type RefUnion<T> = T extends infer R ? Ref<R> : never;
+export type RequiredProp<T> = BaseProp<T> & { required: true };
 export type Unref<T> = { [K in keyof T]: T[K] extends MaybeRef<infer Value> ? Value : T[K] };
 
 export function arrayProp<T>(defaultValue?: () => T[]): OptionalProp<T[]> {
@@ -29,10 +24,6 @@ export function booleanProp(defaultValue: boolean = false): OptionalProp<boolean
     };
 }
 
-export function componentRef<T>(): Ref<UnwrapNestedRefs<T> | undefined> {
-    return ref<UnwrapNestedRefs<T>>();
-}
-
 export function computedAsync<T>(getter: () => Promise<T>): Ref<T | undefined> {
     const result = ref<T>();
     const asyncValue = computed(getter);
@@ -69,11 +60,11 @@ export function injectReactiveOrFail<T extends object>(
     key: InjectionKey<T> | string,
     errorMessage?: string,
 ): UnwrapNestedRefs<T> {
-    return injectReactive(key) ?? fail(errorMessage ?? `Could not resolve '${key}' injection key`);
+    return injectReactive(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
 }
 
 export function injectOrFail<T>(key: InjectionKey<T> | string, errorMessage?: string): T {
-    return inject(key) ?? fail(errorMessage ?? `Could not resolve '${key}' injection key`);
+    return inject(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
 }
 
 export function listenerProp<T extends Function = Function>(): OptionalProp<T | null> {