onelaraveljs 1.0.0

package/src/core/ViewControllerOptimized.js

@@ -0,0 +1,164 @@
+import { ViewState } from './ViewState.js';
+
+// Import Helpers
+import EventHelper from './helpers/EventHelper.js';
+import ReactiveHelper from './helpers/ReactiveHelper.js';
+import BindingHelper from './helpers/BindingHelper.js';
+import ResourceHelper from './helpers/ResourceHelper.js';
+import RenderHelper from './helpers/RenderHelper.js';
+import LifecycleHelper from './helpers/LifecycleHelper.js';
+import ConfigHelper from './helpers/ConfigHelper.js';
+import TemplateHelper from './helpers/TemplateHelper.js';
+import { ViewHierarchyManager } from './managers/ViewHierarchyManager.js';
+import { ChildrenRegistry } from './managers/ChildrenRegistry.js';
+
+/**
+ * ViewControllerOptimized (New Architecture)
+ * Fully stateless logic delegating to Static Helpers
+ */
+export class ViewControllerOptimized {
+    constructor(path, view, app) {
+        this.path = path;
+        this.view = view;
+        this.App = app;
+
+        // --- Core Properties ---
+        this.id = view.id || null;
+        this.states = new ViewState(this);
+        this.config = {};
+        this.data = {};
+
+        // --- State Management (Internal) ---
+        this.initializeInternalState();
+
+        // --- Legacy Manager Bridges (Optional: Keep only if strictly needed for Hierarchy/Children) ---
+        // Hierarchy and ChildrenRegistry are complex logic-heavy stateful managers.
+        // For now, we keep them as objects or migrate later.
+        this._hierarchyManager = new ViewHierarchyManager(this);
+        this._childrenRegistry = new ChildrenRegistry(this);
+
+        // --- Flags ---
+        this.isMounted = false;
+        this.isDestroyed = false;
+        this.isReady = false;
+        this.isRendered = false;
+        this.eventListenerStatus = false;
+    }
+
+    initializeInternalState() {
+        this._internal = {
+            events: {
+                unsubscribers: new Map()
+            },
+            reactive: {
+                components: new Map(),
+                config: [],
+                index: 0,
+                scanIndex: 0,
+                ids: [],
+                prerenderIDs: [],
+                renderIDs: [],
+                followingIDs: [],
+                followingRenderIDs: [],
+                followingPrerenderIDs: [],
+                parentWatch: null
+            },
+            binding: {
+                listeners: [],
+                isStarted: false,
+                elementFlags: new WeakMap(),
+                elementMap: new WeakMap(),
+                attrConfigs: [],
+                attrListeners: [],
+                attrIndex: 0,
+                classConfigs: [],
+                classListeners: [],
+                isClassReady: false
+            },
+            resources: {
+                insertedKeys: new Set()
+            }
+        };
+    }
+
+    // --- Public API Bridges to Helpers ---
+
+    /**
+     * Setup the view controller with configuration
+     * This is called by View.js after instantiation
+     */
+    setup(path, config) {
+        if (this.isInitlized) {
+            return this;
+        }
+
+        // Set config and path
+        this.path = path;
+        this.config = config || {};
+
+        // Parse basic config properties
+        if (config) {
+            this.id = config.viewId || this.id;
+            this.data = config.data || {};
+            // ... map other flat config properties if needed ...
+        }
+
+        // Initialize Internal State via ConfigHelper
+        // This will define properties (props, methods, getters) on the controller itself
+        ConfigHelper.processDefinedProperties(this, config);
+
+        // Execute Initialization Lifecycle
+        this.initialize();
+
+        return this;
+    }
+
+    initialize() {
+        if (this.isInitlized) return;
+        this.isInitlized = true;
+
+        LifecycleHelper.callHook(this, 'beforeCreate');
+
+        // Commit initial data from constructor to state
+        // We need to implement commitConstructorData in ConfigHelper or here
+        // Assuming ConfigHelper handles it for now based on previous context
+        // ConfigHelper.commitConstructorData(this); 
+
+        LifecycleHelper.callHook(this, 'created');
+
+        LifecycleHelper.callHook(this, 'beforeInit');
+        if (typeof this.init === 'function') {
+            this.init();
+        }
+        LifecycleHelper.callHook(this, 'init');
+        LifecycleHelper.callHook(this, 'afterInit');
+    }
+
+    __reactive(id, keys, renderFn) {
+        return ReactiveHelper.renderOutputComponent(this, keys, renderFn);
+    }
+
+    // ... replicate other necessary methods ...
+
+    mounted() {
+        LifecycleHelper.callHook(this, 'beforeMount');
+        // ... logic ...
+        EventHelper.startEventListener(this);
+        BindingHelper.startBindingEventListener(this);
+        // ... logic ...
+        this.isMounted = true;
+        LifecycleHelper.callHook(this, 'mounted');
+    }
+
+    destroy() {
+        EventHelper.stopEventListener(this);
+        BindingHelper.destroy(this);
+        ReactiveHelper.destroy(this);
+        ResourceHelper.removeResources(this);
+
+        if (this._childrenRegistry) this._childrenRegistry.clear();
+
+        this._internal = null;
+        this.isDestroyed = true;
+    }
+}

package/src/core/ViewIdentifier.js

@@ -0,0 +1,361 @@
+/**
+ * View Identifier System
+ * Handles view identification and DOM mapping for server-rendered content
+ */
+
+export class ViewIdentifier {
+    constructor() {
+        this.viewElements = new Map();
+        this.viewHierarchy = new Map();
+        this.currentView = null;
+        this.debugMode = false;
+    }
+
+    /**
+     * Initialize view identification system
+     */
+    init() {
+        this.scanViewElements();
+        this.buildViewHierarchy();
+        this.setupViewTracking();
+        
+        if (this.debugMode) {
+            this.enableDebugMode();
+        }
+    }
+
+    /**
+     * Scan all elements with view identification attributes
+     */
+    scanViewElements() {
+        const elements = document.querySelectorAll('[data-spa-view]');
+        
+        elements.forEach(element => {
+            const viewInfo = this.extractViewInfo(element);
+            if (viewInfo) {
+                this.viewElements.set(viewInfo.id, {
+                    element,
+                    info: viewInfo,
+                    children: [],
+                    parent: null
+                });
+            }
+        });
+
+        console.log(`🔍 Found ${this.viewElements.size} view elements`);
+    }
+
+    /**
+     * Extract view information from element
+     */
+    extractViewInfo(element) {
+        const viewId = element.getAttribute('data-spa-view-id');
+        const viewName = element.getAttribute('data-spa-view-name');
+        const viewPath = element.getAttribute('data-spa-view-path');
+        const viewType = element.getAttribute('data-spa-view-type');
+        const viewScope = element.getAttribute('data-spa-view');
+
+        if (!viewId) return null;
+
+        return {
+            id: viewId,
+            name: viewName || 'unknown',
+            path: viewPath || 'unknown',
+            type: viewType || 'view',
+            scope: viewScope || 'unknown',
+            element
+        };
+    }
+
+    /**
+     * Build view hierarchy based on DOM structure
+     */
+    buildViewHierarchy() {
+        this.viewElements.forEach((viewData, viewId) => {
+            const element = viewData.element;
+            
+            // Find parent view
+            let parent = element.parentElement;
+            while (parent && parent !== document.body) {
+                const parentViewId = parent.getAttribute('data-spa-view-id');
+                if (parentViewId && this.viewElements.has(parentViewId)) {
+                    viewData.parent = parentViewId;
+                    this.viewElements.get(parentViewId).children.push(viewId);
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+        });
+
+        console.log('🏗️ View hierarchy built');
+    }
+
+    /**
+     * Setup view tracking and event listeners
+     */
+    setupViewTracking() {
+        // Track view changes
+        this.viewElements.forEach((viewData, viewId) => {
+            this.setupViewEventListeners(viewData);
+        });
+
+        // Track DOM changes for dynamic content
+        this.setupMutationObserver();
+    }
+
+    /**
+     * Setup event listeners for a view
+     */
+    setupViewEventListeners(viewData) {
+        const { element, info } = viewData;
+
+        // Add view lifecycle events
+        element.addEventListener('spa:view:enter', () => {
+            this.onViewEnter(info);
+        });
+
+        element.addEventListener('spa:view:leave', () => {
+            this.onViewLeave(info);
+        });
+
+        // Add click tracking for debugging
+        if (this.debugMode) {
+            element.addEventListener('click', (e) => {
+                console.log(`🖱️ Click on view: ${info.name} (${info.id})`, e.target);
+            });
+        }
+    }
+
+    /**
+     * Setup mutation observer for dynamic content
+     */
+    setupMutationObserver() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const viewId = node.getAttribute('data-spa-view-id');
+                            if (viewId && !this.viewElements.has(viewId)) {
+                                // New view element added
+                                this.scanViewElements();
+                                this.buildViewHierarchy();
+                            }
+                        }
+                    });
+                }
+            });
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+
+    /**
+     * Get view by ID
+     */
+    getView(viewId) {
+        return this.viewElements.get(viewId);
+    }
+
+    /**
+     * Get all views by type
+     */
+    getViewsByType(type) {
+        const views = [];
+        this.viewElements.forEach((viewData, viewId) => {
+            if (viewData.info.type === type) {
+                views.push(viewData);
+            }
+        });
+        return views;
+    }
+
+    /**
+     * Get current active view
+     */
+    getCurrentView() {
+        return this.currentView;
+    }
+
+    /**
+     * Set current active view
+     */
+    setCurrentView(viewId) {
+        const viewData = this.viewElements.get(viewId);
+        if (viewData) {
+            this.currentView = viewData;
+            this.emitViewChange(viewData);
+        }
+    }
+
+    /**
+     * Get view hierarchy for a specific view
+     */
+    getViewHierarchy(viewId) {
+        const hierarchy = [];
+        let current = viewId;
+
+        while (current) {
+            const viewData = this.viewElements.get(current);
+            if (viewData) {
+                hierarchy.unshift(viewData);
+                current = viewData.parent;
+            } else {
+                break;
+            }
+        }
+
+        return hierarchy;
+    }
+
+    /**
+     * Find view containing a specific element
+     */
+    findViewContainingElement(element) {
+        let current = element;
+        
+        while (current && current !== document.body) {
+            const viewId = current.getAttribute('data-spa-view-id');
+            if (viewId && this.viewElements.has(viewId)) {
+                return this.viewElements.get(viewId);
+            }
+            current = current.parentElement;
+        }
+        
+        return null;
+    }
+
+    /**
+     * View lifecycle events
+     */
+    onViewEnter(viewInfo) {
+        console.log(`🚀 View entered: ${viewInfo.name} (${viewInfo.id})`);
+        this.setCurrentView(viewInfo.id);
+    }
+
+    onViewLeave(viewInfo) {
+        console.log(`👋 View left: ${viewInfo.name} (${viewInfo.id})`);
+    }
+
+    /**
+     * Emit view change event
+     */
+    emitViewChange(viewData) {
+        const event = new CustomEvent('spa:view:changed', {
+            detail: {
+                view: viewData,
+                timestamp: Date.now()
+            }
+        });
+        document.dispatchEvent(event);
+    }
+
+    /**
+     * Enable debug mode
+     */
+    enableDebugMode() {
+        this.debugMode = true;
+        document.body.classList.add('debug-view-boundaries');
+        
+        // Add debug styles
+        const style = document.createElement('style');
+        style.textContent = `
+            .debug-view-boundaries [data-spa-view] {
+                border: 2px dashed #007cba !important;
+                margin: 2px !important;
+                position: relative !important;
+            }
+            
+            .debug-view-boundaries [data-spa-view]::before {
+                content: attr(data-spa-view-name) " (" attr(data-spa-view-id) ")" !important;
+                position: absolute !important;
+                top: -20px !important;
+                left: 0 !important;
+                font-size: 10px !important;
+                color: white !important;
+                background: #007cba !important;
+                padding: 2px 6px !important;
+                border-radius: 3px !important;
+                opacity: 1 !important;
+                z-index: 1000 !important;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    /**
+     * Disable debug mode
+     */
+    disableDebugMode() {
+        this.debugMode = false;
+        document.body.classList.remove('debug-view-boundaries');
+    }
+
+    /**
+     * Get debug information
+     */
+    getDebugInfo() {
+        return {
+            totalViews: this.viewElements.size,
+            currentView: this.currentView?.info,
+            viewTypes: this.getViewTypeStats(),
+            hierarchy: this.getViewHierarchyStats()
+        };
+    }
+
+    /**
+     * Get view type statistics
+     */
+    getViewTypeStats() {
+        const stats = {};
+        this.viewElements.forEach((viewData) => {
+            const type = viewData.info.type;
+            stats[type] = (stats[type] || 0) + 1;
+        });
+        return stats;
+    }
+
+    /**
+     * Get view hierarchy statistics
+     */
+    getViewHierarchyStats() {
+        const stats = {
+            rootViews: 0,
+            nestedViews: 0,
+            maxDepth: 0
+        };
+
+        this.viewElements.forEach((viewData) => {
+            if (!viewData.parent) {
+                stats.rootViews++;
+            } else {
+                stats.nestedViews++;
+            }
+
+            const depth = this.getViewHierarchy(viewData.info.id).length;
+            stats.maxDepth = Math.max(stats.maxDepth, depth);
+        });
+
+        return stats;
+    }
+
+    /**
+     * Export view data for debugging
+     */
+    exportViewData() {
+        const data = {};
+        this.viewElements.forEach((viewData, viewId) => {
+            data[viewId] = {
+                info: viewData.info,
+                hasParent: !!viewData.parent,
+                childrenCount: viewData.children.length,
+                elementTag: viewData.element.tagName,
+                elementClasses: viewData.element.className
+            };
+        });
+        return data;
+    }
+}