diff --git a/docs/5-development/02-custom-UI5-Web-Components.md b/docs/5-development/02-custom-UI5-Web-Components.md index ec543f0f9e75..264e506cd4cf 100644 --- a/docs/5-development/02-custom-UI5-Web-Components.md +++ b/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; } diff --git a/docs/5-development/07-typescript-in-UI5-Web-Components.md b/docs/5-development/07-typescript-in-UI5-Web-Components.md index 285b2cbeb61e..c0dbe7542271 100644 --- a/docs/5-development/07-typescript-in-UI5-Web-Components.md +++ b/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). diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 74de658f820a..93529993abe9 100644 --- a/packages/base/src/UI5Element.ts +++ b/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(); diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts index 6fa8ecc80ba9..163813675592 100644 --- a/packages/base/src/decorators/customElement.ts +++ b/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, diff --git a/packages/base/src/updateShadowRoot.ts b/packages/base/src/updateShadowRoot.ts index d624c19100fb..6a4c1fba880d 100644 --- a/packages/base/src/updateShadowRoot.ts +++ b/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; diff --git a/packages/base/test/elements/Child.js b/packages/base/test/elements/Child.js index 6fa39d5a1d5e..15162ec6a290 100644 --- a/packages/base/test/elements/Child.js +++ b/packages/base/test/elements/Child.js @@ -21,7 +21,7 @@ class Child extends UI5Element { return metadata; } - static get render() { + static get renderer() { return litRender; } diff --git a/packages/base/test/elements/Generic.js b/packages/base/test/elements/Generic.js index a65ce1eb5964..0c3d42a31b44 100644 --- a/packages/base/test/elements/Generic.js +++ b/packages/base/test/elements/Generic.js @@ -50,7 +50,7 @@ class Generic extends UI5Element { return metadata; } - static get render() { + static get renderer() { return litRender; } diff --git a/packages/base/test/elements/Parent.js b/packages/base/test/elements/Parent.js index f5497dab3443..d720114e2155 100644 --- a/packages/base/test/elements/Parent.js +++ b/packages/base/test/elements/Parent.js @@ -25,7 +25,7 @@ class Parent extends UI5Element { return metadata; } - static get render() { + static get renderer() { return litRender; } diff --git a/packages/base/test/elements/WithComplexTemplate.js b/packages/base/test/elements/WithComplexTemplate.js index 6771e13596bb..40e899206c2e 100644 --- a/packages/base/test/elements/WithComplexTemplate.js +++ b/packages/base/test/elements/WithComplexTemplate.js @@ -9,7 +9,7 @@ class WithComplexTemplate extends UI5Element { }; } - static get render() { + static get renderer() { return litRender; } diff --git a/packages/base/test/elements/WithStaticArea.js b/packages/base/test/elements/WithStaticArea.js index 021bd03e6b54..eba6e0d642a7 100644 --- a/packages/base/test/elements/WithStaticArea.js +++ b/packages/base/test/elements/WithStaticArea.js @@ -21,7 +21,7 @@ class WithStaticArea extends UI5Element { return metadata; } - static get render() { + static get renderer() { return litRender; } diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index cf0927835a0f..ae7f443f9762 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -213,7 +213,7 @@ abstract class SliderBase extends UI5Element { }; } - static get render() { + static get renderer() { return litRender; }