package universal-portal

  1. Overview
  2. Docs
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 Portal Universal Portal

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

Dev Dependencies (8)

  1. odoc with-doc
  2. ocaml-lsp-server with-test
  3. melange-jest with-test
  4. melange-testing-library with-test
  5. ocamlformat = "0.26.1" & with-test
  6. fmt with-test
  7. alcotest-lwt with-test
  8. alcotest with-test

Used by

None

Conflicts

None

OCaml

Innovation. Community. Security.