a new start

packages/hydecorp/component/.gitignore

@@ -0,0 +1,20 @@
+# Logs
+logs
+*.log
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Remove some common IDE working directories
+.idea
+.vscode
+
+# macOS
+.DS_Store
+
+# Packages
+*.tgz
+
+# Build artifacts
+lib

packages/hydecorp/component/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@hydecorp/component",
+	"version": "1.0.0",
+	"description": "",
+	"type": "module",
+	"main": "lib/index.js",
+	"module": "lib/index.js",
+	"files": [
+		"src",
+		"lib",
+		"typings",
+		"tsconfig.json"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"clean": "rm -rf lib",
+		"test": "exit 0",
+		"build": "tsc --outDir lib",
+		"watch": "tsc --outDir lib -w",
+		"prepack": "pnpm run clean && pnpm run build"
+	},
+	"dependencies": {
+		"@types/resize-observer-browser": "^0.1.7"
+	},
+	"author": "Florian Klampfer <mail@qwtel.com> (https://qwtel.com/)",
+	"license": "MIT",
+	"devDependencies": {
+		"typescript": "^4.5.5"
+	}
+}

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)),
+	);
+}

packages/hydecorp/component/src/element.ts

@@ -0,0 +1,51 @@
+import { LitElement } from "lit";
+import { Subject } from "rxjs";
+
+export class RxLitElement extends LitElement {
+	$connected = new Subject<boolean>();
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.$connected.next(true);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.$connected.next(false);
+	}
+
+	#firstUpdate!: boolean;
+
+	$: any = {};
+
+	firstUpdated() {
+		this.#firstUpdate = true;
+	}
+
+	updated(changedProperties: Map<string, any>) {
+		if (!this.#firstUpdate)
+			for (const prop of changedProperties.keys()) {
+				if (prop in this.$) this.$[prop].next((<any>this)[prop]);
+			}
+		this.#firstUpdate = false;
+	}
+
+	fireEvent<T>(name: string, eventInitDict?: CustomEventInit<T>) {
+		this.dispatchEvent(new CustomEvent(name, eventInitDict));
+		this.dispatchEvent(
+			new CustomEvent(`${this.tagName.toLowerCase()}-${name}`, eventInitDict),
+		);
+	}
+}
+
+export function applyMixins<T>(
+	derivedCtor: Constructor<T>,
+	baseCtors: Constructor<any>[],
+) {
+	baseCtors.forEach((baseCtor) => {
+		Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+			derivedCtor.prototype[name] = baseCtor.prototype[name];
+		});
+	});
+	return derivedCtor;
+}

packages/hydecorp/component/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./creators";
+export * from "./element";
+export * from "./observers";
+export * from "./operators";
+export * from "./util";

packages/hydecorp/component/src/observers.ts

@@ -0,0 +1,45 @@
+import { Observable } from "rxjs";
+
+export function createResizeObservable(
+	el: HTMLElement,
+): Observable<ResizeObserverEntry> {
+	return new Observable((obs) => {
+		const observer = new ResizeObserver((xs) => xs.forEach((x) => obs.next(x)));
+		observer.observe(el);
+		return () => {
+			observer.unobserve(el);
+		};
+	});
+}
+
+export function createMutationObservable(
+	el: HTMLElement,
+	options?: MutationObserverInit,
+): Observable<MutationRecord> {
+	return new Observable((obs) => {
+		const observer = new MutationObserver((xs) =>
+			xs.forEach((x) => obs.next(x)),
+		);
+		observer.observe(el, options);
+		return () => {
+			observer.disconnect();
+		};
+	});
+}
+
+export function createIntersectionObservable(
+	els: HTMLElement | HTMLElement[],
+	options?: IntersectionObserverInit,
+): Observable<IntersectionObserverEntry[]> {
+	return new Observable((obs) => {
+		const observer = new IntersectionObserver((xs) => obs.next(xs), options);
+
+		if (Array.isArray(els)) els.forEach((el) => observer.observe(el));
+		else observer.observe(els);
+
+		return () => {
+			if (Array.isArray(els)) els.forEach((el) => observer.unobserve(el));
+			else observer.unobserve(els);
+		};
+	});
+}

packages/hydecorp/component/src/operators.ts

@@ -0,0 +1,67 @@
+import { Observable, NEVER, OperatorFunction } from "rxjs";
+import {
+	filter,
+	map,
+	switchMap,
+	withLatestFrom,
+	tap,
+	debounceTime,
+} from "rxjs/operators";
+
+export function subscribeWhen<T>(p$: Observable<boolean>) {
+	return (source: Observable<T>) => {
+		return p$.pipe(switchMap((p) => (p ? source : NEVER)));
+	};
+}
+
+export function unsubscribeWhen<T>(p$: Observable<boolean>) {
+	return (source: Observable<T>) => {
+		return p$.pipe(switchMap((p) => (p ? NEVER : source)));
+	};
+}
+
+// export function filterWhen<T>(p$: Observable<boolean>) {
+//   return (source: Observable<T>) => {
+//     return source.pipe(
+//       withLatestFrom(p$),
+//       filter(([, p]) => p),
+//       map(([x]) => x)
+//     );
+//   };
+// };
+
+export function filterWhen<T>(
+	p$: Observable<boolean>,
+	...others: Observable<boolean>[]
+) {
+	return (source: Observable<T>) => {
+		if (others.length === 0) {
+			return source.pipe(
+				withLatestFrom(p$),
+				filter(([, p]) => p),
+				map(([x]) => x),
+			);
+		}
+
+		return source.pipe(
+			withLatestFrom(p$, ...others),
+			filter(([, ...ps]) => ps.every((p) => p)),
+			map(([x]) => x as T),
+		);
+	};
+}
+
+export function bufferDebounceTime<T>(
+	time: number = 0,
+): OperatorFunction<T, T[]> {
+	return (source: Observable<T>) => {
+		let bufferedValues: T[] = [];
+
+		return source.pipe(
+			tap((value) => bufferedValues.push(value)),
+			debounceTime(time),
+			map(() => bufferedValues),
+			tap(() => (bufferedValues = [])),
+		);
+	};
+}

packages/hydecorp/component/src/util.ts

@@ -0,0 +1,51 @@
+export function getScrollHeight() {
+	const h = document.documentElement;
+	const b = document.body;
+	const sh = "scrollHeight";
+	return h[sh] || b[sh];
+}
+
+export function getScrollLeft() {
+	return window.pageXOffset || document.body.scrollLeft;
+}
+
+export function getScrollTop() {
+	return window.pageYOffset || document.body.scrollTop;
+}
+
+export const matches = (el: Element, selector: string) =>
+	(el.matches || (<any>el)["msMatchesSelector"]).call(el, selector);
+
+// Checks if this element or any of its parents matches a given `selector`.
+export function matchesAncestors(
+	el: Element | null,
+	selector: string,
+): Element | null {
+	let curr = el;
+	while (curr != null) {
+		if (matches(curr, selector)) return curr;
+		curr = curr.parentNode instanceof Element ? curr.parentNode : null;
+	}
+	return null;
+}
+
+export function fragmentFromString(strHTML: string): DocumentFragment {
+	return document.createRange().createContextualFragment(strHTML);
+}
+
+type Resolver<T> = (value: T | PromiseLike<T>) => void;
+type Rejector = (reason?: any) => void;
+type ResolvablePromise<T> = Promise<T> & {
+	resolve: Resolver<T>;
+	reject: Rejector;
+};
+export function createResolvablePromise<T>(): ResolvablePromise<T> {
+	let res!: Resolver<T>;
+	let rej!: Rejector;
+	const promise = new Promise(
+		(r, s) => ((res = r), (rej = s)),
+	) as ResolvablePromise<T>;
+	promise.resolve = res;
+	promise.reject = rej;
+	return promise;
+}

packages/hydecorp/component/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"experimentalDecorators": true,
+		"lib": ["DOM", "DOM.Iterable", "ES2020"],
+		"moduleResolution": "Node",
+		"module": "ES2020",
+		"target": "ES2018",
+		"outDir": "lib",
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"inlineSources": true,
+		"strict": true,
+		"importHelpers": true
+	},
+	"include": ["typings/**/*.ts", "src/**/*.ts"]
+}

packages/hydecorp/component/typings/Decorators.d.ts

@@ -0,0 +1,21 @@
+type Constructor<T> = {
+	new (...args: unknown[]): T;
+};
+
+// From the TC39 Decorators proposal
+interface ClassDescriptor {
+	kind: "class";
+	elements: ClassElement[];
+	finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+}
+
+// From the TC39 Decorators proposal
+interface ClassElement {
+	kind: "field" | "method";
+	key: PropertyKey;
+	placement: "static" | "prototype" | "own";
+	initializer?: Function;
+	extras?: ClassElement[];
+	finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+	descriptor?: PropertyDescriptor;
+}