https://github.com/mithriljs/mithril-node-render
Use mithril views to render server side
https://github.com/mithriljs/mithril-node-render
javascript mithril server-rendering
Last synced: 10 months ago
JSON representation
Use mithril views to render server side
- Host: GitHub
- URL: https://github.com/mithriljs/mithril-node-render
- Owner: MithrilJS
- License: mit
- Created: 2014-10-15T08:45:03.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-09-02T15:06:33.000Z (over 1 year ago)
- Last Synced: 2025-04-02T04:02:48.413Z (11 months ago)
- Topics: javascript, mithril, server-rendering
- Language: JavaScript
- Size: 220 KB
- Stars: 212
- Watchers: 10
- Forks: 44
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
mithril-node-render
===================
[](https://mithril.zulipchat.com)
[](https://travis-ci.org/MithrilJS/mithril-node-render)
[](https://github.com/rethinkjs/manifest)
Use mithril views to render server side
Demo
----
[Usage Example](https://github.com/StephanHoyer/mithril-isomorphic-example/)
Installation
------------
```
npm install mithril-node-render
```
Usage
-----
```javascript
// Make Mithril happy
if (!global.window) {
global.window = global.document = global.requestAnimationFrame = undefined
}
var m = require('mithril')
var render = require('mithril-node-render')
render(m('span', 'huhu')).then(function (html) {
// html === 'huhu'
})
var html = render.sync(m('span', 'huhu'))
// html === 'huhu'
```
Async components
----------------
As you see the rendering is asynchronous. It lets you await certain data from within `oninit` hooks.
```javascript
var myAsyncComponent = {
oninit: function (node, waitFor) {
waitFor(new Promise(function (resolve) {
node.state.foo = 'bar'
resolve()
}))
},
view: function (node) {
return m('div', node.state.foo)
}
}
render(myAsyncComponent).then(function (html) {
// html === '
bar'
})
```
Sync rendering
--------------
You can also render synchronously. You just don't get the `waitFor` callback.
```js
var myAsyncComponent = {
oninit: function (node, waitFor) {
// waitFor === undefined
new Promise(function (resolve) {
node.state.foo = 'bar'
resolve()
})
},
view: function (node) {
return m('div', node.state.foo)
}
}
var html = render.sync(myAsyncComponent)
// html === '
bar'
```
Options
-------
Optionally pass in options as an object: `render(component, options)`.
The following options are supported:
**escapeAttribute(value)**
`Default: render.escapeAttribute`
A filter function for attribute values. Receives value, returns what is printed.
**escapeText(value)**
`Default: render.escapeText`
A filter function for string nodes. Receives value, returns what is printed.
**strict**
`Default: false`
Set this to true to close all empty tags automatically. Default is standard HTML mode where tags like `
` and `` are allowed to implicitly close themselves. This should be set to `true` if you're rendering XML-compatible HTML documents.
**xml**
`Default: false`
Set this to true to render as generic XML instead of (possibly XML-compatible) HTML. Default is HTML mode, where children of void elements are ignored. This implies `strict: true`.
See also
--------
* [Blog post](https://gist.github.com/StephanHoyer/bddccd9e159828867d2a) about isomorphic mithril applications
* [Usage Example](https://github.com/StephanHoyer/mithril-isomorphic-example/blob/master/README.md)