Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kriasoft/hyperapp-render
Render Hyperapp to an HTML string with SSR and Node.js streaming support.
https://github.com/kriasoft/hyperapp-render
html hyperapp render server-side-rendering ssr stream
Last synced: about 2 months ago
JSON representation
Render Hyperapp to an HTML string with SSR and Node.js streaming support.
- Host: GitHub
- URL: https://github.com/kriasoft/hyperapp-render
- Owner: kriasoft
- License: mit
- Created: 2018-01-17T11:29:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T18:04:19.000Z (about 1 year ago)
- Last Synced: 2024-04-14T00:59:33.964Z (5 months ago)
- Topics: html, hyperapp, render, server-side-rendering, ssr, stream
- Language: JavaScript
- Homepage:
- Size: 1.12 MB
- Stars: 103
- Watchers: 5
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-node-esm - hyperapp-render - render Hyperapp to an HTML string with SSR and Node.js streaming support. (Packages / SSR)
README
# 
Hyperapp Render
[](https://www.npmjs.com/package/hyperapp-render)
[](https://www.npmjs.com/package/hyperapp-render)
[](https://bundlephobia.com/result?p=hyperapp-render)
[](https://discord.gg/eFvZXzXF9U 'Join us')
This library is allowing you to render
[Hyperapp](https://github.com/hyperapp/hyperapp) views to an HTML string.
- **User experience** — Generate HTML on the server and send the markup
down on the initial request for faster page loads. Built-in
[mounting](https://github.com/hyperapp/hyperapp/tree/1.2.9#mounting)
feature in Hyperapp is allowing you to have a very performant first-load experience.
- **Accessibility** — Allow search engines to crawl your pages for
[SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) purposes.
- **Testability** — [Check HTML validity](https://en.wikipedia.org/wiki/Validator) and use
[snapshot testing](https://jestjs.io/docs/en/snapshot-testing.html)
to improve quality of your software.
## Getting Started
Our first example is an interactive app from which you can generate an HTML markup.
Go ahead and [try it online](https://codepen.io/frenzzy/pen/zpmRQY/left/?editors=0010).
```jsx
import { h } from 'hyperapp'
import { renderToString } from 'hyperapp-render'
const state = {
text: 'Hello'
}
const actions = {
setText: text => ({ text })
}
const view = (state, actions) => (
{state.text.trim() === '' ? '👋' : state.text}
actions.setText(e.target.value)} />
)
const html = renderToString(view(state, actions))
console.log(html) // =>
Hello
```
Looking for a boilerplate?
Try [Hyperapp Starter](https://github.com/kriasoft/hyperapp-starter)
with pre-configured server-side rendering and many more.
## Installation
Using [npm](https://www.npmjs.com/package/hyperapp-render):
```bash
npm install hyperapp-render --save
```
Or using a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) like
[unpkg.com](https://unpkg.com/hyperapp-render) or
[jsDelivr](https://cdn.jsdelivr.net/npm/hyperapp-render)
with the following script tag:
```html
```
You can find the library in `window.hyperappRender`.
We support all ES5-compliant browsers, including Internet Explorer 9 and above,
but depending on your target browsers you may need to include
[polyfills]() for
[`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and
[`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
before any other code.
## Usage
The library provides two functions
which you can use depending on your needs or personal preferences:
```jsx
import { renderToString, renderToStream } from 'hyperapp-render'
renderToString() // =>
renderToString(view(state, actions)) // =>
renderToString(view, state, actions) // =>
renderToStream() // => =>
renderToStream(view(state, actions)) // => =>
renderToStream(view, state, actions) // => =>
```
**Note:** `renderToStream` is available from
[Node.js](https://nodejs.org/en/) environment only (v6 or newer).
## Overview
You can use `renderToString` function to generate HTML on the server
and send the markup down on the initial request for faster page loads
and to allow search engines to crawl your pages for
[SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) purposes.
If you call [`hyperapp.app()`](https://github.com/hyperapp/hyperapp/tree/1.2.9#mounting)
on a node that already has this server-rendered markup,
Hyperapp will preserve it and only attach event handlers, allowing you
to have a very performant first-load experience.
The `renderToStream` function returns a
[Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams)
that outputs an HTML string.
The HTML output by this stream is exactly equal to what `renderToString` would return.
By using this function you can reduce [TTFB](https://en.wikipedia.org/wiki/Time_to_first_byte)
and improve user experience even more.
## Caveats
The library automatically escapes text content and attribute values
of [virtual DOM nodes](https://github.com/hyperapp/hyperapp/tree/1.2.9#view)
to protect your application against
[XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
However, it is not safe to allow "user input" for node names or attribute keys:
```jsx
const Node = 'div onclick="alert()"'
renderToString(Hi)
// =>
Hi
const attributes = { 'onclick="alert()" title': 'XSS' }
renderToString(
Hi)
// => Hi
const userInput = 'alert()'
renderToString(
Hi)
// => alert()
```
## License
Hyperapp Render is MIT licensed.
See [LICENSE](https://github.com/kriasoft/hyperapp-render/blob/master/LICENSE.md).