deja-vue 0.2.0 → 1.0.1

package/README.md

@@ -1,4 +1,4 @@
-# Déjà Vue (beta)
+# Déjà Vue
 
 Declarative GSAP Animations for Vue 3.
 

package/dist/index.d.ts

@@ -57,25 +57,6 @@ type TweenAnimationDefinition = ({
 }) & Pick<NestableAnimation, 'position'>;
 type TweenAnimation = BaseAnimation & TweenAnimationDefinition;
 //#endregion
-//#region src/composables/useAnimation.d.ts
-declare function useAnimation(wrapper: Readonly<ShallowRef<HTMLElement | null>>, props: TimelineAnimation | TweenAnimation, emit: (event: typeof ANIMATION_EVENTS[number], timeline: gsap.core.Timeline) => void, options?: gsap.TimelineVars): {
-  animation: Animation;
-  controlled: _$vue.ComputedRef<boolean>;
-  parent: Animation | null;
-  ready: ShallowRef<boolean, boolean>;
-};
-//#endregion
-//#region src/composables/useAnimationControls.d.ts
-type AnimationControls<C = ControllableAnimation> = { [K in keyof C]?: MaybeRefOrGetter<C[K]> };
-declare function useAnimationControls(animation: Animation, controls: AnimationControls): {
-  controlled: _$vue.ComputedRef<boolean>;
-};
-//#endregion
-//#region src/composables/useAnimationNesting.d.ts
-declare function useAnimationNesting(child?: Animation | gsap.Callback | string, options?: NestableAnimation): {
-  parent: Animation | null;
-};
-//#endregion
 //#region src/components/Callback.vue.d.ts
 type __VLS_Props$1 = NestableAnimation & {
   fn: () => void;
@@ -99,12 +80,12 @@ declare var __VLS_9$1: {
     animation: Animation;
     controlled: boolean;
     parent: Animation | null;
-    ready: boolean;
+    progress: number;
   }, __VLS_11: {
     animation: Animation;
     controlled: boolean;
     parent: Animation | null;
-    ready: boolean;
+    progress: number;
   };
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_9$1) => any;
@@ -115,7 +96,7 @@ declare const __VLS_base$1: _$vue.DefineComponent<TimelineAnimation, {
   animation: Animation;
   controlled: _$vue.ComputedRef<boolean>;
   parent: Animation | null;
-  ready: _$vue.ShallowRef<boolean, boolean>;
+  progress: _$vue.ShallowRef<number, number>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   complete: (...args: any[]) => void;
   interrupt: (...args: any[]) => void;
@@ -147,7 +128,7 @@ declare var __VLS_9: {
   animation: Animation;
   controlled: boolean;
   parent: Animation | null;
-  ready: boolean;
+  progress: number;
 };
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_9) => any;
@@ -161,4 +142,23 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
+//#region src/composables/useAnimation.d.ts
+declare function useAnimation(wrapper: Readonly<ShallowRef<HTMLElement | null>>): {
+  animation: Animation;
+  controlled: _$vue.ComputedRef<boolean>;
+  parent: Animation | null;
+  progress: ShallowRef<number, number>;
+};
+//#endregion
+//#region src/composables/useAnimationControls.d.ts
+type AnimationControls<C = ControllableAnimation> = { [K in keyof C]?: MaybeRefOrGetter<C[K]> };
+declare function useAnimationControls(animation: Animation, controls: AnimationControls): {
+  controlled: _$vue.ComputedRef<boolean>;
+};
+//#endregion
+//#region src/composables/useAnimationNesting.d.ts
+declare function useAnimationNesting(child?: Animation | gsap.Callback | string, options?: NestableAnimation): {
+  parent: Animation | null;
+};
+//#endregion
 export { ANIMATION_EVENTS, Animation, BaseAnimation, _default as Callback, ControllableAnimation, NestableAnimation, _default$1 as PositionMarker, _default$2 as Timeline, TimelineAnimation, _default$3 as Tween, TweenAnimation, TweenAnimationDefinition, WrappableAnimation, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };

package/dist/index.js

@@ -1,5 +1,5 @@
+import { Fragment, computed, createBlock, defineComponent, getCurrentInstance, inject, nextTick, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
 import { gsap } from "gsap";
-import { Fragment, computed, createBlock, defineComponent, inject, nextTick, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region src/constants.ts
 const ANIMATION_EVENTS = [
 	"complete",
@@ -103,23 +103,6 @@ var Animation = class extends EventBus {
 	}
 };
 //#endregion
-//#region src/composables/useAnimationControls.ts
-function useAnimationControls(animation, controls) {
-	const progress = computed(() => toValue(controls.progress));
-	const toggle = computed(() => toValue(controls.toggle));
-	const controlled = computed(() => typeof progress.value === "number" || typeof toggle.value === "boolean");
-	if (controlled.value && toggle.value !== true) animation.timeline.pause();
-	watch(progress, (value) => {
-		if (typeof value !== "number") return;
-		animation.timeline.progress(value);
-	}, { immediate: true });
-	watch(toggle, (value) => {
-		if (typeof value !== "boolean") return;
-		animation.timeline[value ? "play" : "reverse"]();
-	});
-	return { controlled };
-}
-//#endregion
 //#region src/composables/useAnimationNesting.ts
 function useAnimationNesting(child, options) {
 	const parent = options?.parent === null ? null : options?.parent || inject(parentAnimationInjectionKey, null);
@@ -136,33 +119,6 @@ function useAnimationNesting(child, options) {
 	return { parent };
 }
 //#endregion
-//#region src/composables/useAnimation.ts
-function useAnimation(wrapper, props, emit, options) {
-	const animation = new Animation(options);
-	const ready = shallowRef(false);
-	const { controlled } = useAnimationControls(animation, {
-		progress: () => props.progress,
-		toggle: () => props.toggle
-	});
-	const { parent } = useAnimationNesting(animation, props);
-	ANIMATION_EVENTS.forEach((event) => animation.on(event, () => emit(event, animation.timeline)));
-	onMounted(() => {
-		if (wrapper.value) {
-			const target = props.group ? wrapper.value.children : wrapper.value;
-			const definition = "tweens" in props ? props.tweens || [] : props;
-			animation.compose(target, definition);
-		}
-		ready.value = true;
-	});
-	onUnmounted(() => animation.dispose());
-	return {
-		animation,
-		controlled,
-		parent,
-		ready
-	};
-}
-//#endregion
 //#region src/components/Callback.vue
 var Callback_default = /* @__PURE__ */ defineComponent({
 	__name: "Callback",
@@ -221,6 +177,60 @@ var PositionMarker_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/useAnimationControls.ts
+function useAnimationControls(animation, controls) {
+	const progress = computed(() => toValue(controls.progress));
+	const toggle = computed(() => toValue(controls.toggle));
+	const controlled = computed(() => typeof progress.value === "number" || typeof toggle.value === "boolean");
+	if (controlled.value && toggle.value !== true) animation.timeline.pause();
+	watch(progress, (value) => {
+		if (typeof value !== "number") return;
+		animation.timeline.progress(value);
+	}, { immediate: true });
+	watch(toggle, (value) => {
+		if (typeof value !== "boolean") return;
+		animation.timeline[value ? "play" : "reverse"]();
+	});
+	return { controlled };
+}
+//#endregion
+//#region src/composables/useAnimation.ts
+function useAnimation(wrapper) {
+	const { props, emit } = getCurrentInstance();
+	const animation = new Animation("options" in props ? {
+		...props.options,
+		data: {
+			...props.options?.data,
+			totalDuration: Number(props.duration)
+		}
+	} : void 0);
+	const progress = shallowRef(0);
+	const { controlled } = useAnimationControls(animation, {
+		progress: () => props.progress,
+		toggle: () => props.toggle
+	});
+	const { parent } = useAnimationNesting(animation, props);
+	ANIMATION_EVENTS.forEach((event) => animation.on(event, () => emit(event, animation.timeline)));
+	animation.on("update", () => progress.value = animation.timeline.progress());
+	if ("duration" in props) watch(() => props.duration, (duration) => {
+		animation.timeline.data.totalDuration = Number(duration);
+	});
+	onMounted(() => {
+		if (wrapper.value) {
+			const target = props.group ? wrapper.value.children : wrapper.value;
+			const definition = "tweens" in props ? props.tweens || [] : props;
+			animation.compose(target, definition);
+		}
+	});
+	onUnmounted(() => animation.dispose());
+	return {
+		animation,
+		controlled,
+		parent,
+		progress
+	};
+}
+//#endregion
 //#region src/components/Timeline.vue
 var Timeline_default = /* @__PURE__ */ defineComponent({
 	__name: "Timeline",
@@ -266,24 +276,15 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	emits: [...ANIMATION_EVENTS],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
+	setup(__props, { expose: __expose }) {
 		const wrapper = useTemplateRef("wrapper");
-		const { animation, controlled, parent, ready } = useAnimation(wrapper, props, emit, {
-			...props.options,
-			data: {
-				...props.options?.data,
-				totalDuration: Number(props.duration)
-			}
-		});
-		watch(() => props.duration, (duration) => animation.timeline.data.totalDuration = Number(duration));
+		const { animation, controlled, parent, progress } = useAnimation(wrapper);
 		provide(parentAnimationInjectionKey, animation);
 		__expose({
 			animation,
 			controlled,
 			parent,
-			ready
+			progress
 		});
 		return (_ctx, _cache) => {
 			return __props.tweens ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
@@ -295,7 +296,7 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 					animation: unref(animation),
 					controlled: unref(controlled),
 					parent: unref(parent),
-					ready: unref(ready)
+					progress: unref(progress)
 				})]),
 				_: 3
 			}, 512)) : renderSlot(_ctx.$slots, "default", {
@@ -303,7 +304,7 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 				animation: unref(animation),
 				controlled: unref(controlled),
 				parent: unref(parent),
-				ready: unref(ready)
+				progress: unref(progress)
 			});
 		};
 	}
@@ -350,16 +351,14 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	emits: [...ANIMATION_EVENTS],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
+	setup(__props, { expose: __expose }) {
 		const wrapper = useTemplateRef("wrapper");
-		const { animation, controlled, parent, ready } = useAnimation(wrapper, props, emit);
+		const { animation, controlled, parent, progress } = useAnimation(wrapper);
 		__expose({
 			animation,
 			controlled,
 			parent,
-			ready
+			progress
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
@@ -370,7 +369,7 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 					animation: unref(animation),
 					controlled: unref(controlled),
 					parent: unref(parent),
-					ready: unref(ready)
+					progress: unref(progress)
 				})]),
 				_: 3
 			}, 512);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "deja-vue",
   "type": "module",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "description": "Declarative GSAP Animations for Vue 3",
   "author": "Andrea 'Fiad' Fiadone <hello@fiad.one>",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "prepublishOnly": "npm run build",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "commit": "cz"
   },
   "peerDependencies": {
     "gsap": "^3.0.0",
@@ -50,6 +51,8 @@
     "@vitejs/plugin-vue": "^6.0.5",
     "@vitest/browser-playwright": "^4.1.2",
     "bumpp": "^11.0.1",
+    "commitizen": "^4.3.1",
+    "cz-conventional-changelog": "^3.3.0",
     "gsap": "^3.15.0",
     "playwright": "^1.58.2",
     "semantic-release": "^25.0.3",