[TASK] Use correct method visibility in Lit elements

The methods `createRenderRoot()` and `render()` are considered being protected, but were public in some cases my mistake. This doesn't have any functional impact, but is now fixed nonetheless. Resolves: #101689 Releases: main, 12.4 Change-Id: I6bb88f90a8a44e0118dd8203433a54517b5dfa2f Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80561 Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Benjamin Franzke <ben@bnf.dev> Tested-by: core-ci <typo3@b13.com>
TYPO3 · Aug 16, 2023 · fb040cf · fb040cf
1 parent e7d287c
commit fb040cf
Show file tree

Hide file tree

Showing 30 changed files with 104 additions and 104 deletions.
diff --git a/Build/Sources/TypeScript/backend/clipboard-panel.ts b/Build/Sources/TypeScript/backend/clipboard-panel.ts
@@ -77,13 +77,13 @@ export class ClipboardPanel extends LitElement {
     `;
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
     // const renderRoot = this.attachShadow({mode: 'open'});
     return this;
   }
 
-  public render(): TemplateResult {
+  protected render(): TemplateResult {
     return html`
       ${until(this.renderPanel(), ClipboardPanel.renderLoader())}
     `;

diff --git a/Build/Sources/TypeScript/backend/element/draggable-resizable-element.ts b/Build/Sources/TypeScript/backend/element/draggable-resizable-element.ts
@@ -133,7 +133,30 @@ export class DraggableResizableElement extends LitElement {
     setTimeout(() => this.reverting = false, 500);
   }
 
-  public render(): TemplateResult {
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!(this.container instanceof HTMLElement)) {
+      this.container = this.parentElement;
+    }
+    this.pointerEventNames.pointerDown.forEach((name: string): void =>
+      this.documentRef.addEventListener(name, this.handleStart.bind(this), true));
+    this.pointerEventNames.pointerMove.forEach((name: string): void =>
+      this.documentRef.addEventListener(name, this.handleUpdate.bind(this), true));
+    this.pointerEventNames.pointerUp.forEach((name: string): void =>
+      this.documentRef.addEventListener(name, this.handleFinish.bind(this), true));
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.pointerEventNames.pointerDown.forEach((name: string): void =>
+      this.documentRef.removeEventListener(name, this.handleStart.bind(this), true));
+    this.pointerEventNames.pointerMove.forEach((name: string): void =>
+      this.documentRef.removeEventListener(name, this.handleUpdate.bind(this), true));
+    this.pointerEventNames.pointerUp.forEach((name: string): void =>
+      this.documentRef.removeEventListener(name, this.handleFinish.bind(this), true));
+  }
+
+  protected render(): TemplateResult {
     return html`
       ${styleTag([`
         :host, typo3-backend-draggable-resizable {
@@ -161,29 +184,6 @@ export class DraggableResizableElement extends LitElement {
     `;
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
-    if (!(this.container instanceof HTMLElement)) {
-      this.container = this.parentElement;
-    }
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      this.documentRef.addEventListener(name, this.handleStart.bind(this), true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      this.documentRef.addEventListener(name, this.handleUpdate.bind(this), true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      this.documentRef.addEventListener(name, this.handleFinish.bind(this), true));
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      this.documentRef.removeEventListener(name, this.handleStart.bind(this), true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      this.documentRef.removeEventListener(name, this.handleUpdate.bind(this), true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      this.documentRef.removeEventListener(name, this.handleFinish.bind(this), true));
-  }
-
   protected update(changedProperties: PropertyValues) {
     super.update(changedProperties);
     Object.assign(this.style, this.getOffsetStyles(this.offset));

diff --git a/Build/Sources/TypeScript/backend/element/icon-element.ts b/Build/Sources/TypeScript/backend/element/icon-element.ts
@@ -47,7 +47,7 @@ export class IconElement extends LitElement {
    */
   @property({ type: String }) raw?: string = null;
 
-  public render(): TemplateResult | symbol {
+  protected render(): TemplateResult | symbol {
     if (this.raw) {
       return html`${unsafeHTML(this.raw)}`;
     }

diff --git a/Build/Sources/TypeScript/backend/element/spinner-element.ts b/Build/Sources/TypeScript/backend/element/spinner-element.ts
@@ -34,7 +34,7 @@ export class SpinnerElement extends LitElement {
   @property({ type: String }) size: Sizes = Sizes.default;
   @property({ type: String }) variant: Variant = Variant.dark;
 
-  public render(): TemplateResult {
+  protected render(): TemplateResult {
     return html`
       ${styleTag(IconStyles.getStyles())}
       ${styleTag`

diff --git a/Build/Sources/TypeScript/backend/element/table-wizard-element.ts b/Build/Sources/TypeScript/backend/element/table-wizard-element.ts
@@ -52,13 +52,13 @@ export class TableWizardElement extends LitElement {
     this.readTableFromTextarea();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
     // const renderRoot = this.attachShadow({mode: 'open'});
     return this;
   }
 
-  public render(): TemplateResult {
+  protected render(): TemplateResult {
     return this.renderTemplate();
   }
 

diff --git a/Build/Sources/TypeScript/backend/form-engine/element/suggest/result-container.ts b/Build/Sources/TypeScript/backend/form-engine/element/suggest/result-container.ts
@@ -33,7 +33,7 @@ export class ResultContainer extends LitElement {
     super.disconnectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/form-engine/element/suggest/result-item.ts b/Build/Sources/TypeScript/backend/form-engine/element/suggest/result-item.ts
@@ -47,7 +47,7 @@ export class ResultItem extends LitElement {
     super.disconnectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/backend-search.ts b/Build/Sources/TypeScript/backend/live-search/element/backend-search.ts
@@ -21,7 +21,7 @@ import { LitElement } from 'lit';
  */
 @customElement('typo3-backend-live-search')
 export class BackendSearch extends LitElement {
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/provider/default-result-item.ts b/Build/Sources/TypeScript/backend/live-search/element/provider/default-result-item.ts
@@ -22,7 +22,7 @@ export class DefaultProviderResultItem extends LitElement {
   @property({ type: String, attribute: false }) typeLabel: string;
   @property({ type: Object, attribute: false }) extraData: { [key: string]: any };
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/provider/page-provider-result-item.ts b/Build/Sources/TypeScript/backend/live-search/element/provider/page-provider-result-item.ts
@@ -22,7 +22,7 @@ export default class PageProviderResultItem extends LitElement {
   @property({ type: String, attribute: false }) typeLabel: string;
   @property({ type: Object, attribute: false }) extraData: { [key: string]: any };
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/item/action/action-container.ts b/Build/Sources/TypeScript/backend/live-search/element/result/item/action/action-container.ts
@@ -23,7 +23,7 @@ export const componentName = 'typo3-backend-live-search-result-item-action-conta
 export class ActionContainer extends LitElement {
   @property({ type: Object, attribute: false }) resultItem: ResultItemInterface|null = null;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/item/action/action.ts b/Build/Sources/TypeScript/backend/live-search/element/result/item/action/action.ts
@@ -30,7 +30,7 @@ export class Action extends LitElement {
     }
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/item/item-container.ts b/Build/Sources/TypeScript/backend/live-search/element/result/item/item-container.ts
@@ -38,7 +38,7 @@ export class ItemContainer extends LitElement {
     super.disconnectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/item/item.ts b/Build/Sources/TypeScript/backend/live-search/element/result/item/item.ts
@@ -57,7 +57,7 @@ export class Item extends LitElement {
     super.disconnectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/result-container.ts b/Build/Sources/TypeScript/backend/live-search/element/result/result-container.ts
@@ -46,7 +46,7 @@ export class ResultContainer extends LitElement {
     super.disconnectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/result-detail-container.ts b/Build/Sources/TypeScript/backend/live-search/element/result/result-detail-container.ts
@@ -22,7 +22,7 @@ export const componentName = 'typo3-backend-live-search-result-item-detail-conta
 export class ResultDetailContainer extends LitElement {
   @property({ type: Object, attribute: false }) resultItem: ResultItemInterface|null = null;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/result/result-pagination.ts b/Build/Sources/TypeScript/backend/live-search/element/result/result-pagination.ts
@@ -31,12 +31,12 @@ export type Pagination = {
 export class ResultPagination extends LitElement {
   @property({ type: Object }) pagination: Pagination|null = null;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }
 
-  public render(): TemplateResult | symbol {
+  protected render(): TemplateResult | symbol {
     if (this.pagination === null || this.pagination.allPageNumbers.length <= 1) {
       return nothing;
     }
@@ -82,11 +82,6 @@ export class ResultPaginationPage extends LitElement {
   @property({ type: Number }) page: number;
   @property({ type: Number }) perPage: number;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
-    // Avoid shadow DOM for Bootstrap CSS to be applied
-    return this;
-  }
-
   public connectedCallback() {
     super.connectedCallback();
 
@@ -99,6 +94,11 @@ export class ResultPaginationPage extends LitElement {
     super.disconnectedCallback();
   }
 
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
   protected render(): symbol {
     return nothing;
   }

diff --git a/Build/Sources/TypeScript/backend/live-search/element/search-option-item.ts b/Build/Sources/TypeScript/backend/live-search/element/search-option-item.ts
@@ -31,7 +31,7 @@ export class SearchOptionItem extends LitElement {
     super.connectedCallback();
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/modal.ts b/Build/Sources/TypeScript/backend/modal.ts
@@ -119,7 +119,7 @@ export class ModalElement extends LitElement {
     }
   }
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }

diff --git a/Build/Sources/TypeScript/backend/module/iframe.ts b/Build/Sources/TypeScript/backend/module/iframe.ts
@@ -28,13 +28,30 @@ export class IframeModuleElement extends LitElement {
 
   @query('iframe', true) iframe: HTMLIFrameElement;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  public attributeChangedCallback(name: string, old: string, value: string) {
+    super.attributeChangedCallback(name, old, value);
+
+    if (name === 'endpoint' && value === old) {
+      // Trigger explicit reload if value has been reset to current value,
+      // lit doesn't re-set the attribute in this case.
+      this.iframe.setAttribute('src', value);
+    }
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.endpoint) {
+      this.dispatch('typo3-iframe-load', { url: this.endpoint, title: null });
+    }
+  }
+
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Disable shadow root as <iframe> needs to be accessible
     // via top.list_frame for legacy-code and backwards compatibility.
     return this;
   }
 
-  public render(): TemplateResult | symbol {
+  protected render(): TemplateResult | symbol {
     if (!this.endpoint) {
       return nothing;
     }
@@ -52,23 +69,6 @@ export class IframeModuleElement extends LitElement {
     `;
   }
 
-  public attributeChangedCallback(name: string, old: string, value: string) {
-    super.attributeChangedCallback(name, old, value);
-
-    if (name === 'endpoint' && value === old) {
-      // Trigger explicit reload if value has been reset to current value,
-      // lit doesn't re-set the attribute in this case.
-      this.iframe.setAttribute('src', value);
-    }
-  }
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this.endpoint) {
-      this.dispatch('typo3-iframe-load', { url: this.endpoint, title: null });
-    }
-  }
-
   private registerPagehideHandler(iframe: HTMLIFrameElement): void {
     try {
       iframe.contentWindow.addEventListener('pagehide', (e: Event) => this._pagehide(e, iframe), { once: true });

diff --git a/Build/Sources/TypeScript/backend/module/router.ts b/Build/Sources/TypeScript/backend/module/router.ts
@@ -120,7 +120,7 @@ export class ModuleRouter extends LitElement {
     });
   }
 
-  public render(): TemplateResult {
+  protected render(): TemplateResult {
     const moduleData = ModuleUtility.getFromName(this.module);
     const jsModule = moduleData.component || IFRAME_COMPONENT;
 

diff --git a/Build/Sources/TypeScript/backend/security/element/csp-reports.ts b/Build/Sources/TypeScript/backend/security/element/csp-reports.ts
@@ -94,17 +94,17 @@ export class CspReports extends LitElement {
   @state() selectedReport: SummarizedCspReport | null = null;
   @state() suggestions: MutationSuggestion[] = [];
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
-    // Avoid shadow DOM for Bootstrap CSS to be applied
-    return this;
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.fetchReports();
   }
 
-  public render(): TemplateResult {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
+    // Avoid shadow DOM for Bootstrap CSS to be applied
+    return this;
+  }
+
+  protected render(): TemplateResult {
     return html`
       ${styleTag`
         .infolist-container {

diff --git a/Build/Sources/TypeScript/backend/security/element/sudo-mode.ts b/Build/Sources/TypeScript/backend/security/element/sudo-mode.ts
@@ -38,12 +38,12 @@ export class SudoMode extends LitElement {
   @state() errorMessage: string = null;
   @query('#password') passwordElement: HTMLInputElement;
 
-  public createRenderRoot(): HTMLElement | ShadowRoot {
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
     // Avoid shadow DOM for Bootstrap CSS to be applied
     return this;
   }
 
-  public render(): TemplateResult {
+  protected render(): TemplateResult {
     return html`
       ${styleTag`
         :host { display: block; }

diff --git a/Build/Sources/TypeScript/backend/tree/tree-node-toggle.ts b/Build/Sources/TypeScript/backend/tree/tree-node-toggle.ts
@@ -19,7 +19,7 @@ import '@typo3/backend/element/icon-element';
 export default class TreeNodeToggle extends LitElement {
   @property({ type: String, reflect: true, attribute: 'aria-expanded' }) expanded: string = 'false';
 
-  public render(): TemplateResult | symbol {
+  protected render(): TemplateResult | symbol {
     return html`<typo3-backend-icon size="small" identifier="${this.expanded === 'true' ? 'actions-chevron-down' : 'actions-chevron-right'}"></typo3-backend-icon>`;
   }
 }