Skip to content
This repository was archived by the owner on Jun 3, 2019. It is now read-only.

renderToNodeStream the full app without renderToString #564

Open
wants to merge 10 commits into
base: next
Choose a base branch
from
Open

renderToNodeStream the full app without renderToString #564

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dfc1917
fix config import path in /internal/development/index.js
Mar 13, 2018
31514bb
renderToNodeStream the full app without renderToStream
Mar 14, 2018
d5eb417
Merge branch 'next' of https://github.com/ctrlplusb/react-universally…
Mar 14, 2018
84728ee
Merge branch 'next' of https://github.com/ctrlplusb/react-universally…
Mar 17, 2018
a107229
minor base markup change, fix proptypes
Mar 17, 2018
d5a2220
tweak syntax for passing App to next steps
Mar 17, 2018
f1436f2
Merge branch 'next' of https://github.com/ctrlplusb/react-universally…
Mar 28, 2018
1fc35ea
add missing Helmet to counter route in demo app
Mar 28, 2018
dfe36e8
swap react-helmet for react-helmet-async
Mar 28, 2018
18aab26
update Jest snapshots to match output from react-helmet-async
Mar 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions server/middleware/reactApplication/ServerHTML.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function scriptTag(jsFilePath) {
// COMPONENT

function ServerHTML(props) {
const { asyncComponentsState, helmet, nonce, reactAppString } = props;
const { asyncComponentsState, helmet, nonce, children } = props;

// Creates an inline script definition that is protected by the nonce.
const inlineScript = body => (
Expand Down Expand Up @@ -124,8 +124,9 @@ function ServerHTML(props) {
bodyElements={bodyElements.map((x, idx) => (
<KeyedComponent key={idx}>{x}</KeyedComponent>
))}
appBodyString={reactAppString}
/>
>
<div id="app">{children}</div>
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be {children} only

</HTML>
);
}

Expand All @@ -137,12 +138,12 @@ ServerHTML.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
helmet: PropTypes.object,
nonce: PropTypes.string,
reactAppString: PropTypes.string,
children: PropTypes.object,
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be PropTypes.node

};

ServerHTML.defaultProps = {
asyncComponentsState: undefined,
helmet: undefined,
nonce: undefined,
reactAppString: undefined,
children: undefined,
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React expect null element instead of undefined right?

};
16 changes: 7 additions & 9 deletions server/middleware/reactApplication/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React from 'react';
import Helmet from 'react-helmet';
import {
renderToString,
renderToStaticMarkup,
renderToNodeStream,
} from 'react-dom/server';
import { renderToStaticMarkup, renderToNodeStream } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import {
AsyncComponentProvider,
Expand Down Expand Up @@ -62,19 +58,21 @@ export default function reactApplicationMiddleware(request, response) {
</AsyncComponentProvider>
);

const App = () => app;
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

place this below asyncBootstrapper, because async bootstrapper run all function to preloaded data in with react-async-component, on line 68 that you deleted add this code instead
const ResolvedApp = () => app;


// Pass our app into the react-async-component helper so that any async
// components are resolved for the render.
asyncBootstrapper(app).then(() => {
const appString = renderToString(app);

// Generate the html response.
const html = renderToNodeStream(
<ServerHTML
reactAppString={appString}
// reactAppString={appString}
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should preserve this code as comment

nonce={nonce}
helmet={Helmet.rewind()}
asyncComponentsState={asyncComponentsContext.getState()}
/>,
>
<App />
</ServerHTML>,
);

switch (reactRouterContext.status) {
Expand Down
8 changes: 4 additions & 4 deletions shared/components/HTML/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
* The is the HTML shell for our React Application.
*/
function HTML(props) {
const { htmlAttributes, headerElements, bodyElements, appBodyString } = props;
const { htmlAttributes, headerElements, bodyElements, children } = props;

return (
<html {...htmlAttributes}>
<head>{headerElements}</head>
<body>
<div id="app" dangerouslySetInnerHTML={{ __html: appBodyString }} />
{children}
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should remain with this
<div id="app">{children}<div>
to have consistent element between server and client render

{bodyElements}
</body>
</html>
Expand All @@ -26,14 +26,14 @@ HTML.propTypes = {
htmlAttributes: PropTypes.object,
headerElements: PropTypes.node,
bodyElements: PropTypes.node,
appBodyString: PropTypes.string,
children: PropTypes.object,
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be node type

};

HTML.defaultProps = {
htmlAttributes: null,
headerElements: null,
bodyElements: null,
appBodyString: '',
children: undefined,
Copy link
Contributor

@diondirza diondirza Mar 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be null as default

};

// EXPORT
Expand Down