From 6198c0627ecd9ca4e1fd907f636cefe1a9dbdf1b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 11 Oct 2022 16:18:30 +0200
Subject: [PATCH] observe extensions

---
 .../extensions/editor-extensions.element.ts   | 38 ++++++-------------
 1 file changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
index 0f2d510ec7..750e86d104 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.element.ts
@@ -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() {