eleva 1.2.6-alpha → 1.2.8-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,49 +1,79 @@
1
1
  "use strict";
2
2
 
3
3
  /**
4
- * @class 🎙️ Emitter
5
- * @classdesc Robust inter-component communication with event bubbling.
6
- * Implements a basic publish-subscribe pattern for event handling, allowing components
7
- * to communicate through custom events.
4
+ * @class 📡 Emitter
5
+ * @classdesc A robust event emitter that enables inter-component communication through a publish-subscribe pattern.
6
+ * Components can emit events and listen for events from other components, facilitating loose coupling
7
+ * and reactive updates across the application.
8
+ *
9
+ * @example
10
+ * const emitter = new Emitter();
11
+ * emitter.on('user:login', (user) => console.log(`User logged in: ${user.name}`));
12
+ * emitter.emit('user:login', { name: 'John' }); // Logs: "User logged in: John"
8
13
  */
9
14
  export class Emitter {
10
15
  /**
11
16
  * Creates a new Emitter instance.
17
+ *
18
+ * @public
12
19
  */
13
20
  constructor() {
14
- /** @type {Object.<string, Function[]>} Storage for event handlers mapped by event name */
15
- this.events = {};
21
+ /** @private {Map<string, Set<function(any): void>>} Map of event names to their registered handler functions */
22
+ this._events = new Map();
16
23
  }
17
24
 
18
25
  /**
19
- * Registers an event handler for the specified event.
26
+ * Registers an event handler for the specified event name.
27
+ * The handler will be called with the event data when the event is emitted.
20
28
  *
21
- * @param {string} event - The name of the event.
22
- * @param {function(...any): void} handler - The function to call when the event is emitted.
29
+ * @public
30
+ * @param {string} event - The name of the event to listen for.
31
+ * @param {function(any): void} handler - The callback function to invoke when the event occurs.
32
+ * @returns {function(): boolean} A function to unsubscribe the event handler.
33
+ * @example
34
+ * const unsubscribe = emitter.on('user:login', (user) => console.log(user));
35
+ * // Later...
36
+ * unsubscribe(); // Stops listening for the event
23
37
  */
24
38
  on(event, handler) {
25
- (this.events[event] || (this.events[event] = [])).push(handler);
39
+ if (!this._events.has(event)) this._events.set(event, new Set());
40
+
41
+ this._events.get(event).add(handler);
42
+ return () => this.off(event, handler);
26
43
  }
27
44
 
28
45
  /**
29
- * Removes a previously registered event handler.
46
+ * Removes an event handler for the specified event name.
47
+ * If no handler is provided, all handlers for the event are removed.
30
48
  *
49
+ * @public
31
50
  * @param {string} event - The name of the event.
32
- * @param {function(...any): void} handler - The handler function to remove.
51
+ * @param {function(any): void} [handler] - The specific handler function to remove.
52
+ * @returns {void}
33
53
  */
34
54
  off(event, handler) {
35
- if (this.events[event]) {
36
- this.events[event] = this.events[event].filter((h) => h !== handler);
55
+ if (!this._events.has(event)) return;
56
+ if (handler) {
57
+ const handlers = this._events.get(event);
58
+ handlers.delete(handler);
59
+ // Remove the event if there are no handlers left
60
+ if (handlers.size === 0) this._events.delete(event);
61
+ } else {
62
+ this._events.delete(event);
37
63
  }
38
64
  }
39
65
 
40
66
  /**
41
- * Emits an event, invoking all handlers registered for that event.
67
+ * Emits an event with the specified data to all registered handlers.
68
+ * Handlers are called synchronously in the order they were registered.
42
69
  *
43
- * @param {string} event - The event name.
44
- * @param {...any} args - Additional arguments to pass to the event handlers.
70
+ * @public
71
+ * @param {string} event - The name of the event to emit.
72
+ * @param {...any} args - Optional arguments to pass to the event handlers.
73
+ * @returns {void}
45
74
  */
46
75
  emit(event, ...args) {
47
- (this.events[event] || []).forEach((handler) => handler(...args));
76
+ if (!this._events.has(event)) return;
77
+ this._events.get(event).forEach((handler) => handler(...args));
48
78
  }
49
79
  }
@@ -2,17 +2,27 @@
2
2
 
3
3
  /**
4
4
  * @class 🎨 Renderer
5
- * @classdesc Handles DOM patching, diffing, and attribute updates.
6
- * Provides methods for efficient DOM updates by diffing the new and old DOM structures
7
- * and applying only the necessary changes.
5
+ * @classdesc A DOM renderer that handles efficient DOM updates through patching and diffing.
6
+ * Provides methods for updating the DOM by comparing new and old structures and applying
7
+ * only the necessary changes, minimizing layout thrashing and improving performance.
8
+ *
9
+ * @example
10
+ * const renderer = new Renderer();
11
+ * const container = document.getElementById("app");
12
+ * const newHtml = "<div>Updated content</div>";
13
+ * renderer.patchDOM(container, newHtml);
8
14
  */
9
15
  export class Renderer {
10
16
  /**
11
17
  * Patches the DOM of a container element with new HTML content.
18
+ * This method efficiently updates the DOM by comparing the new content with the existing
19
+ * content and applying only the necessary changes.
12
20
  *
21
+ * @public
13
22
  * @param {HTMLElement} container - The container element to patch.
14
23
  * @param {string} newHtml - The new HTML content to apply.
15
- * @throws {Error} If container is not an HTMLElement or newHtml is not a string
24
+ * @returns {void}
25
+ * @throws {Error} If container is not an HTMLElement or newHtml is not a string.
16
26
  */
17
27
  patchDOM(container, newHtml) {
18
28
  if (!(container instanceof HTMLElement)) {
@@ -30,10 +40,14 @@ export class Renderer {
30
40
 
31
41
  /**
32
42
  * Diffs two DOM trees (old and new) and applies updates to the old DOM.
43
+ * This method recursively compares nodes and their attributes, applying only
44
+ * the necessary changes to minimize DOM operations.
33
45
  *
46
+ * @private
34
47
  * @param {HTMLElement} oldParent - The original DOM element.
35
48
  * @param {HTMLElement} newParent - The new DOM element.
36
- * @throws {Error} If either parent is not an HTMLElement
49
+ * @returns {void}
50
+ * @throws {Error} If either parent is not an HTMLElement.
37
51
  */
38
52
  diff(oldParent, newParent) {
39
53
  if (
@@ -102,10 +116,13 @@ export class Renderer {
102
116
 
103
117
  /**
104
118
  * Updates the attributes of an element to match those of a new element.
119
+ * Handles special cases for ARIA attributes, data attributes, and boolean properties.
105
120
  *
121
+ * @private
106
122
  * @param {HTMLElement} oldEl - The element to update.
107
123
  * @param {HTMLElement} newEl - The element providing the updated attributes.
108
- * @throws {Error} If either element is not an HTMLElement
124
+ * @returns {void}
125
+ * @throws {Error} If either element is not an HTMLElement.
109
126
  */
110
127
  updateAttributes(oldEl, newEl) {
111
128
  if (!(oldEl instanceof HTMLElement) || !(newEl instanceof HTMLElement)) {
@@ -2,20 +2,26 @@
2
2
 
3
3
  /**
4
4
  * @class ⚡ Signal
5
- * @classdesc Fine-grained reactivity.
6
- * A reactive data holder that notifies registered watchers when its value changes,
7
- * enabling fine-grained DOM patching rather than full re-renders.
5
+ * @classdesc A reactive data holder that enables fine-grained reactivity in the Eleva framework.
6
+ * Signals notify registered watchers when their value changes, enabling efficient DOM updates
7
+ * through targeted patching rather than full re-renders.
8
+ *
9
+ * @example
10
+ * const count = new Signal(0);
11
+ * count.watch((value) => console.log(`Count changed to: ${value}`));
12
+ * count.value = 1; // Logs: "Count changed to: 1"
8
13
  */
9
14
  export class Signal {
10
15
  /**
11
- * Creates a new Signal instance.
16
+ * Creates a new Signal instance with the specified initial value.
12
17
  *
18
+ * @public
13
19
  * @param {*} value - The initial value of the signal.
14
20
  */
15
21
  constructor(value) {
16
- /** @private {*} Internal storage for the signal's current value */
22
+ /** @private {T} Internal storage for the signal's current value, where T is the type of the initial value */
17
23
  this._value = value;
18
- /** @private {Set<function>} Collection of callback functions to be notified when value changes */
24
+ /** @private {Set<function(T): void>} Collection of callback functions to be notified when value changes, where T is the value type */
19
25
  this._watchers = new Set();
20
26
  /** @private {boolean} Flag to prevent multiple synchronous watcher notifications and batch updates into microtasks */
21
27
  this._pending = false;
@@ -24,7 +30,8 @@ export class Signal {
24
30
  /**
25
31
  * Gets the current value of the signal.
26
32
  *
27
- * @returns {*} The current value.
33
+ * @public
34
+ * @returns {T} The current value, where T is the type of the initial value.
28
35
  */
29
36
  get value() {
30
37
  return this._value;
@@ -32,8 +39,11 @@ export class Signal {
32
39
 
33
40
  /**
34
41
  * Sets a new value for the signal and notifies all registered watchers if the value has changed.
42
+ * The notification is batched using microtasks to prevent multiple synchronous updates.
35
43
  *
36
- * @param {*} newVal - The new value to set.
44
+ * @public
45
+ * @param {T} newVal - The new value to set, where T is the type of the initial value.
46
+ * @returns {void}
37
47
  */
38
48
  set value(newVal) {
39
49
  if (newVal !== this._value) {
@@ -44,9 +54,15 @@ export class Signal {
44
54
 
45
55
  /**
46
56
  * Registers a watcher function that will be called whenever the signal's value changes.
57
+ * The watcher will receive the new value as its argument.
47
58
  *
48
- * @param {function(any): void} fn - The callback function to invoke on value change.
59
+ * @public
60
+ * @param {function(T): void} fn - The callback function to invoke on value change, where T is the value type.
49
61
  * @returns {function(): boolean} A function to unsubscribe the watcher.
62
+ * @example
63
+ * const unsubscribe = signal.watch((value) => console.log(value));
64
+ * // Later...
65
+ * unsubscribe(); // Stops watching for changes
50
66
  */
51
67
  watch(fn) {
52
68
  this._watchers.add(fn);
@@ -2,45 +2,60 @@
2
2
 
3
3
  /**
4
4
  * @class 🔒 TemplateEngine
5
- * @classdesc Secure interpolation & dynamic attribute parsing.
6
- * Provides methods to parse template strings by replacing interpolation expressions
7
- * with dynamic data values and to evaluate expressions within a given data context.
5
+ * @classdesc A secure template engine that handles interpolation and dynamic attribute parsing.
6
+ * Provides a safe way to evaluate expressions in templates while preventing XSS attacks.
7
+ * All methods are static and can be called directly on the class.
8
+ *
9
+ * @example
10
+ * const template = "Hello, {{name}}!";
11
+ * const data = { name: "World" };
12
+ * const result = TemplateEngine.parse(template, data); // Returns: "Hello, World!"
8
13
  */
9
14
  export class TemplateEngine {
10
15
  /**
11
- * Parses a template string and replaces interpolation expressions with corresponding values.
16
+ * @private {RegExp} Regular expression for matching template expressions in the format {{ expression }}
17
+ */
18
+ static expressionPattern = /\{\{\s*(.*?)\s*\}\}/g;
19
+
20
+ /**
21
+ * Parses a template string, replacing expressions with their evaluated values.
22
+ * Expressions are evaluated in the provided data context.
12
23
  *
13
- * @param {string} template - The template string containing expressions in the format `{{ expression }}`.
14
- * @param {Object<string, any>} data - The data object to use for evaluating expressions.
15
- * @returns {string} The resulting string with evaluated values.
24
+ * @public
25
+ * @static
26
+ * @param {string} template - The template string to parse.
27
+ * @param {Object} data - The data context for evaluating expressions.
28
+ * @returns {string} The parsed template with expressions replaced by their values.
29
+ * @example
30
+ * const result = TemplateEngine.parse("{{user.name}} is {{user.age}} years old", {
31
+ * user: { name: "John", age: 30 }
32
+ * }); // Returns: "John is 30 years old"
16
33
  */
17
34
  static parse(template, data) {
18
- if (!template || typeof template !== "string") return template;
19
-
20
- return template.replace(/\{\{\s*(.*?)\s*\}\}/g, (_, expr) => {
21
- return this.evaluate(expr, data);
22
- });
35
+ if (typeof template !== "string") return template;
36
+ return template.replace(this.expressionPattern, (_, expression) =>
37
+ this.evaluate(expression, data)
38
+ );
23
39
  }
24
40
 
25
41
  /**
26
- * Evaluates a JavaScript expression using the provided data context.
42
+ * Evaluates an expression in the context of the provided data object.
43
+ * Note: This does not provide a true sandbox and evaluated expressions may access global scope.
27
44
  *
28
- * @param {string} expr - The JavaScript expression to evaluate.
29
- * @param {Object<string, any>} data - The data context for evaluating the expression.
30
- * @returns {any} The result of the evaluated expression, or an empty string if undefined or on error.
45
+ * @public
46
+ * @static
47
+ * @param {string} expression - The expression to evaluate.
48
+ * @param {Object} data - The data context for evaluation.
49
+ * @returns {*} The result of the evaluation, or an empty string if evaluation fails.
50
+ * @example
51
+ * const result = TemplateEngine.evaluate("user.name", { user: { name: "John" } }); // Returns: "John"
52
+ * const age = TemplateEngine.evaluate("user.age", { user: { age: 30 } }); // Returns: 30
31
53
  */
32
- static evaluate(expr, data) {
33
- if (!expr || typeof expr !== "string") return expr;
34
-
54
+ static evaluate(expression, data) {
55
+ if (typeof expression !== "string") return expression;
35
56
  try {
36
- const compiledFn = new Function("data", `with(data) { return ${expr} }`);
37
- return compiledFn(data);
38
- } catch (error) {
39
- console.error(`Template evaluation error:`, {
40
- expression: expr,
41
- data,
42
- error: error.message,
43
- });
57
+ return new Function("data", `with(data) { return ${expression}; }`)(data);
58
+ } catch {
44
59
  return "";
45
60
  }
46
61
  }
@@ -1,136 +1,176 @@
1
1
  /**
2
- * Defines the structure and behavior of a component.
3
2
  * @typedef {Object} ComponentDefinition
4
3
  * @property {function(Object<string, any>): (Object<string, any>|Promise<Object<string, any>>)} [setup]
5
- * Optional setup function that initializes the component's reactive state and lifecycle.
6
- * Receives props and context as an argument and should return an object containing the component's state.
7
- * Can return either a synchronous object or a Promise that resolves to an object for async initialization.
8
- *
4
+ * Optional setup function that initializes the component's state and returns reactive data
9
5
  * @property {function(Object<string, any>): string} template
10
- * Required function that defines the component's HTML structure.
11
- * Receives the merged context (props + setup data) and must return an HTML template string.
12
- * Supports dynamic expressions using {{ }} syntax for reactive data binding.
13
- *
6
+ * Required function that defines the component's HTML structure
14
7
  * @property {function(Object<string, any>): string} [style]
15
- * Optional function that defines component-scoped CSS styles.
16
- * Receives the merged context and returns a CSS string that will be automatically scoped to the component.
17
- * Styles are injected into the component's container and only affect elements within it.
18
- *
8
+ * Optional function that provides component-scoped CSS styles
19
9
  * @property {Object<string, ComponentDefinition>} [children]
20
- * Optional object that defines nested child components.
21
- * Keys are CSS selectors that match elements in the template where child components should be mounted.
22
- * Values are ComponentDefinition objects that define the structure and behavior of each child component.
10
+ * Optional object defining nested child components
11
+ */
12
+ /**
13
+ * @typedef {Object} ElevaPlugin
14
+ * @property {function(Eleva, Object<string, any>): void} install
15
+ * Function that installs the plugin into the Eleva instance
16
+ * @property {string} name
17
+ * Unique identifier name for the plugin
18
+ */
19
+ /**
20
+ * @typedef {Object} MountResult
21
+ * @property {HTMLElement} container
22
+ * The DOM element where the component is mounted
23
+ * @property {Object<string, any>} data
24
+ * The component's reactive state and context data
25
+ * @property {function(): void} unmount
26
+ * Function to clean up and unmount the component
23
27
  */
24
28
  /**
25
29
  * @class 🧩 Eleva
26
- * @classdesc Signal-based component runtime framework with lifecycle hooks, scoped styles, and plugin support.
27
- * Manages component registration, plugin integration, event handling, and DOM rendering.
30
+ * @classdesc A modern, signal-based component runtime framework that provides lifecycle hooks,
31
+ * scoped styles, and plugin support. Eleva manages component registration, plugin integration,
32
+ * event handling, and DOM rendering with a focus on performance and developer experience.
33
+ *
34
+ * @example
35
+ * const app = new Eleva("myApp");
36
+ * app.component("myComponent", {
37
+ * template: (ctx) => `<div>Hello ${ctx.props.name}</div>`,
38
+ * setup: (ctx) => ({ count: new Signal(0) })
39
+ * });
40
+ * app.mount(document.getElementById("app"), "myComponent", { name: "World" });
28
41
  */
29
42
  export class Eleva {
30
43
  /**
31
- * Creates a new Eleva instance.
44
+ * Creates a new Eleva instance with the specified name and configuration.
32
45
  *
33
- * @param {string} name - The name of the Eleva instance.
34
- * @param {Object<string, any>} [config={}] - Optional configuration for the instance.
46
+ * @public
47
+ * @param {string} name - The unique identifier name for this Eleva instance.
48
+ * @param {Object<string, any>} [config={}] - Optional configuration object for the instance.
49
+ * May include framework-wide settings and default behaviors.
35
50
  */
36
51
  constructor(name: string, config?: {
37
52
  [x: string]: any;
38
53
  });
39
- /** @type {string} The unique identifier name for this Eleva instance */
40
- name: string;
41
- /** @type {Object<string, any>} Optional configuration object for the Eleva instance */
42
- config: {
54
+ /** @public {string} The unique identifier name for this Eleva instance */
55
+ public name: string;
56
+ /** @public {Object<string, any>} Optional configuration object for the Eleva instance */
57
+ public config: {
43
58
  [x: string]: any;
44
59
  };
45
- /** @type {Object<string, ComponentDefinition>} Object storing registered component definitions by name */
46
- _components: {
47
- [x: string]: ComponentDefinition;
48
- };
49
- /** @private {Array<Object>} Collection of installed plugin instances */
60
+ /** @public {Emitter} Instance of the event emitter for handling component events */
61
+ public emitter: Emitter;
62
+ /** @public {typeof Signal} Static reference to the Signal class for creating reactive state */
63
+ public signal: typeof Signal;
64
+ /** @public {Renderer} Instance of the renderer for handling DOM updates and patching */
65
+ public renderer: Renderer;
66
+ /** @private {Map<string, ComponentDefinition>} Registry of all component definitions by name */
67
+ private _components;
68
+ /** @private {Map<string, ElevaPlugin>} Collection of installed plugin instances by name */
50
69
  private _plugins;
51
- /** @private {string[]} Array of lifecycle hook names supported by the component */
70
+ /** @private {string[]} Array of lifecycle hook names supported by components */
52
71
  private _lifecycleHooks;
53
- /** @private {boolean} Flag indicating if component is currently mounted */
72
+ /** @private {boolean} Flag indicating if the root component is currently mounted */
54
73
  private _isMounted;
55
- /** @private {Emitter} Instance of the event emitter for handling component events */
56
- private emitter;
57
- /** @private {Renderer} Instance of the renderer for handling DOM updates and patching */
58
- private renderer;
59
74
  /**
60
75
  * Integrates a plugin with the Eleva framework.
76
+ * The plugin's install function will be called with the Eleva instance and provided options.
77
+ * After installation, the plugin will be available for use by components.
61
78
  *
62
- * @param {Object} plugin - The plugin object which should have an `install` function.
63
- * @param {Object<string, any>} [options={}] - Optional options to pass to the plugin.
64
- * @returns {Eleva} The Eleva instance (for chaining).
79
+ * @public
80
+ * @param {ElevaPlugin} plugin - The plugin object which must have an `install` function.
81
+ * @param {Object<string, any>} [options={}] - Optional configuration options for the plugin.
82
+ * @returns {Eleva} The Eleva instance (for method chaining).
83
+ * @example
84
+ * app.use(myPlugin, { option1: "value1" });
65
85
  */
66
- use(plugin: Object, options?: {
86
+ public use(plugin: ElevaPlugin, options?: {
67
87
  [x: string]: any;
68
88
  }): Eleva;
69
89
  /**
70
- * Registers a component with the Eleva instance.
90
+ * Registers a new component with the Eleva instance.
91
+ * The component will be available for mounting using its registered name.
71
92
  *
72
- * @param {string} name - The name of the component.
93
+ * @public
94
+ * @param {string} name - The unique name of the component to register.
73
95
  * @param {ComponentDefinition} definition - The component definition including setup, template, style, and children.
74
- * @returns {Eleva} The Eleva instance (for chaining).
96
+ * @returns {Eleva} The Eleva instance (for method chaining).
97
+ * @throws {Error} If the component name is already registered.
98
+ * @example
99
+ * app.component("myButton", {
100
+ * template: (ctx) => `<button>${ctx.props.text}</button>`,
101
+ * style: () => "button { color: blue; }"
102
+ * });
75
103
  */
76
- component(name: string, definition: ComponentDefinition): Eleva;
104
+ public component(name: string, definition: ComponentDefinition): Eleva;
77
105
  /**
78
106
  * Mounts a registered component to a DOM element.
107
+ * This will initialize the component, set up its reactive state, and render it to the DOM.
79
108
  *
80
- * @param {HTMLElement} container - A DOM element where the component will be mounted.
81
- * @param {string|ComponentDefinition} compName - The name of the component to mount or a component definition.
109
+ * @public
110
+ * @param {HTMLElement} container - The DOM element where the component will be mounted.
111
+ * @param {string|ComponentDefinition} compName - The name of the registered component or a direct component definition.
82
112
  * @param {Object<string, any>} [props={}] - Optional properties to pass to the component.
83
- * @returns {object|Promise<object>} An object representing the mounted component instance, or a Promise that resolves to it for asynchronous setups.
84
- * @throws {Error} If the container is not found or if the component is not registered.
113
+ * @returns {Promise<MountResult>}
114
+ * A Promise that resolves to an object containing:
115
+ * - container: The mounted component's container element
116
+ * - data: The component's reactive state and context
117
+ * - unmount: Function to clean up and unmount the component
118
+ * @throws {Error} If the container is not found, or component is not registered.
119
+ * @example
120
+ * const instance = await app.mount(document.getElementById("app"), "myComponent", { text: "Click me" });
121
+ * // Later...
122
+ * instance.unmount();
85
123
  */
86
- mount(container: HTMLElement, compName: string | ComponentDefinition, props?: {
124
+ public mount(container: HTMLElement, compName: string | ComponentDefinition, props?: {
87
125
  [x: string]: any;
88
- }): object | Promise<object>;
126
+ }): Promise<MountResult>;
89
127
  /**
90
- * Prepares default no-operation lifecycle hook functions.
128
+ * Prepares default no-operation lifecycle hook functions for a component.
129
+ * These hooks will be called at various stages of the component's lifecycle.
91
130
  *
92
- * @returns {Object<string, function(): void>} An object with keys for lifecycle hooks mapped to empty functions.
93
131
  * @private
132
+ * @returns {Object<string, function(): void>} An object mapping lifecycle hook names to empty functions.
133
+ * The returned object will be merged with the component's context.
94
134
  */
95
135
  private _prepareLifecycleHooks;
96
136
  /**
97
137
  * Processes DOM elements for event binding based on attributes starting with "@".
98
- * Tracks listeners for cleanup during unmount.
138
+ * This method handles the event delegation system and ensures proper cleanup of event listeners.
99
139
  *
100
- * @param {HTMLElement} container - The container element in which to search for events.
101
- * @param {Object<string, any>} context - The current context containing event handler definitions.
102
- * @param {Array<Function>} cleanupListeners - Array to collect cleanup functions for each event listener.
103
140
  * @private
141
+ * @param {HTMLElement} container - The container element in which to search for event attributes.
142
+ * @param {Object<string, any>} context - The current component context containing event handler definitions.
143
+ * @param {Array<Function>} cleanupListeners - Array to collect cleanup functions for each event listener.
144
+ * @returns {void}
104
145
  */
105
146
  private _processEvents;
106
147
  /**
107
148
  * Injects scoped styles into the component's container.
149
+ * The styles are automatically prefixed to prevent style leakage to other components.
108
150
  *
109
- * @param {HTMLElement} container - The container element.
110
- * @param {string} compName - The component name used to identify the style element.
111
- * @param {function(Object<string, any>): string} [styleFn] - A function that returns CSS styles as a string.
112
- * @param {Object<string, any>} context - The current context for style interpolation.
113
151
  * @private
152
+ * @param {HTMLElement} container - The container element where styles should be injected.
153
+ * @param {string} compName - The component name used to identify the style element.
154
+ * @param {function(Object<string, any>): string} [styleFn] - Optional function that returns CSS styles as a string.
155
+ * @param {Object<string, any>} context - The current component context for style interpolation.
156
+ * @returns {void}
114
157
  */
115
158
  private _injectStyles;
116
159
  /**
117
160
  * Mounts child components within the parent component's container.
161
+ * This method handles the recursive mounting of nested components.
118
162
  *
119
- * @param {HTMLElement} container - The parent container element.
120
- * @param {Object<string, ComponentDefinition>} [children] - An object mapping child component selectors to their definitions.
121
- * @param {Array<object>} childInstances - An array to store the mounted child component instances.
122
163
  * @private
164
+ * @param {HTMLElement} container - The parent container element.
165
+ * @param {Object<string, ComponentDefinition>} [children] - Object mapping of child component selectors to their definitions.
166
+ * @param {Array<MountResult>} childInstances - Array to store the mounted child component instances.
167
+ * @returns {void}
123
168
  */
124
169
  private _mountChildren;
125
170
  }
126
- /**
127
- * Defines the structure and behavior of a component.
128
- */
129
171
  export type ComponentDefinition = {
130
172
  /**
131
- * Optional setup function that initializes the component's reactive state and lifecycle.
132
- * Receives props and context as an argument and should return an object containing the component's state.
133
- * Can return either a synchronous object or a Promise that resolves to an object for async initialization.
173
+ * Optional setup function that initializes the component's state and returns reactive data
134
174
  */
135
175
  setup?: ((arg0: {
136
176
  [x: string]: any;
@@ -140,28 +180,53 @@ export type ComponentDefinition = {
140
180
  [x: string]: any;
141
181
  }>)) | undefined;
142
182
  /**
143
- * Required function that defines the component's HTML structure.
144
- * Receives the merged context (props + setup data) and must return an HTML template string.
145
- * Supports dynamic expressions using {{ }} syntax for reactive data binding.
183
+ * Required function that defines the component's HTML structure
146
184
  */
147
185
  template: (arg0: {
148
186
  [x: string]: any;
149
187
  }) => string;
150
188
  /**
151
- * Optional function that defines component-scoped CSS styles.
152
- * Receives the merged context and returns a CSS string that will be automatically scoped to the component.
153
- * Styles are injected into the component's container and only affect elements within it.
189
+ * Optional function that provides component-scoped CSS styles
154
190
  */
155
191
  style?: ((arg0: {
156
192
  [x: string]: any;
157
193
  }) => string) | undefined;
158
194
  /**
159
- * Optional object that defines nested child components.
160
- * Keys are CSS selectors that match elements in the template where child components should be mounted.
161
- * Values are ComponentDefinition objects that define the structure and behavior of each child component.
195
+ * Optional object defining nested child components
162
196
  */
163
197
  children?: {
164
198
  [x: string]: ComponentDefinition;
165
199
  } | undefined;
166
200
  };
201
+ export type ElevaPlugin = {
202
+ /**
203
+ * Function that installs the plugin into the Eleva instance
204
+ */
205
+ install: (arg0: Eleva, arg1: {
206
+ [x: string]: any;
207
+ }) => void;
208
+ /**
209
+ * Unique identifier name for the plugin
210
+ */
211
+ name: string;
212
+ };
213
+ export type MountResult = {
214
+ /**
215
+ * The DOM element where the component is mounted
216
+ */
217
+ container: HTMLElement;
218
+ /**
219
+ * The component's reactive state and context data
220
+ */
221
+ data: {
222
+ [x: string]: any;
223
+ };
224
+ /**
225
+ * Function to clean up and unmount the component
226
+ */
227
+ unmount: () => void;
228
+ };
229
+ import { Emitter } from "../modules/Emitter.js";
230
+ import { Signal } from "../modules/Signal.js";
231
+ import { Renderer } from "../modules/Renderer.js";
167
232
  //# sourceMappingURL=Eleva.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Eleva.d.ts","sourceRoot":"","sources":["../../src/core/Eleva.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;GAIG;AACH;IACE;;;;;OAKG;IACH,kBAHW,MAAM;;OA0BhB;IAtBC,wEAAwE;IACxE,MADW,MAAM,CACD;IAChB,uFAAuF;IACvF;;MAAoB;IACpB,0GAA0G;IAC1G;;MAAqB;IACrB,wEAAwE;IACxE,iBAAkB;IAClB,mFAAmF;IACnF,wBAMC;IACD,2EAA2E;IAC3E,mBAAuB;IACvB,qFAAqF;IACrF,gBAA4B;IAC5B,yFAAyF;IACzF,iBAA8B;IAGhC;;;;;;OAMG;IACH,YAJW,MAAM;;QAEJ,KAAK,CAQjB;IAED;;;;;;OAMG;IACH,gBAJW,MAAM,cACN,mBAAmB,GACjB,KAAK,CAKjB;IAED;;;;;;;;OAQG;IACH,iBANW,WAAW,YACX,MAAM,GAAC,mBAAmB;;QAExB,MAAM,GAAC,OAAO,CAAC,MAAM,CAAC,CAgHlC;IAED;;;;;OAKG;IACH,+BAKC;IAED;;;;;;;;OAQG;IACH,uBAiBC;IAED;;;;;;;;OAQG;IACH,sBAYC;IAED;;;;;;;OAOG;IACH,uBAgBC;CACF;;;;;;;;;;;;UAtS4C,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,GAAC,OAAO,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,CAAC,CAAC;;;;;;cAKjF,CAAS,IAAmB,EAAnB;YAAO,MAAM,GAAE,GAAG;KAAC,KAAG,MAAM;;;;;;;;UAKN,MAAM"}
1
+ {"version":3,"file":"Eleva.d.ts","sourceRoot":"","sources":["../../src/core/Eleva.js"],"names":[],"mappings":"AAOA;;;;;;;;;;GAUG;AAEH;;;;;;GAMG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;;;;;;OAOG;IACH,kBAJW,MAAM;;OA8BhB;IAzBC,0EAA0E;IAC1E,oBAAgB;IAChB,yFAAyF;IACzF;;MAAoB;IACpB,oFAAoF;IACpF,wBAA4B;IAC5B,+FAA+F;IAC/F,6BAAoB;IACpB,wFAAwF;IACxF,0BAA8B;IAE9B,gGAAgG;IAChG,oBAA4B;IAC5B,2FAA2F;IAC3F,iBAAyB;IACzB,gFAAgF;IAChF,wBAMC;IACD,oFAAoF;IACpF,mBAAuB;IAGzB;;;;;;;;;;;OAWG;IACH,mBANW,WAAW;;QAET,KAAK,CASjB;IAED;;;;;;;;;;;;;;OAcG;IACH,uBAVW,MAAM,cACN,mBAAmB,GACjB,KAAK,CAYjB;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,wBAdW,WAAW,YACX,MAAM,GAAC,mBAAmB;;QAExB,OAAO,CAAC,WAAW,CAAC,CA6HhC;IAED;;;;;;;OAOG;IACH,+BAOC;IAED;;;;;;;;;OASG;IACH,uBAiBC;IAED;;;;;;;;;;OAUG;IACH,sBAYC;IAED;;;;;;;;;OASG;IACH,uBAyBC;CACF;;;;;;;UAzW4C,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,GAAC,OAAO,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,CAAC,CAAC;;;;cAEjF,CAAS,IAAmB,EAAnB;YAAO,MAAM,GAAE,GAAG;KAAC,KAAG,MAAM;;;;;;UAEN,MAAM;;;;;;;;;;;;aAQrC,CAAS,IAAK,EAAL,KAAK,EAAE,IAAmB,EAAnB;YAAO,MAAM,GAAE,GAAG;KAAC,KAAG,IAAI;;;;UAE1C,MAAM;;;;;;eAMN,WAAW;;;;;;;;;;aAIX,MAAY,IAAI;;wBA7BN,uBAAuB;uBADxB,sBAAsB;yBAEpB,wBAAwB"}