Vulcan/packages/_react-router-ssr/lib/client.jsx
2016-11-29 11:35:20 +09:00

78 lines
2.5 KiB
JavaScript

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import Cookie from 'react-cookie';
const ReactRouterSSR = {
Run(routes, clientOptions) {
if (!clientOptions) {
clientOptions = {};
}
let history = browserHistory;
if(typeof clientOptions.historyHook === 'function') {
history = clientOptions.historyHook(history);
}
Meteor.startup(function() {
const rootElementName = clientOptions.rootElement || 'react-app';
const rootElementType = clientOptions.rootElementType || 'div';
const attributes = clientOptions.rootElementAttributes instanceof Array ? clientOptions.rootElementAttributes : [];
let rootElement = document.getElementById(rootElementName);
// In case the root element doesn't exist, let's create it
if (!rootElement) {
rootElement = document.createElement(rootElementType);
rootElement.id = rootElementName;
// check if a 2-dimensional array was passed... if not, be nice and handle it anyway
if(attributes[0] instanceof Array) {
// set attributes
for(var i = 0; i < attributes.length; i++) {
rootElement.setAttribute(attributes[i][0], attributes[i][1]);
}
} else if (attributes.length > 0){
rootElement.setAttribute(attributes[0], attributes[1]);
}
document.body.appendChild(rootElement);
}
// Rehydrate data client side, if desired.
if(typeof clientOptions.rehydrateHook === 'function') {
InjectData.getData('dehydrated-initial-data', data => {
const rehydratedData = data ? JSON.parse(data) : undefined;
clientOptions.rehydrateHook(rehydratedData);
});
}
let app = (
<Router
history={history}
children={routes}
{...clientOptions.props} />
);
if (typeof clientOptions.wrapperHook === 'function') {
const loginToken = Cookie.load('meteor_login_token') || localStorage['Meteor.loginToken'];
app = clientOptions.wrapperHook(app, loginToken);
}
if (typeof clientOptions.renderHook === 'function') {
clientOptions.renderHook(app, rootElement);
} else {
ReactDOM.render(app, rootElement);
}
let collectorEl = document.getElementById(clientOptions.styleCollectorId || 'css-style-collector-data')
if (collectorEl) {
collectorEl.parentNode.removeChild(collectorEl);
}
});
}
};
export { ReactRouterSSR };
export default ReactRouterSSR;