a new start

packages/hydecorp/component/src/creators.ts

@@ -0,0 +1,54 @@
+import { Observable, animationFrames } from "rxjs";
+import { map, takeWhile, endWith } from "rxjs/operators";
+
+export function fetchRx(
+	input: RequestInfo,
+	init?: RequestInit,
+): Observable<Response> {
+	return new Observable((observer) => {
+		const controller = new AbortController();
+		const { signal } = controller;
+
+		let response: Response | null = null;
+		fetch(input, { ...init, signal })
+			.then((r) => {
+				response = r;
+				observer.next(r);
+				observer.complete();
+			})
+			.catch((x) => observer.error(x));
+
+		return () => {
+			if (!response) controller.abort();
+		};
+	});
+}
+
+export function fromMediaQuery(
+	mql: MediaQueryList,
+): Observable<MediaQueryListEvent> {
+	return new Observable((o) => {
+		const l = o.next.bind(o);
+		if (mql.onchange) mql.addEventListener("change", l);
+		else mql.addListener(l);
+		return () => {
+			if (mql.onchange) mql.removeEventListener("change", l);
+			else mql.removeListener(l);
+		};
+	});
+}
+
+export function tween(
+	easingFn: (t: number, b: number, c: number, d: number, s?: number) => number,
+	b: number,
+	c: number,
+	d: number,
+	s?: number,
+): Observable<number> {
+	return animationFrames().pipe(
+		map(({ elapsed }) => elapsed),
+		takeWhile((t) => t < d),
+		endWith(d),
+		map((t) => easingFn(t, b, c, d, s)),
+	);
+}