fix issue of elements being connected-disconnected and then connected

src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
 	css,
-	nothing,
 	repeat,
 	TemplateResult,
 	customElement,
@@ -49,8 +48,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	public defaultElement = '';
 
 	@property()
-	public renderMethod: (extension: InitializedExtension) => TemplateResult<1 | 2> | HTMLElement | null = (extension) =>
-		extension.component;
+	public renderMethod?: (extension: InitializedExtension) => TemplateResult<1 | 2> | HTMLElement | null;
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -61,12 +59,16 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 		this.observe(
 			umbExtensionsRegistry?.extensionsOfType(this.type).pipe(map((extensions) => extensions.filter(this.filter))),
 			async (extensions) => {
+
+				const oldValue = this._extensions;
 				const oldLength = this._extensions.length;
 				this._extensions = this._extensions.filter((current) =>
 					extensions.find((incoming) => incoming.alias === current.alias)
 				);
+
 				if (this._extensions.length !== oldLength) {
-					this.requestUpdate('_extensions');
+
+					this.requestUpdate('_extensions', oldValue);
 				}
 
 				extensions.forEach(async (extension) => {
@@ -78,6 +80,8 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 							component: null,
 						};
 						this._extensions.push(extensionObject);
+						// sort:
+						this._extensions.sort((a, b) => b.weight - a.weight);
 						let component;
 
 						if (isManifestElementableType(extension)) {
@@ -88,19 +92,17 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 							// TODO: Lets make an console.error in this case?
 						}
 						if (component) {
+
 							this.#assignProps(component);
 							(component as any).manifest = extension;
 							extensionObject.component = component;
 
-							// sort:
-							// TODO: Make sure its right to have highest last?
-							this._extensions.sort((a, b) => b.weight - a.weight);
 						} else {
 							// Remove cause we could not get the component, so we will get rid of this.
 							//this._extensions.splice(this._extensions.indexOf(extensionObject), 1);
 							// Actually not, because if, then the same extension would come around again in next update.
 						}
-						this.requestUpdate('_extensions');
+						this.requestUpdate('_extensions', oldValue);
 					}
 				});
 			}
@@ -124,7 +126,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 		return repeat(
 			this._extensions,
 			(ext) => ext.alias,
-			(ext) => this.renderMethod(ext) || nothing
+			(ext) => this.renderMethod ? this.renderMethod(ext) : ext.component
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts

@@ -1,7 +1,7 @@
 import type { UmbWorkspaceElement } from '../workspace/workspace.element.js';
 import type { UmbSectionViewsElement } from './section-views/section-views.element.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, nothing , customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing , customElement, property, state, PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import { map } from '@umbraco-cms/backoffice/external/rxjs';
 import {
 	ManifestSection,
@@ -28,10 +28,10 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 	@state()
 	private _menus?: Array<Omit<ManifestSectionSidebarApp, 'kind'>>;
 
-	connectedCallback() {
-		super.connectedCallback();
-		this.#observeSectionSidebarApps();
+	constructor() {
+		super();
 		this.#createRoutes();
+		this.#observeSectionSidebarApps();
 	}
 
 	#createRoutes() {
@@ -60,7 +60,7 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 				.extensionsOfType('sectionSidebarApp')
 				.pipe(
 					map((manifests) =>
-						manifests.filter((manifest) => manifest.conditions.sections.includes(this.manifest?.alias || ''))
+						manifests.filter((manifest) => manifest.conditions.sections.includes(this.manifest?.alias ?? ''))
 					)
 				),
 			(manifests) => {
@@ -78,7 +78,7 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 							<umb-extension-slot
 								type="sectionSidebarApp"
 								.filter=${(items: ManifestSectionSidebarApp) =>
-									items.conditions.sections.includes(this.manifest?.alias || '')}></umb-extension-slot>
+									items.conditions.sections.includes(this.manifest?.alias ?? '')}></umb-extension-slot>
 						</umb-section-sidebar>
 				  `
 				: nothing}

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts

@@ -44,7 +44,6 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 
 	#treeAlias?: string;
-	#treeManifestObserver?: UmbObserverController<any>;
 
 	#initResolver?: () => void;
 	#initialized = false;
@@ -141,9 +140,8 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 	}
 
 	#observeTreeManifest() {
-		this.#treeManifestObserver?.destroy();
 
-		this.#treeManifestObserver = new UmbObserverController<any>(
+		new UmbObserverController<any>(
 			this.host,
 			umbExtensionsRegistry
 				.extensionsOfType('tree')
@@ -151,7 +149,8 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 			async (treeManifest) => {
 				if (!treeManifest) return;
 				this.#observeRepository(treeManifest);
-			}
+			},
+			'_observeTreeManifest'
 		);
 	}
 
@@ -172,7 +171,8 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 				} catch (error) {
 					throw new Error('Could not create repository with alias: ' + repositoryAlias + '');
 				}
-			}
+			},
+			'_observeRepository'
 		);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts

@@ -76,11 +76,12 @@ export class UmbTreeElement extends UmbLitElement {
 
 	#rootItemsObserver?: UmbObserverController<Array<TreeItemPresentationModel>>;
 
-	connectedCallback(): void {
-		super.connectedCallback();
+	constructor() {
+		super();
 		this.#requestTreeRoot();
 	}
 
+
 	async #requestTreeRoot() {
 		if (!this.#treeContext?.requestTreeRoot) throw new Error('Tree does not support root');