onelaraveljs 1.0.0

package/src/init.js

@@ -0,0 +1,343 @@
+/**
+ * init Module
+ * ES6 Module for Blade Compiler
+ */
+
+// import { App } from './app.js';
+
+function initApp(App) {
+    App = App || window.App;
+    
+    // Check if APP_CONFIGS is available
+    if (typeof window.APP_CONFIGS === 'undefined') {
+        console.error('APP_CONFIGS not found! Please define window.APP_CONFIGS in your HTML.');
+        return;
+    }
+    
+    console.log('✅ APP_CONFIGS found:', window.APP_CONFIGS);
+
+    const config = window.APP_CONFIGS;
+    
+    // Validate required App modules
+    if (typeof App === 'undefined') {
+        console.error('App core module not found! Please ensure app.main.js is loaded.');
+        return;
+    }
+
+    // Validate config structure
+    if (!config || typeof config !== 'object') {
+        console.error('Invalid APP_CONFIGS! Config must be an object.');
+        return;
+    }
+
+    // Initialize view container first
+    const container = config.container ? (
+        typeof config.container === 'string' ? (
+            document.querySelector(config.container) || document.body
+        ) : (config.container instanceof HTMLElement ? config.container : document.body)
+    ) : document.body;
+    if (container) {
+        App.View.setContainer(container);
+    } else {
+        console.warn('⚠️ No container specified and no default container found');
+    }
+
+    const isServerRendered = container.getAttribute('data-server-rendered') === 'true';
+
+    App.env = {...App.env, ...config.env};
+
+    if (App.View) {
+        // If server-rendered, ensure view container is properly hydrated
+        if (isServerRendered) {
+            // Mark container as hydrated without re-rendering content
+            App.View._isHydrated = true;
+        }
+
+        // Initialize View configuration
+        if (App.View && config.view) {
+            App.View.init(config.view);
+        } else if (config.view) {
+            console.warn('⚠️ View configuration provided but App.View not found');
+        }
+
+    }
+
+    // Initialize API configuration
+    if (config.api && App.Http) {
+        if (config.api.baseUrl) {
+            App.Http.setBaseUrl(config.api.baseUrl);
+        }
+
+        // Set default headers including CSRF token
+        const defaultHeaders = {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+        };
+
+        if (config.api.csrfToken) {
+            defaultHeaders['X-CSRF-TOKEN'] = config.api.csrfToken;
+        }
+
+        App.Http.setDefaultHeaders(defaultHeaders);
+        App.Http.setTimeout(config.api.timeout || 10000);
+
+    } else if (config.api) {
+        console.warn('⚠️ API configuration provided but AppInstance.HttpService not found');
+    } else {
+        console.warn('⚠️ No API configuration provided');
+    }
+
+    // Initialize router configuration
+    if (App.Router) {
+        if (config.router.allRoutes) {
+            App.Router.setAllRoutes(config.router.allRoutes);
+        }
+        // Get routes from router config or fallback to top-level routes
+        let routes = config.router?.routes || config.routes;
+        if (!routes || !Array.isArray(routes) || routes.length === 0) {
+            const scope = config.appScope || 'web';
+            routes = [
+                { path: `/${scope}`, view: `${scope}.home` },
+                { path: `/${scope}/about`, view: `${scope}.about` },
+                { path: `/${scope}/users`, view: `${scope}.users` },
+                { path: `/${scope}/users/:id`, view: `${scope}.user-detail` },
+                { path: `/${scope}/contact`, view: `${scope}.contact` }
+            ];
+        } else {
+            console.log('🔧 Using provided routes:', routes.length);
+        }
+
+        // Register routes
+        routes.forEach(route => {
+            if (route.path && (route.view || route.component)) {
+                const viewName = route.view || route.component;
+                App.Router.addRoute(route.path, viewName, route.options || {});
+            }
+        });
+
+        // Configure router options
+        if (config.router) {
+            if (config.router.mode) {
+                App.Router.setMode(config.router.mode);
+            }
+            if (config.router.base) {
+                App.Router.setBase(config.router.base);
+            }
+            
+            // Setup default router hooks if not provided
+            if (!config.router.beforeEach) {
+                App.Router.beforeEach(function(to, from) {
+                    if (App.mode === 'development') {
+                        console.log('Navigating to:', to.path);
+                    }
+                    return true;
+                });
+            } else {
+                App.Router.beforeEach(config.router.beforeEach);
+            }
+            
+            if (!config.router.afterEach) {
+                App.Router.afterEach(function(to, from) {
+                    if (App.mode === 'development') {
+                        console.log('Navigation complete:', to.path || to);
+                    }
+                    // to.path should be set from Router, fallback to window.location.pathname
+                    const path = to.path || window.location.pathname;
+                    updateActiveNav(path);
+                });
+            } else {
+                App.Router.afterEach(function(to, from) {
+                    // Call custom afterEach if provided
+                    if (typeof config.router.afterEach === 'function') {
+                        config.router.afterEach(to, from);
+                    }
+                    // Always update navigation
+                    // to.path should be set from Router, fallback to window.location.pathname
+                    const path = to.path || window.location.pathname;
+                    updateActiveNav(path);
+                });
+            }
+            console.log('✅ Router configuration applied');
+        }
+
+        // Set default route
+        const defaultRoute = config.defaultRoute || `/${config.appScope || 'web'}`;
+        App.Router.setDefaultRoute(defaultRoute);
+
+        if (isServerRendered) {
+            // Start router but don't handle initial route
+            App.Router.start(true); // Pass true to skip initial route handling
+
+            // Mark as client-side ready after a short delay
+            setTimeout(() => {
+                if (container) {
+                    container.setAttribute('data-server-rendered', 'false');
+                }
+            }, 100);
+        } else {
+            // Start the router normally
+            App.Router.start();
+            console.log('✅ Router started');
+        }
+    } else {
+        console.warn('⚠️ Router not available - AppInstance.Router not found');
+    }
+
+    if(config.view){
+        if(config.view.superView){
+            App.View.setSuperViewPath(config.view.superView);
+        }
+    }
+    // Initialize system data
+    // Initialize mode (development/production)
+    if (config.mode) {
+        App.mode = config.mode;
+
+        // Enable/disable debug logging based on mode
+        if (config.mode === 'development') {
+            console.log('🔧 Development mode enabled - debug logging active');
+        } else {
+            console.log('🏭 Production mode enabled');
+        }
+    } else {
+        // Set default mode
+        App.mode = 'development';
+        console.warn('⚠️ No mode specified in config, using default: development');
+    }
+
+    // Initialize global data
+    App.globalData = {
+        siteName: 'One App',
+        version: '1.0.0',
+        csrfToken: config.api?.csrfToken,
+        appScope: config.appScope,
+        currentUser: config.currentUser,
+        ...(config.data || {})
+    };
+
+    // Initialize language configuration
+    if (config.lang) {
+        App.lang = {
+            current: config.lang.locale || 'en',
+            fallback: config.lang.fallback || 'en',
+            ...config.lang
+        };
+        console.log('✅ Language configuration initialized:', App.lang);
+    } else {
+        // Set default language configuration
+        App.lang = {
+            current: 'en',
+            fallback: 'en'
+        };
+        console.warn('⚠️ No language configuration provided, using defaults');
+    }
+
+
+    // Setup navigation updates
+    if (App.View) {
+        App.View.on('view:rendered', function (viewName) {
+            console.log('View rendered:', viewName);
+            updateActiveNav();
+        });
+    } else {
+        console.warn('⚠️ Navigation updates not available - App.View not found');
+    }
+
+    // Custom initialization callback
+    if (config.onInit && typeof config.onInit === 'function') {
+        try {
+            config.onInit(App, config);
+            console.log('✅ Custom initialization callback executed');
+        } catch (error) {
+            console.error('❌ Error in custom initialization callback:', error);
+        }
+    }
+
+    // Dispatch App ready event
+    try {
+        const appReadyEvent = new CustomEvent('app:ready', {
+            detail: { App: App, config }
+        });
+        document.dispatchEvent(appReadyEvent);
+        console.log('✅ App ready event dispatched');
+    } catch (error) {
+        console.error('❌ Error dispatching App ready event:', error);
+    }
+
+    console.log('🎉 App initialization completed successfully!');
+}
+
+// Navigation helper function - updates active navigation link
+export function updateActiveNav(currentPath) {
+    // Use provided path or current location
+    const path = currentPath || window.location.pathname;
+    
+    // Find all navigation links (support multiple selectors)
+    const navLinks = document.querySelectorAll('.nav-menu a, .nav-link, nav a[data-navigate]');
+    
+    navLinks.forEach(link => {
+        link.classList.remove('active');
+        
+        // Check href attribute
+        const href = link.getAttribute('href');
+        // Check data-navigate attribute
+        const navigatePath = link.getAttribute('data-navigate');
+        
+        // Match if href or data-navigate matches current path
+        let isActive = false;
+        
+        // 1. Exact match
+        if (href === path || navigatePath === path) {
+            isActive = true;
+        }
+        // 2. Check full URL match
+        else {
+            const fullUrl = window.location.protocol + '//' + window.location.host + path;
+            if (href === fullUrl) {
+                isActive = true;
+            }
+        }
+        
+        // 3. Partial/prefix match for paths with query parameters or dynamic segments
+        // e.g., /demo matches /demo/section-name
+        if (!isActive && (href || navigatePath)) {
+            const basePath = href || navigatePath;
+            // Extract base path without query string
+            const basePathWithoutQuery = basePath.split('?')[0];
+            const currentPathWithoutQuery = path.split('?')[0];
+            
+            // Check if current path starts with nav link path (for routes with parameters)
+            if (basePathWithoutQuery && currentPathWithoutQuery.startsWith(basePathWithoutQuery + '/')) {
+                isActive = true;
+            }
+            // Also check exact match after removing query string
+            else if (basePathWithoutQuery === currentPathWithoutQuery) {
+                isActive = true;
+            }
+        }
+        
+        if (isActive) {
+            link.classList.add('active');
+        }
+    });
+}
+
+// Make updateActiveNav globally available for router hooks
+if (typeof window !== 'undefined') {
+    window.updateActiveNav = updateActiveNav;
+}
+// try {
+//     // Make updateActiveNav globally available for router config
+//     window.updateActiveNav = updateActiveNav;
+
+//     // Initialize when DOM is ready
+//     if (document.readyState === 'loading') {
+//         document.addEventListener('DOMContentLoaded', initApp);
+//     } else {
+//         initApp();
+//     }
+// } catch (error) {
+//     console.error('❌ Error in init:', error);
+// }
+
+export default initApp;

package/src/plugins/auto-plugin.js

@@ -0,0 +1,34 @@
+/**
+ * Auto Plugin Module
+ * This file in a subdirectory will be automatically discovered
+ */
+
+export class AutoPlugin {
+    constructor() {
+        this.name = 'AutoPlugin';
+        this.type = 'plugin';
+        this.version = '1.0.0';
+    }
+
+    initialize() {
+        console.log(`🚀 ${this.name} initialized!`);
+        return true;
+    }
+
+    getInfo() {
+        return {
+            name: this.name,
+            type: this.type,
+            version: this.version,
+            timestamp: new Date().toISOString()
+        };
+    }
+}
+
+// Register with global App object
+if (typeof window !== 'undefined' && window.App) {
+    window.App.AutoPlugin = AutoPlugin;
+}
+
+// Export for ES6 modules
+export default AutoPlugin;

package/src/services/Test.js

@@ -0,0 +1,18 @@
+/**
+ * Test service để demo alias @app
+ */
+export class TestService {
+    constructor() {
+        this.name = 'TestService';
+    }
+    
+    getMessage() {
+        return `Hello from ${this.name}!`;
+    }
+    
+    static create() {
+        return new TestService();
+    }
+}
+
+export default TestService;

package/src/types/index.js

@@ -0,0 +1,193 @@
+/**
+ * TypeScript-style type definitions using JSDoc
+ * This file provides type hints for better IDE support and documentation
+ * 
+ * @module types/index
+ * @author OneLaravel Team
+ * @since 2025-12-29
+ */
+
+/**
+ * @typedef {Object} Application
+ * @property {string} name - Application name
+ * @property {Helper} Helper - Helper instance
+ * @property {Router} Router - Router instance
+ * @property {ViewManager} View - ViewManager instance
+ * @property {typeof HttpService} HttpService - HttpService class
+ * @property {HttpService} Http - HttpService instance
+ * @property {OneMarkup} OneMarkup - OneMarkup class
+ * @property {API} Api - API class
+ * @property {string} mode - Application mode (development/production)
+ * @property {boolean} isInitialized - Initialization status
+ * @property {AppEnvironment} env - Environment configuration
+ * @property {Function} init - Initialize application
+ */
+
+/**
+ * @typedef {Object} AppEnvironment
+ * @property {string} mode - Environment mode (web/mobile)
+ * @property {boolean} debug - Debug mode flag
+ * @property {string} base_url - Base URL
+ * @property {string} csrf_token - CSRF token
+ * @property {string} router_mode - Router mode (history/hash)
+ */
+
+/**
+ * @typedef {Object} ViewData
+ * @property {string} [__SSR_VIEW_ID__] - Server-side rendered view ID
+ * @property {*} [key: string] - Additional data properties
+ */
+
+/**
+ * @typedef {Object} SystemData
+ * @property {Application} App - Application instance
+ * @property {typeof View} View - View class
+ * @property {string} __base__ - Base path
+ * @property {string} __layout__ - Layout path
+ * @property {string} __page__ - Page path
+ * @property {string} __component__ - Component path
+ * @property {string} __template__ - Template path
+ * @property {string} __partial__ - Partial path
+ * @property {string} __system__ - System path
+ * @property {Object} __env - Environment data
+ * @property {Object} __helper - Helper functions
+ */
+
+/**
+ * @typedef {Object} ViewConfig
+ * @property {string} superView - Super view path
+ * @property {boolean} hasSuperView - Has super view flag
+ * @property {string} viewType - View type (view/layout/component)
+ * @property {Object} sections - Section definitions
+ * @property {WrapperConfig} wrapperConfig - Wrapper configuration
+ * @property {Array<string>} __props__ - Property names
+ * @property {boolean} hasAwaitData - Has await data flag
+ * @property {boolean} hasFetchData - Has fetch data flag
+ * @property {boolean} subscribe - Subscribe flag
+ * @property {Object|null} fetch - Fetch configuration
+ * @property {ViewData} data - View data
+ * @property {string} viewId - View ID
+ * @property {string} path - View path
+ * @property {boolean} usesVars - Uses vars flag
+ * @property {boolean} hasSections - Has sections flag
+ * @property {boolean} hasSectionPreload - Has section preload flag
+ * @property {boolean} hasPrerender - Has prerender flag
+ * @property {Array<string>} renderLongSections - Long sections to render
+ * @property {Array<string>} renderSections - Sections to render
+ * @property {Array<string>} prerenderSections - Sections to prerender
+ * @property {Array<ScriptResource>} scripts - Script resources
+ * @property {Array<StyleResource>} styles - Style resources
+ * @property {Array<Resource>} resources - Other resources
+ * @property {Function} commitConstructorData - Commit constructor data
+ * @property {Function} updateVariableData - Update variable data
+ * @property {Function} updateVariableItem - Update variable item
+ * @property {Function} loadServerData - Load server data
+ * @property {Function} prerender - Prerender function
+ * @property {Function} render - Render function
+ * @property {Function} init - Init function
+ * @property {Function} destroy - Destroy function
+ */
+
+/**
+ * @typedef {Object} WrapperConfig
+ * @property {boolean} enable - Enable wrapper
+ * @property {string|null} tag - Wrapper tag name
+ * @property {boolean} subscribe - Subscribe to state changes
+ * @property {Object} attributes - Wrapper attributes
+ */
+
+/**
+ * @typedef {Object} Resource
+ * @property {string} type - Resource type (src/href/code)
+ * @property {string} resourceType - Resource type (script/style)
+ * @property {string} [src] - External resource URL
+ * @property {string} [href] - External stylesheet URL
+ * @property {string} [content] - Inline content
+ * @property {string} [function] - Function name for code type
+ * @property {string} [id] - Resource ID
+ * @property {Object} [attributes] - Additional attributes
+ */
+
+/**
+ * @typedef {Resource} ScriptResource
+ * @property {'script'} resourceType
+ */
+
+/**
+ * @typedef {Resource} StyleResource
+ * @property {'style'} resourceType
+ */
+
+/**
+ * @typedef {Object} StateDefinition
+ * @property {*} value - State value
+ * @property {Function} setValue - State setter
+ * @property {string} key - State key
+ * @property {Array<Function>} subscribers - State subscribers
+ */
+
+/**
+ * @typedef {Object} EventConfig
+ * @property {string} eventType - Event type (click/input/etc)
+ * @property {Array<EventHandler>} handlers - Event handlers
+ * @property {string} eventID - Event ID
+ */
+
+/**
+ * @typedef {Object} EventHandler
+ * @property {string|Function} handler - Handler function or name
+ * @property {Array<*>} params - Handler parameters
+ * @property {Object} options - Handler options
+ */
+
+/**
+ * @typedef {Object} OutputComponentConfig
+ * @property {string} outputId - Output ID
+ * @property {string} stateKey - State key to watch
+ * @property {boolean} escaped - Escape HTML flag
+ * @property {HTMLElement} element - Output element
+ */
+
+/**
+ * @typedef {Object} WatchComponentConfig
+ * @property {string} watchId - Watch ID
+ * @property {string} stateKey - State key to watch
+ * @property {Function} callback - Watch callback
+ */
+
+/**
+ * @typedef {Object} RouteConfig
+ * @property {string} path - Route path
+ * @property {string} name - Route name
+ * @property {Function|string} handler - Route handler
+ * @property {Object} [meta] - Route metadata
+ * @property {Array<Function>} [middleware] - Route middleware
+ */
+
+/**
+ * @typedef {Object} RouterConfig
+ * @property {string} mode - Router mode (history/hash)
+ * @property {string} base - Base path
+ * @property {Function} [scrollBehavior] - Scroll behavior function
+ */
+
+/**
+ * @typedef {Object} HTTPConfig
+ * @property {string} baseURL - Base URL
+ * @property {Object} headers - Default headers
+ * @property {number} timeout - Request timeout
+ * @property {Function} [onRequest] - Request interceptor
+ * @property {Function} [onResponse] - Response interceptor
+ * @property {Function} [onError] - Error interceptor
+ */
+
+/**
+ * @typedef {Object} SSRViewData
+ * @property {string} viewId - View ID
+ * @property {ViewData} data - View data
+ * @property {Object} events - Event configurations
+ * @property {Array<string>} children - Child view IDs
+ */
+
+// Export empty object to make this a module
+export { };

package/src/utils/date-helper.js

@@ -0,0 +1,51 @@
+/**
+ * Date Helper Utility Module
+ * ES6 Module for date operations
+ */
+
+export class DateHelper {
+    static formatDate(date, format = 'YYYY-MM-DD') {
+        const d = new Date(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        
+        return format
+            .replace('YYYY', year)
+            .replace('MM', month)
+            .replace('DD', day);
+    }
+
+    static addDays(date, days) {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    }
+
+    static addMonths(date, months) {
+        const result = new Date(date);
+        result.setMonth(result.getMonth() + months);
+        return result;
+    }
+
+    static isToday(date) {
+        const today = new Date();
+        const checkDate = new Date(date);
+        return today.toDateString() === checkDate.toDateString();
+    }
+
+    static getDaysBetween(date1, date2) {
+        const oneDay = 24 * 60 * 60 * 1000;
+        const firstDate = new Date(date1);
+        const secondDate = new Date(date2);
+        return Math.round(Math.abs((firstDate - secondDate) / oneDay));
+    }
+}
+
+// Register with global App object
+if (typeof window !== 'undefined' && window.App) {
+    window.App.DateHelper = DateHelper;
+}
+
+// Export for ES6 modules
+export default DateHelper;

package/src/utils/helpers.js

@@ -0,0 +1,39 @@
+/**
+ * Helpers Utility Module
+ * ES6 Module for Blade Compiler
+ */
+
+import { App } from '../app.js';
+
+export class Helpers {
+    static formatDate(date) {
+        return new Date(date).toLocaleDateString();
+    }
+
+    static formatCurrency(amount) {
+        return new Intl.NumberFormat('vi-VN', {
+            style: 'currency',
+            currency: 'VND'
+        }).format(amount);
+    }
+
+    static debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+}
+
+// Register with global App object
+if (typeof window !== 'undefined') {
+    window.App.Helpers = Helpers;
+}
+
+// Export for ES6 modules
+export default Helpers;