package universal-portal
Universal Portal for ssr natively ReasonReact apps
Install
Dune Dependency
Authors
Maintainers
Sources
0.3.0.tar.gz
md5=72e494d939a7b656e438d96ecad65e57
sha512=3c58d8fdab8971434ccaaf0205306e663e232428076f927a49486dc1f6ed71f79f38083bea5de19877eb0c8045e737b852af5682bc3e17690ebc4103a69873cf
Description
Published: 09 Jul 2024
README
README.md
Universal Reason Portal
Universal Portal for ssr natively ReasonReact apps.
This project was inspired by server-reason-react to understand how SSR with ReasonReact works and also give the community more material to learn about SSR with ReasonReact.
Table of Contents
Installation
opam install universal-portal
Usage
Server
Dream.router([
Dream.get("/", _request => {
let portals: ref(array(UniversalPortal_Shared.Portal.portal)) = ref([||]);
let element =
ReactDOM.renderToString(
UniversalPortal_Server.collectPortals(
<Page scripts=["/static/app.js"]>
<Shared_native_demo.App />
</Page>,
(collectedPortal: UniversalPortal_Shared.Portal.portal) => {
portals := Array.append(portals^, [|collectedPortal|])
}),
);
let html =
UniversalPortal_Server.appendUniversalPortals(element, portals^);
portals := [||];
html |> Dream.html;
}),
Dream.get("/static/**", Dream.static("./static")),
]);
Shared
For client dune config add
(libraries universal-portal.shared_js)
For native dune config add
(libraries universal-portal.shared_native)
Component
Use UniversalPortal_Shared
and it will work on both client and native content.
[@react.component]
let make = () => {
<div>
<UniversalPortal_Shared.Portal selector="body">
<div>
{"Hey, I'm a portal, disable JS on your dev tools and check that I'll still here"
|> React.string}
</div>
</UniversalPortal_Shared.Portal>
</div>;
};
Cleaning server side portals
You must call the UniversalPortal_Js.useRemoveServerPortals
at the main entry point of your app, so it will remove all the server side portals.
Checkout the demo for more details: Demo
UniversalPortal_Js.useRemoveServerPortals();
Running the demo
Make sure to initialize the project:
make init
Then you can run the demo:
make demo
Roadmap
[ ] Improve tests
Dependencies (11)
-
server-reason-react
= "0.2.0"
- lambdasoup
-
reason-react
>= "0.14.0"
-
reason-react-ppx
>= "0.14.0"
- quickjs
- dream
- melange-webapi
- melange
-
reason
>= "3.10.0"
-
ocaml
>= "5.0.0"
-
dune
>= "3.8"
Dev Dependencies (8)
-
odoc
with-doc
-
ocaml-lsp-server
with-test
-
melange-jest
with-test
-
melange-testing-library
with-test
-
ocamlformat
= "0.26.1" & with-test
-
fmt
with-test
-
alcotest-lwt
with-test
-
alcotest
with-test
Used by
None
Conflicts
None
sectionYPositions = computeSectionYPositions($el), 10)"
x-init="setTimeout(() => sectionYPositions = computeSectionYPositions($el), 10)"
>
On This Page