MajoorWaldi-ComfyUI-Majoor-AssetsManager/docs/FRONTEND_LIFECYCLE_CONVENTIONS.md

Frontend Lifecycle Conventions

Last updated: April 10, 2026

Vue component lifecycle

• Vue apps are created via ui/vue/createVueApp.js with Pinia store injection.
• Components use onMounted / onUnmounted for DOM setup/teardown.
• Event listeners added in onMounted must be removed in onUnmounted.
• Pinia stores are the single source of truth for UI state.

Imperative runtime lifecycle

• panelRuntime.js manages the top-level panel init/destroy cycle.
• Feature modules (viewer, DnD, grid) expose init() / destroy() or start() / stop().
• The bootstrap sequence is:
  1. bootstrap.js initializes the app context
  2. panelRuntime.js sets up the panel shell
  3. Vue apps mount into panel slots
  4. Feature runtimes activate via events or direct calls

Teardown rules

1. Every addEventListener must have a matching removeEventListener on destroy.
2. Every setInterval / setTimeout must be cleared on destroy.
3. Pinia store subscriptions are auto-cleaned when the Vue app unmounts.
4. Custom event buses (events.js) listeners must be unsubscribed explicitly.

Bridge conventions

• comfyApiBridge.js: wraps ComfyUI API calls. Never call ComfyUI API directly from Vue components.
• panelStateBridge.js: syncs Pinia panel store with legacy imperative consumers. Will be removed when all consumers migrate to Vue.
• New bridges should be avoided. Prefer Pinia stores or composables for new features.