chnobli 0.1.4 → 0.1.6

package/src/tests/{properties.test.js → properties.test.ts}

@@ -1,27 +1,28 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/testticker.js';
-import TestResponsiveEvent from '../responsive/testevent.js';
+import TestTicker from '../timing/TestTicker';
+import TestResponsiveEvent from '../responsive/TestEvent';
 import { animate, timeline } from '../chnobli.js';
-import { responsive, curve } from '../utils/utils.js';
-import { el } from '../target/testdomnode.js';
-import { timeout } from 'fire/util.js';
+import { responsive, curve } from '../utils/utils';
+import { el } from '../target/TestDomNode';
+import { timeout } from 'fire/utils';
 
 describe('properties', () => {
 	it('resetprops', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const div = el();
 		const tl = timeline()
 			.add(div, {
 				x: 100,
 				width: 100,
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
 		ticker.run();
-		expect(div.style.transform)
-			.toBe('translate3d(100.000px,0.000px,0.000px)');
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,0.000px,0.000px)',
+		);
 		expect(div.style.width).toBe('100.000px');
 
 		tl.resetProps();
@@ -30,10 +31,9 @@ describe('properties', () => {
 	});
 
 	it('destroy', async () => {
-		const ticker = new TestTicker;
-
-		function runDestroyTest(cleanup, ticker) {
+		const ticker = new TestTicker();
 
+		function runDestroyTest(cleanup: any, ticker: any) {
 			const div = el();
 			cleanup.register(div, 'div');
 			expect(ticker.targets.size()).toBe(0);
@@ -41,15 +41,16 @@ describe('properties', () => {
 				.add(div, {
 					x: 100,
 					width: 100,
-					duration: 10
+					duration: 10,
 				})
 				.play();
 
 			expect(ticker.targets.size()).toBe(1);
 
 			ticker.run();
-			expect(div.style.transform)
-				.toBe('translate3d(100.000px,0.000px,0.000px)');
+			expect(div.style.transform).toBe(
+				'translate3d(100.000px,0.000px,0.000px)',
+			);
 			expect(div.style.width).toBe('100.000px');
 
 			tl.destroy();
@@ -58,35 +59,37 @@ describe('properties', () => {
 			expect(ticker.targets.size()).toBe(0);
 		}
 
-		let resolveCleanupProm;
-		let cleanupProm = new Promise(resolve => resolveCleanupProm = resolve);
+		let resolveCleanupProm: any;
+		let cleanupProm = new Promise(
+			resolve => (resolveCleanupProm = resolve),
+		);
 		const cleanup = new FinalizationRegistry(key => {
 			resolveCleanupProm(key);
 		});
 
 		runDestroyTest(cleanup, ticker);
 
+		// @ts-ignore
 		global.gc();
 
 		const res = await Promise.race([
 			cleanupProm,
-			timeout(2000).then(() => 'timedout')
+			timeout(2000).then(() => 'timedout'),
 		]);
 		expect(res).toBe('div');
 	});
 
 	it('update timeline', () => {
-		const ticker = new TestTicker;
-		const respEv = new TestResponsiveEvent;
+		const ticker = new TestTicker();
+		const respEv = new TestResponsiveEvent();
 
 		const div = el();
 		div.computedStyle.width = '10px';
 
-		const tl = timeline()
-			.add(div, {
-				width: 100,
-				duration: 10
-			});
+		const tl = timeline().add(div, {
+			width: 100,
+			duration: 10,
+		});
 
 		tl.seek(0);
 		ticker.run();
@@ -112,28 +115,28 @@ describe('properties', () => {
 		expect(div.style.width).toBe('60.000px');
 
 		div.computedStyle.width = '30px';
-		respEv.resize();
+		respEv.resize(100, 200);
 		expect(div.style.width).toBe('65.000px');
 	});
 
 	it('responsive', () => {
-		const ticker = new TestTicker;
-		const respEv = new TestResponsiveEvent;
+		const ticker = new TestTicker();
+		const respEv = new TestResponsiveEvent();
 
 		const div = el();
 		div.computedStyle.width = '10px';
 
 		let windowWidth = 16;
 
-		let windowAspectRatio;
+		let windowAspectRatio: any;
 		const resp1 = responsive(() => {
 			windowAspectRatio = windowWidth / 9;
 		});
 
 		const tl = timeline()
 			.add(div, {
-				width: responsive(e => 20 * windowAspectRatio),
-				duration: 10
+				width: responsive(() => 20 * windowAspectRatio),
+				duration: 10,
 			})
 			.addResponsive(resp1);
 
@@ -144,35 +147,37 @@ describe('properties', () => {
 		expect(div.style.width).toBe('35.556px');
 
 		windowWidth = 15;
-		respEv.resize();
+		respEv.resize(100, 200);
 		expect(div.style.width).toBe('33.333px');
 	});
 
 	it('xy', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const div = el();
-		const tl = timeline()
-			.add(div, {
-				xy: curve([
-					{ x: 0, y: 10 },
-					{ x: 100, y: 10 },
-					{ x: 50, y: 20 }
-				]),
-				duration: 10
-			});
+		const tl = timeline().add(div, {
+			xy: curve([
+				{ x: 0, y: 10 },
+				{ x: 100, y: 10 },
+				{ x: 50, y: 20 },
+			]),
+			duration: 10,
+		});
 
 		tl.play();
 		ticker.run(0);
-		expect(div.style.transform)
-			.toBe('translate3d(0.000px,10.000px,0.000px)');
+		expect(div.style.transform).toBe(
+			'translate3d(0.000px,10.000px,0.000px)',
+		);
 
 		ticker.run(5);
-		expect(div.style.transform)
-			.toBe('translate3d(100.000px,10.000px,0.000px)');
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,10.000px,0.000px)',
+		);
 
 		ticker.run();
-		expect(div.style.transform)
-			.toBe('translate3d(50.000px,20.000px,0.000px)');
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,20.000px,0.000px)',
+		);
 	});
-});
+});

package/src/tests/timeline.test.ts

@@ -0,0 +1,290 @@
+import { describe, expect, it } from 'vitest';
+import TestTicker from '../timing/TestTicker';
+import { animate, timeline } from '../chnobli';
+import { el } from '../target/TestDomNode';
+
+describe('timeline', () => {
+	it('empty timeline', () => {
+		const ticker = new TestTicker();
+
+		const tl = timeline();
+		tl.play();
+		const finished = ticker.run();
+		expect(finished).toBe(true);
+	});
+
+	it('single timeline', () => {
+		const ticker = new TestTicker();
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10,
+		});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform).toBe(
+			'translate3d(0.000px,0.000px,0.000px)',
+		);
+
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline set', () => {
+		const ticker = new TestTicker();
+
+		const target = el();
+		const tl = timeline().set(target, {
+			x: 10,
+		});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+	});
+
+	it('offsetTimeline timeline', () => {
+		const ticker = new TestTicker();
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10,
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10,
+		});
+		tl.play();
+
+		ticker.run(10);
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+		ticker.run(1);
+		expect(target.style.transform).toBe(
+			'translate3d(11.000px,0.000px,0.000px)',
+		);
+
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(20.000px,0.000px,0.000px)',
+		);
+	});
+
+	it('timeline seeking', () => {
+		const ticker = new TestTicker();
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10,
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10,
+		});
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		tl.seekMs(11);
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(11.000px,0.000px,0.000px)',
+		);
+
+		tl.seekMs(20);
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(20.000px,0.000px,0.000px)',
+		);
+
+		tl.seekMs(8);
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(8.000px,0.000px,0.000px)',
+		);
+	});
+
+	it('seeking after', () => {
+		const ticker = new TestTicker();
+
+		const target = el();
+		const ani = animate(target, {
+			autoplay: false,
+			duration: 10,
+			x: 10,
+		});
+		ani.seek(2);
+
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+	});
+
+	it('timeline controls', () => {
+		const ticker = new TestTicker();
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10,
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10,
+		});
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(20.000px,0.000px,0.000px)',
+		);
+
+		tl.reset();
+		tl.play();
+		ticker.run(10);
+		expect(target.style.transform).toBe(
+			'translate3d(10.000px,0.000px,0.000px)',
+		);
+
+		tl.reverse();
+		ticker.run(5);
+		expect(target.style.transform).toBe(
+			'translate3d(5.000px,0.000px,0.000px)',
+		);
+
+		tl.reverse();
+		ticker.run();
+		expect(target.style.transform).toBe(
+			'translate3d(20.000px,0.000px,0.000px)',
+		);
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline events', () => {
+		const ticker = new TestTicker();
+
+		const target = el();
+		const tl = timeline()
+			.add(target, {
+				x: 50,
+				duration: 10,
+			})
+			.add(target, {
+				y: 50,
+				duration: 10,
+			});
+
+		let endCounter = 0;
+		tl.on('end', () => (endCounter += 1));
+
+		tl.play();
+		ticker.run(5);
+		expect(endCounter).toBe(0);
+
+		ticker.run();
+		expect(endCounter).toBe(1);
+
+		tl.play();
+		ticker.run();
+		// not sure this is the behaviour we wan't
+		expect(endCounter).toBe(2);
+
+		tl.reverse();
+		ticker.run();
+		expect(endCounter).toBe(2);
+		expect(target.style.transform).toBe(
+			'translate3d(50.000px,50.000px,0.000px)',
+		);
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(3);
+		expect(target.style.transform).toBe('');
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(4);
+	});
+
+	it('nested timeline', () => {
+		const ticker = new TestTicker();
+
+		const target = el();
+		const tl = timeline()
+			.add(target, {
+				width: 50,
+				duration: 10,
+			})
+			.nest(tl => {
+				tl.add(target, {
+					opacity: 0,
+					duration: 5,
+				}).add(target, {
+					opacity: 1,
+					duration: 5,
+				});
+			})
+			.add(target, {
+				height: 50,
+				duration: 10,
+			})
+			.play();
+
+		ticker.run(0);
+		expect(target.style.width).toBe('0.000px');
+		ticker.run(10);
+		expect(target.style.width).toBe('50.000px');
+		expect(target.style.opacity).toBe('1.000');
+		ticker.run(5);
+		expect(target.style.opacity).toBe('0.000');
+		ticker.run(5);
+		expect(target.style.opacity).toBe('1.000');
+		expect(target.style.height).toBe('0.000px');
+		ticker.run(10);
+		expect(target.style.height).toBe('50.000px');
+	});
+});

package/src/tests/{timing.test.js → timing.test.ts}

@@ -1,14 +1,18 @@
 import { describe, expect, it } from 'vitest';
 import Timing, {
-	STATE_BEFORE, STATE_START, STATE_RUNNING, STATE_ENDED, STATE_AFTER
-} from '../timing/timing.js';
+	STATE_BEFORE,
+	STATE_START,
+	STATE_RUNNING,
+	STATE_ENDED,
+	STATE_AFTER,
+} from '../timing/Timing';
 
 describe('timing', () => {
 	it('zero duration', () => {
 		// if duration is zero the position is always 1
 		// and the state is either BEFORE or AFTER
 		const timing = new Timing({
-			duration: 0
+			duration: 0,
 		});
 		expect(timing.duration).toBe(0);
 		expect(timing.state).toBe(STATE_BEFORE);
@@ -21,7 +25,7 @@ describe('timing', () => {
 		expect(timing.position).toBe(1);
 		expect(timing.state).toBe(STATE_AFTER);
 
-		timing.seek(.5);
+		timing.seek(0.5);
 		expect(timing.position).toBe(1);
 		expect(timing.state).toBe(STATE_AFTER);
 
@@ -41,7 +45,7 @@ describe('timing', () => {
 		expect(timing.position).toBe(1);
 		expect(timing.state).toBe(STATE_AFTER);
 
-		timing.seekMs(.5);
+		timing.seekMs(0.5);
 		expect(timing.position).toBe(1);
 		expect(timing.state).toBe(STATE_AFTER);
 
@@ -52,7 +56,7 @@ describe('timing', () => {
 
 	it('short timing', () => {
 		const timing = new Timing({
-			duration: 1
+			duration: 1,
 		});
 		expect(timing.duration).toBe(1);
 		expect(timing.state).toBe(STATE_BEFORE);
@@ -65,8 +69,8 @@ describe('timing', () => {
 		expect(timing.position).toBe(0);
 		expect(timing.state).toBe(STATE_START);
 
-		timing.seek(.5);
-		expect(timing.position).toBe(.5);
+		timing.seek(0.5);
+		expect(timing.position).toBe(0.5);
 		expect(timing.state).toBe(STATE_RUNNING);
 
 		timing.seek(1);
@@ -85,8 +89,8 @@ describe('timing', () => {
 		expect(timing.position).toBe(0);
 		expect(timing.state).toBe(STATE_START);
 
-		timing.seekMs(.5);
-		expect(timing.position).toBe(.5);
+		timing.seekMs(0.5);
+		expect(timing.position).toBe(0.5);
 		expect(timing.state).toBe(STATE_RUNNING);
 
 		timing.seekMs(1);
@@ -100,25 +104,25 @@ describe('timing', () => {
 
 	it('state management', () => {
 		const timing = new Timing({
-			duration: 100
+			duration: 100,
 		});
 
 		timing.advance(20);
 		expect(timing.state).toBe(STATE_RUNNING);
-		expect(timing.position).toBe(.2);
+		expect(timing.position).toBe(0.2);
 
 		timing.advance(20);
 		expect(timing.positionMs()).toBe(40);
 		expect(timing.state).toBe(STATE_RUNNING);
-		expect(timing.position).toBe(.4);
+		expect(timing.position).toBe(0.4);
 
 		timing.advance(20);
 		expect(timing.state).toBe(STATE_RUNNING);
-		expect(Math.floor(timing.position * 10) / 10).toBe(.6);
+		expect(Math.floor(timing.position * 10) / 10).toBe(0.6);
 
 		timing.advance(20);
 		expect(timing.state).toBe(STATE_RUNNING);
-		expect(timing.position).toBe(.8);
+		expect(timing.position).toBe(0.8);
 
 		timing.advance(20);
 		expect(timing.state).toBe(STATE_ENDED);
@@ -131,7 +135,7 @@ describe('timing', () => {
 
 	it('reverse', () => {
 		const timing = new Timing({
-			duration: 100
+			duration: 100,
 		});
 
 		expect(timing.state).toBe(STATE_BEFORE);
@@ -181,9 +185,8 @@ describe('timing', () => {
 		timing.advance(10);
 		expect(timing.position).toBe(0.65);
 
-
 		const timing2 = new Timing({
-			duration: 100
+			duration: 100,
 		});
 
 		timing2.advance(100);
@@ -198,15 +201,15 @@ describe('timing', () => {
 		expect(timing2.state).toBe(STATE_BEFORE);
 		expect(timing2.position).toBe(1);
 
-		timing2.seek(.25);
+		timing2.seek(0.25);
 		expect(timing2.state).toBe(STATE_RUNNING);
-		expect(timing2.position).toBe(.75);
+		expect(timing2.position).toBe(0.75);
 	});
 
 	it('repeat', () => {
 		const timing = new Timing({
 			duration: 100,
-			repeat: -1
+			repeat: -1,
 		});
 
 		// >
@@ -267,4 +270,4 @@ describe('timing', () => {
 		timing.advance(50);
 		expect(timing.position).toBe(0.25);
 	});
-});
+});

package/src/tests/{usecases.test.js → usecases.test.ts}

@@ -1,27 +1,28 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/testticker.js';
-import TestResponsiveEvent from '../responsive/testevent.js';
-import { animate, timeline } from '../chnobli.js';
-import { responsive } from '../utils/utils.js';
-import { el } from '../target/testdomnode.js';
+import TestTicker from '../timing/TestTicker';
+import TestResponsiveEvent from '../responsive/TestEvent';
+import { animate, timeline } from '../chnobli';
+import { responsive } from '../utils/utils';
+import { el } from '../target/TestDomNode';
 
 describe('usecases', () => {
 	it('accordion', () => {
-		const ticker = new TestTicker;
-		const respEv = new TestResponsiveEvent;
+		const ticker = new TestTicker();
+		const respEv = new TestResponsiveEvent();
 
 		const itm = el();
 		const ctn = el();
 		ctn.computedStyle.maxHeight = 'none';
+		// @ts-ignore
 		ctn.scrollHeight = '100px';
 
 		const tl = timeline()
 			.set(itm, {
-				cls: 'open'
+				cls: 'open',
 			})
 			.add(ctn, {
 				maxHeight: responsive(el => el.scrollHeight),
-				duration: 100
+				duration: 100,
 			});
 
 		tl.play();
@@ -40,6 +41,7 @@ describe('usecases', () => {
 		expect(itm.classList.contains('open')).toBe(true);
 
 		// now a resize comes
+		// @ts-ignore
 		ctn.scrollHeight = '200px';
 		tl.update();
 		expect(ctn.style.maxHeight).toBe('200.000px');
@@ -52,6 +54,7 @@ describe('usecases', () => {
 		expect(ctn.style.maxHeight).toBe('176.000px');
 		expect(itm.classList.contains('open')).toBe(true);
 
+		// @ts-ignore
 		ctn.scrollHeight = '150px';
 		respEv.resize(1000, 1000);
 		expect(ctn.style.maxHeight).toBe('132.000px');
@@ -61,4 +64,4 @@ describe('usecases', () => {
 		expect(ctn.style.maxHeight).toBe(undefined);
 		expect(itm.classList.contains('open')).toBe(false);
 	});
-});
+});