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

RE:DOM Bindings for Hypernova
https://github.com/ara-framework/hypernova-redom

Last synced: 4 days ago
JSON representation

RE:DOM Bindings for Hypernova

• Host: GitHub
• URL: https://github.com/ara-framework/hypernova-redom
• Owner: ara-framework
• License: mit
• Created: 2019-08-11T17:34:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-29T20:23:46.000Z (over 3 years ago)
• Last Synced: 2024-08-09T03:15:35.539Z (5 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/hypernova-redom
• Size: 9.77 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hypernova-redom 

[RE:DOM](https://github.com/redom/redom) 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-redom

```

## Usage

Here's how to use it in your module:

```js

import { renderRedom } from 'hypernova-redom'

import Example from './components/Example'

export default renderRedom('Example', Example)

```

### Server Prefetch

You need to add a method `serverPrefetch` to components that needs to fetch data in the server before be rendered.

```js

class Example {

  constructor({ items }) {

    this.el = // render view using items

  }

}

Example.serverPrefetch = async (props) => {

  const items = await // perform request outside the app

  // return new props (original props + fetched data)

  return {

    ...props,

    items

  }

}

```