https://github.com/herudi/vel
Declarative html-element in V.
https://github.com/herudi/vel
Last synced: 4 months ago
JSON representation
Declarative html-element in V.
- Host: GitHub
- URL: https://github.com/herudi/vel
- Owner: herudi
- License: mit
- Created: 2024-02-16T07:56:13.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-16T10:08:55.000Z (over 1 year ago)
- Last Synced: 2025-01-10T19:57:06.419Z (5 months ago)
- Language: V
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vel
Declarative html-element in V.
> Vel just a tiny program about (~100 lines of code).
## Install
```bash
v install herudi.vel
```
## Basic
```v
module main
import herudi.vel { Elem }
fn main() {
ast := Elem{'div', {}, [
Elem{'span', {}, ['hello vel']},
Elem{'input', {'id': 'name'}, []},
]}
// print just ast
println(ast)
// convert ast to string
println(ast.to_string())
//
hello vel
}
```
**Elem**, just a struct for simple declarative html elements. `Elem{tag, attr, child}`.
## Using Html Markup
```v
import herudi.vel { Elem, Html }
html := Html{
head: [
Elem{'title', {}, ['home page title']},
]
body: [
Elem{'h1', {}, ['Home Page']},
]
}
println(html.to_string())
```
## Custom Component
```v
import herudi.vel { Elem, Html }
// this is layout
fn my_layout(elem Elem) Elem {
return Elem{'div', {}, [
Elem{'h1', {}, ['This is layout']},
elem.child,
]}
}
elem := Elem{
child: [
my_layout(
child: [
Elem{'p', {}, ['This is content']},
]
),
]
}
println(elem.to_string())
```
## Fragment
```v
elem := Elem{
child: [
Elem{'h1', {}, ['foo']},
Elem{'h2', {}, ['bar']},
]
}
println(elem.to_string())
//
foo
bar
```
## Handle Array
```v
import herudi.vel { Child, Elem }
struct Person {
name string
age int
}
persons := [Person{'john', 20}, Person{'yanto', 50}]
elem := Elem{
child: [
persons.map(fn (person Person) Child {
return Elem{'div', {}, [
Elem{'h1', {}, ['Name : ${person.name}']},
Elem{'h1', {}, ['Age : ${person.age}']},
]}
}),
]
}
println(elem.to_string())
```
## License
[MIT](LICENSE)