wip

package.json

@@ -22,7 +22,7 @@
         "test:serve-pod": "community-solid-server -l warn"
     },
     "dependencies": {
-        "@aerogel/core": "0.0.0-next.2d501d5a5dfe5863218d65b11ac78ea023da9127",
+        "@aerogel/core": "0.0.0-next.6c539d8e63b397d4bb6c3d61a7f20a4d108b1cdd",
         "@aerogel/plugin-i18n": "0.0.0-next.ee913f442ea0f8f8c64301001984e83797c6b7e3",
         "@aerogel/plugin-offline-first": "0.0.0-next.6c02970f90d4e979a72530f1fa0c650785d6538f",
         "@aerogel/plugin-routing": "0.0.0-next.6c02970f90d4e979a72530f1fa0c650785d6538f",
@@ -31,7 +31,7 @@
         "@headlessui/vue": "^1.7.22",
         "@intlify/unplugin-vue-i18n": "^0.12.2",
         "@noeldemartin/solid-utils": "0.4.0-next.30aceafb9d58f505d02a146d8e81f2e3a041b92f",
-        "@noeldemartin/utils": "0.5.1-next.369ec16c5fa546a6a2e7512501add6b0e5b1a3ac",
+        "@noeldemartin/utils": "0.5.1-next.82707467527729a9fe7c2155959beb4b5ea30b81",
         "@popperjs/core": "^2.11.8",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",

src/main.ts

@@ -3,11 +3,11 @@ import offlineFirst from '@aerogel/plugin-offline-first';
 import routing from '@aerogel/plugin-routing';
 import solid from '@aerogel/plugin-solid';
 import soukai from '@aerogel/plugin-soukai';
+import vivant from '@/vivant/aerogel';
 import { bootstrap } from '@aerogel/core';
 
 import './assets/css/styles.css';
 import App from './App.vue';
-import vivant from './vivant/aerogel';
 import { components } from './components';
 import { globals, services } from './services';
 import { bindings, routes } from './pages';

src/pages/workspace/components/tasks/TasksList.vue

@@ -3,13 +3,12 @@
         tag="ul"
         class="flex flex-col"
         leave-from-class="h-[46px]"
-        leave-active-class="overflow-hidden transition-[height] duration-500"
+        leave-active-class="overflow-hidden transition-[height] duration-500 will-change-[height]"
         leave-to-class="h-0"
         enter-from-class="h-0"
-        enter-active-class="overflow-hidden transition-[height] duration-500"
+        enter-active-class="overflow-hidden transition-[height] duration-500 will-change-[height]"
         enter-to-class="h-[46px]"
         move-class="transition-transform duration-500"
-        disabled
     >
         <TasksListItem
             v-for="task of tasks"

src/services/Focus.state.ts

@@ -1,6 +1,6 @@
 import { defineServiceState } from '@aerogel/core';
-import type AnimatedGroup from '@/vivant/core/AnimatedGroup';
-import type { AnimationHook } from '@/vivant/vue/animations/HookAnimation';
+import type { AnimatedGroup } from '@/vivant/core';
+import type { AnimationHook } from '@/vivant/vue';
 
 export interface FooterAnimation {
     group: AnimatedGroup;

src/vivant/vue/animations/index.ts

@@ -0,0 +1 @@
+export * from './HookAnimation';

src/vivant/vue/components/AnimatedElement.vue

@@ -5,58 +5,20 @@
 </template>
 
 <script setup lang="ts">
-import { elementRef, mixedProp, objectProp, stringProp } from '@aerogel/core';
+import { elementRef, listenerProp, mixedProp, objectProp, stringProp } from '@aerogel/core';
 import { onUnmounted, watchEffect } from 'vue';
 import type { AnimatedGroup } from '@/vivant/core';
-import type { Equals, Obj } from '@noeldemartin/utils';
 
 import { setupAnimatedElement } from '@/vivant/vue/helpers/element-animations';
 import type { AnimationHook } from '@/vivant/vue/animations/HookAnimation';
 
-// TODO extract
-import { listenerProp } from './utils';
-
-type Falsy = null | false | undefined;
-type ObjectWithoutFalsy<T> = { [K in GetRequiredKeysWithoutFalsy<T>]: ValueWithoutFalsy<T[K]> } & {
-    [K in GetOptionalKeysWithoutFalsy<T>]?: ValueWithoutFalsy<T[K]>;
-};
-type ValueWithoutFalsy<T> = T extends null | undefined | false ? never : T;
-type ReplaceFalsy<T> = { [K in keyof T]: ValueWithoutFalsy<T[K]> };
-type GetRequiredKeysWithoutFalsy<T, U extends Record<keyof T, unknown> = ReplaceFalsy<T>> = {
-    [K in keyof T]: Record<string, never> extends Pick<T, K>
-        ? never
-        : U[K] extends never
-        ? never
-        : Equals<T[K], U[K]> extends true
-        ? K
-        : never;
-}[keyof T];
-type GetOptionalKeysWithoutFalsy<T, U extends Record<keyof T, unknown> = ReplaceFalsy<T>> = {
-    [K in keyof T]: Record<string, never> extends Pick<T, K>
-        ? K
-        : U[K] extends never
-        ? never
-        : Equals<T[K], U[K]> extends true
-        ? never
-        : K;
-}[keyof T];
-
-function objectWithoutFalsy<T extends Obj>(obj: T): ObjectWithoutFalsy<T> {
-    const cleanObject = {} as Record<string, unknown>;
-
-    for (const [key, value] of Object.entries(obj)) {
-        if (value === null || value === undefined || value === false) continue;
-
-        cleanObject[key] = value;
-    }
-
-    return cleanObject as ObjectWithoutFalsy<T>;
-}
+import { objectWithoutFalsish } from './utils';
+import type { Falsish } from './utils';
 
 const props = defineProps({
     as: stringProp('div'),
     group: objectProp<AnimatedGroup>(),
-    animation: mixedProp<string | Falsy>(),
+    animation: mixedProp<string | Falsish>(),
     onAnimate: listenerProp<AnimationHook>(),
 });
 const $root = elementRef();
@@ -71,7 +33,7 @@ watchEffect(() => {
 
     cleanup = setupAnimatedElement(
         $root.value,
-        objectWithoutFalsy({
+        objectWithoutFalsish({
             group: props.group,
             animation: props.animation,
             animate: props.onAnimate,

src/vivant/vue/components/AnimatedTransition.vue

@@ -13,63 +13,25 @@
 <script setup lang="ts">
 import { AnimatedGroup, resolveAnimatedGroup } from '@/vivant/core';
 import { computed, nextTick, ref, watch } from 'vue';
-import { mixedProp } from '@aerogel/core';
+import { listenerProp, mixedProp } from '@aerogel/core';
 import { objectOnly } from '@noeldemartin/utils';
 import { onBeforeRouteUpdate, useRoute } from 'vue-router';
-import type { Equals, Obj } from '@noeldemartin/utils';
 
 import { startGroupAnimation } from '@/vivant/vue/helpers/group-animations';
 import type { AnimationHook } from '@/vivant/vue/animations/HookAnimation';
 
-// TODO extract
-import { listenerProp } from './utils';
-
-type Falsy = null | false | undefined;
-type ObjectWithoutFalsy<T> = { [K in GetRequiredKeysWithoutFalsy<T>]: ValueWithoutFalsy<T[K]> } & {
-    [K in GetOptionalKeysWithoutFalsy<T>]?: ValueWithoutFalsy<T[K]>;
-};
-type ValueWithoutFalsy<T> = T extends null | undefined | false ? never : T;
-type ReplaceFalsy<T> = { [K in keyof T]: ValueWithoutFalsy<T[K]> };
-type GetRequiredKeysWithoutFalsy<T, U extends Record<keyof T, unknown> = ReplaceFalsy<T>> = {
-    [K in keyof T]: Record<string, never> extends Pick<T, K>
-        ? never
-        : U[K] extends never
-        ? never
-        : Equals<T[K], U[K]> extends true
-        ? K
-        : never;
-}[keyof T];
-type GetOptionalKeysWithoutFalsy<T, U extends Record<keyof T, unknown> = ReplaceFalsy<T>> = {
-    [K in keyof T]: Record<string, never> extends Pick<T, K>
-        ? K
-        : U[K] extends never
-        ? never
-        : Equals<T[K], U[K]> extends true
-        ? never
-        : K;
-}[keyof T];
-
-function objectWithoutFalsy<T extends Obj>(obj: T): ObjectWithoutFalsy<T> {
-    const cleanObject = {} as Record<string, unknown>;
-
-    for (const [key, value] of Object.entries(obj)) {
-        if (value === null || value === undefined || value === false) continue;
-
-        cleanObject[key] = value;
-    }
-
-    return cleanObject as ObjectWithoutFalsy<T>;
-}
+import { objectWithoutFalsish } from './utils';
+import type { Falsish } from './utils';
 
 const props = defineProps({
-    enterActiveClass: mixedProp<string | Falsy>(),
-    enterFromClass: mixedProp<string | Falsy>(),
-    enterToClass: mixedProp<string | Falsy>(),
-    leaveActiveClass: mixedProp<string | Falsy>(),
-    leaveFromClass: mixedProp<string | Falsy>(),
-    leaveToClass: mixedProp<string | Falsy>(),
-    enterAnimation: mixedProp<string | Falsy>(),
-    leaveAnimation: mixedProp<string | Falsy>(),
+    enterActiveClass: mixedProp<string | Falsish>(),
+    enterFromClass: mixedProp<string | Falsish>(),
+    enterToClass: mixedProp<string | Falsish>(),
+    leaveActiveClass: mixedProp<string | Falsish>(),
+    leaveFromClass: mixedProp<string | Falsish>(),
+    leaveToClass: mixedProp<string | Falsish>(),
+    enterAnimation: mixedProp<string | Falsish>(),
+    leaveAnimation: mixedProp<string | Falsish>(),
     onEnter: listenerProp<AnimationHook>(),
     onLeave: listenerProp<AnimationHook>(),
 });
@@ -78,13 +40,13 @@ const route = useRoute();
 const transitionProps = computed(() => {
     const classProps = objectOnly(props, ['enterActiveClass', 'enterFromClass', 'leaveActiveClass', 'leaveFromClass']);
 
-    return objectWithoutFalsy(classProps);
+    return objectWithoutFalsish(classProps);
 });
 
 async function enter(el: Element, done: Function): Promise<void> {
     await startGroupAnimation(
         el,
-        objectWithoutFalsy({
+        objectWithoutFalsish({
             group: resolveAnimatedGroup(el) ?? new AnimatedGroup(),
             fromClass: props.enterFromClass,
             toClass: props.enterToClass,
@@ -99,7 +61,7 @@ async function enter(el: Element, done: Function): Promise<void> {
 async function leave(el: Element, done: Function): Promise<void> {
     await startGroupAnimation(
         el,
-        objectWithoutFalsy({
+        objectWithoutFalsish({
             group: resolveAnimatedGroup(el) ?? new AnimatedGroup(),
             fromClass: props.leaveFromClass,
             toClass: props.leaveToClass,

src/vivant/vue/components/utils.ts

@@ -1,15 +1,8 @@
-import type { PropType } from 'vue';
+import { objectWithout } from '@noeldemartin/utils';
+import type { Obj, ObjectWithout } from '@noeldemartin/utils';
 
-// TODO extract
-type BaseProp<T> = {
-    type?: PropType<T>;
-    validator?(value: unknown): boolean;
-};
-type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
+export type Falsish = null | undefined | false;
 
-export function listenerProp<T extends Function = Function>(): OptionalProp<T | null> {
-    return {
-        type: Function as PropType<T>,
-        default: null,
-    };
+export function objectWithoutFalsish<T extends Obj>(obj: T): ObjectWithout<T, Falsish> {
+    return objectWithout(obj, (value) => value === null || value === undefined || value === false);
 }

src/vivant/vue/index.ts

@@ -1,3 +1,4 @@
+export * from './animations';
 export * from './components';
 export * from './helpers';
 export { default as directives } from './directives';