13 releases
0.2.1 | Nov 10, 2022 |
---|---|
0.2.0 | Nov 6, 2022 |
0.1.10 | Nov 5, 2022 |
#2887 in Parser implementations
131 downloads per month
28KB
459 lines
Wax
HTML with Components
Install
Install the Wax cli using cargo :
$ cargo install wax-cli
Useage
Create new project
$ wax create <NAME>
Build your project
$ wax build <PATH>
Project Structure
./<my-wax-site>/*
│
├─ .wax - # Wax file cache
├─ dist - # Wax build output
│
├─ src/* - # Your codebase (html, css, and js)
│ ├─ lib/ - # Html wax components
│ ├─ pages/ - # Your html pages
│ └─ ...
│
└─ wax.toml - # Wax config file
Static Components
Wax components are an extension of html.
Example : Component File
~ src/lib/my-component.html
<p>
Hello from my component ! :D
</p>
Importing / including wax components is done using the <wax!>
tag.
e.g. <wax! … src="[path]" … >
Example : Importing
~ src/routes/index.html
<body>
…
<wax! src="../lib/my-component.html" />
…
</body>
Dynamic Components *
Passing parameters to a component is done using html attributes.
e.g. <wax! … [key]="[value]" … >
Example : Importing
~ src/routes/index.html
<body>
…
<wax! src="../lib/my-component.html" title="My dynamic title" />
…
</body>
Each component has to declare its parameters using <params! … [key] … >
Parameters can be inserted into the html using { [key] }
Example : Component File
~ src/lib/my-component.html
<params! title>
<h1>
{ title }
</h1>
Config
* ? : means it is optional
# wax.toml
[website]
pages = "RelativePath" # Path to the directory containing your index.html.
[build]
minify = "Boolean?" # If enabled, will minify the collapsed HTML files.
Testing
* Using the testing project in
./assets
$ cargo run build ./assets
Dependencies
~15–29MB
~381K SLoC