Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add html_of_jsx template #326

Merged
merged 4 commits into from
Jul 25, 2024
Merged

Add html_of_jsx template #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6caa2da
Add html_of_jsx template
davesnx Jun 8, 2024
77649bc
Use html_of_jsx 0.0.4
davesnx Jun 27, 2024
b484424
Remove `~` from props in r-html_of_jsx
davesnx Jul 24, 2024
de0a86d
Make example/r-html_of_jsx compile
aantron Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions example/r-html_of_jsx/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# `r-html_of_jsx`

<br>

[html_of_jsx](https://github.com/davesnx/html_of_jsx/) can be used together with Reason's built-in JSX syntax for generating HTML on the server:

```reason
let greet = (~who, ()) =>
<html>
<head><title>"Home"</title></head>
<body>
<h1>{Jsx.txt("Good morning, " ++ who ++ "!")}</h1>
</body>
</html>;

let () =
Dream.run
@@ Dream.logger
@@ Dream.router([

Dream.get("/",
(_ => Dream.html(Jsx.render(<greet who="world" />))))),

]);
```

<pre><code><b>$ cd example/r-tyxml</b>
<b>$ npm install esy && npx esy</b>
<b>$ npx esy start</b></code></pre>

<br>

To get this, we depend on package `html_of_jsx` in
[`esy.json`](https://github.com/aantron/dream/blob/master/example/r-html_of_jsx/esy.json):

<pre><code>{
"dependencies": {
"@opam/dream": "1.0.0~alpha4",
"@opam/dune": "^2.0",
"@opam/reason": "^3.8.0",
<b>"@opam/html_of_jsx": "*",</b>
"ocaml": "4.14.x"
},
"scripts": {
"start": "dune exec --root . ./html_of_jsx.exe"
}
}
</code></pre>

and add `html_of_jsx.ppx` to our preprocessor list in
[`dune`](https://github.com/aantron/dream/blob/master/example/r-html_of_jsx/dune):

<pre><code>(executable
(name html_of_jsx)
(libraries dream html_of_jsx)
<b>(preprocess (pps lwt_ppx html_of_jsx.ppx)))</b>
</code></pre>

<br>

**See also:**

- [**`html_of_jsx`](https://github.com/davesnx/html_of_jsx/)

<br>

[Up to the example index](../#reason)
6 changes: 6 additions & 0 deletions example/r-html_of_jsx/dune
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
(executable
(name html_of_jsx)
(libraries dream html_of_jsx)
(preprocess (pps lwt_ppx html_of_jsx.ppx)))

(data_only_dirs _esy esy.lock lib node_modules)
1 change: 1 addition & 0 deletions example/r-html_of_jsx/dune-project
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
(lang dune 2.0)
20 changes: 20 additions & 0 deletions example/r-html_of_jsx/esy.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"dependencies": {
"@opam/conf-libssl": "3",
"@opam/dream": "1.0.0~alpha5",
"@opam/dune": "^3.0",
"@opam/reason": "^3.8.0",
"@opam/html_of_jsx": "0.0.4",
"ocaml": "^4.14.0"
},
"devDependencies": {
"@opam/ocaml-lsp-server": "*"
},
"resolutions": {
"@opam/conf-libev": "esy-packages/libev:package.json#0b5eb6685b688649045aceac55dc559f6f21b829",
"esy-openssl": "esy-packages/esy-openssl#619ae2d46ca981ec26ab3287487ad98b157a01d1"
},
"scripts": {
"start": "dune exec --root . ./html_of_jsx.exe"
}
}
17 changes: 17 additions & 0 deletions example/r-html_of_jsx/html_of_jsx.re
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
let greet = (~who, ()) =>
<html>
<head><title>"Home"</title></head>
<body>
<h1>{JSX.string("Good morning, " ++ who ++ "!")}</h1>
</body>
</html>;

let () =
Dream.run
@@ Dream.logger
@@ Dream.router([

Dream.get("/",
(_ => Dream.html(JSX.render(<greet who="world" />)))),

]);
Loading