@aerogel/core 0.0.0-next.aa6e27a9c197d1ee10c9fe018ee8c0fc6ff77767 → 0.0.0-next.abea39863ad0f7c484b8b1f365870e43e9bdd0ba

package/src/utils/vue.ts

@@ -1,55 +1,26 @@
 import { fail, toString } from '@noeldemartin/utils';
-import { computed, inject, reactive, ref, watch } from 'vue';
-import type { Directive, InjectionKey, MaybeRef, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import { Comment, Static, Text, inject, reactive } from 'vue';
+import type { Directive, InjectionKey, MaybeRef, Ref, UnwrapNestedRefs, VNode } from 'vue';
 
 export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
-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[]> {
-    return {
-        type: Array as PropType<T[]>,
-        default: defaultValue ?? (() => []),
-    };
+function renderVNodeAttrs(node: VNode): string {
+    return Object.entries(node.props ?? {}).reduce((attrs, [name, value]) => {
+        return attrs + `${name}="${toString(value)}"`;
+    }, '');
 }
 
-export function booleanProp(defaultValue: boolean = false): OptionalProp<boolean> {
-    return {
-        type: Boolean,
-        default: defaultValue,
-    };
-}
-
-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 defineDirective(directive: Directive): Directive {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function defineDirective<TValue = any, TModifiers extends string = string>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    directive: Directive<any, TValue, TModifiers>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Directive<any, TValue, TModifiers> {
     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);
 
@@ -67,92 +38,24 @@ export function injectOrFail<T>(key: InjectionKey<T> | string, errorMessage?: st
     return inject(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
 }
 
-export function listenerProp<T extends Function = Function>(): OptionalProp<T | null> {
-    return {
-        type: Function as PropType<T>,
-        default: null,
-    };
-}
-
-export function mixedProp<T>(type?: PropType<T>): OptionalProp<T | null>;
-export function mixedProp<T>(type: PropType<T>, defaultValue: T): OptionalProp<T>;
-export function mixedProp<T>(type?: PropType<T>, defaultValue?: T): OptionalProp<T | null> {
-    return {
-        type,
-        default: defaultValue ?? 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 renderVNode(node: VNode | string): string {
+    if (typeof node === 'string') {
+        return node;
+    }
 
-export function requiredArrayProp<T>(): RequiredProp<T[]> {
-    return {
-        type: Array as PropType<T[]>,
-        required: true,
-    };
-}
+    if (node.type === Comment) {
+        return '';
+    }
 
-export function requiredEnumProp<Enum extends Record<string, unknown>>(
-    enumeration: Enum,
-): RequiredProp<Enum[keyof Enum]> {
-    const values = Object.values(enumeration);
+    if (node.type === Text || node.type === Static) {
+        return node.children as string;
+    }
 
-    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,
-    };
-}
-
-export function requiredNumberProp(): RequiredProp<number> {
-    return {
-        type: Number,
-        required: true,
-    };
-}
-
-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}>`;
 }

package/src/components/composition.ts

@@ -1,23 +0,0 @@
-import { customRef } from 'vue';
-import type { Ref } from 'vue';
-
-import { getElement } from '@aerogel/core/components/utils';
-
-export function elementRef(): Ref<HTMLElement | undefined> {
-    return customRef((track, trigger) => {
-        let value: HTMLElement | undefined = undefined;
-
-        return {
-            get() {
-                track();
-
-                return value;
-            },
-            set(newValue) {
-                value = getElement(newValue);
-
-                trigger();
-            },
-        };
-    });
-}

package/src/components/contracts/shared.ts

@@ -1,9 +0,0 @@
-import type { Ref } from 'vue';
-
-export interface HasElement {
-    $el: Readonly<Ref<HTMLElement | undefined>>;
-}
-
-export interface __SetsElement {
-    __setElement(element?: HTMLElement): void;
-}

package/src/components/utils.ts

@@ -1,107 +0,0 @@
-import clsx from 'clsx';
-import { computed, customRef, inject, onUnmounted, unref } from 'vue';
-import { cva } from 'class-variance-authority';
-import { isObject } from '@noeldemartin/utils';
-import { twMerge } from 'tailwind-merge';
-import type { ClassValue } from 'clsx';
-import type { ComputedRef, ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
-import type { GetClosureArgs, GetClosureResult, Nullable } from '@noeldemartin/utils';
-
-import type { HasElement } from '@aerogel/core/components/contracts/shared';
-import type { FormController } from '@aerogel/core/forms';
-
-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));
-}
-
-export function elementRef(): Ref<HTMLElement | undefined> {
-    return customRef((track, trigger) => {
-        let value: HTMLElement | undefined = undefined;
-
-        return {
-            get() {
-                track();
-
-                return value;
-            },
-            set(newValue) {
-                value = getElement(newValue);
-
-                trigger();
-            },
-        };
-    });
-}
-
-export function extractComponentProps<TDefinitions extends {}, TValues extends ExtractPropTypes<TDefinitions>>(
-    values: TValues,
-    definitions: TDefinitions,
-): PickComponentProps<TValues, TDefinitions> {
-    return Object.keys(definitions).reduce(
-        (extracted, prop) => {
-            extracted[prop] = values[prop as keyof TValues];
-
-            return extracted;
-        },
-        {} as Record<string, unknown>,
-    ) as PickComponentProps<TValues, TDefinitions>;
-}
-
-export function getElement(value: unknown): HTMLElement | undefined {
-    if (value instanceof HTMLElement) {
-        return value;
-    }
-
-    if (hasElement(value)) {
-        return value.$el;
-    }
-}
-
-export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
-    return isObject(value) && '$el' in value;
-}
-
-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?.());
-}

package/src/forms/composition.ts

@@ -1,6 +0,0 @@
-import FormController from '@aerogel/core/forms/FormController';
-import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/FormController';
-
-export function useForm<const T extends FormFieldDefinitions>(fields: T): FormController<T> & FormData<T> {
-    return new FormController(fields) as FormController<T> & FormData<T>;
-}

package/src/utils/tailwindcss.test.ts

@@ -1,26 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { removeInteractiveClasses } from './tailwindcss';
-
-describe('TailwindCSS utils', () => {
-
-    it('Removes interactive classes', () => {
-        const cases: [string, string][] = [
-            ['text-red hover:text-green', 'text-red'],
-            ['text-red hover:text-green text-lg', 'text-red text-lg'],
-            [
-                `
-                    text-red text-lg
-                    focus:text-yellow
-                    hover:focus:text-black
-                `,
-                'text-red text-lg',
-            ],
-        ];
-
-        cases.forEach(([original, expected]) => {
-            expect(removeInteractiveClasses(original)).toEqual(expected);
-        });
-    });
-
-});

package/src/utils/tailwindcss.ts

@@ -1,7 +0,0 @@
-export function removeInteractiveClasses(classes: string): string {
-    return classes
-        .split(/\s+/)
-        .filter((className) => !/^(hover|focus|focus-visible):/.test(className))
-        .join(' ')
-        .trim();
-}

package/src/utils/vdom.ts

@@ -1,31 +0,0 @@
-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}>`;
-}