observe extensions

This commit is contained in:
Mads Rasmussen
2022-10-11 16:18:30 +02:00
parent b9dfa6b2d8
commit 6198c0627e

View File

@@ -1,53 +1,37 @@
import '../shared/editor-entity-layout/editor-entity-layout.element';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { Subscription } from 'rxjs';
import { UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionRegistry } from '../../../core/extension';
import { isManifestElementType } from '../../../core/extension/is-extension.function';
import type { ManifestTypes } from '../../../core/models';
import { UmbObserverMixin } from '../../../core/observer';
import '../shared/editor-entity-layout/editor-entity-layout.element';
@customElement('umb-editor-extensions')
export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(LitElement) {
export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@state()
private _extensions: Array<ManifestTypes> = [];
private _extensionRegistry?: UmbExtensionRegistry;
private _extensionsSubscription?: Subscription;
constructor() {
super();
this.consumeContext('umbExtensionRegistry', (_instance: UmbExtensionRegistry) => {
this._extensionRegistry = _instance;
this._extensionsSubscription?.unsubscribe();
// TODO: Niels: Could we make it easier to unsubscribe? If we invented a Pattern/Mixin/class ala Lit-Controllers we could make it auto unsubscribe.
// ContextConsumers could be turned into single classes which uses the 'Controller' ability to hook into connected and disconnected.
// Generally that means that a web component must have the ControllerMixin?? and then controllers can easily be attached, they would know about life cycle and thereby be able to unsubscribe on disconnected etc.
//
// All code regarding subscription could be boiled down to:
// OurUmbracoSubscribeMethod(this, this._extensionRegistry.extensions, (extensions) => {}); // uses `this` to append the subscription to the controller array.
// Or:
// this.attachSubscription(this._extensionRegistry.extensions, (extensions) => {});
this._extensionsSubscription = this._extensionRegistry.extensions.subscribe((extensions) => {
this._extensions = [...extensions]; // TODO: Though, this is a shallow clone, wouldn't we either do a deep clone or no clone at all?
});
this._extensionsSubscription = this._extensionRegistry.extensionsOfType('section').subscribe((sections) => {
// In this callback sections are typed. Example meta.weight...
console.log(sections[0].meta.weight);
});
this._observeExtensions();
});
}
disconnectedCallback(): void {
super.disconnectedCallback();
this._extensionsSubscription?.unsubscribe();
private _observeExtensions() {
if (!this._extensionRegistry) return;
this.observe(this._extensionRegistry.extensions, (extensions) => {
this._extensions = [...extensions]; // TODO: Though, this is a shallow clone, wouldn't we either do a deep clone or no clone at all?
});
}
render() {