onelaraveljs 1.21.0 → 1.21.2

package/MOUNT_VIEW_ANALYSIS.md

@@ -0,0 +1,501 @@
+# 📋 Phân Tích Chi Tiết: Luồng & Logic Hoạt Động của mountView
+
+## 🎯 Tổng Quan
+
+**mountView** là hàm chính dùng để **mount/render một view** vào DOM. Nó xử lý:
+- Cache layout (tránh destroy layout không cần thiết)
+- Destroy layout cũ nếu cần
+- Render HTML mới
+- Mount lifecycle hooks
+- Scroll position handling
+
+---
+
+## 📊 Luồng Hoạt Động Chính
+
+### **PHASE 1: Lưu thông tin layout cũ (TRƯỚC loadView)**
+
+```javascript
+const oldSuperViewPath = this.CURRENT_SUPER_VIEW_PATH;
+const oldSuperView = this.CURRENT_SUPER_VIEW;
+const oldPageView = this.PAGE_VIEW;
+
+if (oldSuperView && oldSuperView instanceof ViewEngine) {
+    oldSuperView.__._lifecycleManager.unmounted();
+}
+```
+
+**Mục đích:**
+- Lưu lại path của layout cũ trước khi `loadView()` thay đổi nó
+- Gọi `unmounted()` cleanup CSS/scripts của layout cũ
+
+**Tại sao cần?**
+- Nếu không lưu, sẽ mất thông tin khi check cache ở bước 2
+- `loadView()` sẽ reset `CURRENT_SUPER_VIEW` → không thể so sánh
+
+---
+
+### **PHASE 2: Gọi loadView() - Render view mới**
+
+```javascript
+const viewResult = this.loadView(viewName, params, route?.$urlPath || '');
+if (viewResult.error) {
+    console.error('View rendering error:', viewResult.error);
+    return;
+}
+```
+
+**Có 2 trường hợp:**
+
+#### **2A. Normal Rendering (Client-Side)**
+```
+loadView() 
+  ↓
+  ├─ 1. Tạo view instance: view(name, data)
+  ├─ 2. Check view.__.hasSuperView (có layout không?)
+  ├─ 3. Nếu có → Tìm super view → Render layout
+  ├─ 4. Store trong PAGE_VIEW, CURRENT_SUPER_VIEW
+  └─ 5. Return {html, superView, ultraView, needInsert}
+```
+
+#### **2B. SSR Scanning (Server-Side)**
+```
+scanView()
+  ↓
+  ├─ 1. Lấy SSR data từ HTML comments
+  ├─ 2. Tạo view instances từ SSR data
+  ├─ 3. Call virtualRender() (chỉ setup relationships, không render HTML)
+  ├─ 4. Scan DOM + attach event handlers
+  └─ 5. Return {html từ SSR, superView, ultraView}
+```
+
+---
+
+### **PHASE 3: Kiểm tra Cache Layout**
+
+```javascript
+const newSuperViewPath = viewResult.superView?.__.path;
+const isSameLayout = newSuperViewPath === oldSuperViewPath;
+
+if (!isSameLayout) {
+    if (oldSuperView && oldSuperView instanceof ViewEngine) {
+        oldSuperView.__._lifecycleManager.unmounted();
+    }
+}
+```
+
+**Logic:**
+| Kịch bản | isSameLayout | Hành động |
+|---------|-------------|----------|
+| Home → User List | `true` | ❌ KHÔNG destroy layout → Reuse |
+| Home (bảng) → Home (kảnh) | `true` | ❌ KHÔNG destroy layout → Reuse |
+| Home (bảng) → Admin | `false` | ✅ Destroy layout cũ |
+| Home → Login | `false` | ✅ Destroy layout cũ |
+
+**Ưu điểm:**
+- Tránh destroy/recreate layout không cần thiết
+- CSS/JS chỉ load 1 lần nếu layout không đổi
+- Performance tốt hơn
+
+---
+
+### **PHASE 4: Render HTML & Insert DOM**
+
+```javascript
+if (viewResult.needInsert && viewResult.html) {
+    const container = this.container || 
+                      document.querySelector('#app-root') || 
+                      document.querySelector('#app') || 
+                      document.body;
+    if (container) {
+        OneDOM.setHTML(container, html);
+    }
+}
+```
+
+**Trường hợp `needInsert = false`:**
+- SSR mode: HTML từ server, DOM đã có → chỉ attach events
+- Layout cache: Content view đổi, layout cũ → chỉ update content
+
+**Trường hợp `needInsert = true`:**
+- CSR mode: Render HTML từ client
+- Layout khác: Phải render lại toàn bộ
+
+---
+
+### **PHASE 5: Emit & Mount Lifecycle**
+
+```javascript
+if (this.emitChangedSections) {
+    this.emitChangedSections();
+}
+
+if (viewResult.ultraView && viewResult.ultraView instanceof ViewEngine) {
+    viewResult.ultraView.__._lifecycleManager.mounted();
+}
+
+this.CURRENT_SUPER_VIEW_MOUNTED = true;
+this.PAGE_VIEW?.__.scrollToOldPosition() || this.scrollToTop();
+```
+
+**Chi tiết:**
+
+| Bước | Hành động | Mục đích |
+|------|----------|---------|
+| 1 | `emitChangedSections()` | Notify UI sections thay đổi |
+| 2 | `mounted()` lifecycle | Chạy hook mounted của views |
+| 3 | Set flag `CURRENT_SUPER_VIEW_MOUNTED = true` | Đánh dấu layout đã mount |
+| 4 | `scrollToOldPosition()` hoặc `scrollToTop()` | Xử lý scroll position |
+
+---
+
+## 🔄 Luồng Tổng Quát (Visual)
+
+```
+mountView(viewName)
+    ↓
+    ├─ PHASE 1: Lưu layout cũ
+    │   └─ oldSuperView, oldSuperViewPath
+    │
+    ├─ PHASE 2: loadView() → Render view mới
+    │   ├─ CSR: render() → HTML
+    │   └─ SSR: virtualRender() → relationships only
+    │   └─ Store: viewResult
+    │
+    ├─ PHASE 3: Cache check
+    │   ├─ isSameLayout = newPath === oldPath?
+    │   └─ Nếu khác → Destroy oldSuperView
+    │
+    ├─ PHASE 4: Insert DOM
+    │   └─ OneDOM.setHTML(container, html)
+    │
+    └─ PHASE 5: Mount lifecycle
+        ├─ emitChangedSections()
+        ├─ viewResult.ultraView.mounted()
+        ├─ Set CURRENT_SUPER_VIEW_MOUNTED = true
+        └─ Handle scroll position
+```
+
+---
+
+## 🎯 Hàm Liên Quan
+
+### **1. loadView(name, data, urlPath)**
+
+**Input:** View name, data, URL path
+**Output:** `{ html, superView, ultraView, needInsert, error }`
+
+**Logic:**
+```
+loadView()
+  ├─ Check cache: viewStoreKey
+  ├─ Nếu cached → return cached HTML
+  ├─ Nếu không:
+  │   ├─ Create view: this.view(name, data)
+  │   ├─ Check super view: view.__.hasSuperView?
+  │   ├─ Nếu có → renderOrScanView(superView, mode='csr')
+  │   ├─ Store PAGE_VIEW, CURRENT_SUPER_VIEW
+  │   └─ Return { html, superView, ultraView, needInsert }
+  └─ Catch error → Return { error }
+```
+
+**Cache strategy:**
+```javascript
+const viewStoreKey = name.replace('.', '_') + '_' + urlPath?.replace(/[\/\:]/g, '_');
+const cachedPageView = this.cachedPageViews.get(viewStoreKey);
+if (cachedPageView instanceof ViewEngine) {
+    return cachedHTML; // Reuse!
+}
+```
+
+---
+
+### **2. scanView(name)**
+
+**Input:** View name (SSR mode)
+**Output:** `{ html, superView, ultraView, needInsert, error }`
+
+**Logic:**
+```
+scanView()
+  ├─ Get SSR data from server
+  ├─ this.ssrViewManager.scan(name)
+  ├─ Create view instance from SSR data
+  ├─ Loop through super views:
+  │   ├─ While view.__.hasSuperView:
+  │   │   ├─ Get super view path
+  │   │   ├─ Call scanRenderedView(view)
+  │   │   ├─ Scan SSR data for super view
+  │   │   └─ Call view.__.__scan(ssrData)
+  │   └─ Attach event handlers via DOM scan
+  ├─ Build ALL_VIEW_STACK (all views in hierarchy)
+  └─ Return { html, superView, ultraView, needInsert }
+```
+
+**Vòng lặp super views:**
+```
+PAGE_VIEW → LAYOUT1 → LAYOUT2 → ROOT_LAYOUT
+  ↑                                    ↓
+  └────────── ALL_VIEW_STACK ──────────┘
+```
+
+---
+
+### **3. renderOrScanView(view, variableData, mode)**
+
+**Input:** View, data, mode ('csr' or 'ssr')
+**Output:** Rendered HTML (CSR) or Nothing (SSR)
+
+**Logic:**
+```
+renderOrScanView()
+  ├─ Determine mode:
+  │   ├─ CSR → use render(), prerender()
+  │   └─ SSR → use virtualRender(), virtualPrerender()
+  │
+  ├─ CASE 1: No async data
+  │   └─ view.render() → return HTML
+  │
+  ├─ CASE 2: Has @await directive
+  │   ├─ CSR: Load data from current URL
+  │   │   ├─ getURIData() → fetch from API
+  │   │   ├─ Store in this.store
+  │   │   └─ view.refresh(data)
+  │   └─ SSR: Just setup relationships
+  │
+  └─ CASE 3: Has @fetch directive
+      ├─ CSR: Fetch data using config
+      │   ├─ this.App.Http.request(config)
+      │   └─ view.refresh(response.data)
+      └─ SSR: Just setup relationships
+```
+
+---
+
+### **4. clearOldRendering()**
+
+**Mục đích:** Reset state giữa renders
+
+**Logic:**
+```
+clearOldRendering()
+  ├─ 1. Clear templates cache
+  │    └─ Object.keys(templates).forEach(clear)
+  │
+  ├─ 2. Clear cachedViews
+  │    └─ Delete old view instances
+  │
+  ├─ 3. Clear stacks (GỮ LẠI cache info!)
+  │    ├─ ALL_VIEW_STACK = []
+  │    ├─ SUPER_VIEW_STACK = []
+  │    ├─ PAGE_VIEW = null
+  │    ├─ ⚠️ KHÔNG xóa: CURRENT_SUPER_VIEW_PATH
+  │    └─ ⚠️ KHÔNG xóa: CURRENT_SUPER_VIEW
+  │
+  └─ 4. Clear orphaned event data
+       └─ Prevent memory leaks
+```
+
+**Tại sao giữ cache info?**
+- Để check layout cache ở `mountView()` PHASE 3
+- Nếu xóa → sẽ luôn destroy layout (inefficient)
+
+---
+
+### **5. unmountView(view)**
+
+**Mục đích:** Cleanup một view hoàn toàn
+
+**Logic (5 bước):**
+```
+unmountView(view)
+  ├─ 1. Call beforeUnmount() lifecycle
+  ├─ 2. Call removeEvents() - remove listeners
+  ├─ 3. Remove from viewMap
+  ├─ 4. Call unmounted() lifecycle
+  └─ 5. Call destroy() if defined
+```
+
+**Khi nào gọi?**
+- Layout thay đổi (PHASE 3)
+- Navigation away from view
+- Component cleanup
+
+---
+
+## 🔑 Key Concepts
+
+### **1. View Hierarchy (Super Views)**
+
+```
+ROOT_LAYOUT (Master page)
+    ↓
+ADMIN_LAYOUT (Admin section)
+    ↓
+USER_LIST (Page view)
+```
+
+**Scan order:** Bottom-up (USER_LIST → ADMIN_LAYOUT → ROOT_LAYOUT)
+**Mount order:** Top-down (ROOT_LAYOUT → ADMIN_LAYOUT → USER_LIST)
+
+---
+
+### **2. Cache Strategy**
+
+| Type | Key | TTL | Reuse |
+|------|-----|-----|-------|
+| Layout | `CURRENT_SUPER_VIEW_PATH` | Session | ✅ Reuse nếu giống |
+| Page | `viewStoreKey` | 10 min | ✅ Reuse nếu không expired |
+| Sections | `_sections[name]` | Session | ✅ Reuse |
+
+---
+
+### **3. CSR vs SSR Flow**
+
+#### **CSR (Client-Side Rendering)**
+```
+mountView()
+  ↓
+loadView()
+  ├─ render() → HTML
+  └─ Return { html, needInsert: true }
+  ↓
+OneDOM.setHTML(container, html)
+  ↓
+mounted() lifecycle
+```
+
+#### **SSR (Server-Side Rendering)**
+```
+mountViewScan()
+  ↓
+scanView()
+  ├─ Get SSR HTML from server
+  ├─ virtualRender() → setup relationships only
+  └─ Return { html, needInsert: false }
+  ↓
+OneDOM.setHTML(container, html) [optional]
+  ↓
+Scan DOM + attach events
+  ↓
+mounted() lifecycle
+```
+
+---
+
+### **4. Data Flow: @await & @fetch**
+
+#### **@await Directive**
+```
+View có @await
+  ↓
+renderOrScanView()
+  ├─ CSR:
+  │   ├─ Check this.store[apiDataKey]
+  │   ├─ Nếu cache hit: view.refresh(cachedData)
+  │   └─ Nếu miss: this.App.Api.getURIData() → fetch → refresh
+  └─ SSR:
+      └─ Skip (data từ server)
+```
+
+#### **@fetch Directive**
+```
+View có @fetch
+  ↓
+renderOrScanView()
+  ├─ CSR:
+  │   ├─ Parse fetch config: { url, method, headers, ... }
+  │   ├─ this.App.Http.request(config)
+  │   └─ view.refresh(response.data)
+  └─ SSR:
+      └─ Skip (data từ server)
+```
+
+---
+
+## ⚡ Performance Optimizations
+
+### **1. Layout Cache**
+```javascript
+// ❌ BAD: Destroy layout mỗi lần navigate
+if (layoutPath !== oldPath) {
+    destroy layout;
+}
+
+// ✅ GOOD: Reuse layout nếu giống
+if (newLayoutPath !== oldLayoutPath) {
+    destroy oldLayout;
+}
+```
+
+### **2. Page Cache**
+```javascript
+// Store page view đã render
+this.cachedPageViews.set(viewStoreKey, viewInstance);
+
+// Reuse nếu navigate lại
+if (cachedPageView) {
+    return cachedView.html;
+}
+```
+
+### **3. Event Cleanup**
+```javascript
+// Avoid memory leaks
+clearOldRendering() → clearOrphanedEventData();
+
+// Clear only when needed
+unmountView() → removeEvents();
+```
+
+### **4. Scroll Position**
+```javascript
+// Remember old position
+this.PAGE_VIEW?.__.scrollToOldPosition();
+
+// Or go to top for new page
+this.scrollToTop();
+```
+
+---
+
+## 🐛 Potential Issues & Solutions
+
+### **Issue 1: Layout cache mất khi refresh**
+**Solution:** Store `CURRENT_SUPER_VIEW_PATH` persistent
+
+### **Issue 2: Memory leak từ event listeners**
+**Solution:** `clearOrphanedEventData()` + `removeEvents()`
+
+### **Issue 3: Data stale trong @await**
+**Solution:** Cache key includes `urlPath` → Cache per route
+
+### **Issue 4: SSR hydration mismatch**
+**Solution:** `virtualRender()` setup relationships before scan
+
+---
+
+## 📝 Summary Table
+
+| Hàm | Mục đích | Input | Output | Khi gọi |
+|-----|----------|-------|--------|---------|
+| **mountView** | Main mount logic | viewName, params | HTML inserted | Navigation |
+| **loadView** | Render view (CSR) | name, data, urlPath | {html, superView} | mountView PHASE 2 |
+| **scanView** | Scan SSR HTML | name | {html, views} | mountViewScan |
+| **renderOrScanView** | Render/scan with async | view, data, mode | HTML or None | loadView, scanView |
+| **clearOldRendering** | Reset state | - | - | Before render |
+| **unmountView** | Cleanup view | view | boolean | On destroy |
+
+---
+
+## 🎓 Learning Points
+
+1. **Cache optimization:** Layout reuse nếu path giống
+2. **Lifecycle management:** unmounted → render → mounted
+3. **Super view hierarchy:** Scan từ page up to root
+4. **Async data handling:** @await vs @fetch directive
+5. **Memory management:** Clear orphaned events, remove listeners
+6. **CSR vs SSR:** Different rendering vs setup paths
+7. **Event delegation:** Scan DOM and attach handlers
+8. **Scroll position:** Restore position on back/forward
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onelaraveljs",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "description": "OneLaravel JS Framework Core & Compiler",
   "main": "index.js",
   "exports": {

package/src/core/ViewController.js

@@ -363,10 +363,6 @@ export class ViewController {
         // Set basic properties (giữ nguyên tên từ code gốc)
         this.id = config.viewId || uniqId();
         deleteProp(config, 'viewId');
-        this.addCSS = config.addCSS || this._emptyFn;
-        deleteProp(config, 'addCSS');
-        this.removeCSS = config.removeCSS || this._emptyFn;
-        deleteProp(config, 'removeCSS');
         this.superViewPath = config.superViewPath || config.superView;
         deleteProp(config, 'superViewPath');
         deleteProp(config, 'superView');
@@ -1354,6 +1350,7 @@ export class ViewController {
             this.children.forEach(childCtrl => {
                 if (childCtrl && childCtrl instanceof ViewController) {
                     childCtrl.destroy();
+                    childCtrl._lifecycleManager.destroy();
                 }
             });
             this.children = [];

package/src/core/ViewManager.js

@@ -389,8 +389,8 @@ export class ViewManager {
         const awaitData = null;
         this.PAGE_VIEW = null;
         try {
-            
-            const viewStoreKey = name.replace('.', '_') + '_' + urlPath?.replace(/[\/\:]/g, '_');
+
+            const viewStoreKey = name + '__' + urlPath + '__ciew';
             const cachedPageView = this.cachedPageViews.get(viewStoreKey);
             if (cachedPageView && cachedPageView instanceof ViewEngine) {
                 // Sử dụng lại cached page view
@@ -398,7 +398,7 @@ export class ViewManager {
                 this.PAGE_VIEW = cachedPageView;
                 let ultraView = cachedPageView;
                 let superView = null;
-                if(cachedPageView.superView && cachedPageView.superView instanceof ViewEngine){
+                if (cachedPageView.superView && cachedPageView.superView instanceof ViewEngine) {
                     superView = cachedPageView.superView;
                     ultraView = superView;
                     this.CURRENT_SUPER_VIEW_MOUNTED = true;
@@ -407,7 +407,7 @@ export class ViewManager {
                     cachedPageView.__._templateManager.pushCachedSections();
                     html = cachedLayoutPath === this.CURRENT_SUPER_VIEW_PATH ? superView.__.renderedHtml : this.renderView(superView);
                 }
-
+                logger.debug(`🔍 App.View.loadView: Using cached view for '${name}' with URL path '${urlPath}'`);
                 return {
                     html: html,
                     isSuperView: superView ? true : false,
@@ -421,7 +421,7 @@ export class ViewManager {
 
             let hasCache = false;
             if (this.cachedTimes > 0) {
-                let cacheKey = name.replace('.', '_') + '_' + urlPath?.replace(/[\/\:]/g, '_');
+                let cacheKey = name + '__' + urlPath + '__ciew';
                 const cachedData = this.storageService.get(cacheKey);
                 if (cachedData) {
                     data = { ...data, ...cachedData };
@@ -447,16 +447,16 @@ export class ViewManager {
             if (this.cachedTimes > 0) {
                 if (this.PAGE_VIEW instanceof ViewEngine) {
                     const oldCacheData = this.PAGE_VIEW.data;
-                    let cacheKey = this.PAGE_VIEW.path.replace('.', '_') + '_' + this.PAGE_VIEW.urlPath?.replace(/\//g, '_');
+                    let cacheKey = this.PAGE_VIEW.path + '__' + this.PAGE_VIEW.urlPath + '__ciew';
                     this.storageService.set(cacheKey, oldCacheData, 3600); // cache trong 1 giờ
                 }
             }
 
             // Lưu view vào store để quản lý vòng đời (ttl mặc định 30 phút)
             this.store.set(viewStoreKey, view, this.storeTTL); // lưu view vào store
-            this.store.onExpire(viewStoreKey, (view) => {
-                if (view && view instanceof ViewEngine) {
-                    view.__._lifecycleManager.destroy();
+            this.store.onExpire(viewStoreKey, (viewStore) => {
+                if (viewStore && viewStore instanceof ViewEngine && viewStore != this.PAGE_VIEW) {
+                    viewStore.__._lifecycleManager.destroy();
                 }
             });
 
@@ -626,6 +626,13 @@ export class ViewManager {
             if (route && route.$urlPath) {
                 view.__.urlPath = route.$urlPath;
             }
+            const viewStoreKey = name.replace('.', '_') + '_' + (route?.$urlPath || '').replace(/[\/\:]/g, '_');
+            this.store.set(viewStoreKey, view, this.storeTTL); // lưu view vào store
+            this.store.onExpire(viewStoreKey, (viewStore) => {
+                if (viewStore && viewStore instanceof ViewEngine && viewStore != this.PAGE_VIEW) {
+                    viewStore.__._lifecycleManager.destroy();
+                }
+            });
 
 
             // Store view in array for tracking
@@ -795,8 +802,7 @@ export class ViewManager {
                 oldSuperView.__._lifecycleManager.unmounted();
                 // oldSuperView.__._lifecycleManager.destroyOriginalView();
             }
-            
-            
+
 
 
 
@@ -806,22 +812,20 @@ export class ViewManager {
                 console.error('View rendering error:', viewResult.error);
                 return;
             }
+            const newPageView = this.PAGE_VIEW, newSuperView = this.CURRENT_SUPER_VIEW;
 
             // ============================================================
             // STEP 2: Check cache layout - nếu giống thì KHÔNG destroy
             // ============================================================
-            const newSuperViewPath = viewResult.superView?.__.path;
+            const newSuperViewPath = newSuperView?.__.path;
             const isSameLayout = newSuperViewPath === oldSuperViewPath;
 
-            // Chỉ destroy nếu layout KHÁC
-            if (!isSameLayout) {
-                if (oldSuperView && oldSuperView instanceof ViewEngine) {
-                    // Call destroy() to remove CSS and scripts
-                    oldSuperView.__._lifecycleManager.unmounted();
-                    // oldSuperView.__._lifecycleManager.destroyOriginalView();
-                }
-
+            // Chỉ unmount layout cũ nếu layout KHÁC
+            if (!isSameLayout && oldSuperView && oldSuperView instanceof ViewEngine) {
+                oldSuperView.__.removeStyles();
             }
+            oldPageView?.__.removeStyles();
+
 
             // ============================================================
             // STEP 3: Render và mount như bình thường
@@ -839,14 +843,21 @@ export class ViewManager {
                 this.emitChangedSections();
             }
 
-            
+            if (newPageView && newPageView instanceof ViewEngine) {
+                newPageView.__.insertStyles();
+            }
+            if (newSuperView && newSuperView instanceof ViewEngine) {
+                newSuperView.__.insertStyles();
+            }
+
+
             if (viewResult.ultraView && viewResult.ultraView instanceof ViewEngine) {
                 viewResult.ultraView.__._lifecycleManager.mounted();
             }
 
             this.CURRENT_SUPER_VIEW_MOUNTED = true; // set trang thái super view mounted = true
 
-            this.PAGE_VIEW? this.PAGE_VIEW.__.scrollToOldPosition() : this.scrollToTop();
+            this.PAGE_VIEW ? this.PAGE_VIEW.__.scrollToOldPosition() : this.scrollToTop();
 
         } catch (error) {
             console.error('Error rendering view:', error);
@@ -1351,7 +1362,7 @@ export class ViewManager {
             }
             result = view.__[renderMethod]();
         }
-        const apiDataKey = view.__.path.replace(/\//g, '_') + '_' + view.__.urlPath.replace(/[\/\?\=\&]/g, '_') + '_data';
+        const apiDataKey = view.__.path + '_' + view.__.urlPath + ':data';
 
         // ====================================================================
         // CASE 3A: Has @await - Load data by current URL
@@ -1642,35 +1653,10 @@ export class ViewManager {
         }
 
         try {
-            logger.log(`🗑️ View.unmountView: Unmounting view ${view.id} (${view.path})`);
-
-            // Step 1: Call beforeUnmount lifecycle
-            if (view.__ && typeof view.__._lifecycleManager.beforeUnmount === 'function') {
-                view.__._lifecycleManager.beforeUnmount();
-            }
-
-            // Step 2: Remove event listeners
-            if (typeof view.__._lifecycleManager.removeEvents === 'function') {
-                view.__._lifecycleManager.removeEvents();
-            }
 
-            // Step 3: Remove from viewMap
-            if (this.viewMap.has(view.id)) {
-                this.viewMap.delete(view.id);
-            }
-
-            // Step 4: Call unmounted lifecycle
-            if (view.__ && typeof view.__._lifecycleManager.unmounted === 'function') {
-                view.__._lifecycleManager.unmounted();
-            }
-
-            // Step 5: Call destroy if defined
-            if (view.__ && typeof view.__._lifecycleManager.destroy === 'function') {
-                view.__._lifecycleManager.destroy();
-            }
+            view.__._lifecycleManager.unmounted();
+            view.__.removeStyles();
 
-            logger.log(`✅ View.unmountView: View ${view.id} unmounted successfully`);
-            return true;
 
         } catch (error) {
             logger.error(`❌ View.unmountView: Error unmounting view ${view.id}:`, error);

package/src/core/ViewState.js

@@ -216,9 +216,6 @@ export class StateManager {
         }
         
         // Log để debug (có thể tắt trong production)
-        if (this.controller?.App?.env?.debug) {
-            logger.log(`[StateManager] Flushing ${changesToProcess.length} changes (flush #${this._flushCount}):`, changesToProcess);
-        }
         
         // Reset cờ called của multi-key listeners
         for (const listener of this.multiKeyListeners) {

package/src/core/managers/LifecycleManager.js

@@ -256,7 +256,6 @@ export class LifecycleManager {
             this.beforeUnmount();
             this.unmounting();
 
-            // Remove scripts
             ctrl.removeScripts();
 
             // Stop event listeners
@@ -327,6 +326,7 @@ export class LifecycleManager {
 
         // Remove styles (will use fallback if styles array is empty)
         ctrl.removeStyles();
+        ctrl.removeScripts();
 
         // Final cleanup: Remove all styles with this view path from DOM
         // This ensures CSS is removed even if registry is out of sync

package/src/core/managers/ResourceManager.js

@@ -16,6 +16,12 @@ export class ResourceManager {
     constructor(controller) {
         this.controller = controller;
         this.path = controller.path;
+        /**
+         * Flag to track if styles/scripts have been inserted
+         * @type {boolean}
+         */
+        this.insertedStyles = false;
+        this.insertedScripts = false;
     }
 
     updateController(newController) {
@@ -23,6 +29,47 @@ export class ResourceManager {
         this.path = newController.path;
     }
 
+    /**
+     * Check if this view's styles have been inserted into DOM
+     * @returns {boolean}
+     */
+    hasInsertedStyles() {
+        return this.insertedStyles && this.controller.insertedResourceKeys && this.controller.insertedResourceKeys.size > 0;
+    }
+
+    /**
+     * Check if this view's scripts have been inserted into DOM
+     * @returns {boolean}
+     */
+    hasInsertedScripts() {
+        return this.insertedScripts;
+    }
+
+    /**
+     * Check if specific resource key has been inserted
+     * @param {string} resourceKey
+     * @returns {boolean}
+     */
+    hasInsertedResource(resourceKey) {
+        return this.controller.insertedResourceKeys && this.controller.insertedResourceKeys.has(resourceKey);
+    }
+
+    /**
+     * Get the number of inserted styles for this view
+     * @returns {number}
+     */
+    getInsertedStylesCount() {
+        if (!this.controller.insertedResourceKeys) return 0;
+        let count = 0;
+        this.controller.insertedResourceKeys.forEach(key => {
+            const entry = this.controller.App.View.Engine.resourceRegistry.get(key);
+            if (entry && entry.resourceType === 'style') {
+                count++;
+            }
+        });
+        return count;
+    }
+
     /**
      * Insert all resources (styles + scripts)
      */
@@ -42,12 +89,25 @@ export class ResourceManager {
     /**
      * Insert styles into DOM with reference counting
      * Extracted from ViewController.js line 428
+     * Will skip if already inserted to prevent duplicate execution
      */
     insertStyles() {
+        this.controller.children?.forEach(childCtrl => {
+            childCtrl._resourceManager.insertStyles();
+        });
+        // Skip if already inserted
+        if (this.insertedStyles) {
+            return;
+        }
+
         if (!this.controller.styles || this.controller.styles.length === 0) {
+            this.insertedStyles = true;
             return;
         }
 
+        let insertedCount = 0;
+        let skippedCount = 0;
+
         this.controller.styles.forEach(style => {
             const resourceKey = this.controller.App.View.Engine.getResourceKey({
                 ...style,
@@ -63,8 +123,11 @@ export class ResourceManager {
                 registryEntry.viewPaths.add(this.path);
                 registryEntry.referenceCount++;
                 this.controller.insertedResourceKeys.add(resourceKey);
+                skippedCount++;
                 return; // Don't insert again
             }
+            
+            insertedCount++;
 
             // Create and insert new style element
             let element;
@@ -131,18 +194,31 @@ export class ResourceManager {
             });
 
             this.controller.insertedResourceKeys.add(resourceKey);
+            logger.debug(`  ✅ Style inserted (key: ${resourceKey}, type: ${style.type})`);
         });
+
+        this.insertedStyles = true;
     }
 
     /**
      * Insert scripts into DOM with reference counting
      * Extracted from ViewController.js line 523
+     * Will skip if already inserted to prevent duplicate execution
      */
     insertScripts() {
+        // Skip if already inserted
+        if (this.insertedScripts) {
+            return;
+        }
+
         if (!this.controller.scripts || this.controller.scripts.length === 0) {
+            this.insertedScripts = true;
             return;
         }
 
+        let insertedCount = 0;
+        let skippedCount = 0;
+
         this.controller.scripts.forEach(script => {
             const resourceKey = this.controller.App.View.Engine.getResourceKey({
                 ...script,
@@ -158,6 +234,7 @@ export class ResourceManager {
                 registryEntry.viewPaths.add(this.path);
                 registryEntry.referenceCount++;
                 this.controller.insertedResourceKeys.add(resourceKey);
+                skippedCount++;
 
                 // If script already loaded, call onload callback (only for external scripts with element)
                 if (script.onload && registryEntry.element && registryEntry.element.readyState === 'complete') {
@@ -176,6 +253,8 @@ export class ResourceManager {
                 return; // Don't insert again
             }
 
+            insertedCount++;
+
             // Create and insert new script element
             let element;
 
@@ -293,19 +372,33 @@ export class ResourceManager {
                 this.controller.insertedResourceKeys.add(resourceKey);
             }
         });
+
+        this.insertedScripts = true;
     }
 
     /**
      * Remove styles from registry with reference counting
      * Extracted from ViewController.js line 683
+     * Will skip if not inserted to prevent unnecessary operations
      */
     removeStyles() {
+        this.controller.children?.forEach(childCtrl => {
+            childCtrl._resourceManager.removeStyles();
+        });
+        // Skip if not inserted
+        if (!this.insertedStyles) {
+            return;
+        }
+
         if (!this.controller.styles || this.controller.styles.length === 0) {
             // Fallback: Remove all styles with this view path from DOM
             this.removeStylesByViewPath();
+            this.insertedStyles = false;
             return;
         }
 
+        let removedCount = 0;
+
         this.controller.styles.forEach(style => {
             const resourceKey = this.controller.App.View.Engine.getResourceKey({
                 ...style,
@@ -324,10 +417,13 @@ export class ResourceManager {
                 if (registryEntry.referenceCount <= 0) {
                     if (registryEntry.element && registryEntry.element.parentNode) {
                         registryEntry.element.remove();
+                        removedCount++;
                     }
 
                     // Remove from registry
                     this.controller.App.View.Engine.resourceRegistry.delete(resourceKey);
+                } else {
+                    logger.debug(`  ⏭️  Style still in use by other views (key: ${resourceKey}, refCount: ${registryEntry.referenceCount})`);
                 }
 
                 this.controller.insertedResourceKeys.delete(resourceKey);
@@ -337,6 +433,7 @@ export class ResourceManager {
                 elements.forEach(element => {
                     if (element.parentNode) {
                         element.remove();
+                        removedCount++;
                     }
                 });
             }
@@ -344,6 +441,8 @@ export class ResourceManager {
 
         // Final fallback: Remove any remaining styles with this view path
         this.removeStylesByViewPath();
+        
+        this.insertedStyles = false;
     }
 
     /**
@@ -402,12 +501,24 @@ export class ResourceManager {
     /**
      * Remove scripts from registry with reference counting
      * Extracted from ViewController.js line 790
+     * Will skip if not inserted to prevent unnecessary operations
      */
     removeScripts() {
+        // Skip if not inserted
+        this.controller.children?.forEach(childCtrl => {
+            childCtrl._resourceManager.removeScripts();
+        });
+        if (!this.insertedScripts) {
+            return;
+        }
+
         if (!this.controller.scripts || this.controller.scripts.length === 0) {
+            this.insertedScripts = false;
             return;
         }
 
+        let removedCount = 0;
+
         this.controller.scripts.forEach(script => {
             const resourceKey = this.controller.App.View.Engine.getResourceKey({
                 ...script,
@@ -428,14 +539,19 @@ export class ResourceManager {
                     // Just remove from registry
                     if (registryEntry.element && registryEntry.element.parentNode) {
                         registryEntry.element.remove();
+                        removedCount++;
                     }
 
                     // Remove from registry
                     this.controller.App.View.Engine.resourceRegistry.delete(resourceKey);
+                } else {
+                    logger.debug(`  ⏭️  Script still in use by other views (key: ${resourceKey}, refCount: ${registryEntry.referenceCount})`);
                 }
 
                 this.controller.insertedResourceKeys.delete(resourceKey);
             }
         });
+
+        this.insertedScripts = false;
     }
 }