package html_of_jsx
Render HTML with JSX
Install
Dune Dependency
Authors
Maintainers
Sources
html_of_jsx-0.0.3.tbz
sha256=c9427679a424a5c4fa5b0547c01af15bc00960df838858c4eb3124acdca301cb
sha512=354f8168d2ab9c7e3b4821dfe01c430be80d9610e764c96259f5edfc52d47fe2e3abbc6600a1d423df8e5d4b4b4ae09637050fa430f12623a5ff07c15b8c1461
Description
html_of_jsx is a JSX transformation that allows you to write HTML declaratively.
Published: 12 Jun 2024
README
"
"
Render HTML with JSX
html_of_jsx is a JSX transformation to write HTML declaratively in OCaml, Reason and mlx.
Features
- Brings the component model to HTML
- Supports most of features from JSX (uppercase components, fragments, optional attributes, punning)
- but with a few improvements (lowercase components, no need to add annotations)
- No React idioms (no
className
, nohtmlFor
, noonChange
, etc...) - Integrates well with htmx
- Type-safe, validates attributes and their types (it can be better thought)
- Works with OCaml, Reason and mlx
Minimal
JSX.render
to render a JSX element to a HTML stringJSX.*
to construct DOM Elements and DOM nodes (JSX.string
,JSX.int
,JSX.null
,JSX.list
)
- Created to work on the server-side, but can be used on the client-side as well (with Melange or jsoo)
Installation
opam install html_of_jsx
+ (library html_of_jsx)
+ (preprocess (pps html_of_jsx.ppx))
Usage
let element: JSX.element = <a href="https://x.com/davesnx">
<span> {"Click me!"} </span>
</a>
let html: string = JSX.render(element);
Check the demo/server.re file to see a full example.
Documentation
Check the Documentation to know more about the API and features.
Credits
This library was extracted from server-reason-react and later simplified to work only with HTML5.
Dependencies (5)
Dev Dependencies (6)
-
tiny_httpd
with-dev-setup
-
ocaml-lsp-server
with-dev-setup
-
ocamlformat
= "0.26.1" & (with-dev-setup | with-test)
-
odoc
with-doc
-
benchmark
with-test
-
alcotest
with-test
Used by (1)
-
dream
>= "1.0.0~alpha7"
Conflicts
None
sectionYPositions = computeSectionYPositions($el), 10)"
x-init="setTimeout(() => sectionYPositions = computeSectionYPositions($el), 10)"
>
On This Page