elit 1.0.0-test → 1.1.0
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/LICENSE +21 -0
- package/README.md +388 -21
- package/dist/index.d.mts +130 -1
- package/dist/index.d.ts +130 -1
- package/dist/index.global.js +35 -2064
- package/dist/index.js +35 -2266
- package/dist/index.mjs +34 -2038
- package/package.json +14 -7
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Elit
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,52 +1,101 @@
|
|
|
1
1
|
# Elit
|
|
2
2
|
|
|
3
|
-
A lightweight, zero-dependency library for building reactive web applications with direct DOM manipulation.
|
|
3
|
+
⚡ A lightweight, zero-dependency library for building reactive web applications with direct DOM manipulation.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/elit)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://bundlephobia.com/package/elit)
|
|
8
|
+
|
|
9
|
+
> **Quick Links:** [Installation](#installation) | [Features](#features) | [Quick Start](#quick-start) | [API](#api) | [Examples](#examples) | [@elit/server](./server/README.md)
|
|
7
10
|
|
|
8
11
|
## Why Elit?
|
|
9
12
|
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
13
|
+
- **🎯 Tiny Bundle Size**: Only ~10KB gzipped (30KB minified) - no framework bloat
|
|
14
|
+
- **📦 Zero Dependencies**: Pure TypeScript, no external dependencies
|
|
15
|
+
- **⚡ Lightning Fast**: Direct DOM manipulation - no virtual DOM overhead
|
|
16
|
+
- **🔷 TypeScript First**: Full type safety and IntelliSense out of the box
|
|
17
|
+
- **🔄 Reactive State**: Simple but powerful reactive state management
|
|
18
|
+
- **🌲 Tree-Shakeable**: Import only what you need for optimal bundle size
|
|
19
|
+
- **🚀 Modern Features**: Router, SSR, virtual scrolling, CSS-in-JS, and more
|
|
20
|
+
- **🎨 Developer Experience**: Clean, intuitive API with excellent tooling support
|
|
16
21
|
|
|
17
22
|
## Installation
|
|
18
23
|
|
|
19
24
|
```bash
|
|
20
25
|
npm install elit
|
|
26
|
+
|
|
27
|
+
# Optional: Install dev server with HMR
|
|
28
|
+
npm install --save-dev @elit/server
|
|
21
29
|
```
|
|
22
30
|
|
|
23
31
|
## Features
|
|
24
32
|
|
|
25
|
-
|
|
33
|
+
### Core Library (elit)
|
|
34
|
+
|
|
35
|
+
- 🎯 **Ultra Lightweight**: Just 30KB minified, ~10KB gzipped - optimized for performance
|
|
26
36
|
- ⚡ **Reactive State**: Built-in reactive state management with `createState`
|
|
27
37
|
- 🔄 **Computed Values**: Automatic dependency tracking with `computed`
|
|
28
|
-
-
|
|
38
|
+
- 🌐 **Shared State**: Real-time state sync with `@elit/server` (optional)
|
|
39
|
+
- 🎨 **CSS-in-JS**: Type-safe styling with `CreateStyle` - full CSS features support
|
|
29
40
|
- 🛣️ **Client-Side Router**: Hash and history mode routing with dynamic parameters
|
|
30
|
-
- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently
|
|
31
|
-
- 🖥️ **SSR Support**:
|
|
32
|
-
- 🎭 **SVG & MathML**:
|
|
33
|
-
- 🔧 **Utilities**: Throttle, debounce, and
|
|
34
|
-
- 📦 **Tree-
|
|
41
|
+
- 📱 **Virtual Scrolling**: Handle 100k+ items efficiently with built-in virtual list
|
|
42
|
+
- 🖥️ **SSR Support**: Full server-side rendering capabilities
|
|
43
|
+
- 🎭 **SVG & MathML**: Complete support for SVG and MathML elements (100+ elements)
|
|
44
|
+
- 🔧 **Performance Utilities**: Throttle, debounce, batch rendering, and chunked rendering
|
|
45
|
+
- 📦 **Tree-Shakeable**: Import only what you need - excellent for bundle optimization
|
|
46
|
+
- 🎮 **DOM Utilities**: Convenient helper functions for common DOM operations
|
|
47
|
+
- 🔌 **No Build Required**: Works directly in browsers via CDN
|
|
48
|
+
|
|
49
|
+
### Development Server (@elit/server)
|
|
50
|
+
|
|
51
|
+
- ⚡ **Hot Module Replacement (HMR)**: Instant updates without page refresh
|
|
52
|
+
- 🌐 **REST API Router**: Built-in routing system with regex parameters
|
|
53
|
+
- 🔧 **Middleware Stack**: CORS, logging, error handling, rate limiting, compression, security headers
|
|
54
|
+
- 🔄 **Shared State Sync**: Real-time WebSocket state synchronization
|
|
55
|
+
- 📊 **WebSocket Support**: Built-in WebSocket server for real-time features
|
|
56
|
+
- 📁 **Static File Server**: Serves your application files with MIME type detection
|
|
57
|
+
- 🎯 **Zero Config**: Works out of the box with sensible defaults
|
|
58
|
+
- 🛠️ **CLI Tool**: Simple command-line interface (`elit-dev`)
|
|
59
|
+
- 📦 **Lightweight**: Minimal dependencies (chokidar, ws, mime-types)
|
|
35
60
|
|
|
36
61
|
## Quick Start
|
|
37
62
|
|
|
63
|
+
### Development Server with HMR
|
|
64
|
+
|
|
65
|
+
Get started instantly with hot module replacement:
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
# Install Elit and dev server
|
|
69
|
+
npm install elit
|
|
70
|
+
npm install --save-dev @elit/server
|
|
71
|
+
|
|
72
|
+
# Start dev server
|
|
73
|
+
npx elit-dev
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Your app will automatically reload when you make changes!
|
|
77
|
+
|
|
78
|
+
### NPM Installation
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
npm install elit
|
|
82
|
+
```
|
|
83
|
+
|
|
38
84
|
```typescript
|
|
39
85
|
import { div, h1, p, button, createState, reactive, domNode } from 'elit';
|
|
40
86
|
|
|
41
87
|
// Create reactive state
|
|
42
88
|
const count = createState(0);
|
|
43
89
|
|
|
44
|
-
// Create elements
|
|
90
|
+
// Create elements with reactive updates
|
|
45
91
|
const app = div({ className: 'app' },
|
|
46
|
-
h1('Hello Elit!'),
|
|
47
|
-
p('A lightweight DOM library'),
|
|
92
|
+
h1('Hello Elit! 👋'),
|
|
93
|
+
p('A lightweight, reactive DOM library'),
|
|
48
94
|
reactive(count, (value) =>
|
|
49
|
-
button({
|
|
95
|
+
button({
|
|
96
|
+
onclick: () => count.value++,
|
|
97
|
+
className: 'btn-primary'
|
|
98
|
+
}, `Count: ${value}`)
|
|
50
99
|
)
|
|
51
100
|
);
|
|
52
101
|
|
|
@@ -54,6 +103,33 @@ const app = div({ className: 'app' },
|
|
|
54
103
|
domNode.render('#app', app);
|
|
55
104
|
```
|
|
56
105
|
|
|
106
|
+
### CDN Usage
|
|
107
|
+
|
|
108
|
+
```html
|
|
109
|
+
<!DOCTYPE html>
|
|
110
|
+
<html>
|
|
111
|
+
<head>
|
|
112
|
+
<script src="https://unpkg.com/elit@latest/dist/index.global.js"></script>
|
|
113
|
+
</head>
|
|
114
|
+
<body>
|
|
115
|
+
<div id="app"></div>
|
|
116
|
+
<script>
|
|
117
|
+
const { div, h1, button, createState, reactive, domNode } = window;
|
|
118
|
+
|
|
119
|
+
const count = createState(0);
|
|
120
|
+
const app = div(
|
|
121
|
+
h1('Hello from CDN!'),
|
|
122
|
+
reactive(count, value =>
|
|
123
|
+
button({ onclick: () => count.value++ }, `Count: ${value}`)
|
|
124
|
+
)
|
|
125
|
+
);
|
|
126
|
+
|
|
127
|
+
domNode.render('#app', app);
|
|
128
|
+
</script>
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|
|
131
|
+
```
|
|
132
|
+
|
|
57
133
|
## API
|
|
58
134
|
|
|
59
135
|
### Element Factories
|
|
@@ -105,6 +181,134 @@ const label = text(message);
|
|
|
105
181
|
const inputEl = input({ type: 'text', ...bindValue(message) });
|
|
106
182
|
```
|
|
107
183
|
|
|
184
|
+
### Shared State (Real-time Sync)
|
|
185
|
+
|
|
186
|
+
**Requires `@elit/server`** - Shared state syncs automatically between backend and frontend via WebSocket:
|
|
187
|
+
|
|
188
|
+
```typescript
|
|
189
|
+
import { createSharedState, reactive } from 'elit';
|
|
190
|
+
|
|
191
|
+
// Create shared state (auto-connects to @elit/server)
|
|
192
|
+
const counter = createSharedState('counter', 0);
|
|
193
|
+
const todos = createSharedState('todos', []);
|
|
194
|
+
|
|
195
|
+
// Use with reactive rendering
|
|
196
|
+
const app = div(
|
|
197
|
+
reactive(counter.state, value =>
|
|
198
|
+
div(`Counter: ${value}`)
|
|
199
|
+
),
|
|
200
|
+
button({ onclick: () => counter.value++ }, 'Increment')
|
|
201
|
+
);
|
|
202
|
+
|
|
203
|
+
// Listen to changes
|
|
204
|
+
counter.onChange((newValue, oldValue) => {
|
|
205
|
+
console.log(`${oldValue} → ${newValue}`);
|
|
206
|
+
});
|
|
207
|
+
|
|
208
|
+
// Update from any client - syncs to all
|
|
209
|
+
counter.value++;
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
**Backend (Node.js with @elit/server):**
|
|
213
|
+
|
|
214
|
+
```javascript
|
|
215
|
+
const { createDevServer } = require('@elit/server');
|
|
216
|
+
|
|
217
|
+
const server = createDevServer({ port: 3000 });
|
|
218
|
+
|
|
219
|
+
// Create matching shared states
|
|
220
|
+
const counter = server.state.create('counter', { initial: 0 });
|
|
221
|
+
const todos = server.state.create('todos', { initial: [] });
|
|
222
|
+
|
|
223
|
+
// Listen to changes
|
|
224
|
+
counter.onChange((newValue, oldValue) => {
|
|
225
|
+
console.log(`Counter: ${oldValue} → ${newValue}`);
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
// Update from backend - syncs to all clients
|
|
229
|
+
counter.value++;
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
### @elit/server - Development Server
|
|
233
|
+
|
|
234
|
+
Full-featured development server with HMR, REST API, and real-time features:
|
|
235
|
+
|
|
236
|
+
```javascript
|
|
237
|
+
const { createDevServer, Router, cors, logger } = require('@elit/server');
|
|
238
|
+
|
|
239
|
+
// Create REST API router
|
|
240
|
+
const api = new Router();
|
|
241
|
+
|
|
242
|
+
// Add middleware
|
|
243
|
+
api.use(cors());
|
|
244
|
+
api.use(logger());
|
|
245
|
+
|
|
246
|
+
// Define routes
|
|
247
|
+
api.get('/api/users', (ctx) => {
|
|
248
|
+
return { success: true, users: [...] };
|
|
249
|
+
});
|
|
250
|
+
|
|
251
|
+
api.post('/api/users', (ctx) => {
|
|
252
|
+
const user = ctx.body;
|
|
253
|
+
return { success: true, user };
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
// Create server with API
|
|
257
|
+
const server = createDevServer({
|
|
258
|
+
port: 3000,
|
|
259
|
+
root: __dirname,
|
|
260
|
+
api,
|
|
261
|
+
logging: true
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
// Access shared state
|
|
265
|
+
const counter = server.state.create('counter', {
|
|
266
|
+
initial: 0,
|
|
267
|
+
validate: (value) => typeof value === 'number'
|
|
268
|
+
});
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
**CLI Usage:**
|
|
272
|
+
|
|
273
|
+
```bash
|
|
274
|
+
# Start dev server
|
|
275
|
+
npx elit-dev
|
|
276
|
+
|
|
277
|
+
# Custom port
|
|
278
|
+
npx elit-dev --port 8080
|
|
279
|
+
|
|
280
|
+
# Custom root directory
|
|
281
|
+
npx elit-dev --root ./public
|
|
282
|
+
|
|
283
|
+
# Disable auto-open browser
|
|
284
|
+
npx elit-dev --no-open
|
|
285
|
+
|
|
286
|
+
# Silent mode
|
|
287
|
+
npx elit-dev --silent
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
**Middleware:**
|
|
291
|
+
|
|
292
|
+
```javascript
|
|
293
|
+
const {
|
|
294
|
+
cors, // CORS headers
|
|
295
|
+
logger, // Request logging
|
|
296
|
+
errorHandler, // Error handling
|
|
297
|
+
rateLimit, // Rate limiting
|
|
298
|
+
bodyLimit, // Request body size limit
|
|
299
|
+
cacheControl, // Cache headers
|
|
300
|
+
compress, // Gzip compression
|
|
301
|
+
security // Security headers
|
|
302
|
+
} = require('@elit/server');
|
|
303
|
+
|
|
304
|
+
api.use(cors({ origin: '*' }));
|
|
305
|
+
api.use(logger());
|
|
306
|
+
api.use(rateLimit({ max: 100, window: 60000 }));
|
|
307
|
+
api.use(bodyLimit(1024 * 1024)); // 1MB
|
|
308
|
+
api.use(compress());
|
|
309
|
+
api.use(security());
|
|
310
|
+
```
|
|
311
|
+
|
|
108
312
|
### Server-Side Rendering
|
|
109
313
|
|
|
110
314
|
```typescript
|
|
@@ -232,6 +436,27 @@ addLink({ rel: 'stylesheet', href: '/styles.css' });
|
|
|
232
436
|
addStyle('body { margin: 0; }');
|
|
233
437
|
```
|
|
234
438
|
|
|
439
|
+
### DOM Utilities
|
|
440
|
+
|
|
441
|
+
Elit provides convenient DOM utility functions for common operations:
|
|
442
|
+
|
|
443
|
+
```typescript
|
|
444
|
+
import { doc, el, els, createEl, elId, elClass, fragment } from 'elit';
|
|
445
|
+
|
|
446
|
+
// Query selectors (bound to document)
|
|
447
|
+
const element = el('.my-class'); // querySelector
|
|
448
|
+
const elements = els('.my-class'); // querySelectorAll
|
|
449
|
+
const byId = elId('my-id'); // getElementById
|
|
450
|
+
const byClass = elClass('my-class'); // getElementsByClassName
|
|
451
|
+
|
|
452
|
+
// Create elements
|
|
453
|
+
const div = createEl('div'); // createElement
|
|
454
|
+
const frag = fragment(); // createDocumentFragment
|
|
455
|
+
|
|
456
|
+
// Access document object
|
|
457
|
+
doc.title = 'New Title';
|
|
458
|
+
```
|
|
459
|
+
|
|
235
460
|
## Available Elements
|
|
236
461
|
|
|
237
462
|
### HTML Elements (100+)
|
|
@@ -265,6 +490,25 @@ All MathML elements are prefixed with `math`:
|
|
|
265
490
|
|
|
266
491
|
`mathMath`, `mathMi`, `mathMn`, `mathMo`, `mathMfrac`, `mathMsqrt`, `mathMroot`, `mathMsup`, `mathMsub`, `mathMsubsup`, `mathMover`, `mathMunder`, `mathMunderover`, and more.
|
|
267
492
|
|
|
493
|
+
## Bundle Size & Performance
|
|
494
|
+
|
|
495
|
+
Elit is designed to be extremely lightweight while providing powerful features:
|
|
496
|
+
|
|
497
|
+
| Format | Size (Minified) | Size (Gzipped) |
|
|
498
|
+
|--------|----------------|----------------|
|
|
499
|
+
| ESM | 29KB | ~10KB |
|
|
500
|
+
| CJS | 30KB | ~10KB |
|
|
501
|
+
| IIFE | 30KB | ~10KB |
|
|
502
|
+
|
|
503
|
+
**Tree-shaking**: When using ES modules, only the features you import will be included in your bundle.
|
|
504
|
+
|
|
505
|
+
**Performance Optimizations**:
|
|
506
|
+
- Direct DOM manipulation (no virtual DOM diffing)
|
|
507
|
+
- Optimized rendering with RAF batching
|
|
508
|
+
- Smart children rendering with automatic fragment usage
|
|
509
|
+
- Efficient attribute updates using charCode checks
|
|
510
|
+
- Minimal function closures and memory allocation
|
|
511
|
+
|
|
268
512
|
## Browser Usage
|
|
269
513
|
|
|
270
514
|
When loaded via script tag, all exports are available on the `window` object:
|
|
@@ -273,7 +517,7 @@ When loaded via script tag, all exports are available on the `window` object:
|
|
|
273
517
|
<script src="https://unpkg.com/elit@latest/dist/index.global.js"></script>
|
|
274
518
|
<script>
|
|
275
519
|
const { div, span, createState, domNode } = window;
|
|
276
|
-
// or use DomLib global
|
|
520
|
+
// or use DomLib global namespace
|
|
277
521
|
const app = DomLib.div('Hello');
|
|
278
522
|
</script>
|
|
279
523
|
```
|
|
@@ -335,14 +579,137 @@ const Counter = div(
|
|
|
335
579
|
);
|
|
336
580
|
```
|
|
337
581
|
|
|
582
|
+
## TypeScript Support
|
|
583
|
+
|
|
584
|
+
Elit is written in TypeScript and provides excellent type safety:
|
|
585
|
+
|
|
586
|
+
```typescript
|
|
587
|
+
import { VNode, State, Props } from 'elit';
|
|
588
|
+
|
|
589
|
+
// Type-safe element creation
|
|
590
|
+
const props: Props = {
|
|
591
|
+
className: 'container',
|
|
592
|
+
onclick: (e: MouseEvent) => console.log(e)
|
|
593
|
+
};
|
|
594
|
+
|
|
595
|
+
// Type-safe state
|
|
596
|
+
const count: State<number> = createState(0);
|
|
597
|
+
const users: State<User[]> = createState([]);
|
|
598
|
+
|
|
599
|
+
// Full IntelliSense support for all 100+ HTML elements
|
|
600
|
+
```
|
|
601
|
+
|
|
602
|
+
## Comparison with Other Libraries
|
|
603
|
+
|
|
604
|
+
| Feature | Elit | React | Vue | Svelte |
|
|
605
|
+
|---------|------|-------|-----|--------|
|
|
606
|
+
| Bundle Size (min) | 30KB | ~140KB | ~90KB | ~15KB* |
|
|
607
|
+
| Zero Dependencies | ✅ | ❌ | ❌ | ✅ |
|
|
608
|
+
| Virtual DOM | ❌ | ✅ | ✅ | ❌ |
|
|
609
|
+
| TypeScript First | ✅ | ✅ | ✅ | ✅ |
|
|
610
|
+
| Built-in Router | ✅ | ❌ | ❌ | ❌ |
|
|
611
|
+
| Built-in State | ✅ | ❌ | ✅ | ✅ |
|
|
612
|
+
| SSR Support | ✅ | ✅ | ✅ | ✅ |
|
|
613
|
+
| Learning Curve | Easy | Medium | Medium | Easy |
|
|
614
|
+
|
|
615
|
+
*Svelte requires compilation
|
|
616
|
+
|
|
617
|
+
## Packages
|
|
618
|
+
|
|
619
|
+
This monorepo contains two packages:
|
|
620
|
+
|
|
621
|
+
### elit
|
|
622
|
+
[](https://www.npmjs.com/package/elit)
|
|
623
|
+
|
|
624
|
+
The core library for building reactive web applications.
|
|
625
|
+
|
|
626
|
+
```bash
|
|
627
|
+
npm install elit
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
### @elit/server
|
|
631
|
+
[](https://www.npmjs.com/package/@elit/server)
|
|
632
|
+
|
|
633
|
+
Development server with HMR, REST API, and real-time state synchronization.
|
|
634
|
+
|
|
635
|
+
```bash
|
|
636
|
+
npm install --save-dev @elit/server
|
|
637
|
+
```
|
|
638
|
+
|
|
639
|
+
[View @elit/server documentation →](./server/README.md)
|
|
640
|
+
|
|
338
641
|
## Documentation
|
|
339
642
|
|
|
340
|
-
|
|
643
|
+
- 📚 [Documentation Hub](./docs/README.md)
|
|
644
|
+
- ⚡ [Quick Start Guide](./docs/QUICK_START.md) - Get started in 5 minutes
|
|
645
|
+
- 📖 [API Reference](./docs/API.md) - Complete API documentation
|
|
646
|
+
- ⚖️ [Comparison Guide](./docs/COMPARISON.md) - Compare with React, Vue, Svelte
|
|
647
|
+
- 🔄 [Migration Guide](./docs/MIGRATION.md) - Migrate from other frameworks
|
|
648
|
+
- 🤝 [Contributing Guide](./CONTRIBUTING.md) - Contribute to Elit
|
|
649
|
+
|
|
650
|
+
## Changelog
|
|
651
|
+
|
|
652
|
+
### elit v0.1.0
|
|
653
|
+
|
|
654
|
+
**Core Library:**
|
|
655
|
+
- 🎉 Initial release
|
|
656
|
+
- ⚡ Optimized bundle size (50% reduction from initial builds - 30KB minified)
|
|
657
|
+
- 🚀 Full TypeScript support with complete type definitions
|
|
658
|
+
- 🎨 Complete CSS-in-JS with CreateStyle
|
|
659
|
+
- 🛣️ Client-side router with navigation guards
|
|
660
|
+
- 📦 Tree-shakeable ES modules
|
|
661
|
+
- 🎭 100+ HTML, SVG, and MathML elements
|
|
662
|
+
- 🔧 Performance utilities (throttle, debounce, virtual scrolling)
|
|
663
|
+
- 🖥️ SSR capabilities with renderToString
|
|
664
|
+
- 🎮 DOM utility functions
|
|
665
|
+
- 🌐 Shared state integration with @elit/server
|
|
666
|
+
|
|
667
|
+
**New Package - @elit/server v0.1.0:**
|
|
668
|
+
- ⚡ Hot Module Replacement (HMR) with WebSocket
|
|
669
|
+
- 🌐 REST API router with regex-based parameters
|
|
670
|
+
- 🔧 Middleware stack (CORS, logging, error handling, rate limiting, compression, security)
|
|
671
|
+
- 🔄 Real-time shared state synchronization
|
|
672
|
+
- 📊 Built-in WebSocket server
|
|
673
|
+
- 📁 Static file server with MIME type detection
|
|
674
|
+
- 🛠️ CLI tool (`elit-dev`)
|
|
675
|
+
- 🎯 Zero-config with sensible defaults
|
|
676
|
+
|
|
677
|
+
## Examples
|
|
678
|
+
|
|
679
|
+
Check out the example applications in the repository:
|
|
680
|
+
|
|
681
|
+
- **[HMR Example](./server/example/hmr-example.html)** - Hot Module Replacement demo
|
|
682
|
+
- **[REST API Example](./server/example/api-example.js)** - Full REST API with todos
|
|
683
|
+
- **[Shared State (Vanilla)](./server/example/state-demo.html)** - Real-time state sync without Elit
|
|
684
|
+
- **[Shared State (Elit)](./server/example/elit-state-demo.html)** - Real-time state with Elit reactive system
|
|
685
|
+
- **[Todo App](./examples)** - Complete todo application (coming soon)
|
|
686
|
+
|
|
687
|
+
[View all examples →](./server/example/README.md)
|
|
688
|
+
|
|
689
|
+
## Links
|
|
690
|
+
|
|
691
|
+
- 📦 [npm - elit](https://www.npmjs.com/package/elit)
|
|
692
|
+
- 📦 [npm - @elit/server](https://www.npmjs.com/package/@elit/server)
|
|
693
|
+
- 🐙 [GitHub Repository](https://github.com/oangsa/elit)
|
|
694
|
+
- 📚 Documentation (coming soon)
|
|
695
|
+
- 💬 Discord Community (coming soon)
|
|
341
696
|
|
|
342
697
|
## Contributing
|
|
343
698
|
|
|
344
699
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
345
700
|
|
|
701
|
+
1. Fork the repository
|
|
702
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
703
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
704
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
705
|
+
5. Open a Pull Request
|
|
706
|
+
|
|
346
707
|
## License
|
|
347
708
|
|
|
348
|
-
MIT
|
|
709
|
+
MIT License - see [LICENSE](./LICENSE) for details
|
|
710
|
+
|
|
711
|
+
---
|
|
712
|
+
|
|
713
|
+
**Built with ❤️ for modern web development**
|
|
714
|
+
|
|
715
|
+
*Elit - Lightweight, Reactive, Powerful* 🚀
|
package/dist/index.d.mts
CHANGED
|
@@ -125,6 +125,96 @@ declare const cleanupUnused: (root: HTMLElement) => number;
|
|
|
125
125
|
declare const throttle: <T extends any[]>(fn: (...args: T) => void, delay: number) => (...args: T) => void;
|
|
126
126
|
declare const debounce: <T extends any[]>(fn: (...args: T) => void, delay: number) => (...args: T) => void;
|
|
127
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Shared State for Elit
|
|
130
|
+
* Integrates with @elit/server for real-time state synchronization
|
|
131
|
+
*/
|
|
132
|
+
|
|
133
|
+
type StateChangeCallback<T = any> = (value: T, oldValue: T) => void;
|
|
134
|
+
/**
|
|
135
|
+
* Shared State - syncs with @elit/server
|
|
136
|
+
*/
|
|
137
|
+
declare class SharedState<T = any> {
|
|
138
|
+
readonly key: string;
|
|
139
|
+
private wsUrl?;
|
|
140
|
+
private localState;
|
|
141
|
+
private ws;
|
|
142
|
+
private pendingUpdates;
|
|
143
|
+
private previousValue;
|
|
144
|
+
constructor(key: string, defaultValue: T, wsUrl?: string | undefined);
|
|
145
|
+
/**
|
|
146
|
+
* Get current value
|
|
147
|
+
*/
|
|
148
|
+
get value(): T;
|
|
149
|
+
/**
|
|
150
|
+
* Set new value and sync to server
|
|
151
|
+
*/
|
|
152
|
+
set value(newValue: T);
|
|
153
|
+
/**
|
|
154
|
+
* Get the underlying Elit State (for reactive binding)
|
|
155
|
+
*/
|
|
156
|
+
get state(): State<T>;
|
|
157
|
+
/**
|
|
158
|
+
* Subscribe to changes (returns Elit State for reactive)
|
|
159
|
+
*/
|
|
160
|
+
onChange(callback: StateChangeCallback<T>): () => void;
|
|
161
|
+
/**
|
|
162
|
+
* Update value using a function
|
|
163
|
+
*/
|
|
164
|
+
update(updater: (current: T) => T): void;
|
|
165
|
+
/**
|
|
166
|
+
* Connect to WebSocket
|
|
167
|
+
*/
|
|
168
|
+
private connect;
|
|
169
|
+
/**
|
|
170
|
+
* Subscribe to server state
|
|
171
|
+
*/
|
|
172
|
+
private subscribe;
|
|
173
|
+
/**
|
|
174
|
+
* Handle message from server
|
|
175
|
+
*/
|
|
176
|
+
private handleMessage;
|
|
177
|
+
/**
|
|
178
|
+
* Send value to server
|
|
179
|
+
*/
|
|
180
|
+
private sendToServer;
|
|
181
|
+
/**
|
|
182
|
+
* Disconnect
|
|
183
|
+
*/
|
|
184
|
+
disconnect(): void;
|
|
185
|
+
/**
|
|
186
|
+
* Destroy state and cleanup
|
|
187
|
+
*/
|
|
188
|
+
destroy(): void;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Create a shared state that syncs with @elit/server
|
|
192
|
+
*/
|
|
193
|
+
declare function createSharedState<T>(key: string, defaultValue: T, wsUrl?: string): SharedState<T>;
|
|
194
|
+
/**
|
|
195
|
+
* Shared State Manager for managing multiple shared states
|
|
196
|
+
*/
|
|
197
|
+
declare class SharedStateManager {
|
|
198
|
+
private states;
|
|
199
|
+
/**
|
|
200
|
+
* Create or get a shared state
|
|
201
|
+
*/
|
|
202
|
+
create<T>(key: string, defaultValue: T, wsUrl?: string): SharedState<T>;
|
|
203
|
+
/**
|
|
204
|
+
* Get existing state
|
|
205
|
+
*/
|
|
206
|
+
get<T>(key: string): SharedState<T> | undefined;
|
|
207
|
+
/**
|
|
208
|
+
* Delete a state
|
|
209
|
+
*/
|
|
210
|
+
delete(key: string): boolean;
|
|
211
|
+
/**
|
|
212
|
+
* Clear all states
|
|
213
|
+
*/
|
|
214
|
+
clear(): void;
|
|
215
|
+
}
|
|
216
|
+
declare const sharedStateManager: SharedStateManager;
|
|
217
|
+
|
|
128
218
|
/**
|
|
129
219
|
* Elit - Reactive Rendering Helpers
|
|
130
220
|
*/
|
|
@@ -472,6 +562,45 @@ declare const mathMsub: ElementFactory;
|
|
|
472
562
|
declare const mathMsup: ElementFactory;
|
|
473
563
|
declare const varElement: ElementFactory;
|
|
474
564
|
|
|
565
|
+
/**
|
|
566
|
+
* DOM utility functions - Shorthand helpers for common document operations
|
|
567
|
+
*/
|
|
568
|
+
declare const doc: Document;
|
|
569
|
+
declare const el: {
|
|
570
|
+
<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
571
|
+
<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
572
|
+
<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
573
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
574
|
+
<E extends Element = Element>(selectors: string): E | null;
|
|
575
|
+
};
|
|
576
|
+
declare const els: {
|
|
577
|
+
<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
578
|
+
<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
579
|
+
<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
580
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
581
|
+
<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
582
|
+
};
|
|
583
|
+
declare const createEl: {
|
|
584
|
+
<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];
|
|
585
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementDeprecatedTagNameMap[K];
|
|
586
|
+
(tagName: string, options?: ElementCreationOptions): HTMLElement;
|
|
587
|
+
};
|
|
588
|
+
declare const createSvgEl: (qualifiedName: string, options?: string | ElementCreationOptions | undefined) => Element;
|
|
589
|
+
declare const createMathEl: (qualifiedName: string, options?: string | ElementCreationOptions | undefined) => Element;
|
|
590
|
+
declare const fragment: () => DocumentFragment;
|
|
591
|
+
declare const textNode: (data: string) => Text;
|
|
592
|
+
declare const commentNode: (data: string) => Comment;
|
|
593
|
+
declare const elId: (elementId: string) => HTMLElement | null;
|
|
594
|
+
declare const elClass: (classNames: string) => HTMLCollectionOf<Element>;
|
|
595
|
+
declare const elTag: {
|
|
596
|
+
<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
597
|
+
<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
598
|
+
<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
599
|
+
<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
600
|
+
(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
601
|
+
};
|
|
602
|
+
declare const elName: (elementName: string) => NodeListOf<HTMLElement>;
|
|
603
|
+
|
|
475
604
|
/**
|
|
476
605
|
* Elit - Optimized lightweight library for creating DOM elements with reactive state
|
|
477
606
|
*/
|
|
@@ -498,4 +627,4 @@ declare const renderVNodeToString: (json: VNodeJson, options?: {
|
|
|
498
627
|
indent?: number;
|
|
499
628
|
}) => string;
|
|
500
629
|
|
|
501
|
-
export { type CSSRule, type CSSVariable, type Child, type Children, type ContainerRule, CreateStyle, DomNode, type ElementFactory, type FontFace, type JsonNode, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type Props, type RefCallback, type RefObject, type Route, type RouteLocation, type RouteParams, type Router, type RouterOptions, type State, type StateOptions, type SupportsRule, type VNode, type VNodeJson, type VirtualListController, a, abbr, addLink, addMeta, addStyle, address, area, article, aside, audio, b, base, batchRender, bdi, bdo, bindChecked, bindValue, blockquote, body, br, button, canvas, caption, cite, cleanupUnused, code, col, colgroup, computed, createElementFactory, createRouter, createRouterView, createState, createVirtualList, data, datalist, dd, debounce, del, details, dfn, dialog, div, dl, domNode, dt, effect, elements, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, jsonToVNode, kbd, label, lazy, legend, li, link, main, map, mark, mathMath, mathMfrac, mathMi, mathMn, mathMo, mathMroot, mathMrow, mathMs, mathMsqrt, mathMsub, mathMsup, mathMtext, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, portal, pre, progress, q, reactive, reactiveAs, renderChunked, renderJson, renderJsonToString, renderToHead, renderToString, renderVNode, renderVNodeToString, routerLink, rp, rt, ruby, s, samp, script, section, select, setTitle, slot, small, source, span, strong, style, sub, summary, sup, svgAnimate, svgAnimateMotion, svgAnimateTransform, svgCircle, svgClipPath, svgDefs, svgEllipse, svgFeBlend, svgFeColorMatrix, svgFeComponentTransfer, svgFeComposite, svgFeConvolveMatrix, svgFeDiffuseLighting, svgFeDisplacementMap, svgFeFlood, svgFeGaussianBlur, svgFeMorphology, svgFeOffset, svgFeSpecularLighting, svgFeTile, svgFeTurbulence, svgFilter, svgForeignObject, svgG, svgImage, svgLine, svgLinearGradient, svgMarker, svgMask, svgPath, svgPattern, svgPolygon, svgPolyline, svgRadialGradient, svgRect, svgSet, svgStop, svgSvg, svgSymbol, svgText, svgTspan, svgUse, table, tbody, td, template, text, textarea, tfoot, th, thead, throttle, time, title, tr, track, u, ul, vNodeJsonToVNode, varElement, video, wbr };
|
|
630
|
+
export { type CSSRule, type CSSVariable, type Child, type Children, type ContainerRule, CreateStyle, DomNode, type ElementFactory, type FontFace, type JsonNode, type KeyframeStep, type Keyframes, type LayerRule, type MediaRule, type Props, type RefCallback, type RefObject, type Route, type RouteLocation, type RouteParams, type Router, type RouterOptions, SharedState, type State, type StateOptions, type SupportsRule, type VNode, type VNodeJson, type VirtualListController, a, abbr, addLink, addMeta, addStyle, address, area, article, aside, audio, b, base, batchRender, bdi, bdo, bindChecked, bindValue, blockquote, body, br, button, canvas, caption, cite, cleanupUnused, code, col, colgroup, commentNode, computed, createEl, createElementFactory, createMathEl, createRouter, createRouterView, createSharedState, createState, createSvgEl, createVirtualList, data, datalist, dd, debounce, del, details, dfn, dialog, div, dl, doc, domNode, dt, effect, el, elClass, elId, elName, elTag, elements, els, em, embed, fieldset, figcaption, figure, footer, form, fragment, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, jsonToVNode, kbd, label, lazy, legend, li, link, main, map, mark, mathMath, mathMfrac, mathMi, mathMn, mathMo, mathMroot, mathMrow, mathMs, mathMsqrt, mathMsub, mathMsup, mathMtext, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, portal, pre, progress, q, reactive, reactiveAs, renderChunked, renderJson, renderJsonToString, renderToHead, renderToString, renderVNode, renderVNodeToString, routerLink, rp, rt, ruby, s, samp, script, section, select, setTitle, sharedStateManager, slot, small, source, span, strong, style, sub, summary, sup, svgAnimate, svgAnimateMotion, svgAnimateTransform, svgCircle, svgClipPath, svgDefs, svgEllipse, svgFeBlend, svgFeColorMatrix, svgFeComponentTransfer, svgFeComposite, svgFeConvolveMatrix, svgFeDiffuseLighting, svgFeDisplacementMap, svgFeFlood, svgFeGaussianBlur, svgFeMorphology, svgFeOffset, svgFeSpecularLighting, svgFeTile, svgFeTurbulence, svgFilter, svgForeignObject, svgG, svgImage, svgLine, svgLinearGradient, svgMarker, svgMask, svgPath, svgPattern, svgPolygon, svgPolyline, svgRadialGradient, svgRect, svgSet, svgStop, svgSvg, svgSymbol, svgText, svgTspan, svgUse, table, tbody, td, template, text, textNode, textarea, tfoot, th, thead, throttle, time, title, tr, track, u, ul, vNodeJsonToVNode, varElement, video, wbr };
|