chore:improving subscription cleanup and lifecycle management

[y-lakhdar]

Fix Memory Leaks and Detached Nodes by Improving Subscription Cleanup and Lifecycle Management

Remove Hard references

Previously, when console.error logs the entire component object, it creates a reference to the component. This reference prevents the garbage collector from reclaiming the memory associated with the component, even after it has been removed from the DOM. This results in a detached node.

The solution is to not pass the reference of component to console.error. Instead, only log the tag name

Controller subscription not cleaned up

Overriding the disconnectedCallback seems to conflicts with other mixins or decorators.
Instead of doing that (which is kinda hackish anyway), I created a reactive controller which automatically hooks itself to lit reactive system.

Image showing detached nodes because of bad cleaning...

https://coveord.atlassian.net/browse/KIT-4099

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	248.6	248.6	0
commerce	361	361	0
search	419.6	419.6	0
insight	410.8	410.8	0
recommendation	259.5	259.5	0
ssr	413.4	413.4	0
ssr-commerce	377.5	377.5	0