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.
- package/README.md +27 -15
- package/dist/eleva.cjs.js +343 -158
- package/dist/eleva.cjs.js.map +1 -1
- package/dist/eleva.d.ts +257 -106
- package/dist/eleva.esm.js +343 -158
- package/dist/eleva.esm.js.map +1 -1
- package/dist/eleva.umd.js +343 -158
- package/dist/eleva.umd.js.map +1 -1
- package/dist/eleva.umd.min.js +2 -2
- package/dist/eleva.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/core/Eleva.js +143 -75
- package/src/modules/Emitter.js +23 -7
- package/src/modules/Renderer.js +177 -81
- package/src/modules/Signal.js +10 -7
- package/src/modules/TemplateEngine.js +6 -3
- package/types/core/Eleva.d.ts +164 -68
- package/types/core/Eleva.d.ts.map +1 -1
- package/types/modules/Emitter.d.ts +26 -10
- package/types/modules/Emitter.d.ts.map +1 -1
- package/types/modules/Renderer.d.ts +56 -19
- package/types/modules/Renderer.d.ts.map +1 -1
- package/types/modules/Signal.d.ts +11 -9
- package/types/modules/Signal.d.ts.map +1 -1
- package/types/modules/TemplateEngine.d.ts +8 -5
- package/types/modules/TemplateEngine.d.ts.map +1 -1
package/types/core/Eleva.d.ts
CHANGED
|
@@ -1,30 +1,69 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @typedef {Object} ComponentDefinition
|
|
3
|
-
* @property {function(
|
|
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(
|
|
5
|
+
* @property {(function(ComponentContext): string|Promise<string>)} template
|
|
6
6
|
* Required function that defines the component's HTML structure
|
|
7
|
-
* @property {(function(
|
|
7
|
+
* @property {(function(ComponentContext): string)|string} [style]
|
|
8
8
|
* Optional function or string that provides component-scoped CSS styles
|
|
9
|
-
* @property {
|
|
9
|
+
* @property {Record<string, ComponentDefinition>} [children]
|
|
10
10
|
* Optional object defining nested child components
|
|
11
11
|
*/
|
|
12
12
|
/**
|
|
13
|
-
* @typedef {Object}
|
|
14
|
-
* @property {
|
|
15
|
-
*
|
|
16
|
-
* @property {
|
|
17
|
-
*
|
|
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 {
|
|
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
|
-
*
|
|
38
|
-
*
|
|
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 {
|
|
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,
|
|
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,
|
|
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]:
|
|
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,
|
|
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]:
|
|
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 {
|
|
143
|
-
* @param {Array<
|
|
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(
|
|
155
|
-
* @param {
|
|
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 {
|
|
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
|
|
263
|
+
export type ComponentContext = {
|
|
227
264
|
/**
|
|
228
|
-
*
|
|
265
|
+
* Component properties passed during mounting
|
|
229
266
|
*/
|
|
230
|
-
|
|
231
|
-
[x: string]: any;
|
|
232
|
-
}) => void;
|
|
267
|
+
props: Record<string, unknown>;
|
|
233
268
|
/**
|
|
234
|
-
*
|
|
269
|
+
* Event emitter instance for component event handling
|
|
235
270
|
*/
|
|
236
|
-
|
|
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
|
|
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
|
-
|
|
247
|
-
|
|
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
|
|
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<
|
|
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 {
|
|
22
|
-
* @returns {
|
|
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: (
|
|
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 {
|
|
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?: (
|
|
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 {...
|
|
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:
|
|
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
|
|
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
|
|
4
|
-
*
|
|
5
|
-
*
|
|
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
|
-
/**
|
|
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
|
|
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
|
|
23
|
-
* @param {string} newHtml - The new HTML
|
|
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
|
-
*
|
|
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 {
|
|
35
|
-
* @param {
|
|
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
|
-
*
|
|
41
|
-
*
|
|
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 {
|
|
45
|
-
* @param {
|
|
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":"
|
|
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 {
|
|
20
|
+
* @param {T} value - The initial value of the signal.
|
|
19
21
|
*/
|
|
20
|
-
constructor(value:
|
|
21
|
-
/** @private {T} Internal storage for the signal's current value
|
|
22
|
+
constructor(value: T);
|
|
23
|
+
/** @private {T} Internal storage for the signal's current value */
|
|
22
24
|
private _value;
|
|
23
|
-
/** @private {Set<
|
|
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
|
|
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
|
|
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 {
|
|
49
|
-
* @returns {
|
|
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: (
|
|
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
|
|
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"}
|