@oscarpalmer/timer 0.20.0 → 0.21.0

package/dist/timer.js

@@ -1,111 +1,292 @@
-// src/index.ts
-var run = function(timer) {
-  const { _configuration, _state } = timer;
-  _state.active = true;
-  _state.finished = false;
-  const isRepeated = _configuration.count > 1;
-  let index = 0;
+// node_modules/@oscarpalmer/atoms/dist/js/function.mjs
+function noop() {
+}
+
+// src/constants.ts
+var activeTimers = new Set;
+var hiddenTimers = new Set;
+var milliseconds = 1000 / 60;
+
+// src/global.ts
+if (globalThis._oscarpalmer_timers == null) {
+  Object.defineProperty(globalThis, "_oscarpalmer_timers", {
+    get() {
+      return globalThis._oscarpalmer_timer_debug ? [...activeTimers] : [];
+    }
+  });
+}
+
+// src/functions.ts
+function getOptions(options, isRepeated) {
+  return {
+    afterCallback: options.afterCallback,
+    count: getValueOrDefault(options.count, isRepeated ? Number.POSITIVE_INFINITY : 1),
+    errorCallback: options.errorCallback,
+    interval: getValueOrDefault(options.interval, milliseconds, milliseconds),
+    timeout: getValueOrDefault(options.timeout, isRepeated ? Number.POSITIVE_INFINITY : 30000)
+  };
+}
+function getValueOrDefault(value, defaultValue, minimum) {
+  return typeof value === "number" && value > (minimum ?? 0) ? value : defaultValue;
+}
+function work(type, timer, state, options) {
+  if (["continue", "start"].includes(type) && state.active || ["pause", "stop"].includes(type) && !state.active) {
+    return timer;
+  }
+  const { count, interval, timeout } = options;
+  const { isRepeated, minimum } = state;
+  if (["pause", "restart", "stop"].includes(type)) {
+    const isStop = type === "stop";
+    activeTimers.delete(timer);
+    cancelAnimationFrame(state.frame);
+    if (isStop) {
+      options.afterCallback?.(false);
+    }
+    state.active = false;
+    state.frame = undefined;
+    state.paused = !isStop;
+    if (isStop) {
+      state.elapsed = undefined;
+      state.index = undefined;
+    }
+    return type === "restart" ? work("start", timer, state, options) : timer;
+  }
+  state.active = true;
+  state.paused = false;
+  const elapsed = type === "continue" ? +(state.elapsed ?? 0) : 0;
+  let index = type === "continue" ? +(state.index ?? 0) : 0;
+  state.elapsed = elapsed;
+  state.index = index;
+  const total = (count === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : (count - index) * (interval > 0 ? interval : milliseconds)) - elapsed;
+  let current;
   let start;
+  function finish(finished, error) {
+    activeTimers.delete(timer);
+    state.active = false;
+    state.elapsed = undefined;
+    state.frame = undefined;
+    state.index = undefined;
+    if (error) {
+      options.errorCallback?.();
+    }
+    options.afterCallback?.(finished);
+  }
   function step(timestamp) {
-    if (!_state.active) {
+    if (!state.active) {
       return;
     }
+    current ??= timestamp;
     start ??= timestamp;
-    const elapsed = timestamp - start;
-    const elapsedMinimum = elapsed - milliseconds;
-    const elapsedMaximum = elapsed + milliseconds;
-    if (elapsedMinimum < _configuration.time && _configuration.time < elapsedMaximum) {
-      if (_state.active) {
-        _configuration.callbacks.default(index);
+    const time = timestamp - current;
+    state.elapsed = elapsed + (current - start);
+    const finished = time - elapsed >= total;
+    if (timestamp - start >= timeout - elapsed) {
+      finish(finished, !finished);
+      return;
+    }
+    if (finished || time >= minimum) {
+      if (state.active) {
+        state.callback(isRepeated ? index : undefined);
       }
       index += 1;
-      if (isRepeated && index < _configuration.count) {
-        start = undefined;
+      state.index = index;
+      if (!finished && index < count) {
+        current = null;
       } else {
-        _state.finished = true;
-        timer.stop();
+        finish(true, false);
         return;
       }
     }
-    _state.frame = requestAnimationFrame(step);
+    state.frame = requestAnimationFrame(step);
   }
-  _state.frame = requestAnimationFrame(step);
-};
-function repeat(callback, count, afterOrTime, after) {
-  if (typeof count !== "number" || count < 2) {
-    throw new TypeError("A repeated timer must have a number greater than or equal to 2 as its run count");
+  activeTimers.add(timer);
+  state.frame = requestAnimationFrame(step);
+  return timer;
+}
+
+// src/timer.ts
+function repeat(callback, options) {
+  return timer("repeat", callback, options ?? {}, true);
+}
+function timer(type, callback, partial, start) {
+  const isRepeated = type === "repeat";
+  const options = getOptions(partial, isRepeated);
+  const instance = new Timer(type, {
+    callback,
+    isRepeated,
+    active: false,
+    minimum: options.interval - options.interval % milliseconds / 2,
+    paused: false,
+    trace: new TimerTrace
+  }, options);
+  if (start) {
+    instance.start();
   }
-  const afterOrTimeIsFunction = typeof afterOrTime === "function";
-  return new Timer(callback, afterOrTimeIsFunction ? 0 : afterOrTime, count, afterOrTimeIsFunction ? afterOrTime : after).start();
+  return instance;
 }
-function wait(callback, time) {
-  return new Timer(callback, time).start();
+function wait(callback, options) {
+  return timer("wait", callback, options == null || typeof options === "number" ? {
+    interval: options
+  } : options, true);
 }
-var milliseconds = Math.round(16.666666666666668);
 
-class Timer {
+class BasicTimer {
+  constructor(type, state) {
+    this.$timer = type;
+    this.state = state;
+  }
+}
+
+class Timer extends BasicTimer {
   get active() {
-    return this._state.active;
+    return this.state.active;
   }
-  get finished() {
-    return this._state.finished;
+  get paused() {
+    return this.state.paused;
   }
-  constructor(callback, time, count, afterCallback) {
-    if (typeof callback !== "function") {
-      throw new TypeError("A timer must have a callback function");
-    }
-    const actualTime = typeof time === "number" ? time : 0;
-    if (actualTime < 0) {
-      throw new TypeError("A timer must have a non-negative number as its time");
-    }
-    const actualCount = typeof count === "number" ? count : 1;
-    if (actualCount < 1) {
-      throw new TypeError("A timer must have a number greater than or equal to 1 as its run count");
-    }
-    if (actualCount > 1 && afterCallback !== undefined && typeof afterCallback !== "function") {
-      throw new TypeError("A repeated timer's after-callback must be a function");
-    }
-    Object.defineProperty(this, "_configuration", {
-      value: {
-        callbacks: {
-          after: afterCallback,
-          default: callback
-        },
-        count: actualCount,
-        time: actualTime
-      }
-    });
-    Object.defineProperty(this, "_state", {
-      value: {
-        active: false,
-        finished: false
-      }
-    });
+  get trace() {
+    return globalThis._oscarpalmer_timer_debug ? this.state.trace : undefined;
+  }
+  constructor(type, state, options) {
+    super(type, state);
+    this.options = options;
+  }
+  continue() {
+    return work("continue", this, this.state, this.options);
+  }
+  pause() {
+    return work("pause", this, this.state, this.options);
   }
   restart() {
-    this.stop();
-    run(this);
-    return this;
+    return work("restart", this, this.state, this.options);
   }
   start() {
-    if (!this._state.active) {
-      run(this);
+    return work("start", this, this.state, this.options);
+  }
+  stop() {
+    return work("stop", this, this.state, this.options);
+  }
+}
+
+class TimerTrace extends Error {
+  constructor() {
+    super();
+    this.name = "TimerTrace";
+  }
+}
+
+// src/index.ts
+function delay(time, timeout) {
+  return new Promise((resolve, reject) => {
+    wait(resolve ?? noop, {
+      timeout,
+      errorCallback: reject ?? noop,
+      interval: time
+    });
+  });
+}
+
+// src/is.ts
+function is(pattern, value) {
+  return pattern.test(value?.$timer);
+}
+function isRepeated(value) {
+  return is(/^repeat$/, value);
+}
+function isTimer(value) {
+  return is(/^repeat|wait$/, value);
+}
+function isWaited(value) {
+  return is(/^wait$/, value);
+}
+function isWhen(value) {
+  return is(/^when$/, value) && typeof value.then === "function";
+}
+// src/when.ts
+function when(condition, options) {
+  const repeated = timer("repeat", () => {
+    if (condition()) {
+      repeated.stop();
+      state.resolver?.();
     }
+  }, {
+    afterCallback() {
+      if (!repeated.paused) {
+        if (condition()) {
+          state.resolver?.();
+        } else {
+          state.rejecter?.();
+        }
+      }
+    },
+    errorCallback() {
+      state.rejecter?.();
+    },
+    count: options?.count,
+    interval: options?.interval,
+    timeout: options?.timeout
+  }, false);
+  const state = {};
+  state.promise = new Promise((resolve, reject) => {
+    state.resolver = resolve;
+    state.rejecter = reject;
+  });
+  state.timer = repeated;
+  return new When(state);
+}
+
+class When extends BasicTimer {
+  get active() {
+    return this.state.timer.active;
+  }
+  get paused() {
+    return this.state.timer.paused;
+  }
+  constructor(state) {
+    super("when", state);
+  }
+  continue() {
+    this.state.timer.continue();
+    return this;
+  }
+  pause() {
+    this.state.timer.pause();
     return this;
   }
   stop() {
-    this._state.active = false;
-    if (this._state.frame === undefined) {
-      return this;
+    if (this.state.timer.active) {
+      this.state.timer.stop();
+      this.state.rejecter?.();
     }
-    cancelAnimationFrame(this._state.frame);
-    this._configuration.callbacks.after?.(this._state.finished);
-    this._state.frame = undefined;
     return this;
   }
+  then(resolve, reject) {
+    this.state.timer.start();
+    return this.state.promise.then(resolve ?? noop, reject ?? noop);
+  }
 }
+
+// src/index.ts
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) {
+    for (const timer4 of activeTimers) {
+      hiddenTimers.add(timer4);
+      timer4.pause();
+    }
+  } else {
+    for (const timer4 of hiddenTimers) {
+      timer4.continue();
+    }
+    hiddenTimers.clear();
+  }
+});
 export {
+  when,
   wait,
   repeat,
-  Timer
+  isWhen,
+  isWaited,
+  isTimer,
+  isRepeated,
+  delay
 };

package/dist/timer.mjs

@@ -0,0 +1,40 @@
+// src/index.ts
+import {noop} from "@oscarpalmer/atoms/function";
+import {activeTimers, hiddenTimers} from "./constants";
+import"./global";
+import {wait} from "./timer";
+function delay(time, timeout) {
+  return new Promise((resolve, reject) => {
+    wait(resolve ?? noop, {
+      timeout,
+      errorCallback: reject ?? noop,
+      interval: time
+    });
+  });
+}
+import {isRepeated, isTimer, isWaited, isWhen} from "./is";
+import {repeat, wait as wait2} from "./timer";
+import {when} from "./when";
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) {
+    for (const timer2 of activeTimers) {
+      hiddenTimers.add(timer2);
+      timer2.pause();
+    }
+  } else {
+    for (const timer2 of hiddenTimers) {
+      timer2.continue();
+    }
+    hiddenTimers.clear();
+  }
+});
+export {
+  when,
+  wait2 as wait,
+  repeat,
+  isWhen,
+  isWaited,
+  isTimer,
+  isRepeated,
+  delay
+};

package/package.json

@@ -3,39 +3,48 @@
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
+	"dependencies": {
+		"@oscarpalmer/atoms": "0.69.0"
+	},
 	"description": "A better solution for timeout- and interval-based timers.",
 	"devDependencies": {
-		"@biomejs/biome": "^1.4",
-		"@happy-dom/global-registrator": "^12.10",
-		"bun": "^1.0",
-		"typescript": "^5.3"
+		"@biomejs/biome": "^1.8.3",
+		"@happy-dom/global-registrator": "^14.12.3",
+		"@types/bun": "^1.1.6",
+		"bun": "^1.1.21",
+		"dts-bundle-generator": "9.5.1",
+		"typescript": "^5.5.4"
+	},
+	"exports": {
+		".": {
+			"types": "./types/index.d.cts",
+			"bun": "./src/index.ts",
+			"import": "./dist/timer.mjs",
+			"require": "./dist/timer.js"
+		}
 	},
 	"files": ["dist", "src", "types"],
 	"keywords": ["timer", "setTimeout", "setInterval", "requestAnimationFrame"],
 	"license": "MIT",
 	"main": "dist/timer.js",
-	"module": "dist/timer.js",
+	"module": "dist/timer.mjs",
 	"name": "@oscarpalmer/timer",
-	"prettier": {
-		"arrowParens": "avoid",
-		"bracketSpacing": false,
-		"singleQuote": true,
-		"switchIndent": true,
-		"trailingComma": "all",
-		"useTabs": true
-	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/oscarpalmer/timer.git"
 	},
 	"scripts": {
-		"build": "bun build ./src/index.ts --outfile ./dist/timer.js",
-		"test": "bun test --coverage",
-		"types": "bunx tsc -p ./tsconfig.json",
-		"watch": "rollup -c -w",
-		"xo": "xo ./src/*.ts --env browser"
+		"build": "bun run clean && bun run build:cjs && bun run build:esm && bun run types",
+		"build:cjs": "bun build ./src/index.ts --outfile ./dist/timer.js",
+		"build:esm": "bun build ./src/index.ts --external '*' --outfile ./dist/timer.mjs",
+		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
+		"test": "bun test",
+		"types": "bun run types:cjs && bun run types:esm",
+		"types:cjs": "bunx dts-bundle-generator --out-file ./types/index.d.cts --external-inlines '@oscarpalmer/atoms' --no-check --silent ./src/index.ts",
+		"types:esm": "bunx tsc -p ./tsconfig.json",
+		"watch": "bun build ./src/index.ts --outfile ./dist/timer.js --watch"
 	},
 	"type": "module",
-	"types": "src/index.d.ts",
-	"version": "0.20.0"
+	"types": "types/index.d.cts",
+	"version": "0.21.0"
 }

package/src/constants.ts

@@ -0,0 +1,16 @@
+import type {Timer} from './timer';
+
+/**
+ * A set of all active timers
+ */
+export const activeTimers = new Set<Timer>();
+
+/**
+ * A set of timers that were paused due to the document being hidden
+ */
+export const hiddenTimers = new Set<Timer>();
+
+/**
+ * Milliseconds in a frame, probably ;-)
+ */
+export const milliseconds = 1_000 / 60;

package/src/functions.ts

@@ -0,0 +1,151 @@
+import {activeTimers, milliseconds} from './constants';
+import type {TimerOptions, TimerState, WorkType} from './models';
+import type {Timer} from './timer';
+
+export function getOptions(
+	options: Partial<TimerOptions>,
+	isRepeated: boolean,
+): TimerOptions {
+	return {
+		afterCallback: options.afterCallback,
+		count: getValueOrDefault(
+			options.count,
+			isRepeated ? Number.POSITIVE_INFINITY : 1,
+		),
+		errorCallback: options.errorCallback,
+		interval: getValueOrDefault(options.interval, milliseconds, milliseconds),
+		timeout: getValueOrDefault(
+			options.timeout,
+			isRepeated ? Number.POSITIVE_INFINITY : 30_000,
+		),
+	};
+}
+
+export function getValueOrDefault(
+	value: unknown,
+	defaultValue: number,
+	minimum?: number,
+): number {
+	return typeof value === 'number' && value > (minimum ?? 0)
+		? value
+		: defaultValue;
+}
+
+export function work(
+	type: WorkType,
+	timer: Timer,
+	state: TimerState,
+	options: TimerOptions,
+): Timer {
+	if (
+		(['continue', 'start'].includes(type) && state.active) ||
+		(['pause', 'stop'].includes(type) && !state.active)
+	) {
+		return timer;
+	}
+
+	const {count, interval, timeout} = options;
+	const {isRepeated, minimum} = state;
+
+	if (['pause', 'restart', 'stop'].includes(type)) {
+		const isStop = type === 'stop';
+
+		activeTimers.delete(timer);
+
+		cancelAnimationFrame(state.frame as never);
+
+		if (isStop) {
+			options.afterCallback?.(false);
+		}
+
+		state.active = false;
+		state.frame = undefined;
+		state.paused = !isStop;
+
+		if (isStop) {
+			state.elapsed = undefined;
+			state.index = undefined;
+		}
+
+		return type === 'restart' ? work('start', timer, state, options) : timer;
+	}
+
+	state.active = true;
+	state.paused = false;
+
+	const elapsed = type === 'continue' ? +(state.elapsed ?? 0) : 0;
+
+	let index = type === 'continue' ? +(state.index ?? 0) : 0;
+
+	state.elapsed = elapsed;
+	state.index = index;
+
+	const total =
+		(count === Number.POSITIVE_INFINITY
+			? Number.POSITIVE_INFINITY
+			: (count - index) * (interval > 0 ? interval : milliseconds)) - elapsed;
+
+	let current: DOMHighResTimeStamp | null;
+	let start: DOMHighResTimeStamp | null;
+
+	function finish(finished: boolean, error: boolean) {
+		activeTimers.delete(timer);
+
+		state.active = false;
+		state.elapsed = undefined;
+		state.frame = undefined;
+		state.index = undefined;
+
+		if (error) {
+			options.errorCallback?.();
+		}
+
+		options.afterCallback?.(finished);
+	}
+
+	function step(timestamp: DOMHighResTimeStamp): void {
+		if (!state.active) {
+			return;
+		}
+
+		current ??= timestamp;
+		start ??= timestamp;
+
+		const time = timestamp - current;
+
+		state.elapsed = elapsed + (current - start);
+
+		const finished = time - elapsed >= total;
+
+		if (timestamp - start >= timeout - elapsed) {
+			finish(finished, !finished);
+
+			return;
+		}
+
+		if (finished || time >= minimum) {
+			if (state.active) {
+				state.callback((isRepeated ? index : undefined) as never);
+			}
+
+			index += 1;
+
+			state.index = index;
+
+			if (!finished && index < count) {
+				current = null;
+			} else {
+				finish(true, false);
+				return;
+			}
+		}
+
+		state.frame = requestAnimationFrame(step);
+	}
+
+	activeTimers.add(timer);
+
+	state.frame = requestAnimationFrame(step);
+
+	return timer;
+}

package/src/global.ts

@@ -0,0 +1,14 @@
+import {activeTimers} from './constants';
+
+declare global {
+	var _oscarpalmer_timer_debug: boolean | undefined;
+	var _oscarpalmer_timers: Timer[] | undefined;
+}
+
+if (globalThis._oscarpalmer_timers == null) {
+	Object.defineProperty(globalThis, '_oscarpalmer_timers', {
+		get() {
+			return globalThis._oscarpalmer_timer_debug ? [...activeTimers] : [];
+		},
+	});
+}