@vanduo-oss/framework 1.3.9 → 1.4.1

package/js/vanduo.js

@@ -6,6 +6,7 @@
   'use strict';
 
   const VANDUO_VERSION = typeof __VANDUO_VERSION__ !== 'undefined' ? __VANDUO_VERSION__ : '0.0.0-dev';
+  const hasOwn = Object.prototype.hasOwnProperty;
 
   /**
    * Vanduo Framework Object
@@ -13,46 +14,193 @@
   const Vanduo = {
     version: VANDUO_VERSION,
     components: {},
+    aliases: {},
+    _decoratedComponents: new WeakSet(),
+
+    resolveComponentName: function (name) {
+      return this.aliases[name] || name;
+    },
+
+    _isRoot: function (root) {
+      if (typeof window.VanduoLifecycle !== 'undefined' && typeof window.VanduoLifecycle.isRoot === 'function') {
+        return window.VanduoLifecycle.isRoot(root);
+      }
+
+      return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    },
+
+    _normalizeRoot: function (root) {
+      return this._isRoot(root) ? root : document;
+    },
+
+    _queryAll: function (root, selector) {
+      const scope = this._normalizeRoot(root);
+      const matches = [];
+
+      if (scope instanceof Element && typeof scope.matches === 'function' && scope.matches(selector)) {
+        matches.push(scope);
+      }
+
+      if (typeof scope.querySelectorAll === 'function') {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+
+      return matches;
+    },
+
+    queryAll: function (root, selector) {
+      if (typeof selector === 'undefined') {
+        selector = root;
+        root = document;
+      }
+
+      return this._queryAll(root, selector);
+    },
+
+    queryOne: function (root, selector) {
+      const matches = this.queryAll(root, selector);
+      return matches.length ? matches[0] : null;
+    },
+
+    _isLifecycleManagedComponent: function (component) {
+      if (!component || typeof component !== 'object') return false;
+
+      for (const key in component) {
+        if (hasOwn.call(component, key) && component[key] instanceof Map) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
+    _syncComponentLifecycle: function (name, component, root) {
+      const lifecycle = window.VanduoLifecycle;
+      if (!lifecycle || !this._isLifecycleManagedComponent(component)) return;
+
+      const componentName = this.resolveComponentName(name);
+      const scope = this._normalizeRoot(root);
+
+      for (const key in component) {
+        if (!hasOwn.call(component, key) || !(component[key] instanceof Map)) {
+          continue;
+        }
+
+        component[key].forEach(function (instance, element) {
+          if (!(element instanceof Element) || !lifecycle.isInRoot(scope, element) || lifecycle.has(element, componentName)) {
+            return;
+          }
+
+          if (typeof component.destroy === 'function') {
+            lifecycle.register(element, componentName, [], function () {
+              component.destroy(element);
+            });
+            return;
+          }
+
+          const cleanup = instance && Array.isArray(instance.cleanup) ? instance.cleanup : [];
+          lifecycle.register(element, componentName, cleanup, function () {
+            component[key].delete(element);
+          });
+        });
+      }
+    },
+
+    _decorateComponent: function (name, component) {
+      const framework = this;
+      const lifecycle = window.VanduoLifecycle;
+      if (!component || typeof component !== 'object' || this._decoratedComponents.has(component)) {
+        return;
+      }
+
+      const originalInit = typeof component.init === 'function' ? component.init : null;
+      if (originalInit) {
+        component.init = function (...args) {
+          const scopedRoot = framework._isRoot(args[0]) ? args[0] : null;
+          const result = originalInit.apply(this, args);
+
+          if (window.Vanduo) {
+            const syncRoot = scopedRoot || document;
+            window.Vanduo._syncComponentLifecycle(name, this, syncRoot);
+          }
+
+          return result;
+        };
+      }
+
+      const originalDestroyAll = typeof component.destroyAll === 'function' ? component.destroyAll : null;
+      if (originalDestroyAll) {
+        component.destroyAll = function (...args) {
+          const scopedRoot = framework._isRoot(args[0]) ? args[0] : null;
+          const componentName = window.Vanduo ? window.Vanduo.resolveComponentName(name) : name;
+
+          if (lifecycle && window.Vanduo && window.Vanduo._isLifecycleManagedComponent(this)) {
+            if (scopedRoot && scopedRoot !== document) {
+              lifecycle.destroyAllInContainer(scopedRoot, componentName);
+              if (this.__vanduoScopedDestroyAll === true) {
+                return originalDestroyAll.apply(this, args);
+              }
+              return;
+            }
+
+            lifecycle.destroyAll(componentName);
+          }
+
+          return originalDestroyAll.apply(this, args);
+        };
+      }
+
+      this._decoratedComponents.add(component);
+    },
 
     /**
      * Initialize framework
      * Call this after DOM is ready and all components are loaded
      */
-    init: function () {
-      // Initialize components when DOM is ready
+    init: function (root) {
+      const scope = this._normalizeRoot(root);
+
+      if (scope !== document) {
+        this.initComponents(scope);
+        return;
+      }
+
       if (typeof ready !== 'undefined') {
         ready(() => {
-          this.initComponents();
+          this.initComponents(document);
         });
-      } else {
-        // Fallback if helpers.js is not loaded
-        if (document.readyState === 'loading') {
-          document.addEventListener('DOMContentLoaded', () => {
-            this.initComponents();
-          });
-        } else {
-          this.initComponents();
-        }
+        return;
       }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+          this.initComponents(document);
+        });
+        return;
+      }
+
+      this.initComponents(document);
     },
 
     /**
      * Initialize all components
      */
-    initComponents: function () {
-      // Initialize all registered components
+    initComponents: function (root) {
+      const scope = this._normalizeRoot(root);
+
       Object.keys(this.components).forEach((name) => {
         const component = this.components[name];
         if (component.init && typeof component.init === 'function') {
           try {
-            component.init();
+            component.init(scope);
           } catch (e) {
             console.warn('[Vanduo] Failed to initialize component "' + name + '":', e);
           }
         }
       });
-
-      console.log('Vanduo Framework v' + this.version + ' initialized');
     },
 
     /**
@@ -60,49 +208,69 @@
      * @param {string} name - Component name
      * @param {Object} component - Component object with init method
      */
-    register: function (name, component) {
+    register: function (name, component, options) {
+      const opts = options || {};
+      this._decorateComponent(name, component);
       this.components[name] = component;
-      // Note: Components are NOT auto-initialized on registration
-      // Call Vanduo.init() explicitly after all components are registered
+
+      if (Array.isArray(opts.aliases)) {
+        opts.aliases.forEach((alias) => {
+          this.aliases[alias] = name;
+        });
+      }
+    },
+
+    registerAlias: function (alias, name) {
+      const canonicalName = this.resolveComponentName(name);
+      if (this.components[canonicalName]) {
+        this.aliases[alias] = canonicalName;
+      }
     },
 
     /**
      * Re-initialize a component (useful after dynamic DOM changes)
      * @param {string} name - Component name
      */
-    reinit: function (name) {
-      const component = this.components[name];
+    reinit: function (name, root) {
+      const scope = this._normalizeRoot(root);
+      const componentName = this.resolveComponentName(name);
+      const component = this.components[componentName];
       if (component && component.init && typeof component.init === 'function') {
         try {
-          component.init();
+          if (component.destroyAll && typeof component.destroyAll === 'function') {
+            component.destroyAll(scope);
+          }
+          component.init(scope);
         } catch (e) {
-          console.warn('[Vanduo] Failed to reinitialize component "' + name + '":', e);
+          console.warn('[Vanduo] Failed to reinitialize component "' + componentName + '":', e);
         }
       }
     },
 
     /**
-     * Destroy all component instances and clean up event listeners
-     * Uses lifecycle manager for memory leak prevention
+     * Destroy component instances within the provided root.
      */
-    destroyAll: function () {
-      // First, destroy components that have their own destroyAll
+    destroy: function (root) {
+      const scope = this._normalizeRoot(root);
       const names = Object.keys(this.components);
+
       for (let i = 0; i < names.length; i++) {
         const component = this.components[names[i]];
         if (component && component.destroyAll && typeof component.destroyAll === 'function') {
           try {
-            component.destroyAll();
+            component.destroyAll(scope);
           } catch (e) {
             console.warn('[Vanduo] Failed to destroy component "' + names[i] + '":', e);
           }
         }
       }
+    },
 
-      // Then, cleanup any remaining registered elements via lifecycle manager
-      if (typeof window.VanduoLifecycle !== 'undefined') {
-        window.VanduoLifecycle.destroyAll();
-      }
+    /**
+     * Destroy all component instances and clean up event listeners.
+     */
+    destroyAll: function () {
+      this.destroy(document);
     },
 
     /**
@@ -111,7 +279,8 @@
      * @returns {Object|null}
      */
     getComponent: function (name) {
-      return this.components[name] || null;
+      const componentName = this.resolveComponentName(name);
+      return this.components[componentName] || null;
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.3.9",
+  "version": "1.4.1",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -56,6 +56,7 @@
     "build": "node scripts/build.js",
     "build:min": "node scripts/build.js --minify",
     "dev": "node scripts/build.js --development",
+    "stats:css": "node scripts/stats-css.js",
     "check:versions": "node scripts/check-version-consistency.js",
     "release:assets": "node scripts/upload-release-assets.js",
     "lint": "pnpm run lint:css && pnpm run lint:js",

package/css/core/vd-aliases.css

@@ -1,60 +0,0 @@
-/**
- * Vanduo Framework - Legacy vd-* Token Aliases
- * Maps vd-* custom properties to the current token names.
- */
-
-:root {
-  /* Colors */
-  --vd-color-primary: var(--color-primary);
-  --vd-color-secondary: var(--color-secondary);
-  --vd-color-success: var(--color-success);
-  --vd-color-warning: var(--color-warning);
-  --vd-color-error: var(--color-error);
-  --vd-color-info: var(--color-info);
-  --vd-color-white: var(--color-white);
-  --vd-color-black: var(--color-black);
-  --vd-color-primary-alpha-10: var(--color-primary-alpha-10);
-  --vd-color-primary-alpha-20: var(--color-primary-alpha-20);
-
-  /* Backgrounds + Text */
-  --vd-bg-primary: var(--bg-primary);
-  --vd-bg-secondary: var(--bg-secondary);
-  --vd-bg-tertiary: var(--bg-tertiary);
-  --vd-text-primary: var(--text-primary);
-  --vd-text-secondary: var(--text-secondary);
-  --vd-text-muted: var(--text-muted);
-
-  /* Borders */
-  --vd-border-color: var(--border-color);
-  --vd-border-color-light: var(--border-color-light);
-
-  /* Shadows */
-  --vd-shadow-sm: var(--shadow-sm);
-  --vd-shadow-md: var(--shadow-md);
-  --vd-shadow-lg: var(--shadow-lg);
-
-  /* Glass */
-  --vd-glass-blur: var(--glass-blur, 12px);
-  --vd-glass-saturate: var(--glass-saturate, 1.8);
-  --vd-glass-bg-opacity: var(--glass-bg-opacity, 0.65);
-  --vd-glass-bg-light: var(--glass-bg-light, rgba(255, 255, 255, var(--vd-glass-bg-opacity)));
-  --vd-glass-bg-dark: var(--glass-bg-dark, rgba(30, 30, 30, var(--vd-glass-bg-opacity)));
-  --vd-glass-border-alpha: var(--glass-border-alpha, 0.18);
-  --vd-glass-border-light: var(--glass-border-light, rgba(255, 255, 255, var(--vd-glass-border-alpha)));
-  --vd-glass-border-dark: var(--glass-border-dark, rgba(255, 255, 255, 0.08));
-  --vd-glass-highlight-alpha: var(--glass-highlight-alpha, 0.25);
-  --vd-glass-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
-  --vd-glass-noise-opacity: var(--glass-noise-opacity, 0.03);
-
-  /* Typography */
-  --vd-font-family-base: var(--font-family-sans);
-  --vd-font-family-mono: var(--font-family-mono);
-  --vd-font-size-xs: var(--font-size-xs);
-  --vd-font-size-sm: var(--font-size-sm);
-  --vd-font-size-base: var(--font-size-base);
-
-  /* Radii */
-  --vd-btn-border-radius: var(--btn-border-radius);
-  --vd-btn-border-radius-sm: var(--btn-border-radius-sm);
-  --vd-btn-border-radius-lg: var(--btn-border-radius-lg);
-}