2.0.26

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-element",
-  "version": "2.0.24",
+  "version": "2.0.26",
   "private": false,
   "description": "a custom element class extending lit element class",
   "main": "dist_ts/index.js",

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-element',
-  version: '2.0.24',
+  version: '2.0.26',
   description: 'a custom element class extending lit element class'
 }

ts/dees-element.classes.resolvedirective.ts

@@ -1,36 +1,46 @@
 import { noChange } from 'lit';
 import { AsyncDirective, directive } from 'lit/async-directive.js';
-import { rxjs } from '@push.rocks/smartrx';
 
 class ResolveDirective extends AsyncDirective {
-  observable: rxjs.Observable<unknown> | undefined;
+  promise: Promise<unknown> | undefined;
-  sub: rxjs.Subscription | null = null;
+  hasPromiseSettled: boolean = false;
 
-  render(observable: rxjs.Observable<unknown>) {
+  render(promise: Promise<unknown>) {
-    if (this.observable !== observable) {
+    if (this.promise !== promise) {
-      this.sub?.unsubscribe();
+      this.promise = promise;
-      this.observable = observable;
 
       if (this.isConnected) {
-        this.subscribe(observable);
+        this.handlePromise(promise);
       }
     }
 
     return noChange;
   }
 
-  subscribe(observable: rxjs.Observable<unknown>) {
+  handlePromise(promise: Promise<unknown>) {
-    this.sub = observable.subscribe((v: unknown) => {
+    this.hasPromiseSettled = false;
-      this.setValue(v);
+
+    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.sub?.unsubscribe();
+    this.hasPromiseSettled = true; // prevent setting value if the promise settles after disconnection
   }
 
   reconnected() {
-    this.subscribe(this.observable!);
+    if (!this.hasPromiseSettled) {
+      this.handlePromise(this.promise!);
+    }
   }
 }
 

ts/index.ts

@@ -1,7 +1,7 @@
 import { CssManager } from './dees-element.classes.cssmanager.js';
 
 // lit exports
-export { html, type TemplateResult, css, unsafeCSS, render } from 'lit';
+export { html, type TemplateResult, css, unsafeCSS, render, type CSSResult } from 'lit';
 export { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export { customElement } from 'lit/decorators/custom-element.js';
@@ -24,3 +24,12 @@ export * from './dees-element.classes.resolvedirective.js';
  * 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,
+}