All Projects → MithrilJS → Mithril Node Render

MithrilJS / Mithril Node Render

Licence: mit
Use mithril views to render server side

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Mithril Node Render

Razzle Unrouted
Blazingly fast server-rendered MVC Webapps with Preact and Webpack
Stars: ✭ 39 (-80%)
Mutual labels:  server-rendering
Bae
react made easy
Stars: ✭ 113 (-42.05%)
Mutual labels:  server-rendering
Cacheable Response
An HTTP compliant route path middleware for serving cache response with invalidation support.
Stars: ✭ 157 (-19.49%)
Mutual labels:  server-rendering
Vulcan
🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
Stars: ✭ 8,027 (+4016.41%)
Mutual labels:  server-rendering
Mithril Query
Query mithril virtual dom for testing purposes
Stars: ✭ 105 (-46.15%)
Mutual labels:  mithril
Dnjs
DOM Notation JS
Stars: ✭ 118 (-39.49%)
Mutual labels:  mithril
Nuxt.js
The Intuitive Vue(2) Framework
Stars: ✭ 38,986 (+19892.82%)
Mutual labels:  server-rendering
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (-9.74%)
Mutual labels:  server-rendering
Mithril Isomorphic Example
Example of an isomorphic mithril application
Stars: ✭ 107 (-45.13%)
Mutual labels:  mithril
Awesome Mithril
A curated list of Mithril awesome
Stars: ✭ 155 (-20.51%)
Mutual labels:  mithril
Dva Starter
完美使用 dva react react-router,最好用的ssr脚手架,服务器渲染最佳实践
Stars: ✭ 60 (-69.23%)
Mutual labels:  server-rendering
React Paginating
Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭
Stars: ✭ 89 (-54.36%)
Mutual labels:  server-rendering
Isomorphic Redux Cnode
😊👻基于react->express->mongo技术栈的同构SPA
Stars: ✭ 123 (-36.92%)
Mutual labels:  server-rendering
Lichobile
lichess.org mobile application
Stars: ✭ 1,043 (+434.87%)
Mutual labels:  mithril
Chrome Prerender
Render JavaScript-rendered page as HTML/PDF/mhtml/png/jpeg using Headless Chrome
Stars: ✭ 161 (-17.44%)
Mutual labels:  server-rendering
Laravel Nuxt
A Laravel-Nuxt starter kit.
Stars: ✭ 943 (+383.59%)
Mutual labels:  server-rendering
Crucible
API CMS UI powered by Firebase, mithril, and my own dwindling sanity. Oh, and acronyms.
Stars: ✭ 116 (-40.51%)
Mutual labels:  mithril
Mithril.js
A JavaScript Framework for Building Brilliant Applications
Stars: ✭ 13,062 (+6598.46%)
Mutual labels:  mithril
Mithril Hx
Haxe externs for Mithril (JS MVC framework)
Stars: ✭ 178 (-8.72%)
Mutual labels:  mithril
Create React Server
Server & middleware for React + Router + Redux with Server Side Rendering
Stars: ✭ 139 (-28.72%)
Mutual labels:  server-rendering

mithril-node-render

Gitter Build Status rethink.js Dependency Status devDependency Status

Use mithril views to render server side

Demo

Usage Example

Installation

npm install mithril-node-render

Usage

// 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 === '<span>huhu</span>'
})

var html = render.sync(m('span', 'huhu'))
// html === '<span>huhu</span>'

Async components

As you see the rendering is asynchronous. It lets you await certain data from within oninit hooks.

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 === '<div>bar</div>'
})

Sync rendering

You can also render synchronously. You just don't get the waitFor callback.

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 === '<div>bar</div>'

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 <br> and <meta> 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].