From 6c44c2a9dddc8d8901f51d42ea0f231e8e6322a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 8 Jun 2023 10:54:51 +0200 Subject: [PATCH] fix issue of elements being connected-disconnected and then connected --- .../extension-slot/extension-slot.element.ts | 20 ++++++++++--------- .../core/section/section-default.element.ts | 12 +++++------ .../src/packages/core/tree/tree.context.ts | 10 +++++----- .../src/packages/core/tree/tree.element.ts | 5 +++-- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts index cfaa75b766..bedd6edae5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts +++ b/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 ); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts index 71fc7c7743..9700ffc361 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts +++ b/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>; - 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 - items.conditions.sections.includes(this.manifest?.alias || '')}> + items.conditions.sections.includes(this.manifest?.alias ?? '')}> ` : nothing} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts index eb9b8dbbcc..096feffdd6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts @@ -44,7 +44,6 @@ export class UmbTreeContextBase public selectableFilter?: (item: TreeItemType) => boolean = () => true; #treeAlias?: string; - #treeManifestObserver?: UmbObserverController; #initResolver?: () => void; #initialized = false; @@ -141,9 +140,8 @@ export class UmbTreeContextBase } #observeTreeManifest() { - this.#treeManifestObserver?.destroy(); - this.#treeManifestObserver = new UmbObserverController( + new UmbObserverController( this.host, umbExtensionsRegistry .extensionsOfType('tree') @@ -151,7 +149,8 @@ export class UmbTreeContextBase async (treeManifest) => { if (!treeManifest) return; this.#observeRepository(treeManifest); - } + }, + '_observeTreeManifest' ); } @@ -172,7 +171,8 @@ export class UmbTreeContextBase } catch (error) { throw new Error('Could not create repository with alias: ' + repositoryAlias + ''); } - } + }, + '_observeRepository' ); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts index 7767b2e50d..40a7aa31c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts @@ -76,11 +76,12 @@ export class UmbTreeElement extends UmbLitElement { #rootItemsObserver?: UmbObserverController>; - connectedCallback(): void { - super.connectedCallback(); + constructor() { + super(); this.#requestTreeRoot(); } + async #requestTreeRoot() { if (!this.#treeContext?.requestTreeRoot) throw new Error('Tree does not support root');