https://github.com/pedrobslisboa/universal-portal

Universal Portal for ssr natively ReasonReact apps
https://github.com/pedrobslisboa/universal-portal

reason-react reasonml server-side-rendering

Last synced: 26 days ago
JSON representation

Universal Portal for ssr natively ReasonReact apps

• Host: GitHub
• URL: https://github.com/pedrobslisboa/universal-portal
• Owner: pedrobslisboa
• Created: 2024-01-22T15:20:00.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-09-03T14:17:20.000Z (4 months ago)
• Last Synced: 2024-10-29T18:23:59.280Z (2 months ago)
• Topics: reason-react, reasonml, server-side-rendering
• Language: Reason
• Homepage:
• Size: 388 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  

  

    

  



## Universal Reason Portal

Universal Portal for ssr natively ReasonReact apps.

This project was inspired by [server-reason-react](https://github.com/ml-in-barcelona/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](#installation)

- [Usage](#usage)

  - [Server](#server)

  - [Shared](#shared)

- [Running the demo](#running-the-demo)

## Installation

```sh

opam install universal-portal

```

## Usage

### Server

```reason

  Dream.router([

    Dream.get("/", _request => {

      let portals: ref(array(UniversalPortal_Shared.Portal.portal)) = ref([||]);

      let element =

        ReactDOM.renderToString(

          UniversalPortal_Server.collectPortals(

            

              

            ,

            (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

```dune

 (libraries universal-portal.shared_js)

```

#### For native dune config add

```dune

 (libraries universal-portal.shared_native)

```

#### Component

Use `UniversalPortal_Shared` and it will work on both client and native content.

```reason

[@react.component]

let make = () => {

  


    

      


        {"Hey, I'm a portal, disable JS on your dev tools and check that I'll still here"

          |> React.string}

      

    

  
;

};

```


#### 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](/demo/shared/native/App.re#L3-L9)

```reason

  UniversalPortal_Js.useRemoveServerPortals();

```

## Running the demo

Make sure to initialize the project:

```sh

make init

```

Then you can run the demo:

```sh

make demo

```

## Roadmap

- [ ] Improve tests