onelaraveljs 1.0.0

package/src/core/ViewSystem.js

@@ -0,0 +1,301 @@
+/**
+ * Enhanced View System with Server-Side Rendering Support
+ * Handles view identification, hydration, and DOM mapping
+ */
+
+import { ViewIdentifier } from './ViewIdentifier.js';
+
+export class ViewSystem {
+    constructor() {
+        this.identifier = new ViewIdentifier();
+        this.hydratedViews = new Set();
+        this.viewInstances = new Map();
+        this.isServerRendered = false;
+        this.hydrationComplete = false;
+    }
+
+    /**
+     * Initialize the view system
+     */
+    init() {
+        this.detectServerRendering();
+        this.identifier.init();
+        
+        if (this.isServerRendered) {
+            this.hydrateServerRenderedViews();
+        }
+        
+        this.setupGlobalEventListeners();
+    }
+
+    /**
+     * Detect if page was server-rendered
+     */
+    detectServerRendering() {
+        const container = document.querySelector('#app-root, #app, [data-server-rendered]');
+        this.isServerRendered = container && container.getAttribute('data-server-rendered') === 'true';
+        
+        console.log(`🔍 Server rendering detected: ${this.isServerRendered}`);
+    }
+
+    /**
+     * Hydrate server-rendered views
+     */
+    hydrateServerRenderedViews() {
+        console.log('🚀 Starting hydration of server-rendered views...');
+        
+        // Get all view elements
+        const viewElements = this.identifier.getAllViewElements();
+        
+        viewElements.forEach(element => {
+            const viewInfo = this.identifier.extractViewInfo(element);
+            if (viewInfo) {
+                this.hydrateView(element, viewInfo);
+            }
+        });
+
+        // Mark hydration as complete
+        this.hydrationComplete = true;
+        this.emitHydrationComplete();
+        
+        console.log('✅ Hydration complete');
+    }
+
+    /**
+     * Hydrate a specific view
+     */
+    hydrateView(element, viewInfo) {
+        try {
+            // Create view instance if not exists
+            if (!this.viewInstances.has(viewInfo.id)) {
+                const viewInstance = this.createViewInstance(viewInfo);
+                this.viewInstances.set(viewInfo.id, viewInstance);
+            }
+
+            const viewInstance = this.viewInstances.get(viewInfo.id);
+            
+            // Attach view instance to element
+            element._spaViewInstance = viewInstance;
+            
+            // Mark as hydrated
+            this.hydratedViews.add(viewInfo.id);
+            
+            // Trigger view lifecycle
+            this.triggerViewLifecycle(viewInstance, 'mounted');
+            
+            console.log(`✅ Hydrated view: ${viewInfo.name} (${viewInfo.id})`);
+            
+        } catch (error) {
+            console.error(`❌ Failed to hydrate view ${viewInfo.name}:`, error);
+        }
+    }
+
+    /**
+     * Create view instance
+     */
+    createViewInstance(viewInfo) {
+        return {
+            id: viewInfo.id,
+            name: viewInfo.name,
+            path: viewInfo.path,
+            type: viewInfo.type,
+            element: viewInfo.element,
+            isHydrated: false,
+            lifecycle: {
+                mounted: false,
+                updated: false,
+                destroyed: false
+            },
+            data: {},
+            methods: {}
+        };
+    }
+
+    /**
+     * Trigger view lifecycle events
+     */
+    triggerViewLifecycle(viewInstance, event) {
+        const element = viewInstance.element;
+        
+        // Dispatch custom events
+        const customEvent = new CustomEvent(`spa:view:${event}`, {
+            detail: {
+                view: viewInstance,
+                timestamp: Date.now()
+            }
+        });
+        element.dispatchEvent(customEvent);
+
+        // Update lifecycle state
+        viewInstance.lifecycle[event] = true;
+        
+        // Call view methods if available
+        if (viewInstance.methods[event]) {
+            try {
+                viewInstance.methods[event].call(viewInstance);
+            } catch (error) {
+                console.error(`Error in view ${event} method:`, error);
+            }
+        }
+    }
+
+    /**
+     * Setup global event listeners
+     */
+    setupGlobalEventListeners() {
+        // Listen for view changes
+        document.addEventListener('spa:view:changed', (event) => {
+            this.onViewChanged(event.detail.view);
+        });
+
+        // Listen for navigation events
+        document.addEventListener('spa:navigation:start', () => {
+            this.pauseViewUpdates();
+        });
+
+        document.addEventListener('spa:navigation:complete', () => {
+            this.resumeViewUpdates();
+        });
+    }
+
+    /**
+     * Handle view change
+     */
+    onViewChanged(viewData) {
+        console.log(`🔄 View changed to: ${viewData.info.name}`);
+        
+        // Update current view tracking
+        this.identifier.setCurrentView(viewData.info.id);
+        
+        // Trigger view enter event
+        this.triggerViewLifecycle(viewData, 'enter');
+    }
+
+    /**
+     * Pause view updates during navigation
+     */
+    pauseViewUpdates() {
+        this.viewInstances.forEach(viewInstance => {
+            viewInstance.isPaused = true;
+        });
+    }
+
+    /**
+     * Resume view updates after navigation
+     */
+    resumeViewUpdates() {
+        this.viewInstances.forEach(viewInstance => {
+            viewInstance.isPaused = false;
+        });
+    }
+
+    /**
+     * Get view by ID
+     */
+    getView(viewId) {
+        return this.viewInstances.get(viewId);
+    }
+
+    /**
+     * Get all hydrated views
+     */
+    getHydratedViews() {
+        return Array.from(this.hydratedViews).map(id => this.viewInstances.get(id));
+    }
+
+    /**
+     * Get views by type
+     */
+    getViewsByType(type) {
+        const views = [];
+        this.viewInstances.forEach(viewInstance => {
+            if (viewInstance.type === type) {
+                views.push(viewInstance);
+            }
+        });
+        return views;
+    }
+
+    /**
+     * Update view data
+     */
+    updateViewData(viewId, data) {
+        const viewInstance = this.viewInstances.get(viewId);
+        if (viewInstance) {
+            viewInstance.data = { ...viewInstance.data, ...data };
+            this.triggerViewLifecycle(viewInstance, 'updated');
+        }
+    }
+
+    /**
+     * Destroy view
+     */
+    destroyView(viewId) {
+        const viewInstance = this.viewInstances.get(viewId);
+        if (viewInstance) {
+            this.triggerViewLifecycle(viewInstance, 'destroyed');
+            this.hydratedViews.delete(viewId);
+            this.viewInstances.delete(viewId);
+        }
+    }
+
+    /**
+     * Emit hydration complete event
+     */
+    emitHydrationComplete() {
+        const event = new CustomEvent('spa:hydration:complete', {
+            detail: {
+                hydratedViews: this.hydratedViews.size,
+                totalViews: this.viewInstances.size,
+                timestamp: Date.now()
+            }
+        });
+        document.dispatchEvent(event);
+    }
+
+    /**
+     * Get system status
+     */
+    getStatus() {
+        return {
+            isServerRendered: this.isServerRendered,
+            hydrationComplete: this.hydrationComplete,
+            totalViews: this.viewInstances.size,
+            hydratedViews: this.hydratedViews.size,
+            identifier: this.identifier.getDebugInfo()
+        };
+    }
+
+    /**
+     * Enable debug mode
+     */
+    enableDebugMode() {
+        this.identifier.enableDebugMode();
+        console.log('🔧 Debug mode enabled');
+    }
+
+    /**
+     * Disable debug mode
+     */
+    disableDebugMode() {
+        this.identifier.disableDebugMode();
+        console.log('🔧 Debug mode disabled');
+    }
+
+    /**
+     * Export system data for debugging
+     */
+    exportSystemData() {
+        return {
+            status: this.getStatus(),
+            views: this.identifier.exportViewData(),
+            instances: Array.from(this.viewInstances.entries()).map(([id, instance]) => ({
+                id,
+                name: instance.name,
+                type: instance.type,
+                isHydrated: this.hydratedViews.has(id),
+                lifecycle: instance.lifecycle
+            }))
+        };
+    }
+}

package/src/core/ViewTemplate.js

@@ -0,0 +1,4 @@
+// Auto-generated proxy to context-specific registry
+// This file re-exports from templates.web.js
+
+export { ViewTemplates } from '../templates.web.js';

package/src/core/helpers/BindingHelper.js

@@ -0,0 +1,239 @@
+import OneDOM from '../OneDOM.js';
+import DOMBatcher from '../DOMBatcher.js';
+import logger from '../services/LoggerService.js';
+
+export default class BindingHelper {
+
+    /**
+     * Start Two-Way Binding Listeners
+     */
+    static startBindingEventListener(controller) {
+        const state = controller._internal.binding;
+        const selector = `[data-binding][data-view-id="${controller.id}"]`;
+        const inputs = document.querySelectorAll(selector);
+
+        if (inputs.length === 0) return;
+
+        inputs.forEach(input => {
+            if (!input.isConnected) return;
+
+            // Check WeakMap to see if already attached
+            if (state.elementMap.has(input)) return;
+
+            const stateKey = input.getAttribute('data-binding');
+            if (!stateKey) return;
+
+            // Sync initial state (State -> Element)
+            BindingHelper.syncStateToElement(controller, input, stateKey);
+
+            // Create Handler (Element -> State)
+            const handler = (event) => BindingHelper.pushElementToState(controller, input, stateKey);
+
+            const tag = input.tagName.toLowerCase();
+            const eventType = tag === 'select' ? 'change' : 'input';
+
+            input.addEventListener(eventType, handler);
+
+            // Store in WeakMap for efficient lookup/garbage collection prevention
+            state.elementMap.set(input, { eventType, handler, stateKey });
+
+            // Store in array for manual cleanup in destroy()
+            state.listeners.push({ element: input, eventType, handler });
+        });
+
+        state.isStarted = true;
+    }
+
+    /**
+     * Start Class Binding Listeners
+     */
+    static startClassBindingEventListener(controller) {
+        const state = controller._internal.binding;
+
+        if (state.isClassReady || !state.classConfigs || state.classConfigs.length === 0) {
+            return;
+        }
+
+        const removeClassBindingIDs = [];
+
+        state.classConfigs.forEach(binding => {
+            const { id, config, states, initialiClass = '' } = binding;
+            // logic to find element...
+            const selector = `[data-one-class-id="${id}"]`;
+            const element = document.querySelector(selector);
+
+            if (!element) {
+                removeClassBindingIDs.push(id);
+                return;
+            }
+            binding.element = element;
+
+            state.classListeners.push({ id, states, config, element, initialiClass });
+
+            // Initial class application
+            const classOperations = [];
+
+            // Initial classes
+            String(initialiClass).split(' ').forEach(cls => {
+                if (cls.trim()) classOperations.push({ element, action: 'add', className: cls });
+            });
+
+            // Config classes
+            Object.entries(config).forEach(([className, classConfig]) => {
+                const { checker } = classConfig;
+                if (typeof checker === 'function') {
+                    const shouldAdd = checker.call(controller.view); // Bind to view
+                    classOperations.push({ element, action: shouldAdd ? 'add' : 'remove', className });
+                }
+            });
+
+            if (classOperations.length > 0) {
+                DOMBatcher.write(() => {
+                    classOperations.forEach(({ element, action, className }) => {
+                        element.classList[action](className);
+                    });
+                });
+            }
+        });
+
+        state.isClassReady = true;
+    }
+
+    /**
+     * Push Element value to State (Input -> State)
+     */
+    static pushElementToState(controller, element, stateKey) {
+        const state = controller._internal.binding;
+
+        // Get or Create flags from WeakMap
+        let flags = state.elementFlags.get(element);
+        if (!flags) {
+            flags = { pushing: false, syncing: false };
+            state.elementFlags.set(element, flags);
+        }
+
+        if (flags.syncing || flags.pushing) return;
+        flags.pushing = true;
+
+        try {
+            const value = OneDOM.getInputValue(element);
+            // Update state on controller
+            controller.states.__.updateStateAddressKey(stateKey, value);
+        } catch (e) {
+            logger.error(`Error pushing element state ${stateKey}`, e);
+        } finally {
+            // Clear flag asynchronously
+            Promise.resolve().then(() => {
+                const currentFlags = state.elementFlags.get(element);
+                if (currentFlags) currentFlags.pushing = false;
+            });
+        }
+    }
+
+    /**
+     * Sync State value to Element (State -> Element)
+     */
+    static syncStateToElement(controller, element, stateKey) {
+        const state = controller._internal.binding;
+
+        let flags = state.elementFlags.get(element);
+        if (!flags) {
+            flags = { pushing: false, syncing: false };
+            state.elementFlags.set(element, flags);
+        }
+
+        if (flags.pushing || flags.syncing) return;
+
+        const stateValue = controller.states.__.getStateByAddressKey(stateKey);
+        const currentValue = OneDOM.getInputValue(element);
+
+        if (currentValue == stateValue) return; // Loose equality check
+
+        flags.syncing = true;
+        try {
+            OneDOM.setInputValue(element, stateValue);
+        } finally {
+            flags.syncing = false;
+        }
+    }
+
+    /**
+     * Notify state changes to all bindings
+     * @param {Object} controller 
+     * @param {Array} changedKeys 
+     */
+    static notifyStateChanges(controller, changedKeys) {
+        if (!controller.isReadyToStateChangeListen) return;
+
+        // Handle explicit subscribeStates method on controller if exists
+        // ... (legacy logic support if needed) ...
+
+        const state = controller._internal.binding;
+
+        // 1. Notify Input Bindings
+        if (state.listeners.length > 0) {
+            state.listeners.forEach(({ element, stateKey }) => {
+                // Check if stateKey or its parent is in changedKeys
+                // Simplification: exact match or simple includes
+                // In real impl, need robust key matching (e.g. 'user.name' matches 'user')
+                const rootKey = stateKey.split('.')[0];
+                if (changedKeys.includes(rootKey) || changedKeys.includes(stateKey)) {
+                    BindingHelper.syncStateToElement(controller, element, stateKey);
+                }
+            });
+        }
+
+        // 2. Notify Class Bindings
+        if (state.isClassReady && state.classListeners.length > 0) {
+            const classOperations = [];
+            state.classListeners.forEach(listener => {
+                const { states, config, element } = listener;
+                if (!element.isConnected) return;
+
+                const shouldUpdate = states.some(key => changedKeys.includes(key));
+                if (!shouldUpdate) return;
+
+                Object.entries(config).forEach(([className, classConfig]) => {
+                    const { states: classStates, checker } = classConfig;
+                    if (classStates.some(k => changedKeys.includes(k))) {
+                        const shouldAdd = checker.call(controller.view);
+                        classOperations.push({ element, action: shouldAdd ? 'add' : 'remove', className });
+                    }
+                });
+            });
+
+            if (classOperations.length > 0) {
+                DOMBatcher.write(() => {
+                    classOperations.forEach(({ element, action, className }) => {
+                        element.classList[action](className);
+                    });
+                });
+            }
+        }
+
+        // 3. Notify Attribute Bindings (omitted for brevity, similar logic)
+        // ...
+    }
+
+    /**
+     * Destroy binding state
+     */
+    static destroy(controller) {
+        const state = controller._internal.binding;
+
+        // Remove listeners
+        state.listeners.forEach(({ element, eventType, handler }) => {
+            try {
+                if (element.isConnected) element.removeEventListener(eventType, handler);
+            } catch (e) { }
+        });
+
+        state.listeners = [];
+        state.classListeners = [];
+        state.attrListeners = [];
+        state.isStarted = false;
+        state.isClassReady = false;
+
+        // WeakMaps (elementFlags, elementMap) will be GC'd automatically when controller._internal dies
+    }
+}

package/src/core/helpers/ConfigHelper.js

@@ -0,0 +1,37 @@
+/**
+ * ConfigHelper
+ * Handles configuration processing
+ */
+import { __defineProps, __defineMethods } from '../../helpers/utils.js';
+
+export default class ConfigHelper {
+    static processDefinedProperties(controller, config) {
+        let definedProps = {};
+        let definedMethods = {};
+
+        if (config.__props__ && config.__props__.length > 0) {
+            config.__props__.forEach(prop => {
+                if (typeof config[prop] === 'function') {
+                    definedMethods[prop] = config[prop].bind(controller);
+                }
+                else if (typeof config[prop] !== 'undefined') {
+                    definedProps[prop] = config[prop];
+                }
+            });
+        }
+
+        __defineProps(controller, definedProps, {
+            writable: true,
+            configurable: true,
+            enumerable: true,
+        });
+
+        __defineMethods(controller, definedMethods);
+    }
+
+    static commitConstructorData(controller) {
+        if (typeof controller.config.commitConstructorData === 'function') {
+            controller.config.commitConstructorData.call(controller.view);
+        }
+    }
+}