fix(dees-element): Refactor project structure and update dependency versions. Internal modules (e.g. dees-element classes and directives) have been reorganized and deprecated paths removed, and package.json now includes an updated packageManager field.

ts/directives/classes.resolvedirective.ts

@@ -0,0 +1,53 @@
+import { type TemplateResult, noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+
+/**
+ * Resolves a promise and sets the value of the directive
+ */
+class ResolveDirective extends AsyncDirective {
+  promise: Promise<unknown> | undefined;
+  hasPromiseSettled: boolean = false;
+
+  render(promise: Promise<unknown>) {
+    if (this.promise !== promise) {
+      this.promise = promise;
+
+      if (this.isConnected) {
+        this.handlePromise(promise);
+      }
+    }
+
+    return noChange;
+  }
+
+  handlePromise(promise: Promise<unknown>) {
+    this.hasPromiseSettled = false;
+
+    promise.then((value) => {
+      if (this.promise === promise && !this.hasPromiseSettled) {
+        this.setValue(value);
+        this.hasPromiseSettled = true;
+      }
+    }).catch((error) => {
+      if (this.promise === promise && !this.hasPromiseSettled) {
+        this.setValue(error);
+        this.hasPromiseSettled = true;
+      }
+    });
+  }
+
+  disconnected() {
+    this.hasPromiseSettled = true; // prevent setting value if the promise settles after disconnection
+  }
+
+  reconnected() {
+    if (!this.hasPromiseSettled) {
+      this.handlePromise(this.promise!);
+    }
+  }
+}
+
+export const resolve = directive(ResolveDirective);
+export const resolveExec = (funcArg: () => Promise<TemplateResult | unknown>) => {
+  return resolve(funcArg());
+}

ts/directives/classes.subscribedirective.ts

@@ -0,0 +1,40 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { rxjs } from '@push.rocks/smartrx';
+
+/**
+ * Subscribes to an observable
+ */
+class SubscribeDirective extends AsyncDirective {
+  observable: rxjs.Observable<unknown> | undefined;
+  sub: rxjs.Subscription | null = null;
+
+  render(observable: rxjs.Observable<unknown>) {
+    if (this.observable !== observable) {
+      this.sub?.unsubscribe();
+      this.observable = observable;
+
+      if (this.isConnected) {
+        this.subscribe(observable);
+      }
+    }
+
+    return noChange;
+  }
+
+  subscribe(observable: rxjs.Observable<unknown>) {
+    this.sub = observable.subscribe((v: unknown) => {
+      this.setValue(v);
+    });
+  }
+
+  disconnected() {
+    this.sub?.unsubscribe();
+  }
+
+  reconnected() {
+    this.subscribe(this.observable!);
+  }
+}
+
+export const subscribe = directive(SubscribeDirective);

ts/directives/classes.subscribewithtemplate.ts

@@ -0,0 +1,51 @@
+import { type TemplateResult, noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { rxjs } from '@push.rocks/smartrx';
+
+/**
+ * Subscribes to an observable and applies a template function to each emission.
+ * @param observable - the source Observable
+ * @param templateFn - function mapping each emitted value to a TemplateResult or other renderable content
+ */
+class SubscribeWithTemplateDirective extends AsyncDirective {
+  private observable?: rxjs.Observable<unknown>;
+  private templateFn?: (value: unknown) => TemplateResult | unknown;
+  private sub: rxjs.Subscription | null = null;
+
+  render(
+    observable: rxjs.Observable<unknown>,
+    templateFn: (value: unknown) => TemplateResult | unknown
+  ) {
+    const changed = this.observable !== observable || this.templateFn !== templateFn;
+    if (changed) {
+      this.sub?.unsubscribe();
+      this.observable = observable;
+      this.templateFn = templateFn;
+      if (this.isConnected) {
+        this.startSubscription();
+      }
+    }
+    return noChange;
+  }
+
+  private startSubscription() {
+    this.sub = this.observable!.subscribe((v: unknown) => {
+      const out = this.templateFn!(v);
+      this.setValue(out);
+    });
+  }
+
+  disconnected() {
+    this.sub?.unsubscribe();
+  }
+
+  reconnected() {
+    this.startSubscription();
+  }
+}
+
+/**
+ * Directive that renders templates for each emission of an Observable.
+ * Usage: html`${subscribeWithTemplate(myObservable, v => html`<span>${v}</span>`)}`
+ */
+export const subscribeWithTemplate = directive(SubscribeWithTemplateDirective);

ts/directives/index.ts

@@ -0,0 +1,13 @@
+// better scoped exports
+import { resolve } from './classes.resolvedirective.js';
+import { subscribe } from './classes.subscribedirective.js';
+
+export {
+  resolve,
+  subscribe,
+}
+
+export { subscribeWithTemplate } from './classes.subscribewithtemplate.js';
+
+export { until } from 'lit/directives/until.js';
+export { asyncAppend } from 'lit/directives/async-append.js';