deja-vue 0.1.0 → 1.0.1

package/README.md

@@ -2,6 +2,10 @@
 
 Declarative GSAP Animations for Vue 3.
 
+## Documentation
+
+View the [full documentation here](https://fiadone.github.io/deja-vue/).
+
 ## Development
 
 - Install dependencies:

package/dist/index.d.ts

@@ -37,7 +37,6 @@ interface NestableAnimation {
 }
 interface WrappableAnimation {
   group?: boolean;
-  initiallyHidden?: boolean;
   tag?: string;
 }
 type BaseAnimation = ControllableAnimation & NestableAnimation & WrappableAnimation;
@@ -81,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;
@@ -97,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;
@@ -114,7 +113,6 @@ declare const __VLS_base$1: _$vue.DefineComponent<TimelineAnimation, {
   onUpdate?: ((...args: any[]) => any) | undefined;
 }>, {
   toggle: boolean;
-  initiallyHidden: boolean;
   tag: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
@@ -130,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;
@@ -145,11 +143,11 @@ type __VLS_WithSlots<T, S> = T & {
 };
 //#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): {
+declare function useAnimation(wrapper: Readonly<ShallowRef<HTMLElement | null>>): {
   animation: Animation;
   controlled: _$vue.ComputedRef<boolean>;
   parent: Animation | null;
-  ready: ShallowRef<boolean, boolean>;
+  progress: ShallowRef<number, number>;
 };
 //#endregion
 //#region src/composables/useAnimationControls.d.ts
@@ -163,4 +161,4 @@ declare function useAnimationNesting(child?: Animation | gsap.Callback | string,
   parent: Animation | null;
 };
 //#endregion
-export { ANIMATION_EVENTS, type 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 };
+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,4 +1,4 @@
-import { Fragment, computed, createBlock, defineComponent, inject, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
+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";
 //#region src/constants.ts
 const ANIMATION_EVENTS = [
@@ -61,7 +61,7 @@ var Animation = class extends EventBus {
 		});
 		(options ? Object.entries(options).filter(([key]) => key.startsWith("on")) : []).forEach(([key, fn]) => {
 			const [firstChar, ...rest] = key.replace(/^on/, "");
-			const event = `${firstChar.toLowerCase()}${rest.join()}`;
+			const event = `${firstChar.toLowerCase()}${rest.join("")}`;
 			this.on(event, fn);
 		});
 	}
@@ -195,29 +195,39 @@ function useAnimationControls(animation, controls) {
 }
 //#endregion
 //#region src/composables/useAnimation.ts
-function useAnimation(wrapper, props, emit, options) {
-	const animation = new Animation(options);
-	const ready = shallowRef(false);
+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);
 		}
-		ready.value = true;
 	});
 	onUnmounted(() => animation.dispose());
 	return {
 		animation,
 		controlled,
 		parent,
-		ready
+		progress
 	};
 }
 //#endregion
@@ -247,11 +257,6 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			required: false
 		},
-		initiallyHidden: {
-			type: Boolean,
-			required: false,
-			default: true
-		},
 		tag: {
 			type: String,
 			required: false,
@@ -271,45 +276,35 @@ 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
 		});
-		provide(parentAnimationInjectionKey, animation);
 		return (_ctx, _cache) => {
 			return __props.tweens ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
 				key: 0,
 				ref_key: "wrapper",
-				ref: wrapper,
-				style: normalizeStyle(__props.initiallyHidden && !unref(ready) ? { visibility: "hidden" } : void 0)
+				ref: wrapper
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
 					animation: unref(animation),
 					controlled: unref(controlled),
 					parent: unref(parent),
-					ready: unref(ready)
+					progress: unref(progress)
 				})]),
 				_: 3
-			}, 8, ["style"])) : renderSlot(_ctx.$slots, "default", {
+			}, 512)) : renderSlot(_ctx.$slots, "default", {
 				key: 1,
 				animation: unref(animation),
 				controlled: unref(controlled),
 				parent: unref(parent),
-				ready: unref(ready)
+				progress: unref(progress)
 			});
 		};
 	}
@@ -341,11 +336,6 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			required: false
 		},
-		initiallyHidden: {
-			type: Boolean,
-			required: false,
-			default: true
-		},
 		tag: {
 			type: String,
 			required: false,
@@ -361,33 +351,30 @@ 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), {
 				ref_key: "wrapper",
-				ref: wrapper,
-				style: normalizeStyle(__props.initiallyHidden && !unref(ready) ? { visibility: "hidden" } : void 0)
+				ref: wrapper
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
 					animation: unref(animation),
 					controlled: unref(controlled),
 					parent: unref(parent),
-					ready: unref(ready)
+					progress: unref(progress)
 				})]),
 				_: 3
-			}, 8, ["style"]);
+			}, 512);
 		};
 	}
 });
 //#endregion
-export { ANIMATION_EVENTS, Callback_default as Callback, PositionMarker_default as PositionMarker, Timeline_default as Timeline, Tween_default as Tween, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
+export { ANIMATION_EVENTS, Animation, Callback_default as Callback, PositionMarker_default as PositionMarker, Timeline_default as Timeline, Tween_default as Tween, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "deja-vue",
   "type": "module",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Declarative GSAP Animations for Vue 3",
   "author": "Andrea 'Fiad' Fiadone <hello@fiad.one>",
   "license": "MIT",
@@ -25,15 +25,16 @@
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch && npm run play",
+    "dev": "tsdown --watch",
     "play": "vite",
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
     "release": "bumpp",
-    "prepublishOnly": "pnpm run build",
+    "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",
@@ -43,16 +44,18 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@tsdown/css": "^0.21.7",
     "@types/node": "^25.5.0",
     "@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": "^24.2.9",
+    "semantic-release": "^25.0.3",
     "tsdown": "^0.21.7",
     "typescript": "^6.0.2",
     "unocss": "^66.6.8",