@aerogel/core 0.0.0-next.f1f5a990033d966dc0bb12d251110fbc9350dcc7 → 0.0.0-next.f8c757d83e1e0d001a2836fa45aba318ec17b9b9

package/src/ui/index.ts

@@ -1,20 +1,22 @@
 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 AGSnackbar from '../components/snackbars/AGSnackbar.vue';
-import AGStartupCrash from '../components/lib/AGStartupCrash.vue';
 import type { UIComponent } from './UI';
 
 const services = { $ui: UI };
 
 export * from './UI';
+export * from './utils';
 export { default as UI } from './UI';
 
 export type UIServices = typeof services;
@@ -22,12 +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.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({
@@ -39,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/ui/utils.ts

@@ -0,0 +1,16 @@
+export const MOBILE_BREAKPOINT = 768;
+
+export const Layouts = {
+    Mobile: 'mobile',
+    Desktop: 'desktop',
+} as const;
+
+export type Layout = (typeof Layouts)[keyof typeof Layouts];
+
+export function getCurrentLayout(): Layout {
+    if (globalThis.innerWidth > MOBILE_BREAKPOINT) {
+        return Layouts.Desktop;
+    }
+
+    return Layouts.Mobile;
+}

package/src/utils/classes.ts

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { computed, unref } from 'vue';
+import { cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+import type { ComputedRef, PropType, Ref } from 'vue';
+import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
+
+export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
+export type Variants<T extends Record<string, string | boolean>> = Required<{
+    [K in keyof T]: Exclude<T[K], undefined> extends string
+        ? { [key in Exclude<T[K], undefined>]: string | null }
+        : { true: string | null; false: string | null };
+}>;
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function computedVariantClasses<T>(
+    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+    config: { baseClasses?: string } & CVAConfig<T>,
+): ComputedRef<string> {
+    return computed(() => {
+        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
+        const { baseClasses: configBaseClasses, ...configs } = config;
+        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
+        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
+            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+
+            return extractedValues;
+        }, {} as CVAProps<T>);
+
+        return classes(variants(values), unref(valueBaseClasses));
+    });
+}
+
+export function classes(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}

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,21 @@
 import { objectWithout } from '@noeldemartin/utils';
-import { computed, useAttrs } from 'vue';
+import { computed, inject, onUnmounted, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
 import type { ComputedRef } from 'vue';
+import type { FormController } from '@aerogel/core/forms';
+import type { Nullable } from '@noeldemartin/utils';
 
-export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<unknown>] {
+export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
+    const form = inject<FormController | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}
+
+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/composition/persistent.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+import { Storage } from '@noeldemartin/utils';
+
+import { persistent } from './persistent';
+
+describe('Vue persistent helper', () => {
+
+    it('serializes to localStorage', async () => {
+        // Arrange
+        const store = persistent<{ foo?: string }>('foobar', {});
+
+        // Act
+        store.foo = 'bar';
+
+        await nextTick();
+
+        // Assert
+        expect(Storage.get('foobar')).toEqual({ foo: 'bar' });
+    });
+
+    it('reads from localStorage', async () => {
+        // Arrange
+        Storage.set('foobar', { foo: 'bar' });
+
+        // Act
+        const store = persistent<{ foo?: string }>('foobar', {});
+
+        // Assert
+        expect(store.foo).toEqual('bar');
+    });
+
+});

package/src/utils/composition/persistent.ts

@@ -0,0 +1,11 @@
+import { reactive, toRaw, watch } from 'vue';
+import { Storage } from '@noeldemartin/utils';
+import type { UnwrapNestedRefs } from 'vue';
+
+export function persistent<T extends object>(name: string, defaults: T): UnwrapNestedRefs<T> {
+    const store = reactive<T>(Storage.get<T>(name) ?? defaults);
+
+    watch(store, () => Storage.set(name, toRaw(store)));
+
+    return store;
+}

package/src/utils/composition/state.test.ts

@@ -0,0 +1,47 @@
+import { after } from '@noeldemartin/utils';
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+
+import { computedDebounce } from './state';
+
+describe('Vue state helpers', () => {
+
+    it('computes debounced state', async () => {
+        // Initial
+        const state = ref(0);
+        const value = computedDebounce({ delay: 90 }, () => state.value);
+
+        expect(value.value).toBe(null);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(0);
+
+        // Update
+        state.value = 42;
+
+        expect(value.value).toBe(0);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(42);
+
+        // Debounced Update
+        state.value = 23;
+
+        expect(value.value).toBe(42);
+
+        await after({ ms: 50 });
+
+        state.value = 32;
+
+        await after({ ms: 50 });
+
+        expect(value.value).toBe(42);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(32);
+    });
+
+});

package/src/utils/composition/state.ts

@@ -0,0 +1,33 @@
+import { debounce } from '@noeldemartin/utils';
+import { computed, ref, watch, watchEffect } from 'vue';
+import type { ComputedGetter, ComputedRef, Ref } from 'vue';
+
+export interface ComputedDebounceOptions<T> {
+    initial?: T;
+    delay?: number;
+}
+
+export function computedAsync<T>(getter: () => Promise<T>): Ref<T | undefined> {
+    const result = ref<T>();
+    const asyncValue = computed(getter);
+
+    watch(asyncValue, async () => (result.value = await asyncValue.value), { immediate: true });
+
+    return result;
+}
+
+export function computedDebounce<T>(options: ComputedDebounceOptions<T>, getter: ComputedGetter<T>): ComputedRef<T>;
+export function computedDebounce<T>(getter: ComputedGetter<T>): ComputedRef<T | null>;
+export function computedDebounce<T>(
+    optionsOrGetter: ComputedGetter<T> | ComputedDebounceOptions<T>,
+    inputGetter?: ComputedGetter<T>,
+): ComputedRef<T> {
+    const inputOptions = inputGetter ? (optionsOrGetter as ComputedDebounceOptions<T>) : {};
+    const getter = inputGetter ?? (optionsOrGetter as ComputedGetter<T>);
+    const state = ref(inputOptions.initial ?? null);
+    const update = debounce((value) => (state.value = value), inputOptions.delay ?? 300);
+
+    watchEffect(() => update(getter()));
+
+    return state as unknown as ComputedRef<T>;
+}

package/src/utils/index.ts

@@ -1,5 +1,8 @@
+export * from './classes';
 export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
-export * from './tailwindcss';
+export * from './composition/persistent';
+export * from './composition/state';
+export * from './markdown';
 export * from './vue';

package/src/utils/markdown.test.ts

@@ -0,0 +1,50 @@
+/* eslint-disable max-len */
+import { describe, expect, it } from 'vitest';
+
+import { renderMarkdown } from './markdown';
+
+describe('Markdown utils', () => {
+
+    it('renders basic markdown', () => {
+        // Arrange
+        const expectedHTML = `
+            <h1>Title</h1>
+            <p>body with <a target="_blank" href="https://example.com">link</a></p>
+            <ul>
+                <li>One</li>
+                <li>Two</li>
+                <li>Three</li>
+            </ul>
+        `;
+
+        // Act
+        const html = renderMarkdown(
+            ['# Title', 'body with [link](https://example.com)', '- One', '- Two', '- Three'].join('\n'),
+        );
+
+        // Assert
+        expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
+    });
+
+    it('renders button links', () => {
+        // Arrange
+        const expectedHTML = `
+            <p><button type="button" data-markdown-action="do-something">link</button></p>
+        `;
+
+        // Act
+        const html = renderMarkdown('[link](#action:do-something)');
+
+        // Assert
+        expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
+    });
+
+});
+
+function normalizeHTML(html: string): string {
+    return html
+        .split('\n')
+        .map((line) => line.trim())
+        .join('\n')
+        .trim();
+}

package/src/utils/markdown.ts

@@ -1,21 +1,34 @@
-import { tap } from '@noeldemartin/utils';
 import DOMPurify from 'dompurify';
+import { stringMatchAll, tap } from '@noeldemartin/utils';
 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"');
         };
     });
 }
 
+function renderActionLinks(html: string): string {
+    const matches = stringMatchAll<3>(html, /<a[^>]*href="#action:([^"]+)"[^>]*>([^<]+)<\/a>/g);
+
+    for (const [link, action, text] of matches) {
+        html = html.replace(link, `<button type="button" data-markdown-action="${action}">${text}</button>`);
+    }
+
+    return html;
+}
+
 export function renderMarkdown(markdown: string): string {
-    return safeHtml(marked(markdown, { mangle: false, headerIds: false, renderer: makeRenderer() }));
+    let html = marked(markdown, { renderer: makeRenderer(), async: false });
+
+    html = safeHtml(html);
+    html = renderActionLinks(html);
+
+    return html;
 }
 
 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/vue.ts

@@ -1,61 +1,21 @@
-import { fail } from '@noeldemartin/utils';
-import { computed, inject, reactive, ref, watch } from 'vue';
-import type { Directive, InjectionKey, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import { fail, toString } from '@noeldemartin/utils';
+import { Comment, Static, Text, inject, reactive } from 'vue';
+import type { Directive, InjectionKey, MaybeRef, Ref, UnwrapNestedRefs, VNode } from 'vue';
 
-type BaseProp<T> = {
-    type?: PropType<T>;
-    validator?(value: unknown): boolean;
-};
+export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
+export type RefUnion<T> = T extends infer R ? Ref<R> : never;
+export type Unref<T> = { [K in keyof T]: T[K] extends MaybeRef<infer Value> ? Value : T[K] };
 
-type RequiredProp<T> = BaseProp<T> & { required: true };
-type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
-
-export type ComponentProps = Record<string, unknown>;
-
-export function arrayProp<T>(defaultValue?: () => T[]): OptionalProp<T[]> {
-    return {
-        type: Array as PropType<T[]>,
-        default: defaultValue ?? (() => []),
-    };
-}
-
-export function booleanProp(defaultValue: boolean = false): OptionalProp<boolean> {
-    return {
-        type: Boolean,
-        default: defaultValue,
-    };
-}
-
-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);
-
-    watch(asyncValue, async () => (result.value = await asyncValue.value), { immediate: true });
-
-    return result;
+function renderVNodeAttrs(node: VNode): string {
+    return Object.entries(node.props ?? {}).reduce((attrs, [name, value]) => {
+        return attrs + `${name}="${toString(value)}"`;
+    }, '');
 }
 
 export function defineDirective(directive: Directive): Directive {
     return directive;
 }
 
-export function enumProp<Enum extends Record<string, unknown>>(
-    enumeration: Enum,
-    defaultValue?: Enum[keyof Enum],
-): OptionalProp<Enum[keyof Enum]> {
-    const values = Object.values(enumeration) as Enum[keyof Enum][];
-
-    return {
-        type: String as unknown as PropType<Enum[keyof Enum]>,
-        default: defaultValue ?? values[0] ?? null,
-        validator: (value) => values.includes(value as Enum[keyof Enum]),
-    };
-}
-
 export function injectReactive<T extends object>(key: InjectionKey<T> | string): UnwrapNestedRefs<T> | undefined {
     const value = inject(key);
 
@@ -66,90 +26,31 @@ 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`);
-}
-
-export function mixedProp<T>(type?: PropType<T>): OptionalProp<T | null> {
-    return {
-        type,
-        default: null,
-    };
-}
-
-export function numberProp(): OptionalProp<number | null>;
-export function numberProp(defaultValue: number): OptionalProp<number>;
-export function numberProp(defaultValue: number | null = null): OptionalProp<number | null> {
-    return {
-        type: Number,
-        default: defaultValue,
-    };
-}
-
-export function objectProp<T = Object>(): OptionalProp<T | null>;
-export function objectProp<T>(defaultValue: () => T): OptionalProp<T>;
-export function objectProp<T = Object>(defaultValue: (() => T) | null = null): OptionalProp<T | null> {
-    return {
-        type: Object,
-        default: defaultValue,
-    };
-}
-
-export function requiredArrayProp<T>(): RequiredProp<T[]> {
-    return {
-        type: Array as PropType<T[]>,
-        required: true,
-    };
+    return inject(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
 }
 
-export function requiredEnumProp<Enum extends Record<string, unknown>>(
-    enumeration: Enum,
-): RequiredProp<Enum[keyof Enum]> {
-    const values = Object.values(enumeration);
+export function renderVNode(node: VNode | string): string {
+    if (typeof node === 'string') {
+        return node;
+    }
 
-    return {
-        type: String as unknown as PropType<Enum[keyof Enum]>,
-        required: true,
-        validator: (value) => values.includes(value),
-    };
-}
-
-export function requiredMixedProp<T>(type?: PropType<T>): RequiredProp<T> {
-    return {
-        type,
-        required: true,
-    };
-}
+    if (node.type === Comment) {
+        return '';
+    }
 
-export function requiredNumberProp(): RequiredProp<number> {
-    return {
-        type: Number,
-        required: true,
-    };
-}
+    if (node.type === Text || node.type === Static) {
+        return node.children as string;
+    }
 
-export function requiredObjectProp<T = Object>(): RequiredProp<T> {
-    return {
-        type: Object,
-        required: true,
-    };
-}
-
-export function requiredStringProp(): RequiredProp<string> {
-    return {
-        type: String,
-        required: true,
-    };
-}
+    if (node.type === 'br') {
+        return '\n\n';
+    }
 
-export function stringProp(): OptionalProp<string | null>;
-export function stringProp(defaultValue: string): OptionalProp<string>;
-export function stringProp(defaultValue: string | null = null): OptionalProp<string | null> {
-    return {
-        type: String,
-        default: defaultValue,
-    };
+    return `<${node.type} ${renderVNodeAttrs(node)}>${Array.from(node.children as Array<VNode | string>)
+        .map(renderVNode)
+        .join('')}</${node.type}>`;
 }