Synchronous/Asynchronous server-side rendering of RiotJS 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.
- 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) - Great tests coverage
npm install --save riot-ssr
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`
})<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>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:
// 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)
}<some-component>
<p>{ result }</p>
<script>
// no `asyncStart` or `asyncEnd` required
someAsyncFunction(this, (result) => {
this.result = result // -> 'Hello world!'
this.update()
})
</script>
</some-component>