eleva 1.0.0-rc.7 → 1.0.0-rc.9

package/README.md

@@ -40,9 +40,9 @@ Pure JavaScript, Pure Performance, Simply Elegant.
 **A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.**  
 _Built with love for native JavaScript and designed with a minimal core that can be extended through a powerful plugin system-because sometimes, less really is more!_ 😊
 
-> **Stability Notice**: This is `v1.0.0-rc.6` - The core functionality is stable. Seeking community feedback before the final v1.0.0 release.
+> **Stability Notice**: This is `v1.0.0-rc.9` - The core functionality is stable. Seeking community feedback before the final v1.0.0 release.
 
-**Version:** `1.0.0-rc.6`
+**Version:** `1.0.0-rc.9`
 
 
 
@@ -205,10 +205,10 @@ Preliminary benchmarks illustrate Eleva's efficiency compared to popular framewo
 
 | **Framework**                 | **Bundle Size** (KB) | **Initial Load Time** (ms) | **DOM Update Speed** (s) | **Peak Memory Usage** (KB) | **Overall Performance Score** (lower is better) |
 | ----------------------------- | -------------------- | -------------------------- | ------------------------ | -------------------------- | ----------------------------------------------- |
-| **Eleva** (Direct DOM)        | **2**              | **0.05**                     | **0.002**                | **0.25**                   | **0.58 (Best)**                                 |
-| **React** (Virtual DOM)       | 4.1                   | 5.34                         | 0.020                    | 0.25                       | 9.71                                           |
-| **Vue** (Reactive State)      | 45                   | 4.72                         | 0.021                    | 3.10                       | 13.21                                           |
-| **Angular** (Two-way Binding) | 62                   | 5.26                        | 0.021                    | 0.25                       | 16.88 (Slowest)                                 |
+| **Eleva** (Direct DOM)        | **2**                | **0.05**                   | **0.002**                | **0.25**                   | **0.58 (Best)**                                 |
+| **React** (Virtual DOM)       | 4.1                  | 5.34                       | 0.020                    | 0.25                       | 9.71                                            |
+| **Vue** (Reactive State)      | 45                   | 4.72                       | 0.021                    | 3.10                       | 13.21                                           |
+| **Angular** (Two-way Binding) | 62                   | 5.26                       | 0.021                    | 0.25                       | 16.88 (Slowest)                                 |
 
 Detailed [Benchmark Metrics Report](BENCHMARK.md)
 

package/dist/eleva-plugins.cjs.js

@@ -1,4 +1,4 @@
-/*! Eleva Plugins v1.0.0-rc.7 | MIT License | https://elevajs.com */
+/*! Eleva Plugins v1.0.0-rc.9 | MIT License | https://elevajs.com */
 'use strict';
 
 /**
@@ -129,7 +129,7 @@ const AttrPlugin = {
           if (hasProperty) {
             // Boolean attribute handling
             if (enableBoolean) {
-              const isBoolean = typeof oldEl[prop] === "boolean" || (descriptor == null ? void 0 : descriptor.get) && typeof descriptor.get.call(oldEl) === "boolean";
+              const isBoolean = typeof oldEl[prop] === "boolean" || descriptor?.get && typeof descriptor.get.call(oldEl) === "boolean";
               if (isBoolean) {
                 const boolValue = value !== "false" && (value === "" || value === prop || value === "true");
                 oldEl[prop] = boolValue;
@@ -171,7 +171,7 @@ const AttrPlugin = {
 
       // Override the _patchNode method to use our attribute handler
       eleva.renderer._patchNode = function (oldNode, newNode) {
-        if (oldNode != null && oldNode._eleva_instance) return;
+        if (oldNode?._eleva_instance) return;
         if (!this._isSameNode(oldNode, newNode)) {
           oldNode.replaceWith(newNode.cloneNode(true));
           return;
@@ -221,16 +221,18 @@ const AttrPlugin = {
   }
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
+/**
+ * @typedef {import('eleva').Eleva} Eleva
+ * @typedef {import('eleva').Signal} Signal
+ * @typedef {import('eleva').ComponentDefinition} ComponentDefinition
+ */
 
+/**
+ * Simple error handler for the core router.
+ * Can be overridden by error handling plugins.
+ * Provides consistent error formatting and logging for router operations.
+ * @private
+ */
 const CoreErrorHandler = {
   /**
    * Handles router errors with basic formatting.
@@ -339,11 +341,12 @@ class Router {
     this.eleva = eleva;
 
     /** @type {RouterOptions} The merged router options. */
-    this.options = _extends({
+    this.options = {
       mode: "hash",
       queryParam: "view",
-      viewSelector: "root"
-    }, options);
+      viewSelector: "root",
+      ...options
+    };
 
     /** @private @type {RouteDefinition[]} The processed list of route definitions. */
     this.routes = this._processRoutes(options.routes || []);
@@ -407,9 +410,10 @@ class Router {
     const processedRoutes = [];
     for (const route of routes) {
       try {
-        processedRoutes.push(_extends({}, route, {
+        processedRoutes.push({
+          ...route,
           segments: this._parsePathIntoSegments(route.path)
-        }));
+        });
       } catch (error) {
         this.errorHandler.warn(`Invalid path in route definition "${route.path || "undefined"}": ${error.message}`, {
           route,
@@ -664,12 +668,13 @@ class Router {
         return false;
       }
     }
-    const to = _extends({}, toLocation, {
+    const to = {
+      ...toLocation,
       params: toMatch.params,
       meta: toMatch.route.meta || {},
       name: toMatch.route.name,
       matched: toMatch.route
-    });
+    };
     try {
       // 1. Run all *pre-navigation* guards.
       const canNavigate = await this._runGuards(to, from, toMatch.route);
@@ -900,10 +905,7 @@ class Router {
    * @returns {Function} A getter function.
    */
   _createRouteGetter(property, defaultValue) {
-    return () => {
-      var _this$currentRoute$va, _this$currentRoute$va2;
-      return (_this$currentRoute$va = (_this$currentRoute$va2 = this.currentRoute.value) == null ? void 0 : _this$currentRoute$va2[property]) != null ? _this$currentRoute$va : defaultValue;
-    };
+    return () => this.currentRoute.value?.[property] ?? defaultValue;
   }
 
   /**
@@ -915,7 +917,8 @@ class Router {
   _wrapComponent(component) {
     const originalSetup = component.setup;
     const self = this;
-    return _extends({}, component, {
+    return {
+      ...component,
       async setup(ctx) {
         ctx.router = {
           navigate: self.navigate.bind(self),
@@ -940,7 +943,7 @@ class Router {
         };
         return originalSetup ? await originalSetup(ctx) : {};
       }
-    });
+    };
   }
 
   /**
@@ -1334,6 +1337,12 @@ const RouterPlugin = {
  * const result = TemplateEngine.parse(template, data); // Returns: "Hello, World!"
  */
 class TemplateEngine {
+  /**
+   * @private {RegExp} Regular expression for matching template expressions in the format {{ expression }}
+   * @type {RegExp}
+   */
+  static expressionPattern = /\{\{\s*(.*?)\s*\}\}/g;
+
   /**
    * Parses a template string, replacing expressions with their evaluated values.
    * Expressions are evaluated in the provided data context.
@@ -1372,16 +1381,11 @@ class TemplateEngine {
     if (typeof expression !== "string") return expression;
     try {
       return new Function("data", `with(data) { return ${expression}; }`)(data);
-    } catch (_unused) {
+    } catch {
       return "";
     }
   }
 }
-/**
- * @private {RegExp} Regular expression for matching template expressions in the format {{ expression }}
- * @type {RegExp}
- */
-TemplateEngine.expressionPattern = /\{\{\s*(.*?)\s*\}\}/g;
 
 /**
  * @class 🎯 PropsPlugin
@@ -1717,7 +1721,10 @@ const PropsPlugin = {
             });
 
             // Merge signal props with regular props (signal props take precedence)
-            enhancedProps = _extends({}, extractedProps, signalProps);
+            enhancedProps = {
+              ...extractedProps,
+              ...signalProps
+            };
           }
 
           // Create reactive props for non-signal props only
@@ -1736,7 +1743,10 @@ const PropsPlugin = {
             const reactiveNonSignalProps = createReactiveProps(nonSignalProps);
 
             // Merge signal props with reactive non-signal props
-            finalProps = _extends({}, reactiveNonSignalProps, enhancedProps);
+            finalProps = {
+              ...reactiveNonSignalProps,
+              ...enhancedProps // Signal props take precedence
+            };
           }
 
           /** @type {MountResult} */
@@ -1907,6 +1917,61 @@ const PropsPlugin = {
   }
 };
 
+/**
+ * @class 🏪 StorePlugin
+ * @classdesc A powerful reactive state management plugin for Eleva.js that enables sharing
+ * reactive data across the entire application. The Store plugin provides a centralized,
+ * reactive data store that can be accessed from any component's setup function.
+ *
+ * Core Features:
+ * - Centralized reactive state management using Eleva's signal system
+ * - Global state accessibility through component setup functions
+ * - Namespace support for organizing store modules
+ * - Built-in persistence with localStorage/sessionStorage support
+ * - Action-based state mutations with validation
+ * - Subscription system for reactive updates
+ * - DevTools integration for debugging
+ * - Plugin architecture for extensibility
+ *
+ * @example
+ * // Install the plugin
+ * const app = new Eleva("myApp");
+ * app.use(StorePlugin, {
+ *   state: {
+ *     user: { name: "John", email: "john@example.com" },
+ *     counter: 0,
+ *     todos: []
+ *   },
+ *   actions: {
+ *     increment: (state) => state.counter.value++,
+ *     addTodo: (state, todo) => state.todos.value.push(todo),
+ *     setUser: (state, user) => state.user.value = user
+ *   },
+ *   persistence: {
+ *     enabled: true,
+ *     key: "myApp-store",
+ *     storage: "localStorage"
+ *   }
+ * });
+ *
+ * // Use store in components
+ * app.component("Counter", {
+ *   setup({ store }) {
+ *     return {
+ *       count: store.state.counter,
+ *       increment: () => store.dispatch("increment"),
+ *       user: store.state.user
+ *     };
+ *   },
+ *   template: (ctx) => `
+ *     <div>
+ *       <p>Hello ${ctx.user.value.name}!</p>
+ *       <p>Count: ${ctx.count.value}</p>
+ *       <button onclick="ctx.increment()">+</button>
+ *     </div>
+ *   `
+ * });
+ */
 const StorePlugin = {
   /**
    * Unique identifier for the plugin
@@ -1994,13 +2059,14 @@ const StorePlugin = {
         this.actions = {};
         this.subscribers = new Set();
         this.mutations = [];
-        this.persistence = _extends({
+        this.persistence = {
           enabled: false,
           key: "eleva-store",
           storage: "localStorage",
           include: null,
-          exclude: null
-        }, persistence);
+          exclude: null,
+          ...persistence
+        };
         this.devTools = devTools;
         this.onError = onError;
         this._initializeState(state, actions);
@@ -2020,7 +2086,9 @@ const StorePlugin = {
         });
 
         // Set up actions
-        this.actions = _extends({}, initialActions);
+        this.actions = {
+          ...initialActions
+        };
       }
 
       /**
@@ -2048,7 +2116,9 @@ const StorePlugin = {
           });
 
           // Set up namespaced actions
-          this.actions[namespace] = _extends({}, moduleActions);
+          this.actions[namespace] = {
+            ...moduleActions
+          };
         });
       }
 
@@ -2376,7 +2446,8 @@ const StorePlugin = {
       }
 
       // Create a wrapped component that injects store into setup
-      const wrappedComponent = _extends({}, componentDef, {
+      const wrappedComponent = {
+        ...componentDef,
         async setup(ctx) {
           // Inject store into the context with enhanced API
           ctx.store = {
@@ -2400,7 +2471,7 @@ const StorePlugin = {
           const result = originalSetup ? await originalSetup(ctx) : {};
           return result;
         }
-      });
+      };
 
       // Call original mount with wrapped component
       return await originalMount.call(eleva, container, wrappedComponent, props);
@@ -2414,7 +2485,8 @@ const StorePlugin = {
       for (const [selector, childComponent] of Object.entries(children)) {
         const componentDef = typeof childComponent === "string" ? eleva._components.get(childComponent) || childComponent : childComponent;
         if (componentDef && typeof componentDef === "object") {
-          wrappedChildren[selector] = _extends({}, componentDef, {
+          wrappedChildren[selector] = {
+            ...componentDef,
             async setup(ctx) {
               // Inject store into the context with enhanced API
               ctx.store = {
@@ -2438,7 +2510,7 @@ const StorePlugin = {
               const result = originalSetup ? await originalSetup(ctx) : {};
               return result;
             }
-          });
+          };
         } else {
           wrappedChildren[selector] = childComponent;
         }