Compare commits
14 Commits
Author | SHA1 | Date | |
---|---|---|---|
a8e7d2f335 | |||
219390e895 | |||
e321286259 | |||
5f141feb50 | |||
7b99c70275 | |||
9f3b396633 | |||
8dd48fdc05 | |||
2538f59769 | |||
216a605f93 | |||
0808b9a5f9 | |||
dc13ad997b | |||
1c7c1c2432 | |||
969cd12725 | |||
f2aa825f95 |
@ -119,6 +119,6 @@ jobs:
|
|||||||
run: |
|
run: |
|
||||||
npmci node install stable
|
npmci node install stable
|
||||||
npmci npm install
|
npmci npm install
|
||||||
pnpm install -g @gitzone/tsdoc
|
pnpm install -g @git.zone/tsdoc
|
||||||
npmci command tsdoc
|
npmci command tsdoc
|
||||||
continue-on-error: true
|
continue-on-error: true
|
||||||
|
16
package.json
16
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@design.estate/dees-element",
|
"name": "@design.estate/dees-element",
|
||||||
"version": "2.0.25",
|
"version": "2.0.32",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "a custom element class extending lit element class",
|
"description": "a custom element class extending lit element class",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
@ -14,17 +14,17 @@
|
|||||||
"buildDocs": "tsdoc"
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.66",
|
"@git.zone/tsbuild": "^2.1.70",
|
||||||
"@gitzone/tsbundle": "^2.0.8",
|
"@git.zone/tsbundle": "^2.0.10",
|
||||||
"@gitzone/tstest": "^1.0.77",
|
"@git.zone/tstest": "^1.0.81",
|
||||||
"@push.rocks/tapbundle": "^5.0.12",
|
"@push.rocks/tapbundle": "^5.0.15",
|
||||||
"@types/node": "^20.4.8"
|
"@types/node": "^20.8.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@design.estate/dees-domtools": "^2.0.37",
|
"@design.estate/dees-domtools": "^2.0.54",
|
||||||
"@push.rocks/isounique": "^1.0.5",
|
"@push.rocks/isounique": "^1.0.5",
|
||||||
"@push.rocks/smartrx": "^3.0.6",
|
"@push.rocks/smartrx": "^3.0.6",
|
||||||
"lit": "^2.8.0"
|
"lit": "^3.0.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"last 1 chrome versions"
|
"last 1 chrome versions"
|
||||||
|
3110
pnpm-lock.yaml
generated
3110
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-element',
|
name: '@design.estate/dees-element',
|
||||||
version: '2.0.25',
|
version: '2.0.32',
|
||||||
description: 'a custom element class extending lit element class'
|
description: 'a custom element class extending lit element class'
|
||||||
}
|
}
|
||||||
|
@ -40,12 +40,20 @@ export class DeesElement extends plugins.lit.LitElement {
|
|||||||
this.elementDomReadyDeferred.resolve();
|
this.elementDomReadyDeferred.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private garbageFunctions: (() => void)[] = [];
|
||||||
|
public registerGarbageFunction(garbageFunctionArg: () => void) {
|
||||||
|
this.garbageFunctions.push(garbageFunctionArg);
|
||||||
|
}
|
||||||
|
|
||||||
public async disconnectedCallback() {
|
public async disconnectedCallback() {
|
||||||
await this.domtoolsPromise;
|
await this.domtoolsPromise;
|
||||||
super.disconnectedCallback();
|
super.disconnectedCallback();
|
||||||
for (const subscription of this.rxSubscriptions) {
|
for (const subscription of this.rxSubscriptions) {
|
||||||
subscription.unsubscribe();
|
subscription.unsubscribe();
|
||||||
}
|
}
|
||||||
|
for (const garbageFunction of this.garbageFunctions) {
|
||||||
|
garbageFunction();
|
||||||
|
}
|
||||||
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,37 +1,50 @@
|
|||||||
import { noChange } from 'lit';
|
import { type TemplateResult, noChange } from 'lit';
|
||||||
import { AsyncDirective, directive } from 'lit/async-directive.js';
|
import { AsyncDirective, directive } from 'lit/async-directive.js';
|
||||||
import { rxjs } from '@push.rocks/smartrx';
|
|
||||||
|
|
||||||
class ResolveDirective extends AsyncDirective {
|
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) {
|
if (this.isConnected) {
|
||||||
this.subscribe(observable);
|
this.handlePromise(promise);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return noChange;
|
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() {
|
disconnected() {
|
||||||
this.sub?.unsubscribe();
|
this.hasPromiseSettled = true; // prevent setting value if the promise settles after disconnection
|
||||||
}
|
}
|
||||||
|
|
||||||
reconnected() {
|
reconnected() {
|
||||||
this.subscribe(this.observable!);
|
if (!this.hasPromiseSettled) {
|
||||||
|
this.handlePromise(this.promise!);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const resolve = directive(ResolveDirective);
|
export const resolve = directive(ResolveDirective);
|
||||||
|
export const resolveExec = (funcArg: () => Promise<TemplateResult | unknown>) => {
|
||||||
|
return resolve(funcArg());
|
||||||
|
}
|
||||||
|
16
ts/index.ts
16
ts/index.ts
@ -24,3 +24,19 @@ export * from './dees-element.classes.resolvedirective.js';
|
|||||||
* a singleton instance of CssManager
|
* a singleton instance of CssManager
|
||||||
*/
|
*/
|
||||||
export const cssManager = new 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';
|
||||||
|
|
||||||
|
export type {
|
||||||
|
rxjs,
|
||||||
|
}
|
@ -5,6 +5,10 @@
|
|||||||
"target": "ES2022",
|
"target": "ES2022",
|
||||||
"module": "ES2022",
|
"module": "ES2022",
|
||||||
"moduleResolution": "nodenext",
|
"moduleResolution": "nodenext",
|
||||||
"esModuleInterop": true
|
"esModuleInterop": true,
|
||||||
}
|
"verbatimModuleSyntax": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"dist_*/**/*.d.ts"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user