eleva 1.2.17-beta → 1.2.18-beta

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,30 +1,69 @@
1
1
  /**
2
2
  * @typedef {Object} ComponentDefinition
3
- * @property {function(Object<string, any>): (Object<string, any>|Promise<Object<string, any>>)} [setup]
3
+ * @property {function(ComponentContext): (Record<string, unknown>|Promise<Record<string, unknown>>)} [setup]
4
4
  * Optional setup function that initializes the component's state and returns reactive data
5
- * @property {(function(Object<string, any>): string|Promise<string>|string)} template
5
+ * @property {(function(ComponentContext): string|Promise<string>)} template
6
6
  * Required function that defines the component's HTML structure
7
- * @property {(function(Object<string, any>): string)|string} [style]
7
+ * @property {(function(ComponentContext): string)|string} [style]
8
8
  * Optional function or string that provides component-scoped CSS styles
9
- * @property {Object<string, ComponentDefinition>} [children]
9
+ * @property {Record<string, ComponentDefinition>} [children]
10
10
  * Optional object defining nested child components
11
11
  */
12
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
13
+ * @typedef {Object} ComponentContext
14
+ * @property {Record<string, unknown>} props
15
+ * Component properties passed during mounting
16
+ * @property {Emitter} emitter
17
+ * Event emitter instance for component event handling
18
+ * @property {function<T>(value: T): Signal<T>} signal
19
+ * Factory function to create reactive Signal instances
20
+ * @property {function(LifecycleHookContext): Promise<void>} [onBeforeMount]
21
+ * Hook called before component mounting
22
+ * @property {function(LifecycleHookContext): Promise<void>} [onMount]
23
+ * Hook called after component mounting
24
+ * @property {function(LifecycleHookContext): Promise<void>} [onBeforeUpdate]
25
+ * Hook called before component update
26
+ * @property {function(LifecycleHookContext): Promise<void>} [onUpdate]
27
+ * Hook called after component update
28
+ * @property {function(UnmountHookContext): Promise<void>} [onUnmount]
29
+ * Hook called during component unmounting
30
+ */
31
+ /**
32
+ * @typedef {Object} LifecycleHookContext
33
+ * @property {HTMLElement} container
34
+ * The DOM element where the component is mounted
35
+ * @property {ComponentContext} context
36
+ * The component's reactive state and context data
37
+ */
38
+ /**
39
+ * @typedef {Object} UnmountHookContext
40
+ * @property {HTMLElement} container
41
+ * The DOM element where the component is mounted
42
+ * @property {ComponentContext} context
43
+ * The component's reactive state and context data
44
+ * @property {{
45
+ * watchers: Array<() => void>, // Signal watcher cleanup functions
46
+ * listeners: Array<() => void>, // Event listener cleanup functions
47
+ * children: Array<MountResult> // Child component instances
48
+ * }} cleanup
49
+ * Object containing cleanup functions and instances
18
50
  */
19
51
  /**
20
52
  * @typedef {Object} MountResult
21
53
  * @property {HTMLElement} container
22
54
  * The DOM element where the component is mounted
23
- * @property {Object<string, any>} data
55
+ * @property {ComponentContext} data
24
56
  * The component's reactive state and context data
25
- * @property {function(): void} unmount
57
+ * @property {function(): Promise<void>} unmount
26
58
  * Function to clean up and unmount the component
27
59
  */
60
+ /**
61
+ * @typedef {Object} ElevaPlugin
62
+ * @property {function(Eleva, Record<string, unknown>): void} install
63
+ * Function that installs the plugin into the Eleva instance
64
+ * @property {string} name
65
+ * Unique identifier name for the plugin
66
+ */
28
67
  /**
29
68
  * @class 🧩 Eleva
30
69
  * @classdesc A modern, signal-based component runtime framework that provides lifecycle hooks,
@@ -32,12 +71,26 @@
32
71
  * event handling, and DOM rendering with a focus on performance and developer experience.
33
72
  *
34
73
  * @example
74
+ * // Basic component creation and mounting
35
75
  * const app = new Eleva("myApp");
36
76
  * app.component("myComponent", {
37
- * template: (ctx) => `<div>Hello ${ctx.props.name}</div>`,
38
- * setup: (ctx) => ({ count: new Signal(0) })
77
+ * setup: (ctx) => ({ count: ctx.signal(0) }),
78
+ * template: (ctx) => `<div>Hello ${ctx.props.name}</div>`
39
79
  * });
40
80
  * app.mount(document.getElementById("app"), "myComponent", { name: "World" });
81
+ *
82
+ * @example
83
+ * // Using lifecycle hooks
84
+ * app.component("lifecycleDemo", {
85
+ * setup: () => {
86
+ * return {
87
+ * onMount: ({ container, context }) => {
88
+ * console.log('Component mounted!');
89
+ * }
90
+ * };
91
+ * },
92
+ * template: `<div>Lifecycle Demo</div>`
93
+ * });
41
94
  */
42
95
  export class Eleva {
43
96
  /**
@@ -45,18 +98,25 @@ export class Eleva {
45
98
  *
46
99
  * @public
47
100
  * @param {string} name - The unique identifier name for this Eleva instance.
48
- * @param {Object<string, any>} [config={}] - Optional configuration object for the instance.
101
+ * @param {Record<string, unknown>} [config={}] - Optional configuration object for the instance.
49
102
  * May include framework-wide settings and default behaviors.
103
+ * @throws {Error} If the name is not provided or is not a string.
104
+ * @returns {Eleva} A new Eleva instance.
105
+ *
106
+ * @example
107
+ * const app = new Eleva("myApp");
108
+ * app.component("myComponent", {
109
+ * setup: (ctx) => ({ count: ctx.signal(0) }),
110
+ * template: (ctx) => `<div>Hello ${ctx.props.name}!</div>`
111
+ * });
112
+ * app.mount(document.getElementById("app"), "myComponent", { name: "World" });
113
+ *
50
114
  */
51
- constructor(name: string, config?: {
52
- [x: string]: any;
53
- });
115
+ constructor(name: string, config?: Record<string, unknown>);
54
116
  /** @public {string} The unique identifier name for this Eleva instance */
55
117
  public name: string;
56
- /** @public {Object<string, any>} Optional configuration object for the Eleva instance */
57
- public config: {
58
- [x: string]: any;
59
- };
118
+ /** @public {Object<string, unknown>} Optional configuration object for the Eleva instance */
119
+ public config: Record<string, unknown>;
60
120
  /** @public {Emitter} Instance of the event emitter for handling component events */
61
121
  public emitter: Emitter;
62
122
  /** @public {typeof Signal} Static reference to the Signal class for creating reactive state */
@@ -67,8 +127,6 @@ export class Eleva {
67
127
  private _components;
68
128
  /** @private {Map<string, ElevaPlugin>} Collection of installed plugin instances by name */
69
129
  private _plugins;
70
- /** @private {string[]} Array of lifecycle hook names supported by components */
71
- private _lifecycleHooks;
72
130
  /** @private {boolean} Flag indicating if the root component is currently mounted */
73
131
  private _isMounted;
74
132
  /**
@@ -78,13 +136,13 @@ export class Eleva {
78
136
  *
79
137
  * @public
80
138
  * @param {ElevaPlugin} plugin - The plugin object which must have an `install` function.
81
- * @param {Object<string, any>} [options={}] - Optional configuration options for the plugin.
139
+ * @param {Object<string, unknown>} [options={}] - Optional configuration options for the plugin.
82
140
  * @returns {Eleva} The Eleva instance (for method chaining).
83
141
  * @example
84
142
  * app.use(myPlugin, { option1: "value1" });
85
143
  */
86
144
  public use(plugin: ElevaPlugin, options?: {
87
- [x: string]: any;
145
+ [x: string]: unknown;
88
146
  }): Eleva;
89
147
  /**
90
148
  * Registers a new component with the Eleva instance.
@@ -109,7 +167,7 @@ export class Eleva {
109
167
  * @public
110
168
  * @param {HTMLElement} container - The DOM element where the component will be mounted.
111
169
  * @param {string|ComponentDefinition} compName - The name of the registered component or a direct component definition.
112
- * @param {Object<string, any>} [props={}] - Optional properties to pass to the component.
170
+ * @param {Object<string, unknown>} [props={}] - Optional properties to pass to the component.
113
171
  * @returns {Promise<MountResult>}
114
172
  * A Promise that resolves to an object containing:
115
173
  * - container: The mounted component's container element
@@ -122,25 +180,16 @@ export class Eleva {
122
180
  * instance.unmount();
123
181
  */
124
182
  public mount(container: HTMLElement, compName: string | ComponentDefinition, props?: {
125
- [x: string]: any;
183
+ [x: string]: unknown;
126
184
  }): Promise<MountResult>;
127
- /**
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.
130
- *
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.
134
- */
135
- private _prepareLifecycleHooks;
136
185
  /**
137
186
  * Processes DOM elements for event binding based on attributes starting with "@".
138
187
  * This method handles the event delegation system and ensures proper cleanup of event listeners.
139
188
  *
140
189
  * @private
141
190
  * @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.
191
+ * @param {ComponentContext} context - The current component context containing event handler definitions.
192
+ * @param {Array<() => void>} listeners - Array to collect cleanup functions for each event listener.
144
193
  * @returns {void}
145
194
  */
146
195
  private _processEvents;
@@ -151,8 +200,8 @@ export class Eleva {
151
200
  * @private
152
201
  * @param {HTMLElement} container - The container element where styles should be injected.
153
202
  * @param {string} compName - The component name used to identify the style element.
154
- * @param {(function(Object<string, any>): string)|string} styleDef - The component's style definition (function or string).
155
- * @param {Object<string, any>} context - The current component context for style interpolation.
203
+ * @param {(function(ComponentContext): string)|string} styleDef - The component's style definition (function or string).
204
+ * @param {ComponentContext} context - The current component context for style interpolation.
156
205
  * @returns {void}
157
206
  */
158
207
  private _injectStyles;
@@ -163,7 +212,7 @@ export class Eleva {
163
212
  * @private
164
213
  * @param {HTMLElement} element - The DOM element to extract props from
165
214
  * @param {string} prefix - The prefix to look for in attributes
166
- * @returns {Object<string, any>} An object containing the extracted props
215
+ * @returns {Record<string, string>} An object containing the extracted props
167
216
  * @example
168
217
  * // For an element with attributes:
169
218
  * // <div :name="John" :age="25">
@@ -197,45 +246,56 @@ export type ComponentDefinition = {
197
246
  /**
198
247
  * Optional setup function that initializes the component's state and returns reactive data
199
248
  */
200
- setup?: ((arg0: {
201
- [x: string]: any;
202
- }) => ({
203
- [x: string]: any;
204
- } | Promise<{
205
- [x: string]: any;
206
- }>)) | undefined;
249
+ setup?: ((arg0: ComponentContext) => (Record<string, unknown> | Promise<Record<string, unknown>>)) | undefined;
207
250
  /**
208
251
  * Required function that defines the component's HTML structure
209
252
  */
210
- template: ((arg0: {
211
- [x: string]: any;
212
- }) => string | Promise<string> | string);
253
+ template: ((arg0: ComponentContext) => string | Promise<string>);
213
254
  /**
214
255
  * Optional function or string that provides component-scoped CSS styles
215
256
  */
216
- style?: string | ((arg0: {
217
- [x: string]: any;
218
- }) => string) | undefined;
257
+ style?: string | ((arg0: ComponentContext) => string) | undefined;
219
258
  /**
220
259
  * Optional object defining nested child components
221
260
  */
222
- children?: {
223
- [x: string]: ComponentDefinition;
224
- } | undefined;
261
+ children?: Record<string, ComponentDefinition> | undefined;
225
262
  };
226
- export type ElevaPlugin = {
263
+ export type ComponentContext = {
227
264
  /**
228
- * Function that installs the plugin into the Eleva instance
265
+ * Component properties passed during mounting
229
266
  */
230
- install: (arg0: Eleva, arg1: {
231
- [x: string]: any;
232
- }) => void;
267
+ props: Record<string, unknown>;
233
268
  /**
234
- * Unique identifier name for the plugin
269
+ * Event emitter instance for component event handling
235
270
  */
236
- name: string;
271
+ emitter: Emitter;
272
+ /**
273
+ * <T>(value: T): Signal<T>} signal
274
+ * Factory function to create reactive Signal instances
275
+ */
276
+ "": Function;
277
+ /**
278
+ * Hook called before component mounting
279
+ */
280
+ onBeforeMount?: ((arg0: LifecycleHookContext) => Promise<void>) | undefined;
281
+ /**
282
+ * Hook called after component mounting
283
+ */
284
+ onMount?: ((arg0: LifecycleHookContext) => Promise<void>) | undefined;
285
+ /**
286
+ * Hook called before component update
287
+ */
288
+ onBeforeUpdate?: ((arg0: LifecycleHookContext) => Promise<void>) | undefined;
289
+ /**
290
+ * Hook called after component update
291
+ */
292
+ onUpdate?: ((arg0: LifecycleHookContext) => Promise<void>) | undefined;
293
+ /**
294
+ * Hook called during component unmounting
295
+ */
296
+ onUnmount?: ((arg0: UnmountHookContext) => Promise<void>) | undefined;
237
297
  };
238
- export type MountResult = {
298
+ export type LifecycleHookContext = {
239
299
  /**
240
300
  * The DOM element where the component is mounted
241
301
  */
@@ -243,13 +303,49 @@ export type MountResult = {
243
303
  /**
244
304
  * The component's reactive state and context data
245
305
  */
246
- data: {
247
- [x: string]: any;
306
+ context: ComponentContext;
307
+ };
308
+ export type UnmountHookContext = {
309
+ /**
310
+ * The DOM element where the component is mounted
311
+ */
312
+ container: HTMLElement;
313
+ /**
314
+ * The component's reactive state and context data
315
+ */
316
+ context: ComponentContext;
317
+ /**
318
+ * Object containing cleanup functions and instances
319
+ */
320
+ cleanup: {
321
+ watchers: Array<() => void>;
322
+ listeners: Array<() => void>;
323
+ children: Array<MountResult>;
248
324
  };
325
+ };
326
+ export type MountResult = {
327
+ /**
328
+ * The DOM element where the component is mounted
329
+ */
330
+ container: HTMLElement;
331
+ /**
332
+ * The component's reactive state and context data
333
+ */
334
+ data: ComponentContext;
249
335
  /**
250
336
  * Function to clean up and unmount the component
251
337
  */
252
- unmount: () => void;
338
+ unmount: () => Promise<void>;
339
+ };
340
+ export type ElevaPlugin = {
341
+ /**
342
+ * Function that installs the plugin into the Eleva instance
343
+ */
344
+ install: (arg0: Eleva, arg1: Record<string, unknown>) => void;
345
+ /**
346
+ * Unique identifier name for the plugin
347
+ */
348
+ name: string;
253
349
  };
254
350
  import { Emitter } from "../modules/Emitter.js";
255
351
  import { Signal } from "../modules/Signal.js";
@@ -1 +1 @@
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,CA6IhC;IAED;;;;;;;OAOG;IACH,+BAOC;IAED;;;;;;;;;OASG;IACH,uBAoBC;IAED;;;;;;;;;;OAUG;IACH,sBAeC;IAED;;;;;;;;;;;;OAYG;IACH,sBASC;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,yBAYC;CACF;;;;;;;UArZ4C,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,GAAC,OAAO,CAAC;YAAO,MAAM,GAAE,GAAG;KAAC,CAAC,CAAC;;;;cAEjF,CAAC,CAAS,IAAmB,EAAnB;YAAO,MAAM,GAAE,GAAG;KAAC,KAAG,MAAM,GAAC,OAAO,CAAC,MAAM,CAAC,GAAC,MAAM,CAAC;;;;;;UAE9B,MAAM;;;;;;;;;;;;aAQtC,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"}
1
+ {"version":3,"file":"Eleva.d.ts","sourceRoot":"","sources":["../../src/core/Eleva.js"],"names":[],"mappings":"AAOA;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH;;;;;;;;GAQG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;IACE;;;;;;;;;;;;;;;;;;OAkBG;IACH,kBAfW,MAAM,WACN,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAgCjC;IAjBC,0EAA0E;IAC1E,oBAAgB;IAChB,6FAA6F;IAC7F,uCAAoB;IACpB,oFAAoF;IACpF,wBAA4B;IAC5B,+FAA+F;IAC/F,6BAAoB;IACpB,wFAAwF;IACxF,0BAA8B;IAE9B,gGAAgG;IAChG,oBAA4B;IAC5B,2FAA2F;IAC3F,iBAAyB;IACzB,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,CA6JhC;IAED;;;;;;;;;OASG;IACH,uBA0BC;IAED;;;;;;;;;;OAUG;IACH,sBAiBC;IAED;;;;;;;;;;;;OAYG;IACH,sBASC;IAED;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,yBAcC;CACF;;;;;oBAzdsB,gBAAgB,KAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;cAEtF,CAAC,CAAS,IAAgB,EAAhB,gBAAgB,KAAG,MAAM,GAAC,OAAO,CAAC,MAAM,CAAC,CAAC;;;;6BAE1C,gBAAgB,KAAG,MAAM;;;;;;;;;;WAQnC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;aAEvB,OAAO;;;;;;;;;4BAIE,oBAAoB,KAAG,OAAO,CAAC,IAAI,CAAC;;;;sBAEpC,oBAAoB,KAAG,OAAO,CAAC,IAAI,CAAC;;;;6BAEpC,oBAAoB,KAAG,OAAO,CAAC,IAAI,CAAC;;;;uBAEpC,oBAAoB,KAAG,OAAO,CAAC,IAAI,CAAC;;;;wBAEpC,kBAAkB,KAAG,OAAO,CAAC,IAAI,CAAC;;;;;;eAM3C,WAAW;;;;aAEX,gBAAgB;;;;;;eAMhB,WAAW;;;;aAEX,gBAAgB;;;;aAEhB;QACT,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;QAC5B,SAAS,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;QAC7B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;KAC7B;;;;;;eAMU,WAAW;;;;UAEX,gBAAgB;;;;aAEhB,MAAY,OAAO,CAAC,IAAI,CAAC;;;;;;aAMzB,CAAS,IAAK,EAAL,KAAK,EAAE,IAAuB,EAAvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAG,IAAI;;;;UAE9C,MAAM;;wBAvEI,uBAAuB;uBADxB,sBAAsB;yBAEpB,wBAAwB"}
@@ -3,6 +3,9 @@
3
3
  * @classdesc A robust event emitter that enables inter-component communication through a publish-subscribe pattern.
4
4
  * Components can emit events and listen for events from other components, facilitating loose coupling
5
5
  * and reactive updates across the application.
6
+ * Events are handled synchronously in the order they were registered, with proper cleanup
7
+ * of unsubscribed handlers.
8
+ * Event names should follow the format 'namespace:action' (e.g., 'user:login', 'cart:update').
6
9
  *
7
10
  * @example
8
11
  * const emitter = new Emitter();
@@ -10,41 +13,54 @@
10
13
  * emitter.emit('user:login', { name: 'John' }); // Logs: "User logged in: John"
11
14
  */
12
15
  export class Emitter {
13
- /** @private {Map<string, Set<function(any): void>>} Map of event names to their registered handler functions */
16
+ /** @private {Map<string, Set<(data: unknown) => void>>} Map of event names to their registered handler functions */
14
17
  private _events;
15
18
  /**
16
19
  * Registers an event handler for the specified event name.
17
20
  * The handler will be called with the event data when the event is emitted.
21
+ * Event names should follow the format 'namespace:action' for consistency.
18
22
  *
19
23
  * @public
20
- * @param {string} event - The name of the event to listen for.
21
- * @param {function(any): void} handler - The callback function to invoke when the event occurs.
22
- * @returns {function(): void} A function to unsubscribe the event handler.
24
+ * @param {string} event - The name of the event to listen for (e.g., 'user:login').
25
+ * @param {(data: unknown) => void} handler - The callback function to invoke when the event occurs.
26
+ * @returns {() => void} A function to unsubscribe the event handler.
23
27
  * @example
24
28
  * const unsubscribe = emitter.on('user:login', (user) => console.log(user));
25
29
  * // Later...
26
30
  * unsubscribe(); // Stops listening for the event
27
31
  */
28
- public on(event: string, handler: (arg0: any) => void): () => void;
32
+ public on(event: string, handler: (data: unknown) => void): () => void;
29
33
  /**
30
34
  * Removes an event handler for the specified event name.
31
35
  * If no handler is provided, all handlers for the event are removed.
36
+ * Automatically cleans up empty event sets to prevent memory leaks.
32
37
  *
33
38
  * @public
34
- * @param {string} event - The name of the event.
35
- * @param {function(any): void} [handler] - The specific handler function to remove.
39
+ * @param {string} event - The name of the event to remove handlers from.
40
+ * @param {(data: unknown) => void} [handler] - The specific handler function to remove.
36
41
  * @returns {void}
42
+ * @example
43
+ * // Remove a specific handler
44
+ * emitter.off('user:login', loginHandler);
45
+ * // Remove all handlers for an event
46
+ * emitter.off('user:login');
37
47
  */
38
- public off(event: string, handler?: (arg0: any) => void): void;
48
+ public off(event: string, handler?: (data: unknown) => void): void;
39
49
  /**
40
50
  * Emits an event with the specified data to all registered handlers.
41
51
  * Handlers are called synchronously in the order they were registered.
52
+ * If no handlers are registered for the event, the emission is silently ignored.
42
53
  *
43
54
  * @public
44
55
  * @param {string} event - The name of the event to emit.
45
- * @param {...any} args - Optional arguments to pass to the event handlers.
56
+ * @param {...unknown} args - Optional arguments to pass to the event handlers.
46
57
  * @returns {void}
58
+ * @example
59
+ * // Emit an event with data
60
+ * emitter.emit('user:login', { name: 'John', role: 'admin' });
61
+ * // Emit an event with multiple arguments
62
+ * emitter.emit('cart:update', { items: [] }, { total: 0 });
47
63
  */
48
- public emit(event: string, ...args: any[]): void;
64
+ public emit(event: string, ...args: unknown[]): void;
49
65
  }
50
66
  //# sourceMappingURL=Emitter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Emitter.d.ts","sourceRoot":"","sources":["../../src/modules/Emitter.js"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH;IAOI,gHAAgH;IAChH,gBAAwB;IAG1B;;;;;;;;;;;;OAYG;IACH,iBARW,MAAM,WACN,CAAS,IAAG,EAAH,GAAG,KAAG,IAAI,GACjB,MAAY,IAAI,CAW5B;IAED;;;;;;;;OAQG;IACH,kBAJW,MAAM,YACN,CAAS,IAAG,EAAH,GAAG,KAAG,IAAI,GACjB,IAAI,CAYhB;IAED;;;;;;;;OAQG;IACH,mBAJW,MAAM,WACH,GAAG,EAAA,GACJ,IAAI,CAKhB;CACF"}
1
+ {"version":3,"file":"Emitter.d.ts","sourceRoot":"","sources":["../../src/modules/Emitter.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH;IAOI,oHAAoH;IACpH,gBAAwB;IAG1B;;;;;;;;;;;;;OAaG;IACH,iBARW,MAAM,WACN,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GACrB,MAAM,IAAI,CAWtB;IAED;;;;;;;;;;;;;;OAcG;IACH,kBATW,MAAM,YACN,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GACrB,IAAI,CAiBhB;IAED;;;;;;;;;;;;;;OAcG;IACH,mBATW,MAAM,WACH,OAAO,EAAA,GACR,IAAI,CAUhB;CACF"}
@@ -1,8 +1,17 @@
1
1
  /**
2
2
  * @class 🎨 Renderer
3
- * @classdesc A DOM renderer that handles efficient DOM updates through patching and diffing.
4
- * Provides methods for updating the DOM by comparing new and old structures and applying
5
- * only the necessary changes, minimizing layout thrashing and improving performance.
3
+ * @classdesc A high-performance DOM renderer that implements an optimized direct DOM diffing algorithm.
4
+ *
5
+ * Key features:
6
+ * - Single-pass diffing algorithm for efficient DOM updates
7
+ * - Key-based node reconciliation for optimal performance
8
+ * - Intelligent attribute handling for ARIA, data attributes, and boolean properties
9
+ * - Preservation of special Eleva-managed instances and style elements
10
+ * - Memory-efficient with reusable temporary containers
11
+ *
12
+ * The renderer is designed to minimize DOM operations while maintaining
13
+ * exact attribute synchronization and proper node identity preservation.
14
+ * It's particularly optimized for frequent updates and complex DOM structures.
6
15
  *
7
16
  * @example
8
17
  * const renderer = new Renderer();
@@ -11,40 +20,68 @@
11
20
  * renderer.patchDOM(container, newHtml);
12
21
  */
13
22
  export class Renderer {
14
- /** @private {HTMLElement} Reusable temporary container for parsing new HTML */
23
+ /**
24
+ * A temporary container to hold the new HTML content while diffing.
25
+ * @private
26
+ * @type {HTMLElement}
27
+ */
15
28
  private _tempContainer;
16
29
  /**
17
- * Patches the DOM of a container element with new HTML content.
18
- * Efficiently updates the DOM by parsing new HTML into a reusable container
19
- * and applying only the necessary changes.
30
+ * Patches the DOM of the given container with the provided HTML string.
20
31
  *
21
32
  * @public
22
- * @param {HTMLElement} container - The container element to patch.
23
- * @param {string} newHtml - The new HTML content to apply.
33
+ * @param {HTMLElement} container - The container whose DOM will be patched.
34
+ * @param {string} newHtml - The new HTML string.
35
+ * @throws {TypeError} If the container is not an HTMLElement or newHtml is not a string.
36
+ * @throws {Error} If the DOM patching fails.
24
37
  * @returns {void}
25
- * @throws {Error} If container is not an HTMLElement, newHtml is not a string, or patching fails.
26
38
  */
27
39
  public patchDOM(container: HTMLElement, newHtml: string): void;
28
40
  /**
29
- * Diffs two DOM trees (old and new) and applies updates to the old DOM.
30
- * This method recursively compares nodes and their attributes, applying only
31
- * the necessary changes to minimize DOM operations.
41
+ * Performs a diff between two DOM nodes and patches the old node to match the new node.
32
42
  *
33
43
  * @private
34
- * @param {HTMLElement} oldParent - The original DOM element.
35
- * @param {HTMLElement} newParent - The new DOM element.
44
+ * @param {Node} oldParent - The old parent node to be patched.
45
+ * @param {Node} newParent - The new parent node to compare.
36
46
  * @returns {void}
37
47
  */
38
48
  private _diff;
39
49
  /**
40
- * Updates the attributes of an element to match those of a new element.
41
- * Handles special cases for ARIA attributes, data attributes, and boolean properties.
50
+ * Checks if the node types match.
51
+ *
52
+ * @private
53
+ * @param {Node} oldNode - The old node.
54
+ * @param {Node} newNode - The new node.
55
+ * @returns {boolean} True if the nodes match, false otherwise.
56
+ */
57
+ private _keysMatch;
58
+ /**
59
+ * Patches a node.
42
60
  *
43
61
  * @private
44
- * @param {HTMLElement} oldEl - The element to update.
45
- * @param {HTMLElement} newEl - The element providing the updated attributes.
62
+ * @param {Node} oldNode - The old node to patch.
63
+ * @param {Node} newNode - The new node to patch.
64
+ * @returns {void}
65
+ */
66
+ private _patchNode;
67
+ /**
68
+ * Updates the attributes of an element.
69
+ *
70
+ * @private
71
+ * @param {HTMLElement} oldEl - The old element to update.
72
+ * @param {HTMLElement} newEl - The new element to update.
46
73
  * @returns {void}
47
74
  */
48
75
  private _updateAttributes;
76
+ /**
77
+ * Creates a key map for the children of a parent node.
78
+ *
79
+ * @private
80
+ * @param {Array<Node>} children - The children of the parent node.
81
+ * @param {number} start - The start index of the children.
82
+ * @param {number} end - The end index of the children.
83
+ * @returns {Map<string, number>} A map of key to child index.
84
+ */
85
+ private _createKeyMap;
49
86
  }
50
87
  //# sourceMappingURL=Renderer.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../src/modules/Renderer.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH;IAMI,+EAA+E;IAC/E,uBAAmD;IAGrD;;;;;;;;;;OAUG;IACH,2BALW,WAAW,WACX,MAAM,GACJ,IAAI,CAmBhB;IAED;;;;;;;;;OASG;IACH,cAyDC;IAED;;;;;;;;OAQG;IACH,0BAgDC;CACF"}
1
+ {"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../src/modules/Renderer.js"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;IAMI;;;;OAIG;IACH,uBAAmD;IAGrD;;;;;;;;;OASG;IACH,2BANW,WAAW,WACX,MAAM,GAGJ,IAAI,CAgBhB;IAED;;;;;;;OAOG;IACH,cAuEC;IAED;;;;;;;OAOG;IACH,mBAKC;IAED;;;;;;;OAOG;IACH,mBAsBC;IAED;;;;;;;OAOG;IACH,0BAgDC;IAED;;;;;;;;OAQG;IACH,sBAUC;CACF"}
@@ -3,6 +3,8 @@
3
3
  * @classdesc A reactive data holder that enables fine-grained reactivity in the Eleva framework.
4
4
  * Signals notify registered watchers when their value changes, enabling efficient DOM updates
5
5
  * through targeted patching rather than full re-renders.
6
+ * Updates are batched using microtasks to prevent multiple synchronous notifications.
7
+ * The class is generic, allowing type-safe handling of any value type T.
6
8
  *
7
9
  * @example
8
10
  * const count = new Signal(0);
@@ -15,12 +17,12 @@ export class Signal<T> {
15
17
  * Creates a new Signal instance with the specified initial value.
16
18
  *
17
19
  * @public
18
- * @param {*} value - The initial value of the signal.
20
+ * @param {T} value - The initial value of the signal.
19
21
  */
20
- constructor(value: any);
21
- /** @private {T} Internal storage for the signal's current value, where T is the type of the initial value */
22
+ constructor(value: T);
23
+ /** @private {T} Internal storage for the signal's current value */
22
24
  private _value;
23
- /** @private {Set<function(T): void>} Collection of callback functions to be notified when value changes, where T is the value type */
25
+ /** @private {Set<(value: T) => void>} Collection of callback functions to be notified when value changes */
24
26
  private _watchers;
25
27
  /** @private {boolean} Flag to prevent multiple synchronous watcher notifications and batch updates into microtasks */
26
28
  private _pending;
@@ -29,7 +31,7 @@ export class Signal<T> {
29
31
  * The notification is batched using microtasks to prevent multiple synchronous updates.
30
32
  *
31
33
  * @public
32
- * @param {T} newVal - The new value to set, where T is the type of the initial value.
34
+ * @param {T} newVal - The new value to set.
33
35
  * @returns {void}
34
36
  */
35
37
  public set value(newVal: T);
@@ -37,7 +39,7 @@ export class Signal<T> {
37
39
  * Gets the current value of the signal.
38
40
  *
39
41
  * @public
40
- * @returns {T} The current value, where T is the type of the initial value.
42
+ * @returns {T} The current value.
41
43
  */
42
44
  public get value(): T;
43
45
  /**
@@ -45,14 +47,14 @@ export class Signal<T> {
45
47
  * The watcher will receive the new value as its argument.
46
48
  *
47
49
  * @public
48
- * @param {function(T): void} fn - The callback function to invoke on value change, where T is the value type.
49
- * @returns {function(): boolean} A function to unsubscribe the watcher.
50
+ * @param {(value: T) => void} fn - The callback function to invoke on value change.
51
+ * @returns {() => boolean} A function to unsubscribe the watcher.
50
52
  * @example
51
53
  * const unsubscribe = signal.watch((value) => console.log(value));
52
54
  * // Later...
53
55
  * unsubscribe(); // Stops watching for changes
54
56
  */
55
- public watch(fn: (arg0: T) => void): () => boolean;
57
+ public watch(fn: (value: T) => void): () => boolean;
56
58
  /**
57
59
  * Notifies all registered watchers of a value change using microtask scheduling.
58
60
  * Uses a pending flag to batch multiple synchronous updates into a single notification.
@@ -1 +1 @@
1
- {"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../../src/modules/Signal.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,oBAFa,CAAC;IAGZ;;;;;OAKG;IACH,mBAFW,GAAC,EASX;IANC,6GAA6G;IAC7G,eAAmB;IACnB,sIAAsI;IACtI,kBAA0B;IAC1B,sHAAsH;IACtH,iBAAqB;IAavB;;;;;;;OAOG;IACH,yBAHW,CAAC,EAQX;IAvBD;;;;;OAKG;IACH,oBAFa,CAAC,CAIb;IAiBD;;;;;;;;;;;OAWG;IACH,iBAPW,CAAS,IAAC,EAAD,CAAC,KAAG,IAAI,GACf,MAAY,OAAO,CAS/B;IAED;;;;;;;OAOG;IACH,gBAQC;CACF"}
1
+ {"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../../src/modules/Signal.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,oBAFa,CAAC;IAGZ;;;;;OAKG;IACH,mBAFW,CAAC,EASX;IANC,mEAAmE;IACnE,eAAmB;IACnB,4GAA4G;IAC5G,kBAA0B;IAC1B,sHAAsH;IACtH,iBAAqB;IAavB;;;;;;;OAOG;IACH,yBAHW,CAAC,EAQX;IAvBD;;;;;OAKG;IACH,oBAFa,CAAC,CAIb;IAiBD;;;;;;;;;;;OAWG;IACH,iBAPW,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAChB,MAAM,OAAO,CASzB;IAED;;;;;;;OAOG;IACH,gBASC;CACF"}