# bs-react-ssr-prepass

> BuckleScript bindings for [`react-ssr-prepass`](https://github.com/FormidableLabs/react-ssr-prepass). This allows you to use React `Suspense` for data fetching on the server-side in ReasonML.

Latest version **0.1.0** (published 2019-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install bs-react-ssr-prepass
pnpm add bs-react-ssr-prepass
yarn add bs-react-ssr-prepass
bun add bs-react-ssr-prepass
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-10-13 |
| First published | 2019-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Parker Ziegler |
| Maintainers | parkerziegler |
| Keywords | BuckleScript, Reason, ReasonML, reason-urql, GraphQL, Server-side Rendering, SSR |

## Links

- npm: https://www.npmjs.com/package/bs-react-ssr-prepass
- npm.io page: https://npm.io/package/bs-react-ssr-prepass

## Dependencies (1)

- [react-ssr-prepass](https://npm.io/package/react-ssr-prepass.md) ^1.0.7

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-10-13

## README

# bs-react-ssr-prepass

BuckleScript bindings for [`react-ssr-prepass`](https://github.com/FormidableLabs/react-ssr-prepass). This allows you to use React `Suspense` for data fetching on the server-side in ReasonML.

## API

These bindings expose a single function, `ssrPrepass`, that allows you to walk your React tree and look for thrown `Promise`s to trigger `Suspense`. The argument passed to this function is a polymorphic variant with two possible constructors.

```reason
[
  | `PrepassNode(React.element)
  | `PrepassNodeVisitor(React.element, visitor)
]
```

If you just want to have `react-ssr-prepass` walk your React tree (or a part of it) and suspend on any thrown `Promise`s, just use the first constructor.

```reason
let prepass = ReactSSRPrepass.ssrPrepass(`PrepassNode(<App />));

prepass
|> Js.Promise.then_(() => {
     Js.log("Prepass has finished. Server render the app!");
     Js.Promise.resolve(() => ());
   });
```

You can also pass a custom `visitor` function to `react-ssr-prepass` that will visit each React element in your application and allow you to execute custom data fetching logic based on the `element`.

```reason
let prepass = ReactSSRPrepass.ssrPrepass(`PrepassNodeVisitor(<App />, element => {
  /* Inspect the element as you like to call custom data fetching logic. */
}));

prepass
|> Js.Promise.then_(() => {
     Js.log("Prepass has finished. Server render the app!");
     Js.Promise.resolve(() => ());
   });
```

Because ReasonReact doesn't expose any utilities for you to introspect React elements themselves (i.e. examine their `type`, `key`, or `props` directly), the `ReactSSRPrepass` `module` exposes a few useful functions to deal with this. The first is `toElementJS`. This function takes in a `React.element` and returns a `[@bs.deriving abstract]` object representing the raw React element. You can then use the accessors provided by the `[@bs.deriving abstract]` to access those fields. An example will help make this clear:

```reason
let _ =
  ReactSSRPrepass.ssrPrepass(
    `PrepassNodeVisitor((
      <App />,
      element => {
        /* Get the type property off the element. */
        let elementType =
          ReactSSRPrepass.toElementJS(element) |> ReactSSRPrepass.type_Get;

        /* Get the type property off an arbitrary Component. */
        let componentType =
          Component.make(Js.Obj.empty())
          |> ReactSSRPrepass.toElementJS
          |> ReactSSRPrepass.type_Get;

        /* Check if the types match. */
        if (elementType === componentType) {
          /* Execute specific data fetching logic for this element. */
          Js.log("Execute data fetching logic!");
        };

        /* Return undefined. You can also return a promise from this function. */
        Js.Nullable.undefined;
      },
    )),
  );
```

Note that `toElementJS` takes advantage of [BuckleScript's `%identity` trick](https://bucklescript.github.io/docs/en/interop-cheatsheet#identity-external). It's a bandaid solution as long as we can't get fully type-safe access to the internals of `ReasonReact.element`.

---
_Source: https://npm.io/package/bs-react-ssr-prepass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._