Skip to content

Commit 68a2cf7

Browse files
imranolasimranolas
authored
Merge pull request #371 from FormidableLabs/fix-react16Compat
Fix compatibility issues for React v16.0.0
2 parents 28f2be2 + 19623b7 commit 68a2cf7

30 files changed

+568
-495
lines changed

‎.eslintrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"react/no-multi-comp": "off",
4444
"react/prop-types": "warn",
4545
"react/sort-comp": "warn",
46-
"react/sort-prop-types": "warn"
46+
"react/sort-prop-types": "warn",
47+
"react/jsx-handler-names": "off"
4748
}
4849
}

‎.travis.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
language: node_js
22

33
node_js:
4-
- 4
54
- 6
65
- 8
76

‎jest-setup.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Enzyme from 'enzyme';
2+
import Adapter from 'enzyme-adapter-react-16';
3+
4+
Enzyme.configure({ adapter: new Adapter() });
5+
document.requestAnimationFrame = function(callback) {
6+
setTimeout(callback, 0);
7+
};

‎package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,24 @@
2222
"author": "",
2323
"license": "MIT",
2424
"dependencies": {
25-
"component-playground": "^2.0.0",
25+
"component-playground": "^3.0.0",
2626
"history": "^4.6.1",
2727
"lodash": "^4.17.4",
2828
"marksy": "^0.4.2",
2929
"normalize.css": "^7.0.0",
3030
"radium": "^0.19.1",
3131
"react-redux": "^5.0.5",
3232
"react-transition-group": "^1.1.3",
33-
"react-typography": "^0.15.10",
33+
"react-typography": "^0.16.5",
3434
"redux": "^3.0.4",
3535
"redux-actions": "^2.0.3",
3636
"styled-components": "^1.4.6",
3737
"victory-core": "^15.2.0"
3838
},
3939
"peerDependencies": {
40-
"prop-types": "^15.5.8",
41-
"react": "^15.3.2",
42-
"react-dom": "^15.3.2"
40+
"prop-types": "^15.6.0",
41+
"react": "^16.0.0",
42+
"react-dom": "^16.0.0"
4343
},
4444
"devDependencies": {
4545
"babel-cli": "^6.24.1",
@@ -60,7 +60,9 @@
6060
"babel-runtime": "^6.23.0",
6161
"cross-env": "^5.0.0",
6262
"css-loader": "^0.28.2",
63-
"enzyme": "^2.8.2",
63+
"enzyme": "^3.1.0",
64+
"enzyme-adapter-react-16": "^1.0.1",
65+
"enzyme-to-json": "^3.1.2",
6466
"eslint": "^3.19.0",
6567
"eslint-config-formidable": "^3.0.0",
6668
"eslint-plugin-filenames": "^1.2.0",
@@ -73,9 +75,9 @@
7375
"node-libs-browser": "^2.0.0",
7476
"prop-types": "^15.5.10",
7577
"raw-loader": "^0.5.1",
76-
"react": "^15.5.4",
77-
"react-addons-test-utils": "^15.5.1",
78-
"react-dom": "^15.5.4",
78+
"react": "^16.0.0",
79+
"react-dom": "^16.0.0",
80+
"react-test-renderer": "^16.0.0",
7981
"react-transform-catch-errors": "^1.0.0",
8082
"react-transform-hmr": "^1.0.1",
8183
"redbox-react": "^1.3.6",
@@ -91,8 +93,7 @@
9193
"moduleNameMapper": {
9294
"\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
9395
},
94-
"snapshotSerializers": [
95-
"<rootDir>/node_modules/jest-serializer-enzyme"
96-
]
96+
"snapshotSerializers": ["enzyme-to-json/serializer"],
97+
"setupFiles": ["raf/polyfill", "<rootDir>/jest-setup.js"]
9798
}
9899
}

‎src/components/__snapshots__/block-quote.test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`<BlockQuote /> should render correctly. 1`] = `
44
<BlockQuote>
55
<blockquote
6+
className={undefined}
67
data-radium={true}
78
style={
89
Object {

‎src/components/__snapshots__/cite.test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`<Cite /> should render correctly. 1`] = `
44
<Cite>
55
<cite
6+
className={undefined}
67
data-radium={true}
78
style={
89
Object {

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ exports[`<CodePane /> should render correctly. 1`] = `
1515
"
1616
>
1717
<pre
18+
className={undefined}
1819
data-radium={true}
1920
style={Object {}}
2021
>
@@ -34,6 +35,7 @@ exports[`<CodePane /> should render correctly. 1`] = `
3435
",
3536
}
3637
}
38+
style={undefined}
3739
/>
3840
</pre>
3941
</CodePane>

‎src/components/__snapshots__/code.test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`<Code /> should render correctly. 1`] = `
44
<Code>
55
<code
6+
className={undefined}
67
dangerouslySetInnerHTML={
78
Object {
89
"__html": "const [a, ...b] = [1, 2, 3, 4]",

‎src/components/__snapshots__/component-playground.test.js.snap‎

Lines changed: 20 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,9 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
1111
class="playgroundCode"
1212
>
1313
<div
14-
class="ReactCodeMirror playgroundStage"
14+
class="react-codemirror2 playgroundStage"
1515
>
16-
<textarea
17-
autocomplete="off"
18-
>
19-
/**
20-
* Sample React Component
21-
* Output domContainerNode is 'mountNode'
22-
*/
23-
24-
const styles = {
25-
heading: {
26-
fontSize: "2.25rem",
27-
fontWeight: "bold"
28-
},
29-
copy: {
30-
fontSize: "1.5rem"
31-
}
32-
}
33-
34-
const HelloWorld = ({ name }) =&gt; (
35-
&lt;div&gt;
36-
&lt;h1 style={styles.heading}&gt;
37-
Create Live Code Examples in {name}!
38-
&lt;/h1&gt;
39-
&lt;p style={styles.copy}&gt;
40-
Supports Light and Dark Syntax Themes
41-
&lt;/p&gt;
42-
&lt;/div&gt;
43-
)
44-
45-
render(
46-
&lt;HelloWorld name="Spectacle" /&gt;,
47-
mountNode)
48-
</textarea>
16+
4917
</div>
5018
</div>
5119
<div
@@ -54,7 +22,9 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
5422
<div>
5523
<div
5624
class="previewArea"
57-
/>
25+
>
26+
27+
</div>
5828
</div>
5929
</div>
6030
</div>
@@ -72,41 +42,9 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
7242
class="playgroundCode"
7343
>
7444
<div
75-
class="ReactCodeMirror playgroundStage"
45+
class="react-codemirror2 playgroundStage"
7646
>
77-
<textarea
78-
autocomplete="off"
79-
>
80-
/**
81-
* Sample React Component
82-
* Output domContainerNode is 'mountNode'
83-
*/
84-
85-
const styles = {
86-
heading: {
87-
fontSize: "2.25rem",
88-
fontWeight: "bold"
89-
},
90-
copy: {
91-
fontSize: "1.5rem"
92-
}
93-
}
94-
95-
const HelloWorld = ({ name }) =&gt; (
96-
&lt;div&gt;
97-
&lt;h1 style={styles.heading}&gt;
98-
Create Live Code Examples in {name}!
99-
&lt;/h1&gt;
100-
&lt;p style={styles.copy}&gt;
101-
Supports Light and Dark Syntax Themes
102-
&lt;/p&gt;
103-
&lt;/div&gt;
104-
)
105-
106-
render(
107-
&lt;HelloWorld name="Spectacle" /&gt;,
108-
mountNode)
109-
</textarea>
47+
11048
</div>
11149
</div>
11250
<div
@@ -115,7 +53,9 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
11553
<div>
11654
<div
11755
class="previewArea"
118-
/>
56+
>
57+
58+
</div>
11959
</div>
12060
</div>
12161
</div>
@@ -133,41 +73,9 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
13373
class="playgroundCode"
13474
>
13575
<div
136-
class="ReactCodeMirror playgroundStage"
76+
class="react-codemirror2 playgroundStage"
13777
>
138-
<textarea
139-
autocomplete="off"
140-
>
141-
/**
142-
* Sample React Component
143-
* Output domContainerNode is 'mountNode'
144-
*/
145-
146-
const styles = {
147-
heading: {
148-
fontSize: "2.25rem",
149-
fontWeight: "bold"
150-
},
151-
copy: {
152-
fontSize: "1.5rem"
153-
}
154-
}
155-
156-
const HelloWorld = ({ name }) =&gt; (
157-
&lt;div&gt;
158-
&lt;h1 style={styles.heading}&gt;
159-
Create Live Code Examples in {name}!
160-
&lt;/h1&gt;
161-
&lt;p style={styles.copy}&gt;
162-
Supports Light and Dark Syntax Themes
163-
&lt;/p&gt;
164-
&lt;/div&gt;
165-
)
166-
167-
render(
168-
&lt;HelloWorld name="Spectacle" /&gt;,
169-
mountNode)
170-
</textarea>
78+
17179
</div>
17280
</div>
17381
<div
@@ -176,7 +84,9 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
17684
<div>
17785
<div
17886
class="previewArea"
179-
/>
87+
>
88+
89+
</div>
18090
</div>
18191
</div>
18292
</div>
@@ -194,14 +104,9 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
194104
class="playgroundCode"
195105
>
196106
<div
197-
class="ReactCodeMirror playgroundStage"
107+
class="react-codemirror2 playgroundStage"
198108
>
199-
<textarea
200-
autocomplete="off"
201-
>
202-
const Button = ({ title }) =&gt; (&lt;button type="button"&gt;{ title }&lt;/button&gt;);
203-
render(&lt;Button title="My Button" /&gt;, mountNode);
204-
</textarea>
109+
205110
</div>
206111
</div>
207112
<div
@@ -210,7 +115,9 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
210115
<div>
211116
<div
212117
class="previewArea"
213-
/>
118+
>
119+
120+
</div>
214121
</div>
215122
</div>
216123
</div>

‎src/components/__snapshots__/controls.test.js.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ exports[`<Controls /> should render correctly. 1`] = `
1212
>
1313
<button
1414
data-radium={true}
15+
key=".$prev"
1516
onClick={[Function]}
1617
style={
1718
Object {
@@ -22,6 +23,8 @@ exports[`<Controls /> should render correctly. 1`] = `
2223
>
2324
<svg
2425
height="32px"
26+
key="prevIcon"
27+
style={undefined}
2528
viewBox="0 0 512 828.586"
2629
width="32px"
2730
>
@@ -32,6 +35,7 @@ exports[`<Controls /> should render correctly. 1`] = `
3235
</button>
3336
<button
3437
data-radium={true}
38+
key=".$next"
3539
onClick={[Function]}
3640
style={
3741
Object {
@@ -42,6 +46,8 @@ exports[`<Controls /> should render correctly. 1`] = `
4246
>
4347
<svg
4448
height="32px"
49+
key="nextIcon"
50+
style={undefined}
4551
viewBox="0 0 512 828.586"
4652
width="32px"
4753
>

0 commit comments

Comments
 (0)