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.

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2025-04-18 - 2.0.40 - 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.
+
+- Updated versions for @git.zone/tsbuild, tsbundle, tstest, tapbundle, and lit.
+- Changed dependency @design.estate/dees-domtools from ^2.0.61 to ^2.3.2.
+- Reorganized internal file structure: moved code from dees-element.classes.* to classes.* and re-exported via index.
+- Added packageManager field in package.json for pnpm configuration.
+
 ## 2024-10-04 - 2.0.39 - fix(core)
 Update dependency version for @design.estate/dees-domtools
 

package.json

@@ -14,17 +14,17 @@
     "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.84",
-    "@git.zone/tsbundle": "^2.0.15",
-    "@git.zone/tstest": "^1.0.90",
-    "@push.rocks/tapbundle": "^5.3.0",
-    "@types/node": "^22.7.4"
+    "@git.zone/tsbuild": "^2.3.2",
+    "@git.zone/tsbundle": "^2.2.5",
+    "@git.zone/tstest": "^1.0.96",
+    "@push.rocks/tapbundle": "^5.6.3",
+    "@types/node": "^22.14.1"
   },
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.61",
+    "@design.estate/dees-domtools": "^2.3.2",
     "@push.rocks/isounique": "^1.0.5",
     "@push.rocks/smartrx": "^3.0.7",
-    "lit": "^3.2.0"
+    "lit": "^3.3.0"
   },
   "browserslist": [
     "last 1 chrome versions"
@@ -52,5 +52,6 @@
     "web components",
     "reactive programming",
     "DOM manipulation"
-  ]
+  ],
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

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