createStringRenderer(options) {
return {
render(el, context) {
if (options.context && (el.type.contextTypes || options.childContextTypes)) {
const childContextTypes = {
...(el.type.contextTypes || {}),
...options.childContextTypes,
};
const ContextWrapper = createRenderWrapper(el, context, childContextTypes);
return ReactDOMServer.renderToStaticMarkup(React.createElement(ContextWrapper));
}
return ReactDOMServer.renderToStaticMarkup(el);
},
};
}
function rewindAsStaticMarkup() {
const tags = render(DocumentMeta.rewind());
return renderToStaticMarkup(<div>{tags}</div>)
.replace(/(^<div>|<\/div>$)/g, '')
.replace(/data-rdm="true"/g, 'data-rdm');
}
it('should mix state in with a Reflux.Component instance', function()
{
var MyStore = (function (_super) {
__extends(Store, _super);
function Store() {
_super.call(this);
this.state = {foo:'bar'};
}
return Store;
}(Reflux.Store));
var MyComponent = (function (_super) {
__extends(Component, _super);
function Component(props) {
_super.call(this, props);
this.state = {};
this.store = MyStore;
}
Component.prototype.render = function () {
return React.createElement("p", null, this.state.foo);
};
return Component;
}(Reflux.Component));
var result = ReactDOMServer.renderToStaticMarkup( React.createElement(MyComponent, null) );
assert.equal( result, '<p>bar</p>' );
});
render: function(path, str, context){
delete require.cache[path];
const component = require(path);
const element = React.createElement(component, context);
const html = ReactDOM.renderToStaticMarkup(element);
return Promise.resolve(html);
},
const renderHTML: PhenomicPluginRenderHTMLType = (
config,
props = {},
Html = DefaultHtml
) => {
const html = (
<Html
body={
<div
id="PhenomicRoot"
dangerouslySetInnerHTML={{ __html: props.body || "" }}
/>
}
state={
props.state &&
<script
id="PhenomicHydration"
type="text/json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(props.state)
}}
/>
}
script={<script src={`/${config.bundleName}.js`} async />}
/>
);
return `<!DOCTYPE html>${ReactDOMServer.renderToStaticMarkup(html)}`;
};
_renderRepCell: function (keyPrefix, reps) {
var keys, services, tooltipContent;
keys = Object.keys(reps);
if (keys.length===0) return '';
services = keys.map(function (key, idx) {
return (
<p key={keyPrefix + '_service' + idx}>
<span key={keyPrefix + '_service' + idx + '_name'} className="text-uppercase">{key}: </span>
<span key={keyPrefix + '_service' + idx + '_rep'} className={'label label-' + reps[key].cssClass}>{reps[key].text}</span>
</p>
);
});
tooltipContent = ReactDOMServer.renderToStaticMarkup(
<div>
{services}
</div>
);
return (
<span key={keyPrefix + '_rep'} className="fa fa-lg fa-shield" data-container="body" data-toggle="popover"
data-placement="right" data-content={tooltipContent}>
</span>
);
},
match({routes, location: req.url }, (error, redirectLocation, renderProps) => {
const reactMarkup = ReactDOMServer.renderToStaticMarkup(
<Provider store={store}>
<RoutingContext {...renderProps}/>
</Provider>
)
// The initial Markup for our react components
res.locals.reactMarkup = reactMarkup;
// The initial State of our Redux Application
res.locals.initialState = JSON.stringify(store.getState());
if (error) {
res.status(500).send(error.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if (renderProps) {
// WE DID IT SEND THAT BAD FOOL BACK!
res.status(200).render('index.html');
} else {
// The route was not found :(
res.status(404).render('index.html');
}
});
}, (err) => {
if (err) {
if (err.statusCode && err.statusCode === 404) {
next();
} else {
next(err);
}
return;
}
debug('Exposing context state');
const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
debug('Rendering Application component into html');
const markup = ReactDOM.renderToString(createElementWithContext(context));
const htmlElement = React.createElement(HtmlComponent, {
clientFile: env === 'production' ? 'main.min.js' : 'main.js',
context: context.getComponentContext(),
state: exposed,
markup: markup
});
const html = ReactDOM.renderToStaticMarkup(htmlElement);
debug('Sending markup');
res.type('html');
res.write('<!DOCTYPE html>' + html);
res.end();
});
function getHtml(component) {
try {
return ReactDOMServer.renderToStaticMarkup(component({}));
} catch(ex) {
return getErrorAsHtml(ex);
}
}
selectionMessage() {
return ReactDOMServer.renderToStaticMarkup(
exp.l('You selected {releasegroup}.', {
releasegroup: this.reactElement({target: '_blank'}),
})
);
}
it('should extend third party components with Reflux.Component.extend()', function()
{
var OtherComponent = (function (_super) {
__extends(Component, _super);
function Component(props) {
_super.call(this, props);
this.foo = 'other class bar and ';
}
return Component;
}(React.Component));
var MyComponent = (function (_super) {
__extends(Component, _super);
function Component(props) {
_super.call(this, props);
this.store = Reflux.createStore({state:{foo:'baz'}});
}
Component.prototype.render = function () {
return React.createElement("p", null, this.foo+this.state.foo);
};
return Component;
}(Reflux.Component.extend(OtherComponent)));
var result = ReactDOMServer.renderToStaticMarkup( React.createElement(MyComponent, null) );
assert.equal( result, '<p>other class bar and baz</p>' );
});
http.createServer(function (req, res) {
if (req.url == '/') {
res.setHeader('Content-Type', 'text/html');
var props = {
items: ['Item 0', 'Item 1']
};
var html = ReactDOMServer.renderToStaticMarkup(React.createElement(
'body',
null,
React.createElement('div', { id: 'content', dangerouslySetInnerHTML: { __html: ReactDOMServer.renderToString(React.createElement(App, { items: props.items }))
} }),
React.createElement('script', { dangerouslySetInnerHTML: { __html: 'var APP_PROPS = ' + JSON.stringify(props) + ';'
} }),
React.createElement('script', { src: '//fb.me/react-0.14.0.min.js' }),
React.createElement('script', { src: '//fb.me/react-dom-0.14.0.min.js' }),
React.createElement('script', { src: '/bundle.js' })
));
res.end(html);
} else if (req.url == '/bundle.js') {
res.setHeader('Content-Type', 'text/javascript');
browserify().add('./browserify.js').transform(literalify.configure({
'react': 'window.React',
'react-dom': 'window.ReactDOM'
})).bundle().pipe(res);
} else {
res.statusCode = 404;
res.end();
}
}).listen(3000, function (err) {
it('should accept React ancestors and children', function()
{
var MyChild = React.createClass({
render: function() {
return React.createElement("span", null, 'Hello');
}
});
var MyComponent = (function (_super) {
__extends(Component, _super);
function Component(props) {
_super.call(this, props);
this.state = {};
this.store = Reflux.createStore({state:{a:'b'}});
}
Component.prototype.render = function () {
return React.createElement("p", null, React.createElement(MyChild, null));
};
return Component;
}(Reflux.Component));
var MyParent = React.createClass({
render: function() {
return React.createElement("div", null, React.createElement(MyComponent, null));
}
});
var result = ReactDOMServer.renderToStaticMarkup( React.createElement(MyParent, null) );
assert.equal( result, '<div><p><span>Hello</span></p></div>' );
});
}, (err) => {
if (err) {
if (err.statusCode && err.statusCode === 404) {
next();
} else {
next(err);
}
return;
}
log('info', 'Exposing context state');
const exposed = `window.App=${serialize(flux.dehydrate(context))};`;
log('info', 'Rendering Application component into html');
const markup = ReactDOM.renderToString(createElementWithContext(context));
const htmlElement = React.createElement(Html, {
clientFile: env === 'production' ? 'main.min.js' : 'main.js',
context: context.getComponentContext(),
state: exposed,
markup: markup
});
const html = ReactDOM.renderToStaticMarkup(htmlElement);
log('info', 'Sending markup');
res.type('html');
res.write(`<!DOCTYPE html>${html}`);
res.end();
});
return function _compile(context) {
var markup = engineOptions.doctype;
try {
markup += ReactDOMServer.renderToStaticMarkup(React.createElement(component, context));
} catch (e) {
throw e;
} finally {
if (options.env === 'development') {
// Remove all files from the module cache that are in the view folder.
Object.keys(require.cache).forEach(function(module) {
if (moduleDetectRegEx.test(require.cache[module].filename)) {
delete require.cache[module];
}
});
}
}
if (engineOptions.beautify) {
// NOTE: This will screw up some things where whitespace is important, and be
// subtly different than prod.
markup = beautifyHTML(markup);
}
return markup;
};
/**
* Render the full application with props and send the response.
*
* @param {Object} req - The Request object.
* @param {Object} res - The Response object.
* @param {Object} context - The fluxible application context.
* @param {Object} app - The fluxible app.
* @param {Object} props - The already accumulated props object.
*/
function renderApp (req, res, context, app, props) {
const clientSideRenderOnly = req.query.render === '0';
let state;
props.mainScript = settings.web.assets.mainScript();
props.revAsset = settings.web.assets.revAsset.bind(settings.web.assets);
props.trackingSnippet = config.analytics.snippet;
props.browserConfig = settings.web.browserConfig;
props.appManifest = settings.web.appManifest;
props.otherStyles = settings.web.css.other;
props.swRegistrationScript = settings.web.assets.swRegScript();
props.swMainScript = '/' + settings.web.assets.swMainScript(true);
debug('Creating app state');
state = app.dehydrate(context);
state.analytics = config.analytics.globalRef;
state.timestamp = Date.now();
props.state = `window.App=${serialize(state)};`;
if (clientSideRenderOnly) {
debug('NOT Rendering app component');
props.markup = '';
} else {
debug('Rendering app component into html');
props.markup = ReactDOM.renderToString(createElement(context));
}
props.context = context.getComponentContext();
debug('Rendering html');
res.send('<!DOCTYPE html>' +
ReactDOM.renderToStaticMarkup(HtmlComponent(props))
);
}
it('works with complex children', function () {
var Component1 = createReactClass({
render: function() {
return React.createElement('p', null,
React.createElement('span', null, 'c'),
React.createElement('span', null, 'd')
);
}
});
var Component2 = createReactClass({
render: function () {
return React.createElement(DocumentTitle, {title: 'irrelevant'},
React.createElement('div', null,
React.createElement('div', null, 'a'),
React.createElement('div', null, 'b'),
React.createElement('div', null, React.createElement(Component1))
)
);
}
});
var markup = ReactDOMServer.renderToStaticMarkup(React.createElement(Component2));
expect(markup).to.equal(
'<div>' +
'<div>a</div>' +
'<div>b</div>' +
'<div>' +
'<p>' +
'<span>c</span>' +
'<span>d</span>' +
'</p>' +
'</div>' +
'</div>'
);
});
Component.prototype.render = function render(props, toStaticMarkup, callback) {
var element = this.factory(props);
if (toStaticMarkup) {
callback(ReactDOMServer.renderToStaticMarkup(element));
} else {
callback(ReactDOMServer.renderToString(element));
}
};
test('returns "element" and "getStyleElement"', () => {
AppRegistry.registerComponent('App', () => NoopComponent);
const { element, getStyleElement } = AppRegistry.getApplication('App', {});
const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement());
expect(element).toMatchSnapshot();
expect(styleElement).toMatchSnapshot();
});
async function renderPage(page, component) {
const data = {
body: ReactDOM.renderToString(component),
};
const file = join(__dirname, '../build', page.file.substr(0, page.file.lastIndexOf('.')) + '.html');
const html = '<!doctype html>\n' + ReactDOM.renderToStaticMarkup(<Html debug={DEBUG} {...data} />);
await fs.mkdir(dirname(file));
await fs.writeFile(file, html);
}
it('should pass done property to component', function(done) {
const Component = props => {
expect(props.done).to.be.a('Function');
done();
return null;
}
const ComponentWithDone = withDone(Component);
renderToStaticMarkup(<ComponentWithDone />);
});
export function renderLinkedImage(linkElem, image) {
const linkHref = linkElem.getAttribute("href");
return renderToStaticMarkup(
<a href={linkHref} data-mce-href={linkHref}>
{constructJSXImageElement(image, { doNotLink: true })}
</a>
);
}
serialize = (state, options = {}) => {
const { document } = state
const elements = document.nodes.map(this.serializeNode)
if (options.render === false) return elements
const html = ReactDOMServer.renderToStaticMarkup(<body>{elements}</body>)
const inner = html.slice(6, -7)
return inner
}
createHtmlMarkupStringOfTweetList: function () {
var htmlString = ReactDOMServer.renderToStaticMarkup(
<TweetList tweets={this.props.tweets}/>
);
var htmlMarkup = {
html: htmlString
};
return JSON.stringify(htmlMarkup);
},
it('returns undefined if no mounted instances exist', function () {
ReactDOMServer.renderToStaticMarkup(
React.createElement(DocumentTitle, {title: 'a'},
React.createElement(DocumentTitle, {title: 'b'}, React.createElement(DocumentTitle, {title: 'c'}))
)
);
DocumentTitle.rewind();
expect(DocumentTitle.peek()).to.equal(undefined);
});
it('returns the latest document title', function () {
var title = 'cheese';
ReactDOMServer.renderToStaticMarkup(
React.createElement(DocumentTitle, {title: 'a'},
React.createElement(DocumentTitle, {title: 'b'}, React.createElement(DocumentTitle, {title: title}))
)
);
expect(DocumentTitle.rewind()).to.equal(title);
});
it('NoSuggestionsPanel markup', () => {
const actual = ReactDOMServer.renderToStaticMarkup(
<NoSuggestionsPanel
message="You're on your own"
icon="loader"/>
)
const expected = ReactDOMServer.renderToStaticMarkup(
<div
className="u-posCenterCenter u-textEmpty u-textCenter">
<Icon
name="loader"
className="Icon--lg Icon--circle u-sMB-1-4"/>
<p>You're on your own</p>
</div>
)
expect(actual).toEqual(expected)
})
it('should resolve values for server-side rendering', () => {
const Bar = falcorGetValue({ greeting: ['greeting'] })(Foo)
const FooBar = () => (
<Provider falcor={model}>
<Bar />
</Provider>
)
const html = renderToStaticMarkup(<FooBar />)
expect(html).toBe('<div>Hello World!</div>')
})
function getErrorAsHtml(ex) {
if (isProduction) {
console.error(ex);
return 'Server error';
}
var component = require('./error').default;
var factory = React.createFactory(component);
return ReactDOMServer.renderToStaticMarkup(factory({stack: ex.stack}));
}
app.get('*', (req, res) => {
res.send(
renderToStaticMarkup(
require('../src/html.react').default({
title: process.env.META_TITLE,
description: process.env.META_DESCRIPTION
})
)
);
});