2.0.19

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-element",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "private": false,
   "description": "a custom element class extending lit element class",
   "main": "dist_ts/index.js",
@@ -21,7 +21,7 @@
     "@types/node": "^18.11.18"
   },
   "dependencies": {
-    "@designestate/dees-domtools": "^2.0.22",
+    "@designestate/dees-domtools": "^2.0.25",
     "@pushrocks/isounique": "^1.0.5",
     "@pushrocks/smartrx": "^3.0.0",
     "lit": "^2.2.3"

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@designestate/dees-domtools': ^2.0.22
+  '@designestate/dees-domtools': ^2.0.25
   '@gitzone/tsbuild': ^2.1.61
   '@gitzone/tsbundle': ^2.0.7
   '@gitzone/tstest': ^1.0.70
@@ -12,7 +12,7 @@ specifiers:
   lit: ^2.2.3
 
 dependencies:
-  '@designestate/dees-domtools': 2.0.24
+  '@designestate/dees-domtools': 2.0.25
   '@pushrocks/isounique': 1.0.5
   '@pushrocks/smartrx': 3.0.0
   lit: 2.5.0
@@ -116,8 +116,8 @@ packages:
       - supports-color
     dev: false
 
-  /@designestate/dees-domtools/2.0.24:
+  /@designestate/dees-domtools/2.0.25:
-    resolution: {integrity: sha512-/bSFnYq9cDrc/CIhrArl9AblS737C4tcq2svNVOsbSfphGlRFvOP8QfT2X6KDhvlLDn/mabD2lOvyquK8FbAlQ==}
+    resolution: {integrity: sha512-j0Nbvp0lQ744QxYIiyXB8Pfsb5UW6o/eY0lxTPycMj+q/ynDIyVWz1o8JcrqtgJIV1m6IN3p0LFLEvkaYUvxOQ==}
     dependencies:
       '@apiglobal/typedrequest': 2.0.12
       '@designestate/dees-comms': 1.0.22

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-element',
-  version: '2.0.17',
+  version: '2.0.19',
   description: 'a custom element class extending lit element class'
 }

ts/dees-element.classes.asyncdirective.ts

@@ -0,0 +1,37 @@
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { rxjs } from '@pushrocks/smartrx';
+
+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/index.ts

@@ -16,7 +16,8 @@ import * as domtools from '@designestate/dees-domtools';
 export { domtools };
 
 // DeesElements exports
-export { DeesElement } from './dees-element.classes.dees-element.js';
+export * from './dees-element.classes.dees-element.js';
+export * from './dees-element.classes.asyncdirective.js';
 
 /**
  * a singleton instance of CssManager