Skip to content

Instantly share code, notes, and snippets.

@svdoever
Created April 16, 2018 21:27
Show Gist options
  • Save svdoever/e486f661d3ac6fe7a9cd2108f431761e to your computer and use it in GitHub Desktop.
Save svdoever/e486f661d3ac6fe7a9cd2108f431761e to your computer and use it in GitHub Desktop.
Utility functions for creating an async hypernova component
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