Skip to content
This repository was archived by the owner on Oct 9, 2023. It is now read-only.

Use hydrate() instead of render() starting from react 16 #30

Merged
merged 1 commit into from
Nov 22, 2017
+48 −6
Merged

Use hydrate() instead of render() starting from react 16 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@
"homepage": "https://github.com/airbnb/hypernova-react#readme",
"peerDependencies": {
"hypernova": "^2.0.0",
"react": "0.14.x || >= 15.x",
"react-dom": "0.14.x || >= 15.x"
"react": "^0.14 || ^15 || ^16",
"react-dom": "^0.14 || ^15 || ^16"
},
"devDependencies": {
"babel-cli": "^6.26.0",
Expand All @@ -62,8 +62,8 @@
"jsdom": "^9.12.0",
"mocha": "^4.0.1",
"prop-types": "^15.6.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react": "^0.14 || ^15 || ^16",
"react-dom": "^0.14 || ^15 || ^16",
Copy link
Author

Choose a reason for hiding this comment

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

@ljharb like this? when I test this it always installs v16

Copy link
Collaborator

Choose a reason for hiding this comment

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

yep! that's fine, it will always install the latest, but it will be valid to install older versions.

"rimraf": "^2.6.2",
"sinon": "^4.1.2",
"sinon-sandbox": "^1.0.2"
Expand Down
7 changes: 6 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ export const renderReact = (name, component) => hypernova({
payloads.forEach((payload) => {
const { node, data } = payload;
const element = React.createElement(component, data);
ReactDOM.render(element, node);

if (ReactDOM.hydrate) {
ReactDOM.hydrate(element, node);
} else {
ReactDOM.render(element, node);
}
});
}

Expand Down
39 changes: 38 additions & 1 deletion test/renderReact-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import jsdom from 'jsdom';
import { assert } from 'chai';
import sinon from 'sinon';
import ReactDOM from 'react-dom';

import ExampleReactComponent from './components/ExampleReactComponent';
import { renderReact } from '..';
Expand All @@ -20,7 +22,7 @@ describe('renderReact', () => {
assert.match(result, /Hello Desmond/);
});

it('calls hypernova.client', (done) => {
it('calls hypernova.client (hydrate method)', (done) => {
jsdom.env(result, (err, window) => {
if (err) {
done(err);
Expand All @@ -30,9 +32,44 @@ describe('renderReact', () => {
global.window = window;
global.document = window.document;

const hydrateMethod = sinon.spy(ReactDOM, 'hydrate');
Copy link
Collaborator

Choose a reason for hiding this comment

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

will this work when hydrate doesn't exist yet?

Copy link
Author

Choose a reason for hiding this comment

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

@ljharb yes, this test runs in the hypernova-react package which (in this PR) depends on React ^16 and therefore always has the hydrate method available.
https://github.com/airbnb/hypernova-react/pull/30/files

Copy link
Collaborator

Choose a reason for hiding this comment

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

hypernova-react doesn't depend on v16, it devDepends on it, and peerDepends on 0.14 or 0.15 or 16 - if we wanted to test this repo on 0.14 or 0.15 (which we should, if we're not already), this test would fail.

Copy link
Author

Choose a reason for hiding this comment

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

how will we switch the react version to in our test cases? Shouldn't we use v16 and mock v15/v0.14 behaviour, which I'm doing on line 59

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think this is fine for this PR :-) when we actually add tests on all the React versions, we wouldn't want to mock things out - mocks make tests more brittle.


// Calling it again for the client.
renderReact('ExampleReactComponent', ExampleReactComponent);

assert(hydrateMethod.calledOnce);

delete global.window;
delete global.document;

hydrateMethod.restore();

done();
});
});

it('calls hypernova.client (render method)', (done) => {
jsdom.env(result, (err, window) => {
if (err) {
done(err);
return;
}

const sandbox = sinon.createSandbox();
sandbox.stub(ReactDOM, 'hydrate').value(undefined);

const renderMethod = sinon.spy(ReactDOM, 'render');

global.window = window;
global.document = window.document;

// Calling it again for the client.
renderReact('ExampleReactComponent', ExampleReactComponent);

assert(renderMethod.calledOnce);

sandbox.restore();

delete global.window;
delete global.document;

Expand Down