Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(framework): remove render method #8501

Merged
merged 3 commits into from
Mar 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/5-development/02-custom-UI5-Web-Components.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -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";
Expand All @@ -129,7 +129,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}
}
Expand Down Expand Up @@ -167,7 +167,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -216,7 +216,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -280,7 +280,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -331,7 +331,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -398,7 +398,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down Expand Up @@ -455,7 +455,7 @@ class Demo extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 0 additions & 2 deletions docs/5-development/07-typescript-in-UI5-Web-Components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
6 changes: 1 addition & 5 deletions packages/base/src/UI5Element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
5 changes: 2 additions & 3 deletions packages/base/src/decorators/customElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 1 addition & 6 deletions packages/base/src/updateShadowRoot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 1 addition & 1 deletion packages/base/test/elements/Child.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Child extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/base/test/elements/Generic.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class Generic extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/base/test/elements/Parent.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class Parent extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/base/test/elements/WithComplexTemplate.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class WithComplexTemplate extends UI5Element {
};
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/base/test/elements/WithStaticArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class WithStaticArea extends UI5Element {
return metadata;
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/SliderBase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ abstract class SliderBase extends UI5Element {
};
}

static get render() {
static get renderer() {
return litRender;
}

Expand Down