Skip to content

Commit 1bfb389

Browse files
doeixddoeixd
authored
Restore v2.0.0 section in README.md
Reintroduce v2.0.0 details and features in README.
1 parent 571e45c commit 1bfb389

1 file changed

Lines changed: 106 additions & 104 deletions

File tree

‎README.md‎

Lines changed: 106 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -57,110 +57,7 @@
5757
- **JS Framework Benchmark**: Complete declarative implementation of the JS Framework Benchmark
5858
- **Performance Optimizations**: Batch DOM operations and keyed rendering
5959

60-
## 🚀 v2.0.0: Declarative Reactive Engine
61-
62-
**Invokers v2.0.0 introduces a complete declarative reactive engine that rivals modern JavaScript frameworks while maintaining zero-JavaScript philosophy.**
63-
64-
### Expression Functions
65-
Use 40+ built-in functions in `{{...}}` expressions for reactive computations:
66-
67-
```html
68-
<!-- String operations -->
69-
<div>{{concat("Hello", " ", "World")}}</div>
70-
<div>{{uppercase("hello world")}}</div>
71-
<div>{{truncate("Long text here", 10)}}</div>
72-
73-
<!-- Math operations -->
74-
<span>{{min(10, 20, 30)}}</span>
75-
<span>{{round(3.14159)}}</span>
76-
77-
<!-- Array operations -->
78-
<div>{{arrayLength(items)}}</div>
79-
<div>{{join(selectedItems, ", ")}}</div>
80-
81-
<!-- Conditional logic -->
82-
<div class="{{if(isActive, 'active', 'inactive')}}">
83-
{{if(userCount > 1, pluralize(userCount, 'user'), 'user')}}
84-
</div>
85-
```
86-
87-
### Loop Commands
88-
Declarative iteration with performance optimizations:
89-
90-
```html
91-
<!-- Basic looping -->
92-
<div command="--dom:repeat-append:5" commandfor="#container">
93-
<template>
94-
<div>Item {{index1}} of {{count}}</div>
95-
</template>
96-
</div>
97-
98-
<!-- Data-driven rendering -->
99-
<div command="--data:render:items" commandfor="#data-store">
100-
<template data-loop-item="items">
101-
<div class="{{selected ? 'selected' : ''}}">
102-
<h3>{{title}}</h3>
103-
<p>{{description}}</p>
104-
<button command="--data:array:toggle-selected"
105-
data-item-id="{{id}}">
106-
{{selected ? 'Deselect' : 'Select'}}
107-
</button>
108-
</div>
109-
</template>
110-
</div>
111-
```
112-
113-
### Random Data Generation
114-
Generate random data without JavaScript:
115-
116-
```html
117-
<datalist id="colors">
118-
<option value="red,blue,green,yellow,purple,orange">
119-
</datalist>
120-
121-
<button command="--random:choice:colors" commandfor="#result">
122-
Pick Random Color
123-
</button>
124-
125-
<div id="result"></div>
126-
```
127-
128-
### JS Framework Benchmark
129-
**Complete declarative implementation** of the JS Framework Benchmark:
130-
131-
```html
132-
<!-- Create 1,000 rows -->
133-
<button command="--benchmark:create:1000" commandfor="#data">Create 1,000 rows</button>
134-
135-
<!-- Update every 10th row -->
136-
<button command="--benchmark:update" commandfor="#data">Update every 10th row</button>
137-
138-
<!-- Swap rows -->
139-
<button command="--benchmark:swap" commandfor="#data">Swap rows</button>
140-
141-
<!-- Clear table -->
142-
<button command="--benchmark:clear" commandfor="#data">Clear</button>
143-
144-
<!-- Declarative table rendering -->
145-
<table>
146-
<tbody command="--data:render:benchmarkRows" commandfor="#data">
147-
<template data-loop-item="benchmarkRows">
148-
<tr class="{{selected ? 'selected' : ''}}">
149-
<td>{{id}}</td>
150-
<td>{{label}}</td>
151-
<td>{{status}}</td>
152-
<td>
153-
<button command="--data:array:toggle-selected" data-item-id="{{id}}">
154-
{{selected ? 'Deselect' : 'Select'}}
155-
</button>
156-
</td>
157-
</tr>
158-
</template>
159-
</tbody>
160-
</table>
161-
```
162-
163-
**Performance Results:** Invokers v2.0.0 achieves competitive performance with modern JS frameworks while maintaining pure HTML declarations.
60+
<br />
16461

16562
## Quick Demo
16663

@@ -3371,6 +3268,111 @@ beforeEach(() => {
33713268
- **Mobile browsers**: Touch and gesture support
33723269
- **Accessibility**: Screen reader and keyboard navigation
33733270
3271+
- ## 🚀 v2.0.0: Declarative Reactive Engine
3272+
3273+
**Invokers v2.0.0 introduces a complete declarative reactive engine that rivals modern JavaScript frameworks while maintaining zero-JavaScript philosophy.**
3274+
3275+
### Expression Functions
3276+
Use 40+ built-in functions in `{{...}}` expressions for reactive computations:
3277+
3278+
```html
3279+
<!-- String operations -->
3280+
<div>{{concat("Hello", " ", "World")}}</div>
3281+
<div>{{uppercase("hello world")}}</div>
3282+
<div>{{truncate("Long text here", 10)}}</div>
3283+
3284+
<!-- Math operations -->
3285+
<span>{{min(10, 20, 30)}}</span>
3286+
<span>{{round(3.14159)}}</span>
3287+
3288+
<!-- Array operations -->
3289+
<div>{{arrayLength(items)}}</div>
3290+
<div>{{join(selectedItems, ", ")}}</div>
3291+
3292+
<!-- Conditional logic -->
3293+
<div class="{{if(isActive, 'active', 'inactive')}}">
3294+
{{if(userCount > 1, pluralize(userCount, 'user'), 'user')}}
3295+
</div>
3296+
```
3297+
3298+
### Loop Commands
3299+
Declarative iteration with performance optimizations:
3300+
3301+
```html
3302+
<!-- Basic looping -->
3303+
<div command="--dom:repeat-append:5" commandfor="#container">
3304+
<template>
3305+
<div>Item {{index1}} of {{count}}</div>
3306+
</template>
3307+
</div>
3308+
3309+
<!-- Data-driven rendering -->
3310+
<div command="--data:render:items" commandfor="#data-store">
3311+
<template data-loop-item="items">
3312+
<div class="{{selected ? 'selected' : ''}}">
3313+
<h3>{{title}}</h3>
3314+
<p>{{description}}</p>
3315+
<button command="--data:array:toggle-selected"
3316+
data-item-id="{{id}}">
3317+
{{selected ? 'Deselect' : 'Select'}}
3318+
</button>
3319+
</div>
3320+
</template>
3321+
</div>
3322+
```
3323+
3324+
### Random Data Generation
3325+
Generate random data without JavaScript:
3326+
3327+
```html
3328+
<datalist id="colors">
3329+
<option value="red,blue,green,yellow,purple,orange">
3330+
</datalist>
3331+
3332+
<button command="--random:choice:colors" commandfor="#result">
3333+
Pick Random Color
3334+
</button>
3335+
3336+
<div id="result"></div>
3337+
```
3338+
3339+
### JS Framework Benchmark
3340+
**Complete declarative implementation** of the JS Framework Benchmark:
3341+
3342+
```html
3343+
<!-- Create 1,000 rows -->
3344+
<button command="--benchmark:create:1000" commandfor="#data">Create 1,000 rows</button>
3345+
3346+
<!-- Update every 10th row -->
3347+
<button command="--benchmark:update" commandfor="#data">Update every 10th row</button>
3348+
3349+
<!-- Swap rows -->
3350+
<button command="--benchmark:swap" commandfor="#data">Swap rows</button>
3351+
3352+
<!-- Clear table -->
3353+
<button command="--benchmark:clear" commandfor="#data">Clear</button>
3354+
3355+
<!-- Declarative table rendering -->
3356+
<table>
3357+
<tbody command="--data:render:benchmarkRows" commandfor="#data">
3358+
<template data-loop-item="benchmarkRows">
3359+
<tr class="{{selected ? 'selected' : ''}}">
3360+
<td>{{id}}</td>
3361+
<td>{{label}}</td>
3362+
<td>{{status}}</td>
3363+
<td>
3364+
<button command="--data:array:toggle-selected" data-item-id="{{id}}">
3365+
{{selected ? 'Deselect' : 'Select'}}
3366+
</button>
3367+
</td>
3368+
</tr>
3369+
</template>
3370+
</tbody>
3371+
</table>
3372+
```
3373+
3374+
**Performance Results:** Invokers v2.0.0 achieves competitive performance with modern JS frameworks while maintaining pure HTML declarations.
3375+
33743376
## 🤝 Contributing
33753377
33763378
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

0 commit comments

Comments
 (0)