Apply optimization on Component `default` view

[FrameMuse]

The default view of a Component should be inflated and created a template from it to be created and hydrated instead of just using createElement each time.

[dhinakaranst]

Hey @FrameMuse Could you please assing this issue to me !

[FrameMuse]

@dhinakaranst Do you understand the scope of the work?

[Tusharkanta407]

Hey @FrameMuse 👋,
I’d like to work on this issue.

From my understanding, the current rendering flow recreates DOM elements on every view update (inflateComponent() → inflate() → replace()), which causes unnecessary DOM rebuilds and event rebindings.

My plan to solve it:

1)Template Creation: On first render, generate and cache a static DOM template (component.view.default).

2)Template Reuse: On subsequent renders, clone the cached template instead of recreating elements.

3)Hydration: Add a small hydration step to update text, attributes, and event listeners with the new state.

This should significantly reduce memory usage and improve performance for reactive updates.
If this approach looks good, please assign me the issue and I’ll start working on a PR.

Thanks!

[FrameMuse]

@Tusharkanta407 This looks good, there is a problem though, the creation of a template will consume some more memory, which is not optimal. So a template should be created only when the component is used several times or something like that - that is the main challenge.

If you can figure it out - it may solve the fundamental optimization problem.
But please, don't overuse LLM, it gives me a stroke, I don't need AI slope here, if I'd need it, I'd do it myself.

[Tusharkanta407]

Hey @FrameMuse To be transparent, I used an LLM a bit during the implementation phase but the solution and integration are based on our design. #117 here is pr Please check it out when you get time . I ’m open to feedback or any suggestions for further optimization or cleanup.