Web Components Lifecycle

[thehabes]

Summary

This PR standardizes the web component lifecycle across 70+ components and introduces a comprehensive memory leak prevention system. It addresses three related issues:

• Closes Component Memory Leak Audit & Cleanup #398
• Closes Authgate Audit #400
• Closes Component Permissions Processing Audit #401
• Closes auth() -> connectedCallback() -> tpen-project-loaded -> CheckPermissions -> render() -> register event listeners -> disconnectedCallback() Audit Report #404

Changes

New Utilities

• utilities/CleanupRegistry.js - Centralized event listener and resource cleanup management

  • cleanup.onEvent() - TPEN eventDispatcher listeners
  • cleanup.onWindow() - Window event listeners
  • cleanup.onDocument() - Document event listeners
  • cleanup.onElement() - DOM element listeners
  • cleanup.addObserver() - ResizeObserver cleanup
  • cleanup.addMutationObserver() - MutationObserver cleanup
  • cleanup.add() - Custom cleanup functions (timers, etc.)

• utilities/projectReady.js - Unified project loading handler that works whether project is already loaded or loads later

Standardized Component Lifecycle

All components now follow this pattern:

connectedCallback() → onProjectReady() → authgate() →  render() → addEventListeners() → disconnectedCallback()

Key Conventions:

1. connectedCallback(), render(), and authgate() are synchronous
2. Async work delegated to separate methods like initializeAsync()
3. All event listeners use CleanupRegistry for automatic cleanup
4. TPEN.attachAuthentication(this) called in connectedCallback()
5. Permission checks via CheckPermissions in authgate()

Dual Cleanup Pattern

Components that re-render use two registries:

• cleanup - For persistent listeners (window, document, eventDispatcher)
• renderCleanup - For render-specific listeners, cleared before each re-render

addEventListeners() {
    this.renderCleanup.run()  // Clear previous listeners
    this.renderCleanup.onElement(btn, 'click', handler)
}

Memory Leak Prevention

• All addEventListener calls now tracked for cleanup
• setTimeout/setInterval tracked where applicable
• onProjectReady subscriptions properly unsubscribed
• Observers (Resize, Mutation) disconnected on component removal
• Guard patterns prevent duplicate listener registration

Permission-Based Rendering

• Components check permissions before rendering
• renderPermissionError() utility for consistent error display
• Features hidden/disabled based on user permissions
• Navigation links only shown to users with appropriate access

Files Changed

Category	Count
Components updated	66
Interfaces updated	4
New utilities	2
Documentation	1

Testing

• Manual testing of component lifecycle
• Verify no console errors on page navigation
• Check memory usage doesn't grow on repeated actions
• Verify permission-based UI changes work correctly

Documentation

Updated .claude/CLAUDE.md with:

• Standard component template
• CleanupRegistry usage guide
• Dual cleanup pattern explanation
• When to use renderCleanup vs guards

---

🤖 Generated with Claude Code

[github-actions]

🚀 Deployed on https://697cde3a048916196340085f--tpen-interfaces-preview.netlify.app

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 77 out of 77 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.