a new start

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