eleva 1.0.0-alpha → 1.1.0-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.
- package/README.md +87 -96
- package/dist/eleva.d.ts +94 -38
- package/dist/eleva.esm.js +84 -66
- package/dist/eleva.esm.js.map +1 -1
- package/dist/eleva.min.js +1 -1
- package/dist/eleva.min.js.map +1 -1
- package/dist/eleva.umd.js +84 -66
- package/dist/eleva.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/core/Eleva.js +57 -39
- package/src/modules/Emitter.js +7 -7
- package/src/modules/Renderer.js +8 -8
- package/src/modules/Signal.js +5 -5
- package/src/modules/TemplateEngine.js +10 -11
- package/types/core/Eleva.d.ts +83 -27
- package/types/core/Eleva.d.ts.map +1 -1
- package/types/modules/Emitter.d.ts +9 -9
- package/types/modules/Emitter.d.ts.map +1 -1
- package/types/modules/Renderer.d.ts +2 -2
- package/types/modules/Signal.d.ts +6 -6
- package/types/modules/Signal.d.ts.map +1 -1
- package/types/modules/TemplateEngine.d.ts +15 -12
- package/types/modules/TemplateEngine.d.ts.map +1 -1
package/types/core/Eleva.d.ts
CHANGED
|
@@ -1,55 +1,81 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
2
|
+
* @typedef {Object} ComponentDefinition
|
|
3
|
+
* @property {function(Object<string, any>): (Object<string, any>|Promise<Object<string, any>>)} [setup]
|
|
4
|
+
* A setup function that initializes the component state and returns an object or a promise that resolves to an object.
|
|
5
|
+
* @property {function(Object<string, any>): string} template
|
|
6
|
+
* A function that returns the HTML template string for the component.
|
|
7
|
+
* @property {function(Object<string, any>): string} [style]
|
|
8
|
+
* An optional function that returns scoped CSS styles as a string.
|
|
9
|
+
* @property {Object<string, ComponentDefinition>} [children]
|
|
10
|
+
* An optional mapping of CSS selectors to child component definitions.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* @class 🧩 Eleva
|
|
14
|
+
* @classdesc Signal-based component runtime framework with lifecycle hooks, scoped styles, and plugin support.
|
|
15
|
+
* Manages component registration, plugin integration, event handling, and DOM rendering.
|
|
6
16
|
*/
|
|
7
17
|
export class Eleva {
|
|
8
18
|
/**
|
|
9
19
|
* Creates a new Eleva instance.
|
|
10
20
|
*
|
|
11
21
|
* @param {string} name - The name of the Eleva instance.
|
|
12
|
-
* @param {
|
|
22
|
+
* @param {Object<string, any>} [config={}] - Optional configuration for the instance.
|
|
13
23
|
*/
|
|
14
|
-
constructor(name: string, config?:
|
|
24
|
+
constructor(name: string, config?: {
|
|
25
|
+
[x: string]: any;
|
|
26
|
+
});
|
|
27
|
+
/** @type {string} */
|
|
15
28
|
name: string;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
29
|
+
/** @type {Object<string, any>} */
|
|
30
|
+
config: {
|
|
31
|
+
[x: string]: any;
|
|
32
|
+
};
|
|
33
|
+
/** @type {Object<string, ComponentDefinition>} */
|
|
34
|
+
_components: {
|
|
35
|
+
[x: string]: ComponentDefinition;
|
|
36
|
+
};
|
|
37
|
+
/** @type {Array<Object>} */
|
|
38
|
+
_plugins: Array<Object>;
|
|
39
|
+
/** @private */
|
|
40
|
+
private _lifecycleHooks;
|
|
41
|
+
/** @private {boolean} */
|
|
42
|
+
private _isMounted;
|
|
21
43
|
emitter: Emitter;
|
|
22
44
|
renderer: Renderer;
|
|
23
45
|
/**
|
|
24
46
|
* Integrates a plugin with the Eleva framework.
|
|
25
47
|
*
|
|
26
|
-
* @param {
|
|
27
|
-
* @param {
|
|
48
|
+
* @param {Object} plugin - The plugin object which should have an `install` function.
|
|
49
|
+
* @param {Object<string, any>} [options={}] - Optional options to pass to the plugin.
|
|
28
50
|
* @returns {Eleva} The Eleva instance (for chaining).
|
|
29
51
|
*/
|
|
30
|
-
use(plugin
|
|
52
|
+
use(plugin: Object, options?: {
|
|
53
|
+
[x: string]: any;
|
|
54
|
+
}): Eleva;
|
|
31
55
|
/**
|
|
32
56
|
* Registers a component with the Eleva instance.
|
|
33
57
|
*
|
|
34
58
|
* @param {string} name - The name of the component.
|
|
35
|
-
* @param {
|
|
59
|
+
* @param {ComponentDefinition} definition - The component definition including setup, template, style, and children.
|
|
36
60
|
* @returns {Eleva} The Eleva instance (for chaining).
|
|
37
61
|
*/
|
|
38
|
-
component(name: string, definition:
|
|
62
|
+
component(name: string, definition: ComponentDefinition): Eleva;
|
|
39
63
|
/**
|
|
40
64
|
* Mounts a registered component to a DOM element.
|
|
41
65
|
*
|
|
42
|
-
* @param {
|
|
43
|
-
* @param {string} compName - The name of the component to mount.
|
|
44
|
-
* @param {
|
|
66
|
+
* @param {HTMLElement} container - A DOM element where the component will be mounted.
|
|
67
|
+
* @param {string|ComponentDefinition} compName - The name of the component to mount or a component definition.
|
|
68
|
+
* @param {Object<string, any>} [props={}] - Optional properties to pass to the component.
|
|
45
69
|
* @returns {object|Promise<object>} An object representing the mounted component instance, or a Promise that resolves to it for asynchronous setups.
|
|
46
|
-
* @throws
|
|
70
|
+
* @throws {Error} If the container is not found or if the component is not registered.
|
|
47
71
|
*/
|
|
48
|
-
mount(
|
|
72
|
+
mount(container: HTMLElement, compName: string | ComponentDefinition, props?: {
|
|
73
|
+
[x: string]: any;
|
|
74
|
+
}): object | Promise<object>;
|
|
49
75
|
/**
|
|
50
76
|
* Prepares default no-operation lifecycle hook functions.
|
|
51
77
|
*
|
|
52
|
-
* @returns {
|
|
78
|
+
* @returns {Object<string, function(): void>} An object with keys for lifecycle hooks mapped to empty functions.
|
|
53
79
|
* @private
|
|
54
80
|
*/
|
|
55
81
|
private _prepareLifecycleHooks;
|
|
@@ -57,7 +83,7 @@ export class Eleva {
|
|
|
57
83
|
* Processes DOM elements for event binding based on attributes starting with "@".
|
|
58
84
|
*
|
|
59
85
|
* @param {HTMLElement} container - The container element in which to search for events.
|
|
60
|
-
* @param {
|
|
86
|
+
* @param {Object<string, any>} context - The current context containing event handler definitions.
|
|
61
87
|
* @private
|
|
62
88
|
*/
|
|
63
89
|
private _processEvents;
|
|
@@ -66,8 +92,8 @@ export class Eleva {
|
|
|
66
92
|
*
|
|
67
93
|
* @param {HTMLElement} container - The container element.
|
|
68
94
|
* @param {string} compName - The component name used to identify the style element.
|
|
69
|
-
* @param {
|
|
70
|
-
* @param {
|
|
95
|
+
* @param {function(Object<string, any>): string} [styleFn] - A function that returns CSS styles as a string.
|
|
96
|
+
* @param {Object<string, any>} context - The current context for style interpolation.
|
|
71
97
|
* @private
|
|
72
98
|
*/
|
|
73
99
|
private _injectStyles;
|
|
@@ -75,12 +101,42 @@ export class Eleva {
|
|
|
75
101
|
* Mounts child components within the parent component's container.
|
|
76
102
|
*
|
|
77
103
|
* @param {HTMLElement} container - The parent container element.
|
|
78
|
-
* @param {
|
|
79
|
-
* @param {Array} childInstances - An array to store the mounted child component instances.
|
|
104
|
+
* @param {Object<string, ComponentDefinition>} [children] - An object mapping child component selectors to their definitions.
|
|
105
|
+
* @param {Array<object>} childInstances - An array to store the mounted child component instances.
|
|
80
106
|
* @private
|
|
81
107
|
*/
|
|
82
108
|
private _mountChildren;
|
|
83
109
|
}
|
|
110
|
+
export type ComponentDefinition = {
|
|
111
|
+
/**
|
|
112
|
+
* A setup function that initializes the component state and returns an object or a promise that resolves to an object.
|
|
113
|
+
*/
|
|
114
|
+
setup?: ((arg0: {
|
|
115
|
+
[x: string]: any;
|
|
116
|
+
}) => ({
|
|
117
|
+
[x: string]: any;
|
|
118
|
+
} | Promise<{
|
|
119
|
+
[x: string]: any;
|
|
120
|
+
}>)) | undefined;
|
|
121
|
+
/**
|
|
122
|
+
* A function that returns the HTML template string for the component.
|
|
123
|
+
*/
|
|
124
|
+
template: (arg0: {
|
|
125
|
+
[x: string]: any;
|
|
126
|
+
}) => string;
|
|
127
|
+
/**
|
|
128
|
+
* An optional function that returns scoped CSS styles as a string.
|
|
129
|
+
*/
|
|
130
|
+
style?: ((arg0: {
|
|
131
|
+
[x: string]: any;
|
|
132
|
+
}) => string) | undefined;
|
|
133
|
+
/**
|
|
134
|
+
* An optional mapping of CSS selectors to child component definitions.
|
|
135
|
+
*/
|
|
136
|
+
children?: {
|
|
137
|
+
[x: string]: ComponentDefinition;
|
|
138
|
+
} | undefined;
|
|
139
|
+
};
|
|
84
140
|
import { Emitter } from "../modules/Emitter.js";
|
|
85
141
|
import { Renderer } from "../modules/Renderer.js";
|
|
86
142
|
//# sourceMappingURL=Eleva.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Eleva.d.ts","sourceRoot":"","sources":["../../src/core/Eleva.js"],"names":[],"mappings":"AAOA
|
|
1
|
+
{"version":3,"file":"Eleva.d.ts","sourceRoot":"","sources":["../../src/core/Eleva.js"],"names":[],"mappings":"AAOA;;;;;;;;;;GAUG;AAEH;;;;GAIG;AACH;IACE;;;;;OAKG;IACH,kBAHW,MAAM;;OAwBhB;IApBC,qBAAqB;IACrB,MADW,MAAM,CACD;IAChB,kCAAkC;IAClC;;MAAoB;IACpB,kDAAkD;IAClD;;MAAqB;IACrB,4BAA4B;IAC5B,UADW,KAAK,CAAC,MAAM,CAAC,CACN;IAClB,eAAe;IACf,wBAMC;IACD,yBAAyB;IACzB,mBAAuB;IACvB,iBAA4B;IAC5B,mBAA8B;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,CA2FlC;IAED;;;;;OAKG;IACH,+BAKC;IAED;;;;;;OAMG;IACH,uBAaC;IAED;;;;;;;;OAQG;IACH,sBAYC;IAED;;;;;;;OAOG;IACH,uBAgBC;CACF;;;;;;;UA9P4C,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;;;;;;;;wBAT3B,uBAAuB;yBACtB,wBAAwB"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 🎙️ Emitter
|
|
3
|
-
*
|
|
4
|
-
* Implements a basic publish-subscribe pattern for event handling,
|
|
5
|
-
*
|
|
2
|
+
* @class 🎙️ Emitter
|
|
3
|
+
* @classdesc Robust inter-component communication with event bubbling.
|
|
4
|
+
* Implements a basic publish-subscribe pattern for event handling, allowing components
|
|
5
|
+
* to communicate through custom events.
|
|
6
6
|
*/
|
|
7
7
|
export class Emitter {
|
|
8
8
|
/** @type {Object.<string, Function[]>} */
|
|
@@ -13,21 +13,21 @@ export class Emitter {
|
|
|
13
13
|
* Registers an event handler for the specified event.
|
|
14
14
|
*
|
|
15
15
|
* @param {string} event - The name of the event.
|
|
16
|
-
* @param {
|
|
16
|
+
* @param {function(...any): void} handler - The function to call when the event is emitted.
|
|
17
17
|
*/
|
|
18
|
-
on(event: string, handler:
|
|
18
|
+
on(event: string, handler: (...args: any[]) => void): void;
|
|
19
19
|
/**
|
|
20
20
|
* Removes a previously registered event handler.
|
|
21
21
|
*
|
|
22
22
|
* @param {string} event - The name of the event.
|
|
23
|
-
* @param {
|
|
23
|
+
* @param {function(...any): void} handler - The handler function to remove.
|
|
24
24
|
*/
|
|
25
|
-
off(event: string, handler:
|
|
25
|
+
off(event: string, handler: (...args: any[]) => void): void;
|
|
26
26
|
/**
|
|
27
27
|
* Emits an event, invoking all handlers registered for that event.
|
|
28
28
|
*
|
|
29
29
|
* @param {string} event - The event name.
|
|
30
|
-
* @param {
|
|
30
|
+
* @param {...any} args - Additional arguments to pass to the event handlers.
|
|
31
31
|
*/
|
|
32
32
|
emit(event: string, ...args: any[]): void;
|
|
33
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emitter.d.ts","sourceRoot":"","sources":["../../src/modules/Emitter.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAKI,0CAA0C;IAC1C;;MAAgB;IAGlB;;;;;OAKG;IACH,UAHW,MAAM,
|
|
1
|
+
{"version":3,"file":"Emitter.d.ts","sourceRoot":"","sources":["../../src/modules/Emitter.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IAKI,0CAA0C;IAC1C;;MAAgB;IAGlB;;;;;OAKG;IACH,UAHW,MAAM,WACN,IAAS,IAAM,EAAH,GAAG,EAAA,KAAG,IAAI,QAIhC;IAED;;;;;OAKG;IACH,WAHW,MAAM,WACN,IAAS,IAAM,EAAH,GAAG,EAAA,KAAG,IAAI,QAMhC;IAED;;;;;OAKG;IACH,YAHW,MAAM,WACH,GAAG,EAAA,QAIhB;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 🎨 Renderer
|
|
3
|
-
*
|
|
2
|
+
* @class 🎨 Renderer
|
|
3
|
+
* @classdesc Handles DOM patching, diffing, and attribute updates.
|
|
4
4
|
* Provides methods for efficient DOM updates by diffing the new and old DOM structures
|
|
5
5
|
* and applying only the necessary changes.
|
|
6
6
|
*/
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* ⚡ Signal
|
|
3
|
-
*
|
|
2
|
+
* @class ⚡ Signal
|
|
3
|
+
* @classdesc Fine-grained reactivity.
|
|
4
4
|
* A reactive data holder that notifies registered watchers when its value changes,
|
|
5
|
-
*
|
|
5
|
+
* enabling fine-grained DOM patching rather than full re-renders.
|
|
6
6
|
*/
|
|
7
7
|
export class Signal {
|
|
8
8
|
/**
|
|
@@ -28,9 +28,9 @@ export class Signal {
|
|
|
28
28
|
/**
|
|
29
29
|
* Registers a watcher function that will be called whenever the signal's value changes.
|
|
30
30
|
*
|
|
31
|
-
* @param {
|
|
32
|
-
* @returns {
|
|
31
|
+
* @param {function(any): void} fn - The callback function to invoke on value change.
|
|
32
|
+
* @returns {function(): boolean} A function to unsubscribe the watcher.
|
|
33
33
|
*/
|
|
34
|
-
watch(fn:
|
|
34
|
+
watch(fn: (arg0: any) => void): () => boolean;
|
|
35
35
|
}
|
|
36
36
|
//# sourceMappingURL=Signal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../../src/modules/Signal.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IACE;;;;OAIG;IACH,mBAFW,GAAC,EAKX;IAFC,YAAmB;IACnB,oBAA0B;IAY5B;;;;OAIG;IACH,kBAFW,GAAC,EAOX;IAnBD;;;;OAIG;IACH,aAFa,GAAC,CAIb;IAcD;;;;;OAKG;IACH,
|
|
1
|
+
{"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../../src/modules/Signal.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IACE;;;;OAIG;IACH,mBAFW,GAAC,EAKX;IAFC,YAAmB;IACnB,oBAA0B;IAY5B;;;;OAIG;IACH,kBAFW,GAAC,EAOX;IAnBD;;;;OAIG;IACH,aAFa,GAAC,CAIb;IAcD;;;;;OAKG;IACH,UAHW,CAAS,IAAG,EAAH,GAAG,KAAG,IAAI,GACjB,MAAY,OAAO,CAK/B;CACF"}
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 🔒 TemplateEngine
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* within a given data context.
|
|
2
|
+
* @class 🔒 TemplateEngine
|
|
3
|
+
* @classdesc Secure interpolation & dynamic attribute parsing.
|
|
4
|
+
* Provides methods to parse template strings by replacing interpolation expressions
|
|
5
|
+
* with dynamic data values and to evaluate expressions within a given data context.
|
|
7
6
|
*/
|
|
8
7
|
export class TemplateEngine {
|
|
9
8
|
/**
|
|
10
9
|
* Parses a template string and replaces interpolation expressions with corresponding values.
|
|
11
10
|
*
|
|
12
|
-
* @param {string} template - The template string containing expressions in the format {{ expression }}
|
|
13
|
-
* @param {
|
|
11
|
+
* @param {string} template - The template string containing expressions in the format `{{ expression }}`.
|
|
12
|
+
* @param {Object<string, any>} data - The data object to use for evaluating expressions.
|
|
14
13
|
* @returns {string} The resulting string with evaluated values.
|
|
15
14
|
*/
|
|
16
|
-
static parse(template: string, data:
|
|
15
|
+
static parse(template: string, data: {
|
|
16
|
+
[x: string]: any;
|
|
17
|
+
}): string;
|
|
17
18
|
/**
|
|
18
|
-
* Evaluates
|
|
19
|
+
* Evaluates a JavaScript expression using the provided data context.
|
|
19
20
|
*
|
|
20
21
|
* @param {string} expr - The JavaScript expression to evaluate.
|
|
21
|
-
* @param {
|
|
22
|
-
* @returns {
|
|
22
|
+
* @param {Object<string, any>} data - The data context for evaluating the expression.
|
|
23
|
+
* @returns {any} The result of the evaluated expression, or an empty string if undefined or on error.
|
|
23
24
|
*/
|
|
24
|
-
static evaluate(expr: string, data:
|
|
25
|
+
static evaluate(expr: string, data: {
|
|
26
|
+
[x: string]: any;
|
|
27
|
+
}): any;
|
|
25
28
|
}
|
|
26
29
|
//# sourceMappingURL=TemplateEngine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TemplateEngine.d.ts","sourceRoot":"","sources":["../../src/modules/TemplateEngine.js"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"TemplateEngine.d.ts","sourceRoot":"","sources":["../../src/modules/TemplateEngine.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH;IACE;;;;;;OAMG;IACH,uBAJW,MAAM;;QAEJ,MAAM,CAOlB;IAED;;;;;;OAMG;IACH,sBAJW,MAAM;;QAEJ,GAAG,CAgBf;CACF"}
|