paku/hsx
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update README

Browse source
This commit is contained in:
paku 2024-05-27 18:24:19 +09:00
parent e4eec0749f
commit 3b26614d2b
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
README.md
View file

@ -6,9 +6,9 @@ This is a fork project of [flute](https://github.com/ailisp/flute/), originally
# Usage # Usage
Using the `hsx` macro, you can implement HTML in S-expressions. Using the `hsx` macro, you can implement HTML with S-expression.
``` ```lisp
(hsx (hsx
(div :id "greeting" :class "flex" (div :id "greeting" :class "flex"
(h1 "Hello World") (h1 "Hello World")
@ -29,7 +29,7 @@ Using the `hsx` macro, you can implement HTML in S-expressions.
Elements in HSX are essentially functions, so you can freely compose them and embed CL code to them. Elements in HSX are essentially functions, so you can freely compose them and embed CL code to them.
``` ```lisp
(hsx (hsx
(div (div
(p :id (+ 1 1)) (p :id (+ 1 1))
@ -54,9 +54,9 @@ Elements in HSX are essentially functions, so you can freely compose them and em
</div> </div>
``` ```
To define a component, just define a function that takes keyword arguments or property list or both, and define hsx expression of it with `defhsx` macro. To define a component, just define a function that accepts keyword arguments or property list or both, and define HSX element with `defhsx` macro.
``` ```lisp
(defhsx card #'%card) (defhsx card #'%card)
(defun %card (&key title description) (defun %card (&key title description)
(hsx (hsx
@ -64,6 +64,15 @@ To define a component, just define a function that takes keyword arguments or pr
(h1 title) (h1 title)
(p description)))) (p description))))
or
(defhsx card #'%card)
(defun %card (&rest props)
(hsx
(div
(h1 (getf props :title))
(p (getf props :description)))))
(hsx (card :title "card1" :description "brah brah brah...")) (hsx (card :title "card1" :description "brah brah brah..."))
↓ ↓ ↓ ↓ ↓ ↓
@ -76,7 +85,7 @@ To define a component, just define a function that takes keyword arguments or pr
The previous definition can be simplified by using the `defcomp` macro. The previous definition can be simplified by using the `defcomp` macro.
``` ```lisp
(defcomp card (&key title description) (defcomp card (&key title description)
(hsx (hsx
(div (div