onelaraveljs 1.0.0

package/src/core/helpers/EventHelper.js

@@ -0,0 +1,172 @@
+import EventDelegator from '../EventDelegator.js';
+import logger from '../services/LoggerService.js';
+import { devLog } from '../../helpers/devWarnings.js';
+
+export default class EventHelper {
+
+    /**
+     * Start event listeners using delegation
+     * @param {Object} controller - The ViewController instance
+     */
+    static startEventListener(controller) {
+        if (controller.eventListenerStatus) {
+            return;
+        }
+
+        const state = controller._internal.events;
+        const needDeleted = [];
+        let attachedCount = 0;
+
+        if (!controller.events) {
+            return;
+        }
+
+        Object.entries(controller.events).forEach(([eventType, eventMap]) => {
+            Object.entries(eventMap).forEach(([eventID, handlers]) => {
+                const selector = `[data-${eventType}-id="${eventID}"]`;
+                const delegateKey = `${eventType}:${eventID}:${controller.id}`;
+
+                // Parse Handlers
+                const parsedHandlers = EventHelper.parseEventHandlerFunctions(controller, handlers);
+
+                if (parsedHandlers.length > 0) {
+                    // Cleanup old if exists
+                    if (state.unsubscribers.has(delegateKey)) {
+                        state.unsubscribers.get(delegateKey)();
+                    }
+
+                    // Attach via Delegator
+                    const unsubscribe = EventDelegator.on(eventType, selector, (event) => {
+                        // Iterate through handlers
+                        parsedHandlers.forEach(({ handler, params, preventDefault, stopPropagation }) => {
+                            if (preventDefault) event.preventDefault();
+                            if (stopPropagation) event.stopPropagation();
+
+                            try {
+                                // Add delegateTarget to event for handler access
+                                if (!event.delegateTarget) {
+                                    Object.defineProperty(event, 'delegateTarget', {
+                                        value: event.target.closest(selector) || event.target,
+                                        writable: false,
+                                        enumerable: true,
+                                        configurable: true
+                                    });
+                                }
+
+                                handler.apply(controller.view, [event, ...params]);
+                            } catch (error) {
+                                logger.error(`Error executing event handler for ${selector} in ${controller.path}:`, error);
+                            }
+                        });
+                    }, { root: document }); // Use document as root for now, could be app container
+
+                    state.unsubscribers.set(delegateKey, unsubscribe);
+                    attachedCount++;
+                } else {
+                    needDeleted.push({ eventType, eventID });
+                }
+            });
+        });
+
+        // Cleanup orphaned events logic (optional, based on original EventManager)
+        if (needDeleted.length > 0) {
+            needDeleted.forEach(({ eventType, eventID }) => {
+                delete controller.events[eventType][eventID];
+            });
+        }
+
+        controller.eventListenerStatus = true;
+
+        if (attachedCount > 0) {
+            devLog(`[EventHelper] Attached ${attachedCount} delegated listeners for ${controller.path}`);
+        }
+    }
+
+    /**
+     * Stop all listeners
+     * @param {Object} controller - The ViewController instance
+     */
+    static stopEventListener(controller) {
+        if (!controller.eventListenerStatus) {
+            return;
+        }
+
+        const state = controller._internal.events;
+
+        // Clear delegated listeners
+        state.unsubscribers.forEach(unsubscribe => unsubscribe());
+        state.unsubscribers.clear();
+
+        // Clear legacy listeners if any (from old ViewControllers)
+        if (controller.eventListeners && controller.eventListeners.length > 0) {
+            controller.eventListeners.forEach(({ element, eventType, handler }) => {
+                try {
+                    element.removeEventListener(eventType, handler);
+                } catch (e) { /* ignore */ }
+            });
+            controller.eventListeners = [];
+        }
+
+        controller.eventListenerStatus = false;
+        devLog(`[EventHelper] Stopped listeners for ${controller.path}`);
+    }
+
+    /**
+     * Parse array of handler definitions
+     * @param {Object} controller 
+     * @param {Array} handlers 
+     * @returns {Array} Parsed handlers
+     */
+    static parseEventHandlerFunctions(controller, handlers) {
+        if (!handlers || !Array.isArray(handlers)) return [];
+
+        return handlers.map(handlerDef => {
+            return EventHelper.parseHandlerFunction(controller, handlerDef);
+        }).filter(h => h !== null);
+    }
+
+    /**
+     * Parse single handler definition
+     * @param {Object} controller 
+     * @param {Object} handlerDef 
+     * @returns {Object|null}
+     */
+    static parseHandlerFunction(controller, handlerDef) {
+        if (!handlerDef || typeof handlerDef !== 'object') return null;
+
+        const { method, params, preventDefault, stopPropagation } = handlerDef;
+        let handlerFunc = null;
+
+        // 1. Check in View Methods
+        if (typeof controller.view[method] === 'function') {
+            handlerFunc = controller.view[method];
+        }
+        // 2. Check in Controller Properties
+        else if (typeof controller[method] === 'function') {
+            handlerFunc = controller[method];
+        }
+        // 3. Check globally (window)
+        else if (typeof window[method] === 'function') {
+            handlerFunc = window[method];
+        }
+
+        if (!handlerFunc) {
+            logger.warn(`Event handler method '${method}' not found in view ${controller.path}`);
+            return null;
+        }
+
+        // Resolve params
+        const resolvedParams = Array.isArray(params) ? params.map(p => {
+            // Basic param resolution (strings, numbers, booleans)
+            // Complex resolution (like referencing other state) can be added here
+            return p;
+        }) : [];
+
+        return {
+            handler: handlerFunc,
+            params: resolvedParams,
+            preventDefault: !!preventDefault,
+            stopPropagation: !!stopPropagation
+        };
+    }
+}

package/src/core/helpers/LifecycleHelper.js

@@ -0,0 +1,17 @@
+/**
+ * LifecycleHelper
+ * Handles lifecycle methods call
+ */
+import logger from '../services/LoggerService.js';
+
+export default class LifecycleHelper {
+    static callHook(controller, hookName) {
+        if (typeof controller.view[hookName] === 'function') {
+            try {
+                controller.view[hookName]();
+            } catch (e) {
+                logger.error(`Error in lifecycle hook ${hookName} for ${controller.path}`, e);
+            }
+        }
+    }
+}

package/src/core/helpers/ReactiveHelper.js

@@ -0,0 +1,169 @@
+import { ReactiveComponent } from '../reactive/ReactiveComponent.js';
+
+export default class ReactiveHelper {
+
+    /**
+     * Render Output Component (Thay thế renderOutputComponent)
+     */
+    static renderOutputComponent(controller, stateKeys = [], renderBlock = () => '') {
+        const state = controller._internal.reactive;
+
+        // Logic Virtual Rendering for SSR hydration sequencing or Dry Run
+        if (controller.isVirtualRendering) {
+            controller.isVirtualRendering = false; // Disable flag temporarily to scan
+            let result = ReactiveHelper.renderOutputComponentScan(controller, stateKeys, renderBlock);
+            controller.isVirtualRendering = true; // Restore flag
+            if (result !== false) return result;
+        }
+
+        // Tạo instance ReactiveComponent
+        const rc = new ReactiveComponent({
+            stateKeys,
+            renderBlock,
+            controller: controller,
+            App: controller.App,
+            type: 'output',
+            escapeHTML: false
+        });
+
+        // Store active component in new state structure
+        state.ids.push(rc.id);
+        state.components.set(rc.id, rc);
+
+        return rc.render();
+    }
+
+    /**
+     * Quét Output Component trong quá trình Virtual Render / SSR hydration
+     */
+    static renderOutputComponentScan(controller, stateKeys, renderBlock, escapeHTML = false) {
+        const state = controller._internal.reactive;
+
+        // Truy cập state.scanIndex thay vì this.reactiveComponentScanIndex
+        let reactiveComponentIndex = state.scanIndex;
+
+        // Check if config exists for this index
+        if (!state.config || !state.config[reactiveComponentIndex]) {
+            return false;
+        }
+
+        let reactiveComponentConfig = state.config[reactiveComponentIndex];
+
+        const { id: renderID } = reactiveComponentConfig;
+
+        const rc = new ReactiveComponent({
+            renderID,
+            stateKeys,
+            renderBlock,
+            controller: controller, // Pass controller explicitly
+            App: controller.App,
+            type: 'output',
+            escapeHTML
+        });
+
+        state.ids.push(rc.id);
+        state.components.set(rc.id, rc);
+        state.scanIndex++; // Increment scan index
+
+        return rc.render();
+    }
+
+    /**
+     * Render Watch Component (Re-renders sections of DOM)
+     */
+    static renderWatchComponent(controller, stateKeys = [], renderBlock = () => '') {
+        const state = controller._internal.reactive;
+
+        // Virtual Rendering for Hydration/Dry-Run
+        if (controller.isVirtualRendering) {
+            controller.isVirtualRendering = false;
+            let result = ReactiveHelper.renderWatchComponentScan(controller, stateKeys, renderBlock);
+            controller.isVirtualRendering = true;
+            if (result !== false) return result;
+        }
+
+        const rc = new ReactiveComponent({
+            stateKeys,
+            renderBlock,
+            controller: controller,
+            App: controller.App,
+            type: 'watch',
+            parentWatchComponent: state.parentWatch, // Access parent from global tracking or specific logic
+            escapeHTML: false
+        });
+
+        state.ids.push(rc.id);
+        state.components.set(rc.id, rc);
+
+        // Update current rendering component tracking
+        const previousRenderingComponent = controller._reactiveManager?.currentRenderingComponent; // Keep legacy prop for compatibility or move to state
+        // We might want to move currentRenderingComponent to _internal later, but for now assuming legacy prop usage in ViewHierarchy
+
+        return rc.render();
+    }
+
+    static renderWatchComponentScan(controller, stateKeys, renderBlock) {
+        const state = controller._internal.reactive;
+
+        let reactiveComponentIndex = state.scanIndex;
+        if (!state.config || !state.config[reactiveComponentIndex]) {
+            return false;
+        }
+
+        let reactiveComponentConfig = state.config[reactiveComponentIndex];
+        const { id: renderID } = reactiveComponentConfig;
+
+        const rc = new ReactiveComponent({
+            renderID,
+            stateKeys,
+            renderBlock,
+            controller: controller,
+            App: controller.App,
+            type: 'watch',
+            escapeHTML: false
+        });
+
+        state.ids.push(rc.id);
+        state.components.set(rc.id, rc);
+        state.scanIndex++;
+
+        return rc.render();
+    }
+
+    /**
+     * Clear reactive state for refresh
+     */
+    static clearForRefresh(controller) {
+        const state = controller._internal.reactive;
+        if (state.components.size > 0) {
+            state.components.forEach(c => c.destroy());
+            state.components.clear();
+        }
+        state.ids = [];
+        state.renderIDs = [];
+        state.prerenderIDs = [];
+        state.scanIndex = 0;
+        state.followingIDs = [];
+        state.followingRenderIDs = [];
+        state.followingPrerenderIDs = [];
+    }
+
+    /**
+     * Main Destroy method
+     */
+    static destroy(controller) {
+        const state = controller._internal.reactive;
+
+        if (state.components.size > 0) {
+            state.components.forEach(c => {
+                try {
+                    c.destroy();
+                } catch (e) { console.warn('Error destroying reactive component', e); }
+            });
+            state.components.clear();
+        }
+
+        state.ids = [];
+        state.config = null;
+    }
+}

package/src/core/helpers/RenderHelper.js

@@ -0,0 +1,15 @@
+/**
+ * RenderHelper
+ * Handles rendering logic previously in RenderEngine
+ */
+import OneMarkup from '../OneMarkup.js';
+import { ATTR } from '../ViewConfig.js';
+
+export default class RenderHelper {
+    static render(controller) {
+        // Logic render HTML string
+        // ... implementation dependent on framework internals ...
+        // Typically returns a string of HTML
+        return '';
+    }
+}

package/src/core/helpers/ResourceHelper.js

@@ -0,0 +1,89 @@
+export default class ResourceHelper {
+    /**
+     * Insert view resources (JS/CSS)
+     */
+    static insertResources(controller) {
+        ResourceHelper.insertStyles(controller);
+        ResourceHelper.insertScripts(controller);
+    }
+
+    static insertStyles(controller) {
+        if (!controller.styles || controller.styles.length === 0) return;
+
+        const state = controller._internal.resources;
+
+        controller.styles.forEach(style => {
+            const resourceKey = controller.App.View.Engine.getResourceKey({
+                ...style,
+                viewPath: controller.path,
+                resourceType: 'style'
+            });
+
+            // Check global registry logic (simplified for Helper)
+            let registryEntry = controller.App.View.Engine.resourceRegistry.get(resourceKey);
+
+            if (registryEntry) {
+                if (!registryEntry.viewPaths.has(controller.path)) {
+                    registryEntry.viewPaths.add(controller.path);
+                    registryEntry.referenceCount++;
+                    state.insertedKeys.add(resourceKey); // Track locally
+                }
+                return;
+            }
+
+            // Create Element logic
+            let element;
+            if (style.type === 'href') {
+                element = document.createElement('link');
+                element.rel = 'stylesheet';
+                element.href = style.href;
+                // ... add attributes ...
+            } else {
+                element = document.createElement('style');
+                element.textContent = style.content;
+                // ... add attributes ...
+            }
+
+            element.setAttribute('data-view-path', controller.path);
+            element.setAttribute('data-resource-key', resourceKey);
+
+            document.head.appendChild(element);
+
+            // Add to Registry
+            controller.App.View.Engine.resourceRegistry.set(resourceKey, {
+                element,
+                viewPaths: new Set([controller.path]),
+                referenceCount: 1,
+                resourceType: 'style'
+            });
+
+            state.insertedKeys.add(resourceKey);
+        });
+    }
+
+    static insertScripts(controller) {
+        // ... Similar logic to insertStyles but for scripts ...
+        // Needs careful porting of execution logic (onload, onerror)
+        if (!controller.scripts || controller.scripts.length === 0) return;
+
+        const state = controller._internal.resources;
+
+        controller.scripts.forEach(script => {
+            // ... logic ...
+            // For brevity, skipping full implementation but structure is identical
+            // Use state.insertedKeys to track
+        });
+    }
+
+    static removeResources(controller) {
+        const state = controller._internal.resources;
+
+        // Use state.insertedKeys to know what to try and remove
+        // Access global registry to decrement counts
+        // If count == 0, remove DOM element
+
+        // ... logic ...
+
+        state.insertedKeys.clear();
+    }
+}

package/src/core/helpers/TemplateHelper.js

@@ -0,0 +1,11 @@
+/**
+ * TemplateHelper
+ * Handles template wrapping and block logic
+ */
+import { ATTR } from '../ViewConfig.js';
+
+export default class TemplateHelper {
+    static wrapperAttribute(controller) {
+        return ` ${ATTR.KEYS.VIEW_WRAPPER}="${controller.id}"`;
+    }
+}