vanduo-framework 1.1.8

package/js/utils/lifecycle.js

@@ -0,0 +1,135 @@
+/**
+ * Vanduo Framework - Lifecycle Manager
+ * Central registry for component instances and cleanup
+ * Prevents memory leaks in SPAs by tracking event listeners
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Lifecycle Manager
+   * Simple registry that tracks component instances and their cleanup functions
+   */
+  const Lifecycle = {
+    // Map of element -> { componentName, cleanupFunctions }
+    instances: new Map(),
+
+    /**
+     * Register a component instance
+     * @param {HTMLElement} element - The DOM element
+     * @param {string} componentName - Name of the component
+     * @param {Array<Function>} cleanupFns - Functions to call on destroy
+     */
+    register: function(element, componentName, cleanupFns = []) {
+      if (this.instances.has(element)) {
+        // Already registered, merge cleanup functions
+        const existing = this.instances.get(element);
+        existing.cleanup = existing.cleanup.concat(cleanupFns);
+        return;
+      }
+
+      this.instances.set(element, {
+        component: componentName,
+        cleanup: cleanupFns,
+        registeredAt: Date.now()
+      });
+    },
+
+    /**
+     * Unregister a single element and run its cleanup
+     * @param {HTMLElement} element - The element to unregister
+     */
+    unregister: function(element) {
+      const instance = this.instances.get(element);
+      if (!instance) return;
+
+      // Run all cleanup functions
+      instance.cleanup.forEach(function(fn) {
+        try {
+          fn();
+        } catch (e) {
+          console.warn('[Vanduo Lifecycle] Cleanup error:', e);
+        }
+      });
+
+      this.instances.delete(element);
+    },
+
+    /**
+     * Destroy all instances of a specific component
+     * @param {string} componentName - Optional component name filter
+     */
+    destroyAll: function(componentName) {
+      const toRemove = [];
+
+      this.instances.forEach(function(instance, element) {
+        if (!componentName || instance.component === componentName) {
+          toRemove.push(element);
+        }
+      });
+
+      toRemove.forEach(function(element) {
+        Lifecycle.unregister(element);
+      });
+    },
+
+    /**
+     * Destroy all instances within a specific container
+     * Useful for SPAs when navigating between pages
+     * @param {HTMLElement} container - Container element
+     */
+    destroyAllInContainer: function(container) {
+      const toRemove = [];
+
+      this.instances.forEach(function(instance, element) {
+        if (container.contains(element)) {
+          toRemove.push(element);
+        }
+      });
+
+      toRemove.forEach(function(element) {
+        Lifecycle.unregister(element);
+      });
+    },
+
+    /**
+     * Get all registered instances (for debugging)
+     * @returns {Array} Array of instance info objects
+     */
+    getAll: function() {
+      const result = [];
+      this.instances.forEach(function(instance, element) {
+        result.push({
+          element: element,
+          component: instance.component,
+          registeredAt: instance.registeredAt
+        });
+      });
+      return result;
+    },
+
+    /**
+     * Check if an element is registered
+     * @param {HTMLElement} element - The element to check
+     * @returns {boolean}
+     */
+    has: function(element) {
+      return this.instances.has(element);
+    }
+  };
+
+  // Auto-cleanup on page unload
+  window.addEventListener('beforeunload', function() {
+    Lifecycle.destroyAll();
+  });
+
+  // Expose globally
+  window.VanduoLifecycle = Lifecycle;
+
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('lifecycle', Lifecycle);
+  }
+
+})();

package/js/vanduo.js

@@ -0,0 +1,120 @@
+/**
+ * Vanduo Framework - Main JavaScript File
+ * v1.1.6
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Vanduo Framework Object
+   */
+  const Vanduo = {
+    version: '1.1.6',
+    components: {},
+
+    /**
+     * Initialize framework
+     * Call this after DOM is ready and all components are loaded
+     */
+    init: function() {
+      // Initialize components when DOM is ready
+      if (typeof ready !== 'undefined') {
+        ready(() => {
+          this.initComponents();
+        });
+      } else {
+        // Fallback if helpers.js is not loaded
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', () => {
+            this.initComponents();
+          });
+        } else {
+          this.initComponents();
+        }
+      }
+    },
+
+    /**
+     * Initialize all components
+     */
+    initComponents: function() {
+      // Initialize all registered components
+      Object.keys(this.components).forEach((name) => {
+        const component = this.components[name];
+        if (component.init && typeof component.init === 'function') {
+          try {
+            component.init();
+          } catch (e) {
+            console.warn('[Vanduo] Failed to initialize component "' + name + '":', e);
+          }
+        }
+      });
+
+      console.log('Vanduo Framework v1.1.6 initialized');
+    },
+
+    /**
+     * Register a component
+     * @param {string} name - Component name
+     * @param {Object} component - Component object with init method
+     */
+    register: function(name, component) {
+      this.components[name] = component;
+      // Note: Components are NOT auto-initialized on registration
+      // Call Vanduo.init() explicitly after all components are registered
+    },
+
+    /**
+     * Re-initialize a component (useful after dynamic DOM changes)
+     * @param {string} name - Component name
+     */
+    reinit: function(name) {
+      var component = this.components[name];
+      if (component && component.init && typeof component.init === 'function') {
+        try {
+          component.init();
+        } catch (e) {
+          console.warn('[Vanduo] Failed to reinitialize component "' + name + '":', e);
+        }
+      }
+    },
+
+    /**
+     * Destroy all component instances and clean up event listeners
+     * Uses lifecycle manager for memory leak prevention
+     */
+    destroyAll: function() {
+      // First, destroy components that have their own destroyAll
+      var names = Object.keys(this.components);
+      for (var i = 0; i < names.length; i++) {
+        var component = this.components[names[i]];
+        if (component && component.destroyAll && typeof component.destroyAll === 'function') {
+          try {
+            component.destroyAll();
+          } 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();
+      }
+    },
+
+    /**
+     * Get component instance
+     * @param {string} name - Component name
+     * @returns {Object|null}
+     */
+    getComponent: function(name) {
+      return this.components[name] || null;
+    }
+  };
+
+  // Expose to global scope
+  window.Vanduo = Vanduo;
+
+})();

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "vanduo-framework",
+  "version": "1.1.8",
+  "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
+  "keywords": [
+    "css",
+    "framework",
+    "fibonacci",
+    "golden-ratio",
+    "open-color",
+    "dark-mode",
+    "accessibility"
+  ],
+  "homepage": "https://vanduo.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Nostromo-618/vanduo-framework"
+  },
+  "license": "MIT",
+  "author": "Nostromo-618",
+  "type": "module",
+  "main": "dist/vanduo.cjs.js",
+  "module": "dist/vanduo.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vanduo.esm.js",
+      "require": "./dist/vanduo.cjs.js",
+      "default": "./dist/vanduo.esm.js"
+    },
+    "./css": "./dist/vanduo.min.css",
+    "./iife": "./dist/vanduo.min.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "css/",
+    "js/",
+    "fonts/",
+    "icons/"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.58.2",
+    "esbuild": "^0.27.3",
+    "eslint": "^10.0.1",
+    "husky": "^9.1.7",
+    "lightningcss": "^1.31.1",
+    "stylelint": "^17.3.0",
+    "stylelint-config-standard": "^40.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.js --minify",
+    "dev": "node scripts/build.js",
+    "release:assets": "node scripts/upload-release-assets.js",
+    "lint": "pnpm run lint:css && pnpm run lint:js",
+    "lint:css": "stylelint 'css/**/*.css'",
+    "lint:js": "eslint 'js/**/*.js'",
+    "lint:fix": "pnpm run lint:css -- --fix && pnpm run lint:js -- --fix",
+    "clean": "rm -rf dist",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:a11y": "playwright test --grep @a11y",
+    "test:e2e": "playwright test --grep @e2e",
+    "test:perf": "playwright test --grep @perf",
+    "test:mobile": "playwright test --project='*Mobile*'",
+    "test:desktop": "playwright test --project='*Desktop*'",
+    "test:chromium": "playwright test --project='Chromium*'",
+    "test:firefox": "playwright test --project='Firefox*'",
+    "test:webkit": "playwright test --project='WebKit*'",
+    "report": "playwright show-report"
+  }
+}