chnobli 0.1.7 → 0.1.9

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "chnobli",
-	"version": "0.1.7",
+	"version": "0.1.9",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {
 		"docs": "jsdoc -c jsdoc.conf.json",
 		"check": "tsc",
 		"lint": "eslint ./src",
-		"test": "node --expose-gc ./node_modules/.bin/vitest",
-		"test:once": "node --expose-gc ./node_modules/.bin/vitest run",
+		"test": "node --expose-gc ../node_modules/.bin/vitest run",
+		"test:watch": "node --expose-gc ../node_modules/.bin/vitest",
 		"build": "tsc -p tsconfig.build.json",
-		"watch": "tsc -w"
+		"watch": "tsc -w -p tsconfig.build.json"
 	},
 	"repository": {
 		"type": "git",
@@ -18,20 +18,33 @@
 	},
 	"license": "MIT",
 	"exports": {
-		"./easing": "./dist/timing/easing.js",
-		"./utils": "./dist/utils/utils.js",
-		".": "./dist/chnobli.js"
+		"./easing": {
+			"import": "./dist/timing/easing.js",
+			"types": "./dist/timing/easing.d.ts"
+		},
+		"./utils": {
+			"import": "./dist/utils/utils.js",
+			"types": "./dist/utils/utils.d.ts"
+		},
+		"./scroll": {
+			"import": "./dist/scroll/index.js",
+			"types": "./dist/scroll/index.d.ts"
+		},
+		".": {
+			"import": "./dist/chnobli.js",
+			"types": "./dist/chnobli.d.ts"
+		}
 	},
 	"devDependencies": {
 		"eslint": "^8.45.0",
 		"jsdoc": "^4.0.2",
-		"typescript": "^5.1.6",
-		"vitest": "^1.1.3",
 		"prettier": "^3.2.4",
-		"tslib": "^2.6.2"
+		"tslib": "^2.6.2",
+		"typescript": "^5.1.6",
+		"vitest": "^1.1.3"
 	},
 	"dependencies": {
 		"bezier-easing": "^2.1.0",
-		"fire": "npm:fire-lib-js@^0.3.0-alpha.11"
+		"fire": "npm:fire-lib-js@^0.3.0"
 	}
 }

package/src/animation/Animation.ts

@@ -1,8 +1,12 @@
-import Timing, { newTiming, STATE_BEFORE, STATE_AFTER } from '../timing/Timing';
+import Timing, {
+	newTiming,
+	STATE_BEFORE,
+	STATE_AFTER,
+} from '../timing/Timing.js';
 
-import Property, { ParseableValue, newProperty } from '../property/Property';
-import Ticker from '../timing/Ticker';
-import { Target } from '../target/Target';
+import Property, { ParseableValue, newProperty } from '../property/Property.js';
+import Ticker from '../timing/Ticker.js';
+import { Target } from '../target/Target.js';
 
 export default class Animation {
 	timing: Timing;
@@ -112,6 +116,7 @@ class PropertyAnimation<V> {
 	private valueFn: ((pos: number) => ParseableValue) | null;
 
 	private iniResponsive: any;
+	// todo i don't think the types match here?
 	private iniFrom: V | null;
 	private iniTo: V | null;
 
@@ -162,8 +167,7 @@ class PropertyAnimation<V> {
 
 		// init via responsive fn
 		if (this.iniResponsive) {
-			// todo this access to target can't be
-			const value = this.iniResponsive((target as any).target);
+			const value = this.iniResponsive(target.inner());
 
 			if (typeof value === 'object') {
 				if ('from' in value) from = this.prop.parseValue(value.from);

package/src/animation/public.ts

@@ -1,6 +1,20 @@
-import { takeProp } from '../utils/internal';
-import Timeline from '../timeline/public';
-import { staggerMap } from '../stagger/stagger';
+import { takeProp } from '../utils/internal.js';
+import Timeline from '../timeline/public.js';
+import Stagger, { staggerMap } from '../stagger/stagger.js';
+import { Targets } from '../chnobli.js';
+
+export type AnimationProps = {
+	autoplay?: boolean;
+	delay?: number | string | Stagger<number | string>;
+
+	ease?: (t: number) => number;
+
+	onStart?: () => void;
+	onEnd?: () => void;
+
+	// other properties
+	[key: string]: any;
+};
 
 /**
  * The animation consist of a timeline with just one animation
@@ -12,16 +26,36 @@ import { staggerMap } from '../stagger/stagger';
 export default class PublicAnimation {
 	private _tl: Timeline;
 
-	constructor(targets: any, props: Record<string, any> = {}) {
+	constructor(targets: Targets, props: AnimationProps = {}) {
 		const autoplay = parseAutoplay(takeProp(props, 'autoplay', true));
-		const delay = takeProp(props, 'delay', 0);
+		const delay = takeProp<number>(props, 'delay', 0);
 
 		// we don't wan't the ease and duration on the timeline
-		const ease = takeProp(props, 'ease', null);
-		const duration = takeProp(props, 'duration', null);
+		const ease = takeProp<AnimationProps['ease']>(props, 'ease', undefined);
+		const duration = takeProp<number | undefined>(
+			props,
+			'duration',
+			undefined,
+		);
 
 		this._tl = new Timeline(props);
 
+		// events
+		const onStart = takeProp<AnimationProps['onStart']>(
+			props,
+			'onStart',
+			undefined,
+		);
+		if (onStart) this._tl.on('start', onStart);
+
+		// events
+		const onEnd = takeProp<AnimationProps['onEnd']>(
+			props,
+			'onEnd',
+			undefined,
+		);
+		if (onEnd) this._tl.on('end', onEnd);
+
 		props.ease = ease;
 		props.duration = duration;
 
@@ -83,7 +117,7 @@ export default class PublicAnimation {
 	/**
 	 * Returns wether the timeline is set to reversed
 	 */
-	isReversed() {
+	isReversed(): boolean {
 		return this._tl.isReversed();
 	}
 
@@ -101,12 +135,15 @@ export default class PublicAnimation {
 		this._tl.reverse();
 	}
 
-	on(event: string, fn: (...args: any[]) => void) {
+	/**
+	 * @returns a function to call to unregister the event
+	 */
+	on(event: string, fn: (...args: any[]) => void): () => void {
 		return this._tl.on(event, fn);
 	}
 
 	// not wroking
-	onPromise(event: string) {
+	onPromise(event: string): Promise<unknown> {
 		return this._tl.onPromise(event);
 	}
 

package/src/chnobli.ts

@@ -1,7 +1,17 @@
-import Animation from './animation/public';
-import Timeline from './timeline/public';
-import Scroll from './scroll/public';
-import Stagger from './stagger/stagger';
+import Animation, { AnimationProps } from './animation/public.js';
+import Timeline from './timeline/public.js';
+import Stagger, { type StaggerValue } from './stagger/stagger.js';
+import type { Targets, AnimationTarget } from './target/Target.js';
+
+export type {
+	Animation,
+	Timeline,
+	Stagger,
+	Targets,
+	AnimationTarget,
+	StaggerValue,
+	AnimationProps,
+};
 
 // todo maybe add, to, from and fromTo to the animate function
 
@@ -11,22 +21,21 @@ import Stagger from './stagger/stagger';
  * ## Properties
  *
  */
-export function animate(targets: any, props: Record<string, any> = {}) {
+export function animate(
+	targets: Targets,
+	props: AnimationProps = {},
+): Animation {
 	return new Animation(targets, props);
 }
 
-export function timeline(props: Record<string, any> = {}) {
+export function timeline(props: Record<string, any> = {}): Timeline {
 	return new Timeline(props);
 }
 
-export function stagger(value: any) {
+export function stagger<O>(value: StaggerValue<O>): Stagger<O> {
 	return new Stagger(value);
 }
 
-export function scroll(props: Record<string, any> = {}) {
-	return new Scroll(props);
-}
-
 /*
 
 animate(target, {

package/src/property/BasicProperty.ts

@@ -1,6 +1,6 @@
-import Value from '../values/Value';
-import Property, { ParseableValue } from './Property';
-import { Target } from '../target/Target';
+import Value from '../values/Value.js';
+import Property, { ParseableValue } from './Property.js';
+import { Target } from '../target/Target.js';
 
 export default class BasicProperty implements Property<Value> {
 	/**

package/src/property/ClassProperty.ts

@@ -1,5 +1,5 @@
-import { Target } from '../target/Target';
-import Property, { type ParseableValue } from './Property';
+import { Target } from '../target/Target.js';
+import Property, { type ParseableValue } from './Property.js';
 
 export type Interpolated = {
 	add: string[];

package/src/property/Property.ts

@@ -1,8 +1,8 @@
-import { Target } from '../target/Target';
-import TransformProperty, { TRANSFORM_PROPS } from './TransformProperty';
-import TransformXYProperty from './TransformXYProperty';
-import StyleProperty, { STYLE_PROPS } from './StyleProperty';
-import ClassProperty from './ClassProperty';
+import { Target } from '../target/Target.js';
+import TransformProperty, { TRANSFORM_PROPS } from './TransformProperty.js';
+import TransformXYProperty from './TransformXYProperty.js';
+import StyleProperty, { STYLE_PROPS } from './StyleProperty.js';
+import ClassProperty from './ClassProperty.js';
 
 export type ParseableValue = string | number | (string | number)[];
 
@@ -20,6 +20,8 @@ export default interface Property<V, I = V> {
 }
 
 export function newProperty(prop: string, targetType = ''): Property<any> {
+	if (targetType === 'object') return new StyleProperty(prop, false);
+
 	if (targetType !== 'dom')
 		throw new Error('only dom is supported as target');
 

package/src/property/StyleProperty.ts

@@ -1,8 +1,8 @@
-import StyleValue from '../values/StyleValue';
-import Property, { ParseableValue } from './Property';
-import Value from '../values/Value';
-import { Target } from '../target/Target';
-import ColorValue, { RGBA } from '../values/ColorValue';
+import StyleValue from '../values/StyleValue.js';
+import Property, { ParseableValue } from './Property.js';
+import Value from '../values/Value.js';
+import { Target } from '../target/Target.js';
+import ColorValue, { RGBA } from '../values/ColorValue.js';
 
 export const STYLE_PROPS: Record<string, string | [number, string | null]> = {
 	position: 'static',
@@ -41,13 +41,13 @@ export default class StyleProperty
 
 	private _defaultValue: StyleValue | null;
 
-	constructor(name: string) {
+	constructor(name: string, useDefaults: boolean = true) {
 		this.name = name;
 
 		this.from = null;
 		this.to = null;
 
-		const def = STYLE_PROPS[name];
+		const def = useDefaults ? STYLE_PROPS[name] : undefined;
 		if (Array.isArray(def)) {
 			this._defaultValue = new StyleValue([new Value(def[0], def[1])]);
 			this.unit = def[1];

package/src/property/TransformProperty.ts

@@ -1,7 +1,7 @@
-import Value from '../values/Value';
-import BasicProperty from './BasicProperty';
-import { ParseableValue } from './Property';
-import { Target } from '../target/Target';
+import Value from '../values/Value.js';
+import BasicProperty from './BasicProperty.js';
+import { ParseableValue } from './Property.js';
+import { Target } from '../target/Target.js';
 
 export const TRANSFORM_PROPS: Record<string, [number, string | null]> = {
 	x: [0, 'px'],

package/src/property/TransformXYProperty.ts

@@ -1,6 +1,6 @@
-import Value from '../values/Value';
-import Property, { ParseableValue } from './Property';
-import { Target } from '../target/Target';
+import Value from '../values/Value.js';
+import Property, { ParseableValue } from './Property.js';
+import { Target } from '../target/Target.js';
 
 export type XYValue = {
 	x: Value;

package/src/responsive/TestEvent.ts

@@ -1,4 +1,4 @@
-import { Callback } from './ResponsiveEvent';
+import { Callback } from './ResponsiveEvent.js';
 
 export default class TestResponsiveEvent {
 	private _listeners: Set<Callback>;