onelaraveljs 1.0.0

package/src/core/managers/LifecycleManager.js

@@ -0,0 +1,356 @@
+/**
+ * LifecycleManager - Quản lý các lifecycle hooks của view
+ * Xử lý created, mounted, updated, destroyed và các hooks liên quan
+ * 
+ * Tách từ ViewController.js để cải thiện khả năng bảo trì
+ * @module core/managers/LifecycleManager
+ * @author OneLaravel Team
+ * @since 2025-12-29
+ */
+
+import logger from '../services/LoggerService.js';
+import { devLog } from '../../helpers/devWarnings.js';
+
+export class LifecycleManager {
+    /**
+     * @param {ViewController} controller - Parent controller instance
+     */
+    constructor(controller) {
+        this.controller = controller;
+        this.view = controller.view;
+    }
+
+    beforeCreate() {
+        // logger.log(`🔵 beforeCreate: ${this.controller.path}`);
+        // Lifecycle: Được gọi trước khi tạo view
+        if (typeof this.view.beforeCreate === 'function') {
+            this.view.beforeCreate();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi khi view được tạo (trước lần render đầu tiên)
+     */
+    created() {
+        // logger.log(`🟢 created: ${this.controller.path}`);
+        if (typeof this.view.created === 'function') {
+            this.view.created();
+        }
+
+        // Chèn styles trước khi render
+        this.controller.insertStyles();
+    }
+
+    /**
+     * Lifecycle: Được gọi trước khi view được cập nhật
+     */
+    beforeUpdate() {
+        logger.log(`🟡 beforeUpdate: ${this.controller.path}`);
+        if (typeof this.view.beforeUpdate === 'function') {
+            this.view.beforeUpdate();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi sau khi view được cập nhật
+     */
+    updated() {
+        // logger.log(`🟠 updated: ${this.controller.path}`);
+        if (typeof this.view.updated === 'function') {
+            this.view.updated();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trước khi khởi tạo
+     */
+    beforeInit() {
+        // logger.log(`🔷 beforeInit: ${this.controller.path}`);
+        if (typeof this.view.beforeInit === 'function') {
+            this.view.beforeInit();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trong quá trình khởi tạo
+     */
+    init() {
+        // logger.log(`🔶 init: ${this.controller.path}`);
+        if (typeof this.view.init === 'function') {
+            this.view.init();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi sau khi khởi tạo
+     */
+    afterInit() {
+        // logger.log(`🔸 afterInit: ${this.controller.path}`);
+        if (typeof this.view.afterInit === 'function') {
+            this.view.afterInit();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trước khi view bị hủy
+     */
+    beforeDestroy() {
+        // logger.log(`🔴 beforeDestroy: ${this.controller.path}`);
+        if (typeof this.view.beforeDestroy === 'function') {
+            this.view.beforeDestroy();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trong quá trình hủy
+     */
+    destroying() {
+        // logger.log(`🟥 destroying: ${this.controller.path}`);
+        if (typeof this.view.destroying === 'function') {
+            this.view.destroying();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi sau khi view bị hủy
+     */
+    destroyed() {
+        // logger.log(`⬛ destroyed: ${this.controller.path}`);
+        if (typeof this.view.destroyed === 'function') {
+            this.view.destroyed();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trước khi view được mount
+     */
+    beforeMount() {
+        // logger.log(`🟦 beforeMount: ${this.controller.path}`);
+        if (typeof this.view.beforeMount === 'function') {
+            this.view.beforeMount();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi trong quá trình mounting
+     */
+    mounting() {
+        // logger.log(`🟪 mounting: ${this.controller.path}`);
+        if (typeof this.view.mounting === 'function') {
+            this.view.mounting();
+        }
+    }
+
+    /**
+     * Lifecycle: Được gọi khi view được mount (sau khi DOM sẵn sàng)
+     * Đây là nơi scripts được chèn và event listeners được khởi động
+     */
+    mounted() {
+        const ctrl = this.controller;
+        // logger.log(`🟩 mounted START: ${ctrl.path}`);
+        ctrl.isDestroyed = false;
+        
+        if (!ctrl.isMarkupScanned) {
+            ctrl.__scanDOMElements(ctrl.id);
+            ctrl.isMarkupScanned = true;
+        }
+        
+        if (!ctrl.isMounted) {
+            this.beforeMount();
+            
+            try {
+                this.mounting();
+
+                // Chèn scripts sau khi DOM sẵn sàng
+                ctrl.insertScripts();
+
+                // Thông báo super view và children
+                if (ctrl.originalView && ctrl.originalView instanceof this.App.View.Controller) {
+                    ctrl.originalView.onSuperViewMounted();
+                }
+                
+                // Thông báo children (controller.children được duy trì bởi ChildrenRegistry)
+                if (ctrl.children && ctrl.children.length > 0) {
+                    ctrl.children.forEach(childCtrl => {
+                        if (childCtrl && childCtrl instanceof this.App.View.Controller) {
+                            childCtrl.onParentMounted();
+                        }
+                    });
+                }
+
+                // Mount ReactiveComponents (output & watch thống nhất)
+                if (ctrl._reactiveManager.reactiveComponents && ctrl._reactiveManager.reactiveComponents.size > 0) {
+                    ctrl._reactiveManager.reactiveComponents.forEach(component => {
+                        component.mounted();
+                    });
+                }
+
+                // Khởi động event listeners
+                ctrl._eventManager.startEventListener();
+                ctrl._bindingManager.startBindingEventListener();
+                ctrl._bindingManager.startClassBindingEventListener();
+                
+                ctrl.isMounted = true;
+                ctrl.isReady = true;
+                ctrl.isRendered = true;
+                
+                if (typeof ctrl.view.mounted === 'function') {
+                    ctrl.view.mounted();
+                }
+                
+                // logger.log(`✅ mounted COMPLETE: ${ctrl.path}`);
+
+            } catch (error) {
+                logger.warn('Error in mounted lifecycle hook:', error);
+            }
+            
+            ctrl.states.__.readyToCommit = true;
+        }
+        
+        ctrl.isReadyToStateChangeListen = true;
+    }
+
+    /**
+     * Lifecycle: Called before view is unmounted
+     */
+    beforeUnmount() {
+        // logger.log(`🟨 beforeUnmount: ${this.controller.path}`);
+        if (typeof this.view.beforeUnmount === 'function') {
+            this.view.beforeUnmount();
+        }
+    }
+
+    /**
+     * Lifecycle: Called during unmounting
+     */
+    unmounting() {
+        // logger.log(`🟧 unmounting: ${this.controller.path}`);
+        if (typeof this.view.unmounting === 'function') {
+            this.view.unmounting();
+        }
+    }
+
+    /**
+     * Lifecycle: Called when view is unmounted
+     * This is where scripts are removed and event listeners are stopped
+     */
+    unmounted() {
+        const ctrl = this.controller;
+        // logger.log(`🔻 unmounted START: ${ctrl.path}`);
+        
+        if (ctrl.isMounted) {
+            ctrl.isReadyToStateChangeListen = false;
+            ctrl.states.__.readyToCommit = false;
+            
+            this.beforeUnmount();
+            this.unmounting();
+            
+            // Remove scripts
+            ctrl.removeScripts();
+
+            // Stop event listeners
+            ctrl._eventManager.stopEventListener();
+            ctrl._bindingManager.stopBindingEventListener();
+            ctrl._bindingManager.stopClassBindingEventListener();
+            
+            ctrl.isMounted = false;
+        }
+        
+        // Notify super view and children
+        if (ctrl.originalView && ctrl.originalView instanceof this.App.View.Controller) {
+            ctrl.originalView.onSuperViewUnmounted();
+        }
+        
+        if (ctrl.children && ctrl.children.length > 0) {
+            ctrl.children.forEach(childCtrl => {
+                if (childCtrl && childCtrl instanceof this.App.View.Controller) {
+                    childCtrl.onParentUnmounted();
+                }
+            });
+        }
+
+        // Unmount ReactiveComponents (unified output & watch)
+        if (ctrl._reactiveManager.reactiveComponents && ctrl._reactiveManager.reactiveComponents.size > 0) {
+            ctrl._reactiveManager.reactiveComponents.forEach(component => {
+                component.unmounted();
+            });
+        }
+        
+        if (typeof ctrl.view.unmounted === 'function') {
+            ctrl.view.unmounted();
+        }
+        
+        // logger.log(`✅ unmounted COMPLETE: ${ctrl.path}`);
+    }
+
+    /**
+     * Destroy view and cleanup resources
+     */
+    destroy() {
+        const ctrl = this.controller;
+        // logger.log(`💀 destroy START: ${ctrl.path}`);
+        
+        // Mark as destroyed to prevent processing after destroy
+        ctrl.isDestroyed = true;
+        this.beforeDestroy();
+        this.destroying();
+
+        // Save view path before cleanup (needed for removing styles from DOM)
+        const viewPath = ctrl.path;
+
+        // Reset pending flag to prevent processing after destroy
+        ctrl._stateChangePending = false;
+
+        // Clear state change collections
+        if (ctrl.changedStateKeys) {
+            ctrl.changedStateKeys.clear();
+        }
+        ctrl.changeStateQueueCount = 0;
+
+        this.unmounted(); // Will call removeScripts()
+
+        // Remove styles (will use fallback if styles array is empty)
+        ctrl.removeStyles();
+
+        // Final cleanup: Remove all styles with this view path from DOM
+        // This ensures CSS is removed even if registry is out of sync
+        if (viewPath) {
+            ctrl.removeStylesByViewPath(viewPath);
+        }
+
+        if (ctrl.originalView && ctrl.originalView instanceof this.App.View.Controller) {
+            ctrl.originalView._lifecycleManager.destroy();
+        }
+        
+        // Destroy all children using ChildrenRegistry for proper cleanup
+        if (ctrl._childrenRegistry) {
+            ctrl._childrenRegistry.clear();
+        } else {
+            // Fallback: manual destroy if registry not available
+            if (ctrl.children && ctrl.children.length > 0) {
+                ctrl.children.forEach(childCtrl => {
+                    if (childCtrl && childCtrl instanceof this.App.View.Controller) {
+                        childCtrl._lifecycleManager.destroy();
+                    }
+                });
+            }
+        }
+        
+        ctrl._reactiveManager.destroy();
+        if (ctrl.refElements && ctrl.refElements.length > 0) {
+            ctrl.refElements.forEach(element => element.parentNode && element.parentNode.removeChild(element));
+            ctrl.refElements = [];
+        }
+        
+        this.destroyed();
+        // logger.log(`☠️ destroy COMPLETE: ${ctrl.path}`);
+    }
+
+    get App() {
+        return this.controller.App;
+    }
+    set App(value) {
+        devLog('LifecycleManager.App is read-only.');
+    }
+
+}

package/src/core/managers/ReactiveManager.js

@@ -0,0 +1,334 @@
+/**
+ * ReactiveManager - Quản lý các reactive component
+ * Xử lý ReactiveComponents và reactive bindings
+ * Sử dụng ReactiveComponent thống nhất cho mọi reactive rendering
+ */
+
+import { ReactiveComponent } from '../reactive/ReactiveComponent.js';
+import { escapeString, hasData, uniqId } from '../../helpers/utils.js';
+import logger from '../services/LoggerService.js';
+
+export class ReactiveManager {
+    constructor(controller) {
+        this.controller = controller;
+
+        // Reactive components (thống nhất output & watch)
+        this.reactiveComponents = new Map();
+        this.reactiveComponentConfig = [];
+        this.reactiveComponentIndex = 0;
+        this.reactiveComponentScanIndex = 0;
+        this.reactiveComponentIDs = [];
+        this.reactiveComponentPrerenderIDs = [];
+        this.reactiveComponentRenderIDs = [];
+
+        // Following IDs - theo dõi reactive IDs trong các giai đoạn render
+        this.followingIDs = [];
+        this.followingRenderIDs = [];
+        this.followingPrerenderIDs = [];
+
+        // Hỗ trợ legacy - map tới reactive components
+        this.outputComponents = this.reactiveComponents;
+        this.outputComponentIDs = this.reactiveComponentIDs;
+        this.watchComponents = this.reactiveComponents;
+        this.watchComponentIDs = this.reactiveComponentIDs;
+
+        this.parentWatchComponent = null;
+    }
+
+    destroy() {
+        if (this.reactiveComponents && this.reactiveComponents.size > 0) {
+            this.reactiveComponents.forEach(component => component.destroy());
+            this.reactiveComponents.clear();
+        }
+    }
+
+    resetScanIndex() {
+        this.reactiveComponentScanIndex = 0;
+    }
+
+    clearForRefresh() {
+        if (this.reactiveComponents && this.reactiveComponents.size > 0) {
+            this.reactiveComponents.forEach(component => {
+                component.destroy();
+            });
+        }
+        this.reactiveComponentIDs = [];
+        this.reactiveComponentScanIndex = 0;
+        
+        // Reset các mảng following
+        this.followingIDs = [];
+        this.followingRenderIDs = [];
+        this.followingPrerenderIDs = [];
+    }
+
+    renderOutputComponent(stateKeys = [], renderBlock = () => '') {
+        if (!Array.isArray(stateKeys) || stateKeys.length === 0) {
+            return typeof renderBlock === 'function' ? renderBlock() : '';
+        }
+
+        if (typeof renderBlock !== 'function') {
+            return '';
+        }
+
+        if (this.controller.isVirtualRendering) {
+            this.controller.isVirtualRendering = false;
+            let result = this.renderOutputComponentScan(stateKeys, renderBlock);
+            this.controller.isVirtualRendering = true;
+            if (result !== false) {
+                return result;
+            }
+        }
+
+        const rc = new ReactiveComponent({
+            stateKeys,
+            renderBlock,
+            controller: this.controller,
+            App: this.controller.App,
+            type: 'output',
+            escapeHTML: false
+        });
+
+        this.reactiveComponentIDs.push(rc.id);
+        this.reactiveComponents.set(rc.id, rc);
+        return rc.render();
+    }
+
+    renderOutputEscapedComponent(stateKeys = [], renderBlock = () => '') {
+        if (!Array.isArray(stateKeys) || stateKeys.length === 0) {
+            return escapeString(typeof renderBlock === 'function' ? renderBlock() : '');
+        }
+
+        if (typeof renderBlock !== 'function') {
+            return '';
+        }
+
+        if (this.controller.isVirtualRendering) {
+            this.controller.isVirtualRendering = false;
+            let result = this.renderOutputComponentScan(stateKeys, renderBlock, true);
+            this.controller.isVirtualRendering = true;
+            if (result !== false) {
+                return result;
+            }
+        }
+
+        const rc = new ReactiveComponent({
+            stateKeys,
+            renderBlock,
+            controller: this.controller,
+            App: this.controller.App,
+            type: 'output',
+            escapeHTML: true
+        });
+
+        this.reactiveComponentIDs.push(rc.id);
+        this.reactiveComponents.set(rc.id, rc);
+        return rc.render();
+    }
+
+    renderOutputComponentScan(stateKeys = [], renderBlock = () => '', escapeHTML = false) {
+        let reactiveComponentIndex = this.reactiveComponentScanIndex;
+        let reactiveComponentConfig = this.reactiveComponentConfig[reactiveComponentIndex];
+
+        if (!reactiveComponentConfig || !reactiveComponentConfig.stateKeys ||
+            reactiveComponentConfig.stateKeys.length != stateKeys.length ||
+            !reactiveComponentConfig.stateKeys.every(value => stateKeys.includes(value))) {
+            return false;
+        }
+
+        const { id: renderID } = reactiveComponentConfig;
+        const rc = new ReactiveComponent({
+            renderID,
+            stateKeys,
+            renderBlock,
+            controller: this.controller,
+            App: this.controller.App,
+            type: 'output',
+            escapeHTML
+        });
+
+        this.reactiveComponentIDs.push(rc.id);
+        this.reactiveComponents.set(rc.id, rc);
+        this.reactiveComponentScanIndex++;
+        return rc.render();
+    }
+
+    renderWatchComponent(watchID, stateKeys = [], renderBlock = () => '') {
+        if (!Array.isArray(stateKeys) || stateKeys.length === 0) {
+            return typeof renderBlock === 'function' ? renderBlock() : '';
+        }
+
+        if (typeof renderBlock !== 'function') {
+            return '';
+        }
+
+        if (this.reactiveComponents.has(watchID)) {
+            this.reactiveComponents.get(watchID).renderBlock = renderBlock;
+            return this.reactiveComponents.get(watchID).render();
+        }
+        
+        const parentWatchComponent = this.parentWatchComponent;
+        const originChildrenIDs = this.controller._hierarchyManager.scanChildrenIDs;
+        this.controller._hierarchyManager.scanChildrenIDs = [];
+        
+        const rc = new ReactiveComponent({
+            stateKeys,
+            renderBlock,
+            controller: this.controller,
+            App: this.controller.App,
+            parentWatchComponent,
+            renderID: watchID,
+            type: 'watch',
+            escapeHTML: false
+        });
+        
+        this.parentWatchComponent = rc;
+        
+        if (!this.reactiveComponentIDs.includes(rc.id)) {
+            this.reactiveComponentIDs.push(rc.id);
+        }
+        this.reactiveComponents.set(rc.id, rc);
+        
+        let result = rc.render();
+        const newChildrenIDs = this.controller._hierarchyManager.scanChildrenIDs;
+        this.controller._hierarchyManager.scanChildrenIDs = originChildrenIDs;
+        rc.childrenIDs = newChildrenIDs;
+        this.parentWatchComponent = parentWatchComponent;
+        
+        return result;
+    }
+
+    renderBindingAttribute(attrs = {}) {
+        if (typeof attrs !== 'object' || attrs === null) {
+            return '';
+        }
+
+        let bindingID = null;
+        const bindingManager = this.controller._bindingManager;
+
+        if (this.controller.isVirtualRendering) {
+            const attributeIndex = bindingManager.attributeIndex++;
+            const attributeConfig = bindingManager.attributeConfigs[attributeIndex];
+            if (!attributeConfig) {
+                return '';
+            }
+            const { id, config } = attributeConfig;
+            bindingID = id;
+        } else {
+            bindingID = uniqId();
+        }
+
+        const id = bindingID;
+        const stateKeys = [];
+        const element = null;
+        const newAttrs = {};
+        let attrStrValues = '';
+        const specialKeys = ['#text', '#html', '#children', '#content'];
+
+        Object.entries(attrs).forEach(([attrKey, attrConfig]) => {
+            const { states: attrStateKeys, render } = attrConfig;
+            if (!Array.isArray(attrStateKeys) || attrStateKeys.length === 0 || typeof render !== 'function') {
+                return;
+            }
+
+            attrStateKeys.forEach(stateKey => {
+                if (!stateKeys.includes(stateKey)) {
+                    stateKeys.push(stateKey);
+                }
+            });
+
+            newAttrs[attrKey] = { states: attrStateKeys, render };
+
+            if (specialKeys.includes(attrKey)) {
+                return;
+            }
+
+            try {
+                const renderResult = render();
+                if (renderResult === null || renderResult === undefined) {
+                    return;
+                }
+                if(['checked', 'selected', 'disabled', 'readonly', 'multiple'].includes(attrKey)) {
+                    if (renderResult && !['false', '0', 'undefined'].includes(String(renderResult).toLowerCase())) {
+                        attrStrValues += ` ${attrKey}="${attrKey}"`;
+                    }
+                    return;
+                }
+                attrStrValues += ` ${attrKey}="${escapeString(renderResult)}"`;
+            } catch (err) {
+                logger.error(`❌ ReactiveManager.renderBindingAttribute: Error rendering attribute ${attrKey}`, err);
+            }
+        });
+
+        if (!hasData(newAttrs)) {
+            return '';
+        }
+
+        bindingManager.attributeListeners.push({ id, stateKeys, attrs: newAttrs, element });
+        return ` data-one-attribute-id="${id}"` + attrStrValues;
+    }
+
+    renderClassBinding(classes = {}) {
+        if (typeof classes !== 'object' || classes === null) {
+            return '';
+        }
+
+        const id = uniqId();
+        const stateKeys = [];
+        const element = null;
+        const config = {};
+        let classStrValues = '';
+
+        classes.forEach((classConfig) => {
+            const { type = 'static', value, states: classStateKeys = [], checker } = classConfig;
+
+            if (type === 'static') {
+                classStrValues += ` ${value}`;
+                return;
+            }
+
+            if (!Array.isArray(classStateKeys) || classStateKeys.length === 0 || typeof checker !== 'function') {
+                return;
+            }
+
+            if (checker()) {
+                classStrValues += ` ${value}`;
+            }
+
+            classStateKeys.forEach(stateKey => {
+                if (!stateKeys.includes(stateKey)) {
+                    stateKeys.push(stateKey);
+                }
+            });
+
+            config[value] = { states: classStateKeys, checker };
+        });
+
+        let initialiClass = classStrValues.trim();
+        if (initialiClass === '') {
+            initialiClass = null;
+        }
+
+        this.controller._bindingManager.classBindingConfigs.push({ id, states: stateKeys, config, initialiClass, element });
+        return ` data-one-class-id="${id}" class="${classStrValues.trim()}"`;
+    }
+
+    onWatchComponentUpdating() {
+        this.controller._eventManager.stopEventListener();
+        this.controller._bindingManager.stopBindingEventListener();
+        setTimeout(() => {
+            if (!this.controller.eventListenerStatus) {
+                this.controller._eventManager.startEventListener();
+            }
+            // Khởi động lại binding cho các DOM element mới
+            this.controller._bindingManager.startBindingEventListener();
+        }, 10);
+    }
+
+    onWatchComponentUpdated() {
+        if (!this.controller.eventListenerStatus) {
+            this.controller._eventManager.startEventListener();
+        }
+        // Đảm bảo binding listeners được gắn vào các element mới
+        this.controller._bindingManager.startBindingEventListener();
+    }
+}