2024-05-28 00:31:18 +00:00
|
|
|
# HSX
|
2018-06-24 17:08:30 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
⚠️ This project is a work in progress.
|
2024-05-25 12:48:35 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
HSX (Hypertext S-expression) is a straightforward HTML5 generation library for Common Lisp.
|
2024-02-03 09:56:09 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
This project is a fork of [flute](https://github.com/ailisp/flute/), originally created by Bo Yao.
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
## Usage
|
|
|
|
|
|
|
|
With the `hsx` macro, you can construct HTML using S-expressions.
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 10:33:08 +00:00
|
|
|
Inline property lists following the element name are interpreted as attributes, and the remaining elements are interpreted as child elements.
|
|
|
|
|
|
|
|
When a property is given a boolean value:
|
|
|
|
- `t` results in the key being displayed without a value.
|
|
|
|
- `nil` results in the property not being displayed at all.
|
|
|
|
- Any other type of value results in the key-value pair being displayed.
|
|
|
|
|
2024-05-27 09:24:19 +00:00
|
|
|
```lisp
|
2024-05-27 09:08:25 +00:00
|
|
|
(hsx
|
|
|
|
(div :id "greeting" :class "flex"
|
|
|
|
(h1 "Hello World")
|
|
|
|
(p
|
|
|
|
"This is"
|
2024-05-28 00:31:18 +00:00
|
|
|
(strong "an example!"))))
|
|
|
|
```
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
This code generates the following HTML:
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
```html
|
2024-05-27 09:08:25 +00:00
|
|
|
<div id="greeting" class="flex">
|
|
|
|
<h1>Hello World</h1>
|
2024-05-28 00:31:18 +00:00
|
|
|
<p>
|
|
|
|
This is
|
|
|
|
<strong>an example!</strong>
|
|
|
|
</p>
|
2024-05-27 09:08:25 +00:00
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
HSX elements are essentially functions, allowing you to compose them freely and embed Common Lisp code within them.
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-27 09:24:19 +00:00
|
|
|
```lisp
|
2024-05-27 09:08:25 +00:00
|
|
|
(hsx
|
|
|
|
(div
|
|
|
|
(p :id (+ 1 1))
|
|
|
|
(ul
|
|
|
|
(loop
|
|
|
|
:for i :from 1 :to 3
|
|
|
|
:collect (li (format nil "item~a" i))))
|
|
|
|
(if t
|
|
|
|
(p "true")
|
|
|
|
(p "false"))))
|
2024-05-28 00:31:18 +00:00
|
|
|
```
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
This generates:
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
```html
|
2024-05-27 09:08:25 +00:00
|
|
|
<div>
|
|
|
|
<p id="2"></p>
|
|
|
|
<ul>
|
|
|
|
<li>item1</li>
|
|
|
|
<li>item2</li>
|
|
|
|
<li>item3</li>
|
|
|
|
</ul>
|
|
|
|
<p>true</p>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
2024-05-28 10:33:08 +00:00
|
|
|
You can create custom tags (intended for Web Components) using the `deftag` macro.
|
|
|
|
|
|
|
|
```lisp
|
|
|
|
(deftag stack)
|
|
|
|
```
|
|
|
|
|
|
|
|
This can then be used as follows:
|
2024-05-27 09:40:50 +00:00
|
|
|
|
2024-05-27 09:24:19 +00:00
|
|
|
```lisp
|
2024-05-28 10:33:08 +00:00
|
|
|
(hsx (stack :space "var(--s2)" :recursive t))
|
|
|
|
```
|
|
|
|
|
|
|
|
Which generates:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<stack space="var(--s2)" recursive></stack>
|
|
|
|
```
|
|
|
|
|
|
|
|
You can create HSX components using the `defcomp` macro. Components are essentially functions that accept keyword arguments, a property list, or both.
|
|
|
|
|
|
|
|
The `children` property accepts the children of a component.
|
|
|
|
|
|
|
|
```lisp
|
|
|
|
(defcomp card (&key title children)
|
2024-05-27 09:08:25 +00:00
|
|
|
(hsx
|
|
|
|
(div
|
|
|
|
(h1 title)
|
2024-05-27 09:40:50 +00:00
|
|
|
children)))
|
2024-05-28 00:31:18 +00:00
|
|
|
```
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-27 09:24:19 +00:00
|
|
|
or
|
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
```lisp
|
2024-05-28 10:33:08 +00:00
|
|
|
(defcomp card (&rest props)
|
2024-05-27 09:24:19 +00:00
|
|
|
(hsx
|
|
|
|
(div
|
|
|
|
(h1 (getf props :title))
|
2024-05-27 09:40:50 +00:00
|
|
|
(getf props :children))))
|
2024-05-28 00:31:18 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
This can then be used as follows:
|
2024-05-27 09:24:19 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
```lisp
|
2024-05-27 09:40:50 +00:00
|
|
|
(hsx
|
|
|
|
(card :title "card1"
|
2024-05-28 00:31:18 +00:00
|
|
|
(p "Lorem ipsum...")))
|
|
|
|
```
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
Which generates:
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
```html
|
2024-05-27 09:08:25 +00:00
|
|
|
<div>
|
|
|
|
<h1>card1</h1>
|
2024-05-28 00:31:18 +00:00
|
|
|
<p>Lorem ipsum...</p>
|
2024-05-27 09:08:25 +00:00
|
|
|
</div>
|
|
|
|
```
|
|
|
|
|
2024-05-28 00:31:18 +00:00
|
|
|
## License
|
2024-05-27 09:08:25 +00:00
|
|
|
|
2024-05-27 02:47:10 +00:00
|
|
|
This project is licensed under the terms of the MIT license.
|
2024-02-08 17:54:12 +00:00
|
|
|
|
2024-05-28 10:33:08 +00:00
|
|
|
© 2024 skyizwhite
|
2024-02-08 17:54:12 +00:00
|
|
|
|
2024-05-28 10:33:08 +00:00
|
|
|
© 2018 Bo Yao
|