Skip to content

Fixed memory leak and enhance KupTheme support#2871

Merged
lucafoscili merged 5 commits into
developfrom
fix/mem-leak-and-mem-usage-first-solution
Jun 23, 2026
Merged

Fixed memory leak and enhance KupTheme support#2871
lucafoscili merged 5 commits into
developfrom
fix/mem-leak-and-mem-usage-first-solution

Conversation

@stefanolanari

Copy link
Copy Markdown
Collaborator

This pull request introduces improvements to event listener management in kup-box and adds enhanced support for Constructable StyleSheets in the kup-theme manager. The most significant changes focus on memory leak prevention for event listeners and optimizing theme/style management for web components that support adopted style sheets.

Event Listener Management Improvements:

  • Refactored the way the clickFunction is bound and stored in kup-box by introducing a dedicated #boundClickFunction property, ensuring the same function reference is used for both adding and removing the event listener. This prevents potential memory leaks and ensures proper cleanup. [1] [2] [3]

Constructable StyleSheets and Theme Management Enhancements:

  • Added detection for Constructable StyleSheet support and a set of target components (adoptedStyleSheetsTargets) in kup-theme, enabling more efficient and modern style management for supported browsers.
  • Implemented caching and updating of shared stylesheets via the new sharedSheets map and the updateSharedSheets method, ensuring styles are efficiently reused and updated across components. [1] [2] [3]
  • Refactored the setKupStyle method to use Constructable StyleSheets when possible, improving performance and encapsulation for supported components. The method now distinguishes between components that support adopted style sheets and those that do not, applying styles accordingly. [1] [2]
  • Extracted and documented a new getSharedStyle helper to centralize the logic for combining global, theme, and component-specific styles. [1] [2]

Bind KupBox click handler to the instance to avoid repeated binds. Overhaul KupDataTable focus and cell lookup: add #lastFocusedCellElement, use data-row-id attributes, and introduce helpers (#getRowFromElement, #getCellFromElement, #getFCellProps, #getRenderedCellElement) to resolve rows/cells from DOM elements. Persist/restore last focused cell element after render, update horizontal/vertical navigation to use the element reference, and set kup-get-cell-props to use a provided getCellProps closure. Update FCell declarations to accept getCellProps and FCell implementation to call it; improve input value extraction with getInputValueFromEvent and use that in events. Remove reliance on serialized data-cell objects in DOM and switch to dataset-based lookups. In KupTheme, add optional support for Constructable StyleSheets: cache shared sheets, adopt them into component shadow roots for supported tags, update shared sheets on theme changes, and refactor style composition (introduce getSharedStyle and updated setKupStyle) to use the new mechanism when available.
Expanded the KupTheme.adoptedStyleSheetsTargets set to include a large list of KUP custom elements (e.g. KUP-ACCORDION, KUP-BUTTON, KUP-CARD, KUP-DATA-TABLE, KUP-FORM, KUP-IMAGE, KUP-TREE, etc.). This allows the manager to apply shared CSS via adoptedStyleSheets to these components' shadow roots, ensuring consistent theming across more components.
@lucafoscili lucafoscili merged commit f2a36d9 into develop Jun 23, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants