# riot-ssr

> Synchronous/Asynchronous server-side rendering of RiotJS tags

Latest version **1.1.6** (published 2016-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install riot-ssr
pnpm add riot-ssr
yarn add riot-ssr
bun add riot-ssr
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2016-09-28 |
| First published | 2016-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Nick Gavrilov |
| Maintainers | ilearnio |
| Keywords | riotjs, riot, ssr, server side rendering |

## Links

- npm: https://www.npmjs.com/package/riot-ssr
- Repository: https://github.com/ilearnio/riot-ssr
- Homepage: https://github.com/ilearnio/riot-ssr#readme
- Issues: https://github.com/ilearnio/riot-ssr/issues
- npm.io page: https://npm.io/package/riot-ssr

## Dependencies (1)

- [riot](https://npm.io/package/riot.md) ^2.6.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2016-09-28
- 1.1.5 — 2016-09-28
- 1.1.3 — 2016-03-19
- 1.1.2 — 2016-03-19
- 1.1.1 — 2016-02-26
- 1.0.3 — 2016-01-24
- 1.0.1 — 2016-01-24
- 1.0.0 — 2016-01-23
- 0.1.0 — 2016-01-17
- 0.0.4 — 2016-01-17
- 0.0.3 — 2016-01-17
- 0.0.2 — 2016-01-17
- 0.0.1 — 2016-01-17

## README

# riot-ssr
[![NPM Version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

Synchronous/Asynchronous server-side rendering of [RiotJS](http://riotjs.com) tags. Based on the official `render` method from Riot's compiler.

The entire idea of rendering tags asynchronously is based around two additional functions that it adds to your every tag by extending `riot.Tag.prototype`, those are `asyncStart` and `asyncEnd`. In order to make the renderer to wait untill your async code will be finished, you need to call `this.asyncStart()` before it starts and `this.asyncEnd()` respectively when it ends. You can call these functions as many times you want in all your tags, just remember that they must always go together. If you started an async action it should be ended, otherways it will wait for it forever.

## Features

* Supports nested tags
* Supports multiple async calls and complex async chains
* Correctly handles multiple simultanouse requests
* Allows to `riot.mount()` tags from inside of another tags ([see tests for example](https://github.com/ilearnio/riot-ssr/blob/master/test/tags/mount.js))
* Great tests coverage

## Installation

```
npm install --save riot-ssr
```

## Usage example

```js
const render = require('riot-ssr')

// Render asynchronously (can be used for sync tags as well)
render('path/or/name/of/my.tag', opts, function (rendered) {
  // ... do something with `rendered`
})
```

```html
<some-component>
  <p>{ result }</p>
  <script>
    if (IS_SERVER) this.asyncStart() // registering a new async call and waiting until it's finished
    someAsyncFunction(result => {
      this.result = result
      this.update() // updating the tag
      if (IS_SERVER) this.asyncEnd() // async call is completed
    })
  </script>
</some-component>
```

### Higher level approach

The previous example is kind of low-level. It is recommended that you would create wrapper that would call `asyncStart` and `asyncEnd` for you. It can be a pure function, Riot mixin or whatever you think is best. Example:

```js
// add `someAsyncFunction` method to every tag
function someAsyncFunction (tag, callback) {
  if (IS_SERVER) tag.asyncStart()

  // Something async
  setTimeout(() => {
    callback('Hello world!')
    if (IS_SERVER) tag.asyncEnd()
  }, 100)
}
```

```html
<some-component>
  <p>{ result }</p>
  <script>
    // no `asyncStart` or `asyncEnd` required
    someAsyncFunction(this, (result) => {
      this.result = result // -> 'Hello world!'
      this.update()
    })
  </script>
</some-component>
```

[npm-image]: https://img.shields.io/npm/v/riot-ssr.svg
[npm-url]: https://npmjs.org/package/riot-ssr
[travis-image]: https://img.shields.io/travis/ilearnio/riot-ssr/master.svg
[travis-url]: https://travis-ci.org/ilearnio/riot-ssr

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