Created
April 16, 2018 21:27
-
-
Save svdoever/e486f661d3ac6fe7a9cd2108f431761e to your computer and use it in GitHub Desktop.
Utility functions for creating an async hypernova component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import * as ReactDOM from 'react-dom'; | |
import * as ReactDOMServer from 'react-dom/server'; | |
import { Provider } from 'react-redux'; | |
import hypernova, { serialize, load } from 'hypernova'; | |
import { Store } from 'redux'; | |
export const renderReactAsyncReduxServer = (name: string, C: React.ComponentClass, store: Store<any>) => hypernova({ | |
server() { | |
return (props: any) => { | |
const wrappedComponent = <Provider store={store}><C /></Provider>; | |
const contents = ReactDOMServer.renderToString(wrappedComponent); | |
const serializeContent = serialize(name, contents, store.getState()); | |
// console.log("SERIALIZECONTENT", serializeContent); | |
return serializeContent; | |
}; | |
}, | |
client() { | |
/* tslint:disable:no-empty */ | |
} | |
}); | |
export const renderReactAsyncReduxClient = (name: string, C: React.ComponentClass, reduxStoreCreator: (data: any) => Store<any>) => hypernova({ | |
server() { | |
}, | |
client() { | |
const payloads: any[] = load(name); | |
if (payloads) { | |
payloads.forEach((payload) => { | |
const { node, data } = payload; | |
// console.log("CLIENT-DATA", data); | |
const store = reduxStoreCreator(data); | |
const wrappedComponent = <Provider store={store}><C /></Provider>; | |
if (ReactDOM.hydrate) { | |
ReactDOM.hydrate(wrappedComponent, node); | |
} else { | |
ReactDOM.render(wrappedComponent, node); | |
} | |
}); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment