fix: Move construct super to fix memory leak when using multiple withThemeStyles

[joshhowenstine]

Issue

This pull request addresses a memory leak problem identified when the withThemeStyles mixin is utilized repeatedly. It was revealed that multiple initializations were contributing to this memory leak. To resolve this, I have modified the mixin's implementation by relocating the super._construct() call to the end of the process. This change ensures that super._construct() is only executed once, thereby preventing the repetitive initializations that were causing the memory leak.

Testing

• To thoroughly test the modifications made to the withThemeStyles mixin and confirm the resolution of the memory leak issue, follow these detailed steps:

Component Wrapping:

• Start by wrapping a component, such as Tile, with the withThemeStyles mixin. Considering that Tile already incorporates withThemeStyles, this action results in its multiple applications. You should be able to do this in the Tile story.

Setup a Repetitive Create and Destroy Cycle:

• Establish a routine where the wrapped Tile component is continuously created and then destroyed. This can be done by setting an interval in your code that alternates between creating and removing the component.

Open Chrome DevTools:

• Launch your application in Google Chrome.

• Open Chrome DevTools

Go to the Memory Tab:

I- [ ] n DevTools, navigate to the “Memory” tab. This tab provides tools for analyzing runtime memory usage.
Take an Initial Heap Snapshot:

• Click on the “Take snapshot” button to capture a heap snapshot before the interval starts. This serves as a baseline

Run the Create-Destroy Cycle:

• Execute the interval you set up for creating and destroying the Tile component. Let it run for a sufficient amount of time.

Take Another Heap Snapshot:

• After running the interval for some time, take another heap snapshot. This snapshot will help you analyze the memory allocation after multiple create-destroy cycles.

Compare Heap Snapshots:

• Analyze the two snapshots by comparing them. Look for discrepancies in memory usage and check for any retained memory that might indicate a leak. Specifically, focus on the listeners and related objects.

Repeat with and without the Change:

• Perform this test once without the change (using the original code) and once with the change. This will help you clearly see the impact of the modification.

[svc-lightning-ui-components]

Test Execution Passed.

[svc-lightning-ui-components]

Test Execution Passed.

[svc-lightning-ui-components]

Test Execution Passed.

[svc-lightning-ui-components]

Test Execution Passed.

[svc-lightning-ui-components]

🎉 This PR is included in version @lightningjs/ui-components-v2.19.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀