@firesmasher/velox.js 1.0.0 → 1.0.2
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 +140 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Velox.js
|
|
2
|
+
|
|
3
|
+
**The fast frontend framework with its own scripting language.**
|
|
4
|
+
|
|
5
|
+
Velox.js lets you control your HTML pages using `.vlx` script files and `<?velox >` tags — no build step, no bundler, no JSX. Just drop `velox.js` into your page and start writing scripts.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npx velox my-app
|
|
13
|
+
cd my-app
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Open `public/index.html` in your browser (via a local server — e.g. VS Code Live Server, or `npx serve .`).
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## How it works
|
|
21
|
+
|
|
22
|
+
The Velox runtime (`velox.js`) scans your HTML for `<?velox ... >` tags when the page loads. Each tag either runs a command directly or wires up an event listener.
|
|
23
|
+
|
|
24
|
+
**Run a command on page load:**
|
|
25
|
+
```html
|
|
26
|
+
<?velox Dom.setText("Hello!") $target="$id(output)" >
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Run a `.vlx` script file on page load:**
|
|
30
|
+
```html
|
|
31
|
+
<?velox Velox.run("assets/scripts/velox/myscript.vlx") $target="$id(output)" >
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
**Wire a button click to a command:**
|
|
35
|
+
```html
|
|
36
|
+
<?velox $on click "$id(myBtn)": Dom.setText("Clicked!") $target="$id(output)" >
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
**Wire a button click to a `.vlx` file:**
|
|
40
|
+
```html
|
|
41
|
+
<?velox $on click "$id(myBtn)": Velox.run("myscript.vlx") $target="$id(output)" >
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The runtime must be loaded before `</body>`:
|
|
45
|
+
```html
|
|
46
|
+
<script src="assets/scripts/velox/velox.js"></script>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## .vlx scripts
|
|
52
|
+
|
|
53
|
+
`.vlx` files are plain text scripts with one statement per line, separated by `;`.
|
|
54
|
+
|
|
55
|
+
```vlx
|
|
56
|
+
// myscript.vlx
|
|
57
|
+
|
|
58
|
+
Dom.setText("Loaded from script!") $target="$id(output)";
|
|
59
|
+
Dom.addClass("active") $target="$id(output)";
|
|
60
|
+
Anim.fadeIn("400") $target="$id(output)";
|
|
61
|
+
|
|
62
|
+
Var.set("user:Alice");
|
|
63
|
+
echo("Script finished");
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## Project structure
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
my-app/
|
|
72
|
+
├── public/
|
|
73
|
+
│ └── index.html
|
|
74
|
+
├── assets/
|
|
75
|
+
│ ├── css/
|
|
76
|
+
│ │ └── style.css
|
|
77
|
+
│ └── scripts/
|
|
78
|
+
│ └── velox/
|
|
79
|
+
│ ├── velox.js ← runtime
|
|
80
|
+
│ └── myscript.vlx ← your scripts go here
|
|
81
|
+
├── .velox/
|
|
82
|
+
│ └── conf/
|
|
83
|
+
│ └── config.jsonc
|
|
84
|
+
├── storage/
|
|
85
|
+
│ ├── env/
|
|
86
|
+
│ │ └── quickPaths.json
|
|
87
|
+
│ └── variables/
|
|
88
|
+
│ └── normal.json
|
|
89
|
+
├── tags/
|
|
90
|
+
│ └── json/
|
|
91
|
+
│ └── UrlS.json
|
|
92
|
+
└── velox.project.json
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Selectors
|
|
98
|
+
|
|
99
|
+
| Syntax | Selects |
|
|
100
|
+
|---|---|
|
|
101
|
+
| `$id(myId)` | `#myId` |
|
|
102
|
+
| `$class(myClass)` | first `.myClass` |
|
|
103
|
+
| `$query(.card > p)` | any CSS selector |
|
|
104
|
+
| `$tag(div)` | first `<div>` |
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Command categories
|
|
109
|
+
|
|
110
|
+
| Category | Commands |
|
|
111
|
+
|---|---|
|
|
112
|
+
| DOM | `setText` `setHtml` `append` `prepend` `remove` `clear` `show` `hide` `toggle` `addClass` `removeClass` `toggleClass` `setAttr` `removeAttr` `setStyle` `focus` `click` `scrollTo` `getValue` `setValue` |
|
|
113
|
+
| Animation | `fadeIn` `fadeOut` `slide` `shake` `pulse` |
|
|
114
|
+
| Events | `$on click` `hover` `input` `change` `submit` `keydown` `load` |
|
|
115
|
+
| Form | `getValue` `setValue` `clear` `serialize` |
|
|
116
|
+
| Storage | `Store.set` `get` `remove` `clear` |
|
|
117
|
+
| Cookies | `Cookie.set` `get` `remove` |
|
|
118
|
+
| Variables | `Var.set` `get` `clear` |
|
|
119
|
+
| Network | `Url.get` `getJson` `post` `postJson` `fetch` · `iframe.Url` |
|
|
120
|
+
| File | `file.localFetch` |
|
|
121
|
+
| Page | `redirect` `reload` `title` `meta` `scrollTop` |
|
|
122
|
+
| Router | `Router.define` `go` `start` |
|
|
123
|
+
| Template | `Template.render` |
|
|
124
|
+
| Script/Style | `Script.load` · `Style.load` |
|
|
125
|
+
| Logging | `echo` `echo.warn` `echo.err` |
|
|
126
|
+
|
|
127
|
+
See [SYNTAXES.md](./SYNTAXES.md) for the full reference.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## Requirements
|
|
132
|
+
|
|
133
|
+
- Node.js >= 16 (for the CLI scaffolder)
|
|
134
|
+
- A local HTTP server to serve your project (required for `fetch()` to work)
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## License
|
|
139
|
+
|
|
140
|
+
MIT
|