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/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-element',
-  version: '2.0.39',
+  version: '2.0.40',
   description: 'A library for creating custom elements extending the lit element class with additional functionalities.'
 }

ts/classes.cssmanager.ts

@@ -1,5 +1,5 @@
 import { CSSResult, unsafeCSS } from 'lit';
-import * as plugins from './dees-element.plugins.js';
+import * as plugins from './plugins.js';
 import * as domtools from '@design.estate/dees-domtools';
 
 export interface IBdVarTriplet {

ts/classes.dees-element.ts

@@ -1,4 +1,4 @@
-import * as plugins from './dees-element.plugins.js';
+import * as plugins from './plugins.js';
 
 export class DeesElement extends plugins.lit.LitElement {
   // INSTANCE

ts/directives/classes.resolvedirective.ts

@@ -1,6 +1,9 @@
 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;

ts/directives/classes.subscribedirective.ts

@@ -2,6 +2,9 @@ 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;

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';

ts/index.ts

@@ -1,4 +1,4 @@
-import { CssManager } from './dees-element.classes.cssmanager.js';
+import { CssManager } from './classes.cssmanager.js';
 
 // lit exports
 export { html, type TemplateResult, css, unsafeCSS, render, type CSSResult } from 'lit';
@@ -8,31 +8,24 @@ export { customElement } from 'lit/decorators/custom-element.js';
 
 export { property, state, query, queryAll, queryAsync } from 'lit/decorators.js';
 
-export { until } from 'lit/directives/until.js';
-export { asyncAppend } from 'lit/directives/async-append.js';
-
 // domtools exports
 import * as domtools from '@design.estate/dees-domtools';
 export { domtools };
 
 // DeesElements exports
-export * from './dees-element.classes.dees-element.js';
-export * from './dees-element.classes.subscribedirective.js';
-export * from './dees-element.classes.resolvedirective.js';
+export * from './classes.dees-element.js';
+
+// directives exports
+import * as directives from './directives/index.js';
+
+export { directives };
 
 /**
  * a singleton instance of CssManager
  */
 export const cssManager = new CssManager();
 
-// better scoped exports
-import { resolve } from './dees-element.classes.resolvedirective.js';
-import { subscribe } from './dees-element.classes.subscribedirective.js';
 
-export const directives = {
-  resolve,
-  subscribe,
-}
 
 // type exports
 import type { rxjs } from '@push.rocks/smartrx';