https://github.com/ara-framework/hypernova-hyperapp
Hyperapp bindings for Hypernova
https://github.com/ara-framework/hypernova-hyperapp
Last synced: about 1 year ago
JSON representation
Hyperapp bindings for Hypernova
- Host: GitHub
- URL: https://github.com/ara-framework/hypernova-hyperapp
- Owner: ara-framework
- License: mit
- Created: 2019-06-23T04:41:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T05:53:29.000Z (over 4 years ago)
- Last Synced: 2025-03-27T17:22:34.163Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/hypernova-hyperapp
- Size: 8.79 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hypernova-hyperapp
[Hyperapp](https://github.com/jorgebucaran/hyperapp) bindings for [Hypernova](https://github.com/airbnb/hypernova).
On the server, wraps the component in a function to render it to a HTML string given its props.
On the client, calling this function with your component scans the DOM for any server-side rendered instances of it. It then resumes those components using the server-specified props.
## Install
```sh
npm install hypernova-hyperapp
```
## Stateful components
```js
const Example = ({ items, term }) => (
{ term }
{
items.map(item => (
- {item}
))
}
)
export default {
init: (props) => {
// init state based on props
const state = {
title: props.title
}
return state
},
nova: {
beforeCreate: async (props) => {
const newProps = { ...props }
if (typeof window === 'undefined') {
/* fetch content and mutate original props */
const items = await content.search(props.term)
newProps.items = items
}
return newProps
}
},
view: Example
}
```
## Usage
Here's how to use it in your module:
```js
import { renderHyperapp } from 'hypernova-hyperapp'
import Example from './components/Example'
export default renderHyperapp('Example', Example)
```