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 }) ) ); });