2.0.27

package.json

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

ts/00_commitinfo_data.ts

@@ -2,7 +2,7 @@
  * autocreated commitinfo by @pushrocks/commitinfo
  */
 export const commitinfo = {
-  name: '@designestate/dees-element',
-  version: '2.0.23',
+  name: '@design.estate/dees-element',
+  version: '2.0.27',
   description: 'a custom element class extending lit element class'
 }

ts/dees-element.classes.resolvedirective.ts

@@ -1,37 +1,50 @@
-import { noChange } from 'lit';
+import { type TemplateResult, 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;
-  sub: rxjs.Subscription | null = null;
+  promise: Promise<unknown> | undefined;
+  hasPromiseSettled: boolean = false;
 
-  render(observable: rxjs.Observable<unknown>) {
-    if (this.observable !== observable) {
-      this.sub?.unsubscribe();
-      this.observable = observable;
+  render(promise: Promise<unknown>) {
+    if (this.promise !== promise) {
+      this.promise = promise;
 
       if (this.isConnected) {
-        this.subscribe(observable);
+        this.handlePromise(promise);
       }
     }
 
     return noChange;
   }
 
-  subscribe(observable: rxjs.Observable<unknown>) {
-    this.sub = observable.subscribe((v: unknown) => {
-      this.setValue(v);
+  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.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!);
+    }
   }
 }
 
 export const resolve = directive(ResolveDirective);
+export const resolveExec = (funcArg: () => Promise<TemplateResult | unknown>) => {
+  return resolve(funcArg());
+}

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

tsconfig.json

@@ -5,6 +5,10 @@
     "target": "ES2022",
     "module": "ES2022",
     "moduleResolution": "nodenext",
-    "esModuleInterop": true
-  }
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }