@bookklik/senangstart-actions 0.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/README.md +58 -0
- package/dist/senangstart-actions.esm.js +992 -0
- package/dist/senangstart-actions.js +997 -0
- package/dist/senangstart-actions.min.js +9 -0
- package/package.json +46 -0
- package/src/evaluator.js +118 -0
- package/src/handlers/attributes.js +168 -0
- package/src/handlers/bind.js +46 -0
- package/src/handlers/directives.js +119 -0
- package/src/handlers/events.js +66 -0
- package/src/handlers/index.js +11 -0
- package/src/index.js +106 -0
- package/src/observer.js +42 -0
- package/src/reactive.js +210 -0
- package/src/walker.js +117 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# SenangStart Actions
|
|
2
|
+
|
|
3
|
+
Declarative UI framework for humans and AI agents.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @bookklik/senangstart-actions
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Basic Usage
|
|
12
|
+
|
|
13
|
+
Include the script and use `ss-*` directives in your HTML:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script src="dist/senangstart-actions.js"></script>
|
|
17
|
+
|
|
18
|
+
<div ss-data="{ count: 0 }">
|
|
19
|
+
<button ss-on:click="count--">-</button>
|
|
20
|
+
<span ss-text="count"></span>
|
|
21
|
+
<button ss-on:click="count++">+</button>
|
|
22
|
+
</div>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Key Directives
|
|
26
|
+
|
|
27
|
+
- `ss-data`: Define component state within a scope
|
|
28
|
+
- `ss-text`: Update text content reactively
|
|
29
|
+
- `ss-html`: Update inner HTML reactively
|
|
30
|
+
- `ss-on:[event]`: Listen for events (e.g., `ss-on:click`)
|
|
31
|
+
- `ss-model`: Two-way data binding for inputs
|
|
32
|
+
- `ss-if`: Conditionally render elements
|
|
33
|
+
- `ss-show`: Toggle visibility (display: none)
|
|
34
|
+
- `ss-for`: Loop over arrays/objects
|
|
35
|
+
- `ss-bind:[attr]`: Bind attributes dynamically
|
|
36
|
+
|
|
37
|
+
## Development
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
# Install dependencies
|
|
41
|
+
npm install
|
|
42
|
+
|
|
43
|
+
# Start development server
|
|
44
|
+
npm run dev
|
|
45
|
+
|
|
46
|
+
# Build for production
|
|
47
|
+
npm run build
|
|
48
|
+
|
|
49
|
+
# Run tests
|
|
50
|
+
npm run test
|
|
51
|
+
|
|
52
|
+
# Start documentation server
|
|
53
|
+
npm run docs:dev
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## License
|
|
57
|
+
|
|
58
|
+
MIT
|