export default function IsomorphicRouterRenderer(alt, routes) {
let renderedMarkup;
if (typeof window === 'undefined') {
renderedMarkup = (state, url) => {
// FIXME: Retaining variable markup outside of Handler function is bad.
// Should be a return value.
let markup;
Router.run(routes, url, (Handler) => {
alt.bootstrap(state);
let content = React.renderToString(React.createElement(Handler));
markup = Iso.render(content, alt.flush());
});
return markup;
};
} else {
renderedMarkup = Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
Router.run(routes, Router.HistoryLocation, (Handler) => {
let node = React.createElement(Handler);
React.render(node, container);
});
});
}
return renderedMarkup;
}
function run() {
// Make taps on links and buttons work fast on mobiles
FastClick.attach(document.body);
// Setup the client-side stores with the same data the server had
Iso.bootstrap((state) => {
alt.bootstrap(state);
});
// Re-render the app when window.location changes
Location.listen(() => {
window.scrollTo(0, 0);
render(
<ContextHolder context={context}>
<Router
history={browserHistory}
routes={routes}
/>
</ContextHolder>,
appContainer
);
});
// Remove the pre-rendered CSS because it's no longer used
if (cssContainer) {
cssContainer.parentNode.removeChild(cssContainer);
cssContainer = null;
}
}
/*
* @param {AltObject} an instance of the Alt object
* @param {ReactObject} routes specified in react-router
* @param {String} HTML template passed in
* @return render function which can be executed on server/client side
*/
export default function UniversalRenderer(alt, routes, html) {
let render;
// if it is not a browser
if (typeof window === 'undefined') {
// if there is a html string passed in
// render the markup and inject it into the html string
if (html) {
render = (state, url) => {
const markup = renderToMarkup(alt, routes, state, url);
return html.replace('CONTENT', markup);
};
} else {
render = (state, url) => {
return renderToMarkup(alt, routes, state, url);
};
}
} else {
render = Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
Router.run(routes, Router.HistoryLocation, (Handler) => {
let node = React.createElement(Handler);
React.render(node, container);
});
});
}
return render;
}
window.onload = () => {
/*eslint-disable no-unused-vars*/
Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
render(<Router history={history}>{routes}</Router>, container);
});
/*eslint-enable no-unused-vars*/
};
function IsomorphicRouterRenderer(alt) {
if (typeof window === 'undefined') {
return function (state, url) {
var markup;
Router.run(routes, url, function (Handler) {
alt.bootstrap(state);
var content = React.renderToString(React.createElement(Handler));
markup = Iso.render(content, alt.takeSnapshot());
alt.flush();
});
return markup;
};
} else {
Iso.bootstrap(function (state, _, container) {
alt.bootstrap(state);
Router.run(routes, Router.HistoryLocation, function (Handler) {
var node = React.createElement(Handler);
React.render(node, container);
});
});
}
}
import React from 'react';
import ReactDom from 'react-dom';
import {createHistory} from 'history';
import Iso from 'iso';
/*Routes*/
import Router from 'react-router';
import routes from './routes';
/*Components*/
import altInstance from './components/alt';
/*Styles*/
import './styles/app.css';
/*createHistory component allows to emulate routing with html5 (without #) */
let history = createHistory();
Iso.bootstrap((state, _, container) => {
var elem = document.getElementById('app');
altInstance.bootstrap(state);
ReactDom.render(<Router history={history} children={routes}/>, elem);
});
return new Promise((resolve) => {
Iso.bootstrap((initialState, __, container) => {
resolve({initialState, __, container});
});
});
import Router from 'react-router';
import React from 'react';
import routes from 'routes.jsx';
import Iso from 'iso';
import alt from './alt';
Iso.bootstrap(function(state, _, container){
alt.bootstrap(state);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('app'));
});
});
import React from 'react';
import Router from 'react-router';
import ReactDOM from 'react-dom';
import Iso from 'iso';
import alt from './src/js/alt';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import routes from './src/routes';
let history = createBrowserHistory();
// bootstrap reads the state passed down from server.js
Iso.bootstrap(function (state, container) {
// Seed state into client side alt stores
alt.bootstrap(state);
// Render Router/App into div#app
ReactDOM.render(<Router history={history}>{routes}</Router>, document.getElementById('app'));
})
import Iso from 'iso'
import * as Render from './Render'
export default {
define: Render.withData,
render(alt, Component, props) {
if (typeof window === 'undefined') {
return Render.toString(alt, Component, props).then((obj) => {
return {
html: Iso.render(obj.html, obj.state, { iso: 1 })
}
}).catch((err) => {
// return the empty markup in html when there's an error
return {
err,
html: Iso.render()
}
})
} else {
Iso.bootstrap((state, meta, node) => {
alt.bootstrap(state)
Render.toDOM(Component, props, node, meta.iso)
})
return Promise.resolve()
}
}
}
import React from 'react';
import Router from 'react-router';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import routes from './routes';
import Navbar from './components/Navbar';
let history = createBrowserHistory();
import Iso from 'iso';
import alt from './alt';
// ReactDOM.render(<Router history={history}>{routes}</Router>, document.getElementById('app'));
Iso.bootstrap(function (state, meta) {
alt.bootstrap(state);
ReactDOM.render(<Router history={history}>{routes}</Router>, document.getElementById('app'));
});
import ConsoleExports from './utils/ConsoleExports';
import {serverApiRecordEvent} from 'app/utils/ServerApiClient';
window.onerror = error => {
serverApiRecordEvent('client_error', error);
};
Iso.bootstrap(initial_state => {
console.log('Initial state', initial_state);
window.$STM_Config = initial_state.offchain.config;
if (initial_state.offchain.serverBusy) {
window.$STM_ServerBusy = true;
}
if (initial_state.offchain.csrf) {
window.$STM_csrf = initial_state.offchain.csrf;
delete initial_state.offchain.csrf;
}
const location = `${window.location.pathname}${window.location.search}${window.location.hash}`;
universalRender({history, location, initial_state})
.catch(error => {
console.error(error);
serverApiRecordEvent('client_error', error);
});
});
try {
if(process.env.NODE_ENV === 'development') {
// Adds some object refs to the global window object
ConsoleExports.init(window)
}
} catch (e) {
import RouterActions from './actions/RouterActions';
import Iso from 'iso';
import alt from './alt';
let router = Router.create({
routes: routes,
location: Router.HistoryLocation
});
RouterContainer.set(router);
Iso.bootstrap((state, meta, container) => {
alt.bootstrap(state);
let token = localStorage.getItem('token');
if (token) {
LoginActions.loginUser(token);
}
router.run((Handler, state) => {
RouterActions.changeRoute(state);
let node = <Handler />;
React.render(node, container);
});
});
import Iso from 'iso'
import * as Render from './Render'
export default {
define: Render.withData,
render(alt, Component, props) {
// recycle state
alt.recycle()
if (typeof window === 'undefined') {
return Render.toString(Component, props).then((markup) => {
return Iso.render(markup, alt.takeSnapshot())
})
} else {
return Promise.resolve(
Iso.bootstrap((state, _, node) => {
alt.bootstrap(state)
Render.toDOM(Component, props, node)
})
)
}
}
}
'use strict';
require('es5-shim');
require('es5-shim/es5-sham');
var React = require('react');
var App = require('./components/App.jsx');
var Iso = require('iso');
var Flux = require('./flux');
var flux = new Flux();
// 這是 client app 負責將 server encode 好的資料還還並灌入 store 中
Iso.bootstrap(function (state, meta, container) {
flux.bootstrap(state);
// 注意這裏將 flux instance 做為參數傳入 react app 內了
React.render( React.createElement(App, {flux: flux}), container);
});
// 示範如果不需 isomorphic 時，此手法仍可當作一般 flux 來啟動程式
// flux.bootstrap(state);
// React.render( React.createElement(App, {flux: flux}), document.querySelector('#container') );
import {render} from 'react-dom';
import routes from '../routes';
import iso from 'iso';
function renderRoute(serverState) {
routes.dispatch(serverState, (state, component) => {
render(component, document.getElementById('app'));
});
}
iso.bootstrap(state => {
renderRoute(state);
});