eleva 1.0.0-rc.10 โ 1.0.0-rc.11
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 +161 -65
- package/dist/eleva-plugins.cjs.js +9 -9
- package/dist/eleva-plugins.cjs.js.map +1 -1
- package/dist/eleva-plugins.esm.js +9 -9
- package/dist/eleva-plugins.esm.js.map +1 -1
- package/dist/eleva-plugins.umd.js +9 -9
- package/dist/eleva-plugins.umd.js.map +1 -1
- package/dist/eleva-plugins.umd.min.js +2 -2
- package/dist/eleva-plugins.umd.min.js.map +1 -1
- package/dist/eleva.cjs.js +29 -6
- package/dist/eleva.cjs.js.map +1 -1
- package/dist/eleva.esm.js +29 -6
- package/dist/eleva.esm.js.map +1 -1
- package/dist/eleva.umd.js +29 -6
- 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/dist/plugins/attr.umd.js +3 -2
- package/dist/plugins/attr.umd.js.map +1 -1
- package/dist/plugins/attr.umd.min.js +2 -2
- package/dist/plugins/attr.umd.min.js.map +1 -1
- package/dist/plugins/props.umd.js +3 -2
- package/dist/plugins/props.umd.js.map +1 -1
- package/dist/plugins/props.umd.min.js +2 -2
- package/dist/plugins/props.umd.min.js.map +1 -1
- package/dist/plugins/router.umd.js +6 -5
- package/dist/plugins/router.umd.js.map +1 -1
- package/dist/plugins/router.umd.min.js +2 -2
- package/dist/plugins/router.umd.min.js.map +1 -1
- package/dist/plugins/store.umd.js +4 -3
- package/dist/plugins/store.umd.js.map +1 -1
- package/dist/plugins/store.umd.min.js +2 -2
- package/dist/plugins/store.umd.min.js.map +1 -1
- package/package.json +39 -29
- package/src/core/Eleva.js +31 -11
- package/src/plugins/Attr.js +4 -1
- package/src/plugins/Props.js +4 -1
- package/src/plugins/Router.js +7 -4
- package/src/plugins/Store.js +5 -2
- package/types/core/Eleva.d.ts.map +1 -1
- package/types/plugins/Attr.d.ts +1 -0
- package/types/plugins/Props.d.ts +1 -0
- package/types/plugins/Router.d.ts +3 -3
- package/types/plugins/Router.d.ts.map +1 -1
- package/types/plugins/Store.d.ts +1 -0
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Eleva.js ๐
|
|
2
2
|
|
|
3
|
-
> **Version:** 1.0.0-rc.
|
|
3
|
+
> **Version:** `1.0.0-rc.11` | **Size:** ~6KB min (~2.5KB gzip) | **Dependencies:** Zero | **TypeScript:** Yes
|
|
4
4
|
|
|
5
|
-
Pure JavaScript, Pure Performance, Simply Elegant.
|
|
5
|
+
**Best DX for Building the Best UX** โ Pure JavaScript, Pure Performance, Simply Elegant.
|
|
6
6
|
|
|
7
7
|
[](https://opensource.org/licenses/MIT)
|
|
8
8
|
[](https://github.com/TarekRaafat/eleva)
|
|
@@ -18,7 +18,7 @@ Pure JavaScript, Pure Performance, Simply Elegant.
|
|
|
18
18
|
<br>
|
|
19
19
|
|
|
20
20
|
<p align="center">
|
|
21
|
-
<a href="https://tarekraafat.github.io/eleva/"><img src="./docs/imgs/eleva.js Full Logo.png" alt="
|
|
21
|
+
<a href="https://tarekraafat.github.io/eleva/"><img src="./docs/imgs/eleva.js Full Logo.png" alt="Eleva.js - Lightweight JavaScript Framework Logo" width="50%"></a>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
24
|
<p align="center">
|
|
@@ -28,7 +28,7 @@ Pure JavaScript, Pure Performance, Simply Elegant.
|
|
|
28
28
|
</p>
|
|
29
29
|
|
|
30
30
|
<p align="center">
|
|
31
|
-
<em>Eleva
|
|
31
|
+
<em>Eleva is proudly supported by Canonical - the company behind Ubuntu.</em>
|
|
32
32
|
</p>
|
|
33
33
|
|
|
34
34
|
<p align="center">
|
|
@@ -39,12 +39,12 @@ Pure JavaScript, Pure Performance, Simply Elegant.
|
|
|
39
39
|
<br>
|
|
40
40
|
<br>
|
|
41
41
|
|
|
42
|
-
**A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.**
|
|
43
|
-
|
|
42
|
+
**A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.**
|
|
43
|
+
_Designed for the best Developer Experience (DX) to help you build exceptional User Experiences (UX). Built with love for native JavaScript and a minimal core that can be extended through a powerful plugin system โ because sometimes, less really is more!_ ๐
|
|
44
44
|
|
|
45
|
-
> **Stability Notice**: This is `v1.0.0-rc.
|
|
45
|
+
> **Stability Notice**: This is `v1.0.0-rc.11` - The core functionality is stable. Seeking community feedback before the final v1.0.0 release.
|
|
46
46
|
|
|
47
|
-
**Version:** `1.0.0-rc.
|
|
47
|
+
**Version:** `1.0.0-rc.11`
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
@@ -52,14 +52,30 @@ Welcome to Eleva! This is my humble, experimental playground for a fresh approac
|
|
|
52
52
|
|
|
53
53
|
---
|
|
54
54
|
|
|
55
|
+
## What is Eleva.js?
|
|
56
|
+
|
|
57
|
+
**Eleva** is a minimalist, lightweight (6KB), pure vanilla JavaScript frontend framework crafted for **exceptional Developer Experience (DX)**. When developers enjoy building, users enjoy using โ Eleva makes it effortless to create beautiful, responsive, and performant User Interfaces (UI) without the complexity, bundle size, or build tool requirements of traditional frameworks.
|
|
58
|
+
|
|
59
|
+
Unlike React, Vue, or Angular, Eleva:
|
|
60
|
+
- **Has zero dependencies** - No node_modules bloat
|
|
61
|
+
- **Requires no build step** - Works directly in browsers via CDN
|
|
62
|
+
- **Uses real DOM** - No virtual DOM overhead for simple apps
|
|
63
|
+
- **Provides signal-based reactivity** - Fine-grained updates like Solid.js
|
|
64
|
+
- **Includes TypeScript support** - Built-in type declarations
|
|
65
|
+
|
|
66
|
+
Eleva is ideal for developers building lightweight web applications, prototypes, micro-frontends, or anyone seeking a simpler alternative to React, Vue, or Angular.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
55
70
|
## Table of Contents
|
|
56
71
|
|
|
57
|
-
- [
|
|
72
|
+
- [Eleva.js ๐](#elevajs-)
|
|
73
|
+
- [What is Eleva.js?](#what-is-elevajs)
|
|
58
74
|
- [Table of Contents](#table-of-contents)
|
|
59
75
|
- [Quick Reference](#quick-reference)
|
|
60
76
|
- [Introduction](#introduction)
|
|
61
77
|
- [Design Philosophy](#design-philosophy)
|
|
62
|
-
- [
|
|
78
|
+
- [Best-in-Class Developer Experience (DX)](#best-in-class-developer-experience-dx)
|
|
63
79
|
- [Features](#features)
|
|
64
80
|
- [When to Use Eleva](#when-to-use-eleva)
|
|
65
81
|
- [Version Strategy](#version-strategy)
|
|
@@ -67,6 +83,7 @@ Welcome to Eleva! This is my humble, experimental playground for a fresh approac
|
|
|
67
83
|
- [Performance](#performance)
|
|
68
84
|
- [Performance Benchmarks](#performance-benchmarks)
|
|
69
85
|
- [Eleva vs. Popular Frameworks](#eleva-vs-popular-frameworks)
|
|
86
|
+
- [Browser Support](#browser-support)
|
|
70
87
|
- [Installation](#installation)
|
|
71
88
|
- [Usage](#usage)
|
|
72
89
|
- [ES Module Example](#es-module-example)
|
|
@@ -79,10 +96,10 @@ Welcome to Eleva! This is my humble, experimental playground for a fresh approac
|
|
|
79
96
|
- [Eleva (Core)](#eleva-core)
|
|
80
97
|
- [Plugins](#plugins)
|
|
81
98
|
- [Core Framework Only (Lightweight)](#core-framework-only-lightweight)
|
|
82
|
-
- [
|
|
83
|
-
- [
|
|
84
|
-
- [
|
|
85
|
-
- [
|
|
99
|
+
- [Attr Plugin](#attr-plugin)
|
|
100
|
+
- [Router Plugin](#router-plugin)
|
|
101
|
+
- [Props Plugin](#props-plugin)
|
|
102
|
+
- [Store Plugin](#store-plugin)
|
|
86
103
|
- [Development](#development)
|
|
87
104
|
- [Testing](#testing)
|
|
88
105
|
- [Contributing](#contributing)
|
|
@@ -121,12 +138,14 @@ app.mount(document.getElementById("app"), "Counter");
|
|
|
121
138
|
|
|
122
139
|
### Template Syntax
|
|
123
140
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
|
127
|
-
|
|
128
|
-
|
|
|
129
|
-
|
|
|
141
|
+
> **Quick Rule:** `${}` needs `ctx.` โ `{{ }}` and `@events` don't.
|
|
142
|
+
|
|
143
|
+
| Syntax | Use | `ctx.`? |
|
|
144
|
+
|--------|-----|:-------:|
|
|
145
|
+
| `${expr}` | Static value | โ |
|
|
146
|
+
| `{{ expr }}` | Reactive value | โ |
|
|
147
|
+
| `@click` | Event handler | โ |
|
|
148
|
+
| `:prop` | Pass to child | โ |
|
|
130
149
|
|
|
131
150
|
---
|
|
132
151
|
|
|
@@ -161,16 +180,27 @@ This unopinionated approach makes Eleva versatile and ideal for developers who w
|
|
|
161
180
|
|
|
162
181
|
---
|
|
163
182
|
|
|
164
|
-
##
|
|
183
|
+
## Best-in-Class Developer Experience (DX)
|
|
165
184
|
|
|
166
|
-
Eleva is built
|
|
185
|
+
Eleva is built on a simple principle: **great DX leads to great UX**. When developers have intuitive tools, they build better interfaces. Every aspect of Eleva's design prioritizes your productivity and enjoyment.
|
|
186
|
+
|
|
187
|
+
**Why Eleva's DX Stands Out:**
|
|
188
|
+
|
|
189
|
+
| DX Feature | How It Helps You Build Better UX |
|
|
190
|
+
|------------|----------------------------------|
|
|
191
|
+
| **Zero Config** | Start building immediately โ no webpack, no bundlers, no setup |
|
|
192
|
+
| **Intuitive API** | Learn in minutes, master in hours โ more time for polishing UI |
|
|
193
|
+
| **Pure JavaScript** | No JSX, no compilation โ what you write is what runs |
|
|
194
|
+
| **Instant Feedback** | Signal-based reactivity shows changes immediately |
|
|
195
|
+
| **TypeScript Built-in** | Full autocomplete and type safety out of the box |
|
|
196
|
+
| **Tiny Bundle** | ~2.5KB gzipped means instant page loads for your users |
|
|
167
197
|
|
|
168
198
|
- **๐จ Craftsmanship:** Every line of code is written with care, keeping the framework lightweight, efficient, and easy to understand.
|
|
169
|
-
- **๐ ๏ธ Developer-
|
|
170
|
-
- **๐
|
|
171
|
-
- **๐๏ธ
|
|
199
|
+
- **๐ ๏ธ Developer-First:** Intuitive API and minimal core mean you spend less time wrestling with the framework and more time perfecting your UI.
|
|
200
|
+
- **๐ No Magic:** Pure vanilla JavaScript with no hidden abstractions โ debug easily, ship confidently.
|
|
201
|
+
- **๐๏ธ Scales With You:** From prototype to production, Eleva grows with your project without added complexity.
|
|
172
202
|
|
|
173
|
-
|
|
203
|
+
> _"The best UX comes from developers who love their tools."_ โ Eleva's DX philosophy
|
|
174
204
|
|
|
175
205
|
---
|
|
176
206
|
|
|
@@ -184,7 +214,7 @@ This unique, developer-first approach makes Eleva a standout choice for building
|
|
|
184
214
|
- **๐ Lifecycle Hooks:** Complete lifecycle management with before/after mount and update hooks
|
|
185
215
|
- **๐งน Automatic Cleanup:** Proper cleanup of resources, watchers, and child components on unmount
|
|
186
216
|
- **๐ Plugin System:** Extensible architecture with a simple plugin API
|
|
187
|
-
- **๐ฏ Built-in Plugins:**
|
|
217
|
+
- **๐ฏ Built-in Plugins:** Attr for advanced attributes, Props for complex data handling, Router for client-side routing, and Store for reactive state management
|
|
188
218
|
- **๐ฆ UMD & ES Module Builds:** Supports modern build tools and browser environments
|
|
189
219
|
- **๐ค Friendly API:** A gentle learning curve for both beginners and seasoned developers
|
|
190
220
|
- **๐ Tiny Footprint & TypeScript Support:** Approximately ~6 KB minified with built-in TypeScript declarations
|
|
@@ -201,9 +231,9 @@ Eleva is ideal for developers seeking a lightweight, flexible, and high-performa
|
|
|
201
231
|
- **๐ฏ Developer-Friendly:** Stick to pure vanilla JavaScript with familiar syntax and built-in TypeScript support.
|
|
202
232
|
- **๐งช Rapid Prototyping:** Quickly prototype ideas with a minimal and extendable framework.
|
|
203
233
|
- **๐ Extensible:** Easily add features like routing or state management through plugins.
|
|
204
|
-
- **๐ Built-in Routing:** Advanced client-side routing with navigation guards and reactive state via
|
|
205
|
-
- **๐ฏ Advanced Attributes:** Sophisticated attribute handling with ARIA support via
|
|
206
|
-
- **๐ช Reactive State Management:** Centralized, reactive data store with persistence and namespacing via
|
|
234
|
+
- **๐ Built-in Routing:** Advanced client-side routing with navigation guards and reactive state via Router plugin.
|
|
235
|
+
- **๐ฏ Advanced Attributes:** Sophisticated attribute handling with ARIA support via Attr plugin.
|
|
236
|
+
- **๐ช Reactive State Management:** Centralized, reactive data store with persistence and namespacing via Store plugin.
|
|
207
237
|
- **๐ฆ Module Format Flexibility:** Choose from ESM, CommonJS, or UMD formats based on your project's needs.
|
|
208
238
|
|
|
209
239
|
---
|
|
@@ -212,7 +242,7 @@ Eleva is ideal for developers seeking a lightweight, flexible, and high-performa
|
|
|
212
242
|
|
|
213
243
|
I believe in clear versioning that reflects the maturity of the project:
|
|
214
244
|
|
|
215
|
-
- **Pre-release Versions (RC):** Release candidate versions like `1.0.0-rc.
|
|
245
|
+
- **Pre-release Versions (RC):** Release candidate versions like `1.0.0-rc.11` indicate the API is stable but still gathering community feedback before the final release.
|
|
216
246
|
- **Semantic Versioning:** Once stable, I'll follow semantic versioning strictly to clearly communicate any breaking changes.
|
|
217
247
|
|
|
218
248
|
---
|
|
@@ -232,7 +262,7 @@ I follow [Semantic Versioning (SemVer)](https://semver.org/):
|
|
|
232
262
|
|
|
233
263
|
Eleva is crafted for performance:
|
|
234
264
|
|
|
235
|
-
- **Lightweight:** Approximately ~6 KB minified and ~2 KB gzipped.
|
|
265
|
+
- **Lightweight:** Approximately ~6 KB minified and ~2.5 KB gzipped.
|
|
236
266
|
- **Efficient Reactivity:** Signal-based updates ensure only necessary DOM parts are updated.
|
|
237
267
|
- **Optimized Diffing:** Renderer efficiently patches changes without the overhead of a virtual DOM.
|
|
238
268
|
- **No Bloat:** Pure vanilla JavaScript with zero dependencies keeps your project nimble.
|
|
@@ -243,23 +273,50 @@ Eleva is crafted for performance:
|
|
|
243
273
|
|
|
244
274
|
## Performance Benchmarks
|
|
245
275
|
|
|
246
|
-
|
|
276
|
+
Benchmarks using [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/) methodology (1,000 rows):
|
|
277
|
+
|
|
278
|
+
| **Framework** | **Bundle Size (min+gzip)** | **Create 1K Rows** (ms) | **Partial Update** (ms) | **Memory** (MB) |
|
|
279
|
+
| ----------------------------- | -------------------------- | ----------------------- | ----------------------- | --------------- |
|
|
280
|
+
| **Eleva** (Direct DOM) | **~2.5 KB** | **~37** | ~97* | ~15 |
|
|
281
|
+
| **React 19** (Virtual DOM) | ~44 KB | 40-70 | 10-20 | 2-5 |
|
|
282
|
+
| **Vue 3.5** (Reactive) | ~35 KB | 25-45 | 5-15 | 2-4 |
|
|
283
|
+
| **Angular 19** (Signals) | ~90 KB | 50-80 | 15-25 | 3-6 |
|
|
284
|
+
|
|
285
|
+
_*Eleva uses DOM diffing & patching, but templates generate HTML strings that require parsing. For large frequently-updating lists, use granular components or the `key` attribute for optimal diffing._
|
|
247
286
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
| **Angular** (Two-way Binding) | 62 | 5.26 | 0.021 | 0.25 | 16.88 (Slowest) |
|
|
287
|
+
**Eleva's Strengths:**
|
|
288
|
+
- **Smallest bundle size** (~2.5 KB vs 35-90 KB)
|
|
289
|
+
- **Competitive initial render** (~37ms for 1K rows)
|
|
290
|
+
- **Zero dependencies** and minimal runtime overhead
|
|
291
|
+
- **Direct DOM diffing** without virtual DOM overhead
|
|
254
292
|
|
|
255
|
-
|
|
293
|
+
**Performance Tips:**
|
|
294
|
+
- Use `key` attribute on list items for optimal diffing
|
|
295
|
+
- Split large lists into smaller components
|
|
296
|
+
- Eleva excels at initial renders and small-to-medium updates
|
|
256
297
|
|
|
257
|
-
>
|
|
298
|
+
> ๐ก **Run benchmarks yourself:** `bun run test:benchmark`
|
|
299
|
+
|
|
300
|
+
> โ ๏ธ **Disclaimer:** Benchmarks vary by application complexity, browser, and hardware. Eleva results from internal test suite using Bun runtime. Other framework data from [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/).
|
|
258
301
|
|
|
259
302
|
---
|
|
260
303
|
|
|
261
304
|
## Eleva vs. Popular Frameworks
|
|
262
305
|
|
|
306
|
+
How does Eleva compare to popular JavaScript frameworks like React, Vue, Svelte, and Angular?
|
|
307
|
+
|
|
308
|
+
| Feature | Eleva | React | Vue | Svelte | Angular |
|
|
309
|
+
|---------|----------|-------|-----|--------|---------|
|
|
310
|
+
| **Bundle Size** | ~6KB | ~42KB | ~34KB | ~2.5KB* | ~130KB |
|
|
311
|
+
| **Dependencies** | 0 | 3+ | 0 | 0 | 10+ |
|
|
312
|
+
| **Virtual DOM** | No | Yes | Yes | No | No |
|
|
313
|
+
| **Reactivity** | Signals | useState/Hooks | Refs/Reactive | Compiler | Zone.js |
|
|
314
|
+
| **TypeScript** | Built-in | Optional | Optional | Built-in | Built-in |
|
|
315
|
+
| **Build Required** | No | Yes | Optional | Yes | Yes |
|
|
316
|
+
| **Learning Curve** | Low | Medium | Medium | Low | High |
|
|
317
|
+
|
|
318
|
+
_*Svelte compiles away, so runtime is minimal but build step is required._
|
|
319
|
+
|
|
263
320
|
Eleva offers a refreshing alternative to frameworks like React, Vue, and Angular:
|
|
264
321
|
|
|
265
322
|
- **Simplicity:** No virtual DOM, JSX, or complex state management-just plain JavaScript.
|
|
@@ -271,6 +328,26 @@ _Note:_ Eleva isn't trying to replace these giants but provides a lightweight op
|
|
|
271
328
|
|
|
272
329
|
---
|
|
273
330
|
|
|
331
|
+
## Browser Support
|
|
332
|
+
|
|
333
|
+
Eleva targets **modern evergreen browsers** and requires no polyfills.
|
|
334
|
+
|
|
335
|
+
| Browser | Minimum Version |
|
|
336
|
+
|---------|-----------------|
|
|
337
|
+
| Chrome | 71+ |
|
|
338
|
+
| Firefox | 69+ |
|
|
339
|
+
| Safari | 12.1+ |
|
|
340
|
+
| Edge | 79+ (Chromium) |
|
|
341
|
+
| iOS Safari | 12.2+ |
|
|
342
|
+
|
|
343
|
+
**Not Supported:** Internet Explorer, Legacy Edge (< 79)
|
|
344
|
+
|
|
345
|
+
**Why?** Eleva uses modern JavaScript features (`queueMicrotask`, ES6 Classes, async/await) to maintain its tiny footprint. These browsers cover **96%+ of global web traffic**.
|
|
346
|
+
|
|
347
|
+
> ๐ก For legacy browser support, use Babel with appropriate polyfills.
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
274
351
|
## Installation
|
|
275
352
|
|
|
276
353
|
Eleva is available on npm. Try it out and share your thoughts!
|
|
@@ -318,10 +395,10 @@ app.component("HelloWorld", {
|
|
|
318
395
|
}
|
|
319
396
|
};
|
|
320
397
|
},
|
|
321
|
-
template: (
|
|
398
|
+
template: (ctx) => `
|
|
322
399
|
<div>
|
|
323
400
|
<h1>Hello, Eleva! ๐</h1>
|
|
324
|
-
<p>Count: ${count.value}</p>
|
|
401
|
+
<p>Count: ${ctx.count.value}</p>
|
|
325
402
|
<button @click="() => count.value++">Increment</button>
|
|
326
403
|
</div>
|
|
327
404
|
`
|
|
@@ -359,10 +436,10 @@ Include Eleva via a script tag and use the global variable:
|
|
|
359
436
|
const count = signal(0);
|
|
360
437
|
return { count };
|
|
361
438
|
},
|
|
362
|
-
template: (
|
|
439
|
+
template: (ctx) => `
|
|
363
440
|
<div>
|
|
364
441
|
<h1>Hello, Eleva! ๐</h1>
|
|
365
|
-
<p>Count: ${count.value}</p>
|
|
442
|
+
<p>Count: ${ctx.count.value}</p>
|
|
366
443
|
<button @click="() => count.value++">Increment</button>
|
|
367
444
|
</div>
|
|
368
445
|
`,
|
|
@@ -428,6 +505,15 @@ Interactive Demo: [CodePen](https://codepen.io/tarekraafat/pen/jEOyzYN?editors=1
|
|
|
428
505
|
|
|
429
506
|
Eleva's plugin system allows you to extend functionality as needed. Plugins are **separately bundled** from the core framework, ensuring optimal tree-shaking and minimal bundle sizes.
|
|
430
507
|
|
|
508
|
+
**Plugin Types:**
|
|
509
|
+
|
|
510
|
+
| Type | Source | Installation |
|
|
511
|
+
|------|--------|--------------|
|
|
512
|
+
| **Core Plugins** | Bundled with Eleva | `import { X } from "eleva/plugins"` |
|
|
513
|
+
| **External Plugins** | Community/Ecosystem | `npm install eleva-plugin-x` |
|
|
514
|
+
|
|
515
|
+
> **Core plugins** (Attr, Props, Router, Store) are official, tested, and documented. **External plugins** are community-created and installed separately. See [Plugin Documentation](docs/plugins/index.md) for details.
|
|
516
|
+
|
|
431
517
|
#### Core Framework Only (Lightweight)
|
|
432
518
|
|
|
433
519
|
```javascript
|
|
@@ -437,7 +523,7 @@ const app = new Eleva("myApp");
|
|
|
437
523
|
// Core framework only - ~6KB minified
|
|
438
524
|
```
|
|
439
525
|
|
|
440
|
-
####
|
|
526
|
+
#### Attr Plugin
|
|
441
527
|
|
|
442
528
|
Advanced attribute handling for ARIA, data attributes, boolean properties, and dynamic property detection:
|
|
443
529
|
|
|
@@ -470,7 +556,7 @@ app.component("myComponent", {
|
|
|
470
556
|
|
|
471
557
|
๐ **[Full Attr Documentation โ](docs/plugins/attr.md)** - Comprehensive guide with ARIA attributes, data attributes, boolean handling, and dynamic properties.
|
|
472
558
|
|
|
473
|
-
####
|
|
559
|
+
#### Router Plugin
|
|
474
560
|
|
|
475
561
|
๐ **Advanced client-side routing** with multiple modes, navigation guards, reactive state, and component resolution:
|
|
476
562
|
|
|
@@ -531,7 +617,7 @@ router.navigate('/users/123', { replace: true });
|
|
|
531
617
|
|
|
532
618
|
๐ **[Full Router Documentation โ](docs/plugins/router.md)** - Comprehensive guide with 13 events, 7 reactive signals, navigation guards, scroll management, and more.
|
|
533
619
|
|
|
534
|
-
####
|
|
620
|
+
#### Props Plugin
|
|
535
621
|
|
|
536
622
|
๐ฏ **Advanced props handling** with automatic type detection, parsing, and reactivity for complex data structures:
|
|
537
623
|
|
|
@@ -579,7 +665,7 @@ app.component("UserInfo", {
|
|
|
579
665
|
|
|
580
666
|
๐ **[Full Props Documentation โ](docs/plugins/props.md)** - Comprehensive guide with type parsing, reactive props, signal linking, complex data structures, and error handling.
|
|
581
667
|
|
|
582
|
-
####
|
|
668
|
+
#### Store Plugin
|
|
583
669
|
|
|
584
670
|
๐ช **Reactive state management** with centralized data store, persistence, namespacing, and cross-component reactive updates:
|
|
585
671
|
|
|
@@ -706,17 +792,17 @@ app.dispatch("increment"); // Dispatch actions globally
|
|
|
706
792
|
|
|
707
793
|
**Bundle Sizes:**
|
|
708
794
|
- Core framework only: ~6KB (minified)
|
|
709
|
-
- Core +
|
|
710
|
-
- Core +
|
|
711
|
-
- Core +
|
|
712
|
-
- Core +
|
|
795
|
+
- Core + Attr: ~8KB (minified)
|
|
796
|
+
- Core + Props: ~10KB (minified)
|
|
797
|
+
- Core + Router: ~21KB (minified)
|
|
798
|
+
- Core + Store: ~12KB (minified)
|
|
713
799
|
- Core + All plugins: ~25KB (minified)
|
|
714
800
|
|
|
715
801
|
**Individual Plugin Sizes:**
|
|
716
|
-
-
|
|
717
|
-
-
|
|
718
|
-
-
|
|
719
|
-
-
|
|
802
|
+
- Attr: ~2.4KB (minified)
|
|
803
|
+
- Props: ~4.2KB (minified)
|
|
804
|
+
- Router: ~15KB (minified)
|
|
805
|
+
- Store: ~6KB (minified)
|
|
720
806
|
|
|
721
807
|
**Available Plugin Formats:**
|
|
722
808
|
|
|
@@ -725,11 +811,11 @@ app.dispatch("increment"); // Dispatch actions globally
|
|
|
725
811
|
- CJS: `const { Attr, Props, Router, Store } = require('eleva/plugins')`
|
|
726
812
|
|
|
727
813
|
**For CDN (Individual Plugins - Smaller Bundle Size):**
|
|
728
|
-
- UMD: `<script src="https://
|
|
729
|
-
- UMD: `<script src="https://
|
|
730
|
-
- UMD: `<script src="https://
|
|
731
|
-
- UMD: `<script src="https://
|
|
732
|
-
- UMD: `<script src="https://
|
|
814
|
+
- UMD: `<script src="https://cdn.jsdelivr.net/npm/eleva@latest/dist/eleva.umd.min.js"></script>`
|
|
815
|
+
- UMD: `<script src="https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/attr.umd.min.js"></script>`
|
|
816
|
+
- UMD: `<script src="https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/props.umd.min.js"></script>`
|
|
817
|
+
- UMD: `<script src="https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/router.umd.min.js"></script>`
|
|
818
|
+
- UMD: `<script src="https://cdn.jsdelivr.net/npm/eleva@latest/dist/plugins/store.umd.min.js"></script>`
|
|
733
819
|
|
|
734
820
|
**Individual Plugin Imports (Best for Tree-Shaking):**
|
|
735
821
|
- ESM: `import { Attr } from 'eleva/plugins/attr'`
|
|
@@ -791,10 +877,20 @@ I welcome developers to dive in and experiment with Eleva! Here's how to get sta
|
|
|
791
877
|
|
|
792
878
|
## Testing
|
|
793
879
|
|
|
794
|
-
|
|
880
|
+
Eleva has a comprehensive test suite with **100% line coverage**:
|
|
881
|
+
|
|
882
|
+
| Metric | Value |
|
|
883
|
+
|--------|-------|
|
|
884
|
+
| **Total Tests** | 273 |
|
|
885
|
+
| **Line Coverage** | 100% |
|
|
886
|
+
| **Test Runner** | Bun |
|
|
887
|
+
|
|
888
|
+
Run the test suite:
|
|
795
889
|
|
|
796
890
|
```bash
|
|
797
|
-
|
|
891
|
+
bun test # Run all tests
|
|
892
|
+
bun test:coverage # Run with coverage report
|
|
893
|
+
bun test:benchmark # Run performance benchmarks
|
|
798
894
|
```
|
|
799
895
|
|
|
800
896
|
Contributions to tests are very welcome! ๐งช
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Eleva Plugins v1.0.0-rc.
|
|
1
|
+
/*! Eleva Plugins v1.0.0-rc.11 | MIT License | https://elevajs.com */
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -47,7 +47,7 @@ const AttrPlugin = {
|
|
|
47
47
|
* Plugin version
|
|
48
48
|
* @type {string}
|
|
49
49
|
*/
|
|
50
|
-
version: "1.0.0-rc.
|
|
50
|
+
version: "1.0.0-rc.11",
|
|
51
51
|
/**
|
|
52
52
|
* Plugin description
|
|
53
53
|
* @type {string}
|
|
@@ -587,7 +587,7 @@ const CoreErrorHandler = {
|
|
|
587
587
|
|
|
588
588
|
/**
|
|
589
589
|
* @class Router
|
|
590
|
-
* @classdesc A powerful, reactive, and flexible Router Plugin for Eleva.
|
|
590
|
+
* @classdesc A powerful, reactive, and flexible Router Plugin for Eleva.
|
|
591
591
|
* This class manages all routing logic, including state, navigation, and rendering.
|
|
592
592
|
*
|
|
593
593
|
* ## Features
|
|
@@ -1853,7 +1853,7 @@ class Router {
|
|
|
1853
1853
|
|
|
1854
1854
|
/**
|
|
1855
1855
|
* @class ๐ RouterPlugin
|
|
1856
|
-
* @classdesc A powerful, reactive, and flexible Router Plugin for Eleva
|
|
1856
|
+
* @classdesc A powerful, reactive, and flexible Router Plugin for Eleva applications.
|
|
1857
1857
|
* This plugin provides comprehensive client-side routing functionality including:
|
|
1858
1858
|
* - Multiple routing modes (hash, history, query)
|
|
1859
1859
|
* - Navigation guards and lifecycle hooks
|
|
@@ -1893,7 +1893,7 @@ const RouterPlugin = {
|
|
|
1893
1893
|
* Plugin version
|
|
1894
1894
|
* @type {string}
|
|
1895
1895
|
*/
|
|
1896
|
-
version: "1.0.0-rc.
|
|
1896
|
+
version: "1.0.0-rc.11",
|
|
1897
1897
|
/**
|
|
1898
1898
|
* Plugin description
|
|
1899
1899
|
* @type {string}
|
|
@@ -1915,7 +1915,7 @@ const RouterPlugin = {
|
|
|
1915
1915
|
*
|
|
1916
1916
|
* @example
|
|
1917
1917
|
* // main.js
|
|
1918
|
-
* import Eleva from '
|
|
1918
|
+
* import Eleva from 'eleva';
|
|
1919
1919
|
* import { RouterPlugin } from './plugins/RouterPlugin.js';
|
|
1920
1920
|
*
|
|
1921
1921
|
* const app = new Eleva('myApp');
|
|
@@ -2245,7 +2245,7 @@ const PropsPlugin = {
|
|
|
2245
2245
|
* Plugin version
|
|
2246
2246
|
* @type {string}
|
|
2247
2247
|
*/
|
|
2248
|
-
version: "1.0.0-rc.
|
|
2248
|
+
version: "1.0.0-rc.11",
|
|
2249
2249
|
/**
|
|
2250
2250
|
* Plugin description
|
|
2251
2251
|
* @type {string}
|
|
@@ -2719,7 +2719,7 @@ const PropsPlugin = {
|
|
|
2719
2719
|
|
|
2720
2720
|
/**
|
|
2721
2721
|
* @class ๐ช StorePlugin
|
|
2722
|
-
* @classdesc A powerful reactive state management plugin for Eleva
|
|
2722
|
+
* @classdesc A powerful reactive state management plugin for Eleva that enables sharing
|
|
2723
2723
|
* reactive data across the entire application. The Store plugin provides a centralized,
|
|
2724
2724
|
* reactive data store that can be accessed from any component's setup function.
|
|
2725
2725
|
*
|
|
@@ -2782,7 +2782,7 @@ const StorePlugin = {
|
|
|
2782
2782
|
* Plugin version
|
|
2783
2783
|
* @type {string}
|
|
2784
2784
|
*/
|
|
2785
|
-
version: "1.0.0-rc.
|
|
2785
|
+
version: "1.0.0-rc.11",
|
|
2786
2786
|
/**
|
|
2787
2787
|
* Plugin description
|
|
2788
2788
|
* @type {string}
|