Fix: rename and implement fallbackRenderMethod (#20005)

* rename and implement fallbackRender

* re introducing method as part of the name

* rename impls

---------

Co-authored-by: Jacob Overgaard <[email protected]>
Co-authored-by: Andrej Davidovič <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

@@ -467,7 +467,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 						<umb-extension-slot
 							.filter=${this.#extensionSlotFilterMethod}
 							.renderMethod=${this.#extensionSlotRenderMethod}
-							.defaultRenderMethod=${this.#renderBuiltinBlockView}
+							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
 							.props=${this._blockViewProps}
 							default-element=${this._inlineEditingMode ? 'umb-block-grid-block-inline' : 'umb-block-grid-block'}
 							type="blockEditorCustomView"

src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts

@@ -399,15 +399,15 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			${umbDestroyOnDisconnect()}></umb-unsupported-list-block>`;
 	}
 
-	#renderBuiltinBlockView() {
+	#renderBuiltinBlockView = () => {
 		if (this._unsupported) {
 			return this.#renderUnsupportedBlock();
 		}
 		if (this._inlineEditingMode) {
 			return this.#renderInlineBlock();
 		}
 		return this.#renderRefBlock();
-	}
+	};
 
 	#renderBlock() {
 		return this.contentKey && (this._contentTypeAlias || this._unsupported)
@@ -417,11 +417,10 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 							type="blockEditorCustomView"
 							default-element=${this._inlineEditingMode ? 'umb-inline-list-block' : 'umb-ref-list-block'}
 							.renderMethod=${this.#extensionSlotRenderMethod}
+							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
 							.props=${this._blockViewProps}
 							.filter=${this.#extensionSlotFilterMethod}
-							single
-							>${this.#renderBuiltinBlockView()}</umb-extension-slot
-						>
+							single></umb-extension-slot>
 						${this.#renderActionBar()}
 						${!this._showContentEdit && this._contentInvalid
 							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts

@@ -277,11 +277,10 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 							type="blockEditorCustomView"
 							default-element="umb-ref-rte-block"
 							.renderMethod=${this.#extensionSlotRenderMethod}
+							.fallbackRenderMethod=${this.#renderBuiltinBlockView}
 							.props=${this._blockViewProps}
 							.filter=${this.#filterBlockCustomViews}
-							single>
-							${this.#renderRefBlock()}
-						</umb-extension-slot>
+							single></umb-extension-slot>
 						${this.#renderActionBar()}
 						${!this._showContentEdit && this._contentInvalid
 							? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
@@ -297,6 +296,14 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			: nothing;
 	}
 
+	#renderBuiltinBlockView = () => {
+		// TODO: Missing unsupported rendering [NL]
+		/*if (this._unsupported) {
+			return this.#renderUnsupportedBlock();
+		}*/
+		return this.#renderRefBlock();
+	};
+
 	#renderRefBlock() {
 		return html`<umb-ref-rte-block
 			.label=${this._label}

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

@@ -98,7 +98,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	) => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing;
 
 	@property({ attribute: false })
-	public defaultRenderMethod?: () =>
+	public fallbackRenderMethod?: () =>
 		| TemplateResult
 		| TemplateResult<1>
 		| HTMLElement
@@ -142,15 +142,18 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	}
 
 	override render() {
+		// First renders something once _permitted is set, this is to avoid flickering. [NL]
 		return this._permitted
 			? this._permitted.length > 0
 				? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension)
-				: this.defaultRenderMethod
-					? this.defaultRenderMethod()
-					: html`<slot></slot>`
+				: this.#renderNoting()
 			: nothing;
 	}
 
+	#renderNoting() {
+		return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html`<slot></slot>`;
+	}
+
 	#renderExtension = (ext: UmbExtensionElementInitializer, i: number) => {
 		return this.renderMethod ? this.renderMethod(ext, i) : ext.component;
 	};

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

@@ -143,6 +143,15 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 		index: number,
 	) => TemplateResult | TemplateResult<1> | HTMLElement | null | undefined | typeof nothing;
 
+	@property({ attribute: false })
+	public fallbackRenderMethod?: () =>
+		| TemplateResult
+		| TemplateResult<1>
+		| HTMLElement
+		| null
+		| undefined
+		| typeof nothing;
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#attached = true;
@@ -185,10 +194,14 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
 		return this._permitted
 			? this._permitted.length > 0
 				? repeat(this._permitted, (ext) => ext.alias, this.#renderExtension)
-				: html`<slot></slot>`
+				: this.#renderNoting()
 			: nothing;
 	}
 
+	#renderNoting() {
+		return this.fallbackRenderMethod ? this.fallbackRenderMethod() : html`<slot></slot>`;
+	}
+
 	#renderExtension = (ext: UmbExtensionElementAndApiInitializer, i: number) => {
 		return this.renderMethod ? this.renderMethod(ext, i) : ext.component;
 	};