refactor(framework): remove render method (#8501)

Removed the deprecated `UI5Element#render` method of the UI5Element class and replaced it with `UI5Element#renderer`.

BREAKING CHANGE:  Removed `UI5Element#render` method in favour of `UI5Element#renderer`. If you previously used "render"
```js
class MyClass extends UI5Element {
    static get render() {
        return litRenderer;
    }
}
```
start using "renderer"
```ts
class MyClass extends UI5Element {
    static get renderer() {
        return litRenderer;
    }
}
```

Related to [#8461](#8461)

Author: nnaydenow

docs/5-development/02-custom-UI5-Web-Components.md

@@ -34,7 +34,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -108,7 +108,7 @@ For a complete reference to all metadata entities, click [here](./03-understandi
 UI5 Web Components are agnostic of the DOM render engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.)
 use [lit-html](https://github.com/Polymer/lit-html) as the rendering technology of choice.
 
-The render engine is defined via the `render` static getter:
+The render engine is defined via the `renderer` static getter:
 
 ```js
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -129,7 +129,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 }
@@ -167,7 +167,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -216,7 +216,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -280,7 +280,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -331,7 +331,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -398,7 +398,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 
@@ -455,7 +455,7 @@ class Demo extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

docs/5-development/07-typescript-in-UI5-Web-Components.md

@@ -70,8 +70,6 @@ class MyElement extends UI5Element {
 }
 ```
 
-**Note**: the `static get render()` that we use when developing in JavaScript (still supported for backward compatibility) is replaced with **`renderer`** in the `@customElement` decorator.
-
 ### Property decorators
 
 These are used inside the class and are associated with accessors (class members).

packages/base/src/UI5Element.ts

@@ -108,11 +108,7 @@ abstract class UI5Element extends HTMLElement {
 	static staticAreaTemplate?: TemplateFunction;
 	static _metadata: UI5ElementMetadata;
 
-	/**
-	 * @deprecated
-	 */
-	static render: Renderer;
-	static renderer?: Renderer;
+	static renderer: Renderer;
 
 	constructor() {
 		super();

packages/base/src/decorators/customElement.ts

@@ -49,9 +49,8 @@ const customElement = (tagNameOrComponentSettings: string | {
 			target.metadata.fastNavigation = fastNavigation;
 		}
 
-		["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
-			const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
-			const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];
+		["renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
+			const customElementEntityValue = tagNameOrComponentSettings[customElementEntity as keyof typeof tag];
 
 			customElementEntityValue && Object.defineProperty(target, customElementEntity, {
 				get: () => customElementEntityValue,

packages/base/src/updateShadowRoot.ts

@@ -23,12 +23,7 @@ const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
 
 	shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
 
-	if (ctor.renderer) {
-		ctor.renderer(renderResult, shadowRoot, forStaticArea, { host: element });
-		return;
-	}
-
-	ctor.render(renderResult, shadowRoot, forStaticArea, { host: element });
+	ctor.renderer(renderResult, shadowRoot, forStaticArea, { host: element });
 };
 
 export default updateShadowRoot;

packages/base/test/elements/Child.js

@@ -21,7 +21,7 @@ class Child extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

packages/base/test/elements/Generic.js

@@ -50,7 +50,7 @@ class Generic extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

packages/base/test/elements/Parent.js

@@ -25,7 +25,7 @@ class Parent extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

packages/base/test/elements/WithComplexTemplate.js

@@ -9,7 +9,7 @@ class WithComplexTemplate extends UI5Element {
 		};
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

packages/base/test/elements/WithStaticArea.js

@@ -21,7 +21,7 @@ class WithStaticArea extends UI5Element {
 		return metadata;
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}
 

packages/main/src/SliderBase.ts

@@ -213,7 +213,7 @@ abstract class SliderBase extends UI5Element {
 		};
 	}
 
-	static get render() {
+	static get renderer() {
 		return litRender;
 	}