https://github.com/ara-framework/hypernova-hyperapp

Hyperapp bindings for Hypernova
https://github.com/ara-framework/hypernova-hyperapp

Last synced: 4 days 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T05:53:29.000Z (over 3 years ago)
• Last Synced: 2023-03-02T22:50:54.820Z (almost 2 years ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/hypernova-hyperapp
• Size: 8.79 KB
• Stars: 4
• Watchers: 2
• 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)

```