onelaraveljs 1.0.0

package/src/helpers/devWarnings.js

@@ -0,0 +1,205 @@
+/**
+ * Development Warnings Helper
+ * Provides helpful warnings during development without impacting production
+ * 
+ * @module helpers/devWarnings
+ * @author OneLaravel Team
+ * @since 2025-12-29
+ */
+
+/**
+ * Check if running in development mode
+ * @returns {boolean}
+ */
+function isDevelopment() {
+  return typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
+}
+
+/**
+ * Warn if condition is false (development only)
+ * 
+ * @param {boolean} condition - Condition to check
+ * @param {string} message - Warning message
+ * @param {*} data - Optional additional data
+ * 
+ * @example
+ * warn(view.mounted, 'Accessing view before mount');
+ * warn(!circularRef, 'Circular reference detected', { view: view.path });
+ */
+export function warn(condition, message, data = null) {
+  if (!condition && isDevelopment()) {
+    const fullMessage = `[OneLaravel Warning] ${message}`;
+    
+    if (data) {
+      console.warn(fullMessage, data);
+    } else {
+      console.warn(fullMessage);
+    }
+    
+    // Show stack trace in development
+    if (console.trace) {
+      console.trace();
+    }
+  }
+}
+
+/**
+ * Deprecation warning
+ * 
+ * @param {string} oldName - Deprecated feature name
+ * @param {string} newName - Replacement feature name
+ * @param {string} version - Version when it will be removed
+ * 
+ * @example
+ * deprecate('ViewEngine', 'ViewController', '2.0.0');
+ */
+export function deprecate(oldName, newName, version = '2.0.0') {
+  if (isDevelopment()) {
+    console.warn(
+      `[OneLaravel Deprecation] ${oldName} is deprecated and will be removed in v${version}. ` +
+      `Use ${newName} instead.`
+    );
+  }
+}
+
+/**
+ * Invariant check - throws error if condition is false
+ * Used for critical checks that should never fail
+ * 
+ * @param {boolean} condition - Condition to check
+ * @param {string} message - Error message
+ * @throws {Error}
+ * 
+ * @example
+ * invariant(App, 'App instance is required');
+ * invariant(viewId, 'View ID cannot be null');
+ */
+export function invariant(condition, message) {
+  if (!condition) {
+    throw new Error(`[OneLaravel Invariant] ${message}`);
+  }
+}
+
+/**
+ * Log info message (development only)
+ * 
+ * @param {string} message - Info message
+ * @param {*} data - Optional data
+ */
+export function devLog(message, data = null) {
+  if (isDevelopment()) {
+    if (data) {
+      console.log(`[OneLaravel] ${message}`, data);
+    } else {
+      console.log(`[OneLaravel] ${message}`);
+    }
+  }
+}
+
+/**
+ * Assert type at runtime (development only)
+ * 
+ * @param {*} value - Value to check
+ * @param {string} expectedType - Expected type
+ * @param {string} name - Variable name
+ * 
+ * @example
+ * assertType(viewId, 'string', 'viewId');
+ * assertType(config, 'object', 'config');
+ */
+export function assertType(value, expectedType, name) {
+  if (!isDevelopment()) return;
+  
+  const actualType = typeof value;
+  
+  if (actualType !== expectedType) {
+    console.warn(
+      `[OneLaravel Type Warning] Expected ${name} to be ${expectedType}, ` +
+      `but got ${actualType}`,
+      { value }
+    );
+  }
+}
+
+/**
+ * Check for circular references (development only)
+ * 
+ * @param {Object} obj - Object to check
+ * @param {string} path - Object path for error message
+ * @returns {boolean} True if circular reference detected
+ * 
+ * @example
+ * if (checkCircular(view, 'view')) {
+ *   warn(false, 'Circular reference in view');
+ * }
+ */
+export function checkCircular(obj, path = 'root') {
+  if (!isDevelopment()) return false;
+  
+  const seen = new WeakSet();
+  
+  function detect(obj, currentPath) {
+    if (obj && typeof obj === 'object') {
+      if (seen.has(obj)) {
+        console.warn(
+          `[OneLaravel Circular Reference] Detected at ${currentPath}`
+        );
+        return true;
+      }
+      
+      seen.add(obj);
+      
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          if (detect(obj[key], `${currentPath}.${key}`)) {
+            return true;
+          }
+        }
+      }
+    }
+    
+    return false;
+  }
+  
+  return detect(obj, path);
+}
+
+/**
+ * Performance warning if execution time exceeds threshold
+ * 
+ * @param {Function} fn - Function to measure
+ * @param {string} label - Label for measurement
+ * @param {number} threshold - Threshold in ms (default: 16ms for 60fps)
+ * @returns {*} Function result
+ * 
+ * @example
+ * warnIfSlow(() => view.render(), 'render', 16);
+ */
+export function warnIfSlow(fn, label, threshold = 16) {
+  if (!isDevelopment()) {
+    return fn();
+  }
+  
+  const start = performance.now();
+  const result = fn();
+  const duration = performance.now() - start;
+  
+  if (duration > threshold) {
+    console.warn(
+      `[OneLaravel Performance] ${label} took ${duration.toFixed(2)}ms ` +
+      `(threshold: ${threshold}ms)`
+    );
+  }
+  
+  return result;
+}
+
+export default {
+  warn,
+  deprecate,
+  invariant,
+  devLog,
+  assertType,
+  checkCircular,
+  warnIfSlow,
+};

package/src/helpers/performance.js

@@ -0,0 +1,226 @@
+/**
+ * Performance Utilities
+ * Debounce, throttle, and other performance optimization helpers
+ * 
+ * @module helpers/performance
+ * @author OneLaravel Team
+ * @since 2025-12-29
+ */
+
+/**
+ * Debounce function - delays execution until after wait time has elapsed
+ * since the last invocation
+ * 
+ * @param {Function} fn - Function to debounce
+ * @param {number} delay - Delay in milliseconds (default: 300)
+ * @returns {Function} Debounced function
+ * 
+ * @example
+ * const handleSearch = debounce((query) => {
+ *   api.search(query);
+ * }, 300);
+ * 
+ * input.addEventListener('input', (e) => handleSearch(e.target.value));
+ */
+export function debounce(fn, delay = 300) {
+  let timeoutId;
+  
+  return function debounced(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+/**
+ * Throttle function - ensures function is called at most once per time period
+ * 
+ * @param {Function} fn - Function to throttle
+ * @param {number} limit - Time limit in milliseconds (default: 100)
+ * @returns {Function} Throttled function
+ * 
+ * @example
+ * const handleScroll = throttle(() => {
+ *   updateScrollPosition();
+ * }, 100);
+ * 
+ * window.addEventListener('scroll', handleScroll);
+ */
+export function throttle(fn, limit = 100) {
+  let inThrottle;
+  
+  return function throttled(...args) {
+    if (!inThrottle) {
+      fn.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+
+/**
+ * Request Animation Frame wrapper for smooth animations
+ * 
+ * @param {Function} fn - Function to execute on next frame
+ * @returns {Function} RAF-wrapped function
+ * 
+ * @example
+ * const updateAnimation = raf(() => {
+ *   element.style.transform = `translateX(${x}px)`;
+ * });
+ */
+export function raf(fn) {
+  let rafId;
+  
+  return function rafWrapped(...args) {
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      fn.apply(this, args);
+    });
+  };
+}
+
+/**
+ * Memoize function results for performance
+ * 
+ * @param {Function} fn - Function to memoize
+ * @param {Function} keyFn - Optional function to generate cache key
+ * @returns {Function} Memoized function
+ * 
+ * @example
+ * const expensiveCalc = memoize((n) => {
+ *   return fibonacci(n);
+ * });
+ */
+export function memoize(fn, keyFn = (...args) => JSON.stringify(args)) {
+  const cache = new Map();
+  
+  return function memoized(...args) {
+    const key = keyFn(...args);
+    
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    
+    const result = fn.apply(this, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+/**
+ * Batch DOM reads and writes to prevent layout thrashing
+ * 
+ * @example
+ * const batcher = new DOMBatcher();
+ * 
+ * // Schedule reads
+ * batcher.read(() => {
+ *   const height = element.offsetHeight;
+ * });
+ * 
+ * // Schedule writes
+ * batcher.write(() => {
+ *   element.style.height = `${newHeight}px`;
+ * });
+ */
+export class DOMBatcher {
+  constructor() {
+    this.readQueue = [];
+    this.writeQueue = [];
+    this.scheduled = false;
+  }
+  
+  /**
+   * Schedule a DOM read operation
+   * @param {Function} fn - Read operation
+   */
+  read(fn) {
+    this.readQueue.push(fn);
+    this.schedule();
+  }
+  
+  /**
+   * Schedule a DOM write operation
+   * @param {Function} fn - Write operation
+   */
+  write(fn) {
+    this.writeQueue.push(fn);
+    this.schedule();
+  }
+  
+  /**
+   * Schedule batch execution
+   * @private
+   */
+  schedule() {
+    if (this.scheduled) return;
+    
+    this.scheduled = true;
+    requestAnimationFrame(() => {
+      this.flush();
+    });
+  }
+  
+  /**
+   * Execute all queued operations
+   * @private
+   */
+  flush() {
+    // Execute all reads first
+    while (this.readQueue.length > 0) {
+      const fn = this.readQueue.shift();
+      fn();
+    }
+    
+    // Then execute all writes
+    while (this.writeQueue.length > 0) {
+      const fn = this.writeQueue.shift();
+      fn();
+    }
+    
+    this.scheduled = false;
+  }
+}
+
+/**
+ * Measure and log performance of a function
+ * 
+ * @param {string} label - Label for the measurement
+ * @param {Function} fn - Function to measure
+ * @returns {*} Result of the function
+ * 
+ * @example
+ * const result = measurePerformance('render', () => {
+ *   return view.render();
+ * });
+ */
+export function measurePerformance(label, fn) {
+  const start = performance.now();
+  const result = fn();
+  const end = performance.now();
+  
+  if (typeof result?.then === 'function') {
+    return result.then((value) => {
+      console.debug(`[Performance] ${label}: ${(end - start).toFixed(2)}ms (async)`);
+      return value;
+    });
+  }
+  
+  console.debug(`[Performance] ${label}: ${(end - start).toFixed(2)}ms`);
+  return result;
+}
+
+export default {
+  debounce,
+  throttle,
+  raf,
+  memoize,
+  DOMBatcher,
+  measurePerformance,
+};

package/src/helpers/utils.js

@@ -0,0 +1,287 @@
+export const uniqId = (prefix = '') => {
+    const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+    return prefix + id;
+}
+
+export const emptyFn = () => { };
+
+export const noop = () => { };
+
+export const __hasOwnProp = (obj, key) => {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export const __defineProps = (obj, props, configs = {}) => {
+    Object.entries(props).forEach(([key, value]) => {
+        Object.defineProperty(obj, key, {
+            value: value,
+            writable: configs[key]?.writable ?? false,
+            configurable: configs[key]?.configurable ?? false,
+            enumerable: configs[key]?.enumerable ?? false,
+        });
+    });
+};
+
+export const __defineProp = (obj, key, PropertyDescriptor = {}) => {
+    if (!__hasOwnProp(PropertyDescriptor, 'value') && !(__hasOwnProp(PropertyDescriptor, 'get') && typeof PropertyDescriptor.get === 'function')) {
+        throw new Error(`Property ${key} must have a value or get method`);
+    }
+    if (__hasOwnProp(PropertyDescriptor, 'value')) {
+        if (__hasOwnProp(PropertyDescriptor, 'get')) {
+            delete PropertyDescriptor.get;
+        }
+        if (__hasOwnProp(PropertyDescriptor, 'set')) {
+            delete PropertyDescriptor.set;
+        }
+    }
+    if (!__hasOwnProp(PropertyDescriptor, 'writable')) {
+        if (!__hasOwnProp(PropertyDescriptor, 'get')) {
+            PropertyDescriptor.writable = false;
+        }
+    }
+    if (!__hasOwnProp(PropertyDescriptor, 'configurable')) {
+        PropertyDescriptor.configurable = false;
+    }
+    if (!__hasOwnProp(PropertyDescriptor, 'enumerable')) {
+        PropertyDescriptor.enumerable = false;
+    }
+
+    return Object.defineProperty(obj, key, PropertyDescriptor);
+}
+
+export const __defineProperties = (obj, properties) => {
+    Object.entries(properties).forEach(([key, value]) => {
+        __defineProp(obj, key, value);
+    });
+}
+
+export const __defineMethods = (obj, methods) => {
+    Object.entries(methods).forEach(([key, value]) => {
+        if (typeof value !== 'function') {
+            return;
+        }
+        Object.defineProperty(obj, key, {
+            value: value,
+            writable: false,
+            configurable: false,
+            enumerable: false,
+        });
+    });
+}
+
+export const __defineGetters = (obj, getters) => {
+    Object.entries(getters).forEach(([key, value]) => {
+        Object.defineProperty(obj, key, {
+            get: value,
+            configurable: false,
+            enumerable: false,
+        });
+    });
+}
+export const deleteProp = (obj, prop) => {
+    try {
+        delete obj[prop];
+        return true;
+    } catch (error) {
+        console.error('App.deleteProp error:', error);
+        return false;
+    }
+}
+export const deleteProps = (obj, props) => {
+    try {
+        props.forEach(prop => {
+            delete obj[prop];
+        });
+        return true;
+    } catch (error) {
+        console.error('App.deleteProps error:', error);
+        return false;
+    }
+}
+
+/**
+ * Kiểm tra đối tượng có dữ liệu hay không
+ * @param {object} obj biến đối tượng
+ * @returns {boolean} true nếu có dữ liệu, false nếu rỗng
+ */
+export const hasData = obj => {
+    if (!obj || typeof obj !== 'object') return false;
+    for (const _ in obj) return true; // fast path
+    return false;
+}
+
+export const isEmptyObject = obj => hasData(obj) === false;
+
+
+
+
+/**
+ * Kiểm tra xem chuỗi đầu vào có phải là một thẻ HTML hợp lệ hoặc danh sách các thẻ HTML hợp lệ không.
+ * @param {string} input - Chuỗi cần kiểm tra
+ * @returns {boolean} true nếu hợp lệ, false nếu không hợp lệ
+ */
+export function isHtmlString(input) {
+    if (typeof input !== 'string') return false;
+    // Loại bỏ khoảng trắng đầu cuối
+    const str = input.trim();
+    if (!str) return false;
+
+    // Regex kiểm tra một thẻ HTML đơn
+    const singleTagRegex = /^<([a-zA-Z][\w:-]*)(\s+[^<>]*)?>.*<\/\1>$|^<([a-zA-Z][\w:-]*)(\s+[^<>]*)?\/>$/s;
+
+    // Regex kiểm tra danh sách các thẻ HTML (có thể có nhiều thẻ liền nhau)
+    // Sử dụng DOMParser để kiểm tra chắc chắn hơn
+    try {
+        const parser = new DOMParser();
+        // Bọc trong một thẻ cha để DOMParser không tự động thêm <html><body>
+        const doc = parser.parseFromString(`<div>${str}</div>`, 'text/html');
+        const wrapper = doc.body.firstElementChild;
+        if (!wrapper) return false;
+        // Nếu tất cả các node con đều là element node (thẻ html)
+        for (let node of wrapper.childNodes) {
+            if (node.nodeType !== 1) { // 1: ELEMENT_NODE
+                // Cho phép text node chỉ nếu nó là khoảng trắng
+                if (node.nodeType === 3 && !node.textContent.trim()) continue;
+                return false;
+            }
+        }
+        // Nếu có ít nhất một thẻ hợp lệ
+        return wrapper.children.length > 0;
+    } catch (e) {
+        // Nếu DOMParser không hỗ trợ hoặc lỗi, fallback về regex đơn
+        return singleTagRegex.test(str);
+    }
+}
+/**
+ * Escape string for HTML output
+ * @param {*} value - Value to escape
+ * @returns {string} Escaped string
+ */
+export function escapeString(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+
+    const str = String(value);
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/`/g, '&#96;');
+        ;
+}
+
+/**
+ * Thay thế tất cả các chuỗi con "find" trong "input" bằng chuỗi "replace".
+ * Có 3 trường hợp:
+ * 1. find là string, replace là string: thay thế tất cả find thành replace.
+ * 2. find là object: key là chuỗi cần tìm, value là chuỗi thay thế.
+ * 3. find là object, replace là string (prefix), postfix là string:
+ *    tìm tất cả prefix+key+postfix, thay thế bằng value.
+ * @param {string} input - Chuỗi gốc cần thay thế
+ * @param {string|Object} find - Chuỗi hoặc object cần tìm để thay thế
+ * @param {string|undefined} replace - Chuỗi thay thế hoặc prefix
+ * @param {string|undefined} postfix - Chuỗi hậu tố (chỉ dùng cho dạng 3)
+ * @returns {string} Chuỗi sau khi đã thay thế
+ */
+export function replaceAll(input, find, replace, postfix) {
+    if (typeof input !== 'string' || !find) return input;
+
+    // Trường hợp 1: find là string, replace là string
+    if (typeof find === 'string') {
+        if (find === '') return input;
+        return input.split(find).join(replace);
+    }
+
+    // Trường hợp 2 & 3: find là object
+    if (typeof find === 'object' && find !== null) {
+        let result = input;
+        // Dạng 3: có prefix (replace) và postfix
+
+        if (typeof replace === 'string' && typeof postfix === 'string') {
+            for (const [key, value] of Object.entries(find)) {
+                if (key === '') continue;
+                // Escape ký tự đặc biệt trong prefix, key, postfix
+                const pattern = (replace + key + postfix).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                result = result.replace(new RegExp(pattern, 'g'), value);
+            }
+        }
+        // Dạng 3: chỉ có prefix (replace), không có postfix
+        else if (typeof replace === 'string' && typeof postfix === 'undefined') {
+            for (const [key, value] of Object.entries(find)) {
+                if (key === '') continue;
+                const pattern = (replace + key).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                result = result.replace(new RegExp(pattern, 'g'), value);
+            }
+        }
+        // Dạng 2: không có prefix, không có postfix
+        else {
+            for (const [key, value] of Object.entries(find)) {
+                if (key === '') continue;
+                const pattern = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                result = result.replace(new RegExp(pattern, 'g'), value);
+            }
+        }
+        return result;
+    }
+
+    // Nếu không khớp trường hợp nào, trả về input gốc
+    return input;
+}
+
+
+
+export function withScope(context = {}, callback) {
+    if (typeof callback !== 'function') {
+        throw new TypeError('withContext expects a function as the second argument.');
+    }
+
+    // Kiểm tra context phải là object
+    if (typeof context !== 'object' || context === null) {
+        throw new TypeError('Context must be a non-null object.');
+    }
+
+    // Tạo danh sách key và value
+    const keys = Object.keys(context);
+    const values = Object.values(context);
+
+    // Tạo hàm mới có các biến cục bộ tương ứng
+    const func = new Function(
+        ...keys,
+        `"use strict"; return (${callback.toString()})();`
+    );
+
+    // Gọi hàm mới trong phạm vi với context
+    return func(...values);
+}
+
+function withContext(context, fn, self) {
+    const keys = Object.keys(context);
+    const values = Object.values(context);
+    return function (...args) {
+        return new Function(...keys, `"use strict"; return (${fn.toString()})(...arguments)`)
+            .apply(self ?? this, values.concat(args));
+    };
+}
+
+/**
+* Execute function and return result
+* @param {Function} fn - Function to execute
+* @returns {string} Result as string
+*/
+export function exe(fn, defaultValue = '') {
+    try {
+        const result = typeof fn === 'function' ? fn() : fn;
+        return result !== undefined ? result : defaultValue;
+    } catch (error) {
+        console.error('App.execute error:', error);
+        return defaultValue;
+    }
+}
+