Skip to content

Commit b6557ab

Browse files
dfmcpheedfmcphee
committed
Upgrade to React 16
Fix usage of node on elements Upgrade dependencies Loosen peer dependency Fix linting errors Fix object formatting Fix version ranges Fix messenger payload reducer Updating yarn lock Adding types for react-transition-group Adding changelog entry
1 parent a9dcb97 commit b6557ab

File tree

18 files changed

+1105
-659
lines changed

18 files changed

+1105
-659
lines changed

‎.yarnclean

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*/node_modules/@types/react/

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Consistently use contractions in public README (thanks [stefanmiodrag](https://github.com/stefanmiodrag) for the [original pull request](https://github.com/Shopify/polaris/pull/191)) ([#682](https://github.com/Shopify/polaris-react/pull/682))
66

77
### Enhancements
8+
* Added support for React 16 ([#699](https://github.com/Shopify/polaris-react/pull/699))
89
* Added an option to show or hide unpublished products from the resource picker ([#628](https://github.com/Shopify/polaris-react/pull/628))
910
* Minor updates to the Spinner documentation ([#696](https://github.com/Shopify/polaris-react/pull/696))
1011
* Changed Popover component to use `react-transition-group` instead of our deprecated custom version in `@shopify/react-utilities` ([#718](https://github.com/Shopify/polaris-react/pull/718))

‎config/jest/config.json

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"setupFiles": [
3+
"<rootDir>/config/jest/shim.js",
34
"<rootDir>/tests/setup.ts"
45
],
56
"testRegex": "[\\w+]\\.test\\.(tsx?|js)$",

‎config/jest/shim.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Fixes an error where requestAnimationFrame wouldn't be available and throw:
2+
//
3+
// console.error node_modules/fbjs/lib/warning.js:33
4+
// Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills
5+
//
6+
// See https://github.com/facebook/jest/issues/4545
7+
global.requestAnimationFrame = (callback) => {
8+
setTimeout(callback, 0);
9+
};

‎config/rollup/minified-classname.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const cssNames = (function* () {
55
const max = parseInt('zz', base);
66
const maxLength = max - min;
77
const taken = new Set([
8-
parseInt('ad', base), // Avoid terms that may be flagged by content blockers.
8+
// Avoid terms that may be flagged by content blockers.
9+
parseInt('ad', base),
910
]);
1011

1112
while (taken.size < maxLength) {

‎config/typescript/modules.d.ts

-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +0,0 @@
1-
declare module 'hoist-non-react-statics' {
2-
import {ComponentClass} from 'react';
3-
4-
function hoistNonReactStatics<P>(to: ComponentClass<P>, from: ComponentClass<any>): ComponentClass<P>;
5-
export = hoistNonReactStatics;
6-
}

‎package.json

+28-26
Original file line numberDiff line numberDiff line change
@@ -55,35 +55,36 @@
5555
},
5656
"devDependencies": {
5757
"@shopify/js-uploader": "github:Shopify/js-uploader",
58-
"@types/enzyme": "^2.8.0",
59-
"@types/jest": "^19.2.3",
58+
"@types/enzyme": "^2.8.12",
59+
"@types/jest": "^21.1.2",
6060
"@types/lodash": "^4.14.66",
6161
"@types/node": "^8.0.0",
6262
"@types/react-hot-loader": "^3.0.1",
63-
"archiver": "^1.3.0",
63+
"archiver": "^2.1.0",
6464
"awesome-typescript-loader": "^3.1.3",
6565
"aws-sdk": "^2.58.0",
6666
"babel-cli": "^6.24.1",
6767
"babel-core": "^6.24.1",
68-
"babel-jest": "^20.0.3",
68+
"babel-jest": "^21.2.0",
6969
"babel-loader": "^7.0.0",
7070
"babel-preset-shopify": "^16.0.2",
7171
"change-case": "^3.0.1",
7272
"copyfiles": "^1.2.0",
73-
"crypto": "^0.0.3",
73+
"crypto": "^1.0.1",
7474
"css-loader": "^0.28.3",
7575
"cssnano": "^3.10.0",
76-
"enzyme": "^2.8.2",
77-
"eslint": "^3.15.0",
78-
"eslint-plugin-shopify": "^16.0.0",
79-
"file-loader": "^0.11.1",
80-
"fs-extra": "^3.0.1",
76+
"enzyme": "^3.1.0",
77+
"enzyme-adapter-react-16": "^1.0.1",
78+
"eslint": "^4.8.0",
79+
"eslint-plugin-shopify": "^17.1.0",
80+
"file-loader": "^1.1.5",
81+
"fs-extra": "^4.0.2",
8182
"generic-names": "^1.0.2",
8283
"glob": "^7.1.2",
8384
"identity-obj-proxy": "^3.0.0",
8485
"image-webpack-loader": "^3.3.1",
8586
"in-publish": "^2.0.0",
86-
"jest": "^20.0.4",
87+
"jest": "^21.2.1",
8788
"node-sass": "^4.5.3",
8889
"npm-run-all": "^4.0.2",
8990
"postcss": "^6.0.1",
@@ -94,13 +95,14 @@
9495
"postcss-modules-scope": "^1.1.0",
9596
"postcss-modules-values": "^1.3.0",
9697
"postcss-shopify": "^1.0.0",
97-
"react": "^15.5.4",
98-
"react-addons-test-utils": "^15.5.1",
99-
"react-dom": "^15.5.4",
98+
"react": "^16.0.0",
99+
"react-addons-test-utils": "^15.5.4",
100+
"react-dom": "^16.0.0",
101+
"react-test-renderer": "^16.0.0",
100102
"react-transition-group": "^2.2.1",
101103
"rimraf": "^2.6.1",
102-
"rollup": "^0.41.6",
103-
"rollup-plugin-babel": "^2.7.1",
104+
"rollup": "^0.50.0",
105+
"rollup-plugin-babel": "^3.0.2",
104106
"rollup-plugin-commonjs": "^8.0.2",
105107
"rollup-plugin-json": "^2.1.1",
106108
"rollup-plugin-node-resolve": "^3.0.0",
@@ -109,18 +111,18 @@
109111
"sass-resources-loader": "^1.2.1",
110112
"shelljs": "^0.7.7",
111113
"shx": "^0.2.2",
112-
"style-loader": "^0.18.1",
114+
"style-loader": "^0.19.0",
113115
"svgo": "^0.7.2",
114116
"tslint": "^5.3.2",
115-
"tslint-config-shopify": "^2.0.0",
117+
"tslint-config-shopify": "^3.0.1",
116118
"typescript": "^2.3.3",
117-
"url-loader": "^0.5.8",
118-
"webpack": "^2.6.1",
119+
"url-loader": "^0.6.2",
120+
"webpack": "^3.7.1",
119121
"webpack-dev-server": "^2.4.5"
120122
},
121123
"peerDependencies": {
122-
"react": "^15.3.0",
123-
"react-dom": "^15.3.0"
124+
"react": "^15.3.0 || ^16.0.0",
125+
"react-dom": "^15.3.0 || ^16.0.0"
124126
},
125127
"files": [
126128
"esnext",
@@ -138,13 +140,13 @@
138140
"@shopify/images": "^1.1.0",
139141
"@shopify/javascript-utilities": "^2.0.0",
140142
"@shopify/react-utilities": "^1.2.0",
141-
"@types/prop-types": "*",
142-
"@types/react": "*",
143-
"@types/react-dom": "*",
143+
"@types/prop-types": "^15.5.2",
144+
"@types/react": "^16.0.10",
145+
"@types/react-dom": "^16.0.1",
144146
"@types/react-transition-group": "^2.0.6",
145147
"babel-runtime": "^6.23.0",
146148
"core-js": "^2.4.1",
147-
"hoist-non-react-statics": "^1.2.0",
149+
"hoist-non-react-statics": "^2.3.1",
148150
"lodash": "^4.17.4",
149151
"prop-types": "^15.5.10",
150152
"tslib": "^1.7.1"

‎src/components/Checkbox/tests/Checkbox.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('<Checkbox />', () => {
2222
it('is called with the new checked value of the input on change', () => {
2323
const spy = jest.fn();
2424
const element = mount(<Checkbox id="MyCheckbox" label="Checkbox" onChange={spy} />);
25-
(element.find('input') as any).node.checked = true;
25+
(element.find('input') as any).instance().checked = true;
2626
element.find('input').simulate('change');
2727
expect(spy).toHaveBeenCalledWith(true, 'MyCheckbox');
2828
});

‎src/components/ChoiceList/tests/ChoiceList.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ describe('<ChoiceList />', () => {
8282

8383
function changeCheckedForChoice(choice: ReactWrapper<any, any>, checked: boolean, triggerChange = true) {
8484
const input = choice.find('input');
85-
(input as any).node.checked = checked;
85+
(input as any).instance().checked = checked;
8686

8787
if (triggerChange) {
8888
input.simulate('change');

‎src/components/FormLayout/FormLayout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,6 @@ export default class FormLayout extends React.PureComponent<Props, never> {
2525

2626
function wrapChildren(child: React.ReactElement<{}>, index: number) {
2727
if (isElementOfType(child, Group)) { return child; }
28-
return wrapWithComponent(child, Item, {key: index} as ItemProps);
28+
const props = {key: index};
29+
return wrapWithComponent(child, Item, props as ItemProps);
2930
}

‎src/components/RadioButton/tests/RadioButton.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('<RadioButton />', () => {
2222
it('is called with the new checked value of the input on change', () => {
2323
const spy = jest.fn();
2424
const element = mount(<RadioButton id="MyRadioButton" label="RadioButton" onChange={spy} />);
25-
(element.find('input') as any).node.checked = true;
25+
(element.find('input') as any).instance().checked = true;
2626
element.find('input').simulate('change');
2727
expect(spy).toHaveBeenCalledWith(true, 'MyRadioButton');
2828
});

‎src/components/Select/tests/Select.test.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('<Select />', () => {
77
it('is called with the value of the newly-selected option', () => {
88
const spy = jest.fn();
99
const element = mount(<Select id="MySelect" label="Select" options={['one', 'two']} onChange={spy} />);
10-
(element.find('select') as any).node.value = 'two';
10+
(element.find('select') as any).instance().value = 'two';
1111
element.find('select').simulate('change');
1212
expect(spy).toHaveBeenCalledWith('two', 'MySelect');
1313
});
@@ -25,7 +25,8 @@ describe('<Select />', () => {
2525
it('is called when the select is blurred', () => {
2626
const spy = jest.fn();
2727
const element = shallow(<Select label="Select" options={[]} onBlur={spy} />);
28-
element.find('select').simulate('focus').simulate('blur');
28+
element.find('select').simulate('focus');
29+
element.find('select').simulate('blur');
2930
expect(spy).toHaveBeenCalled();
3031
});
3132
});

‎src/components/Stack/Stack.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ export default class Stack extends React.PureComponent<Props, never> {
4141
);
4242

4343
const itemMarkup = elementChildren(children)
44-
.map((child, index) => wrapWithComponent(child, Item, {key: index} as ItemProps));
44+
.map((child, index) => {
45+
const props = { key: index };
46+
wrapWithComponent(child, Item, props as ItemProps);
47+
});
4548

4649
return <div className={className}>{itemMarkup}</div>;
4750
}

‎src/components/TextField/tests/TextField.test.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('<TextField />', () => {
4141
it('is called with the new value', () => {
4242
const spy = jest.fn();
4343
const element = mount(<TextField id="MyTextField" label="TextField" onChange={spy} />);
44-
(element.find('input') as any).node.value = 'two';
44+
(element.find('input') as any).instance().value = 'two';
4545
element.find('input').simulate('change');
4646
expect(spy).toHaveBeenCalledWith('two', 'MyTextField');
4747
});
@@ -59,7 +59,8 @@ describe('<TextField />', () => {
5959
it('is called when the input is blurred', () => {
6060
const spy = jest.fn();
6161
const element = shallow(<TextField label="TextField" onBlur={spy} />);
62-
element.find('input').simulate('focus').simulate('blur');
62+
element.find('input').simulate('focus');
63+
element.find('input').simulate('blur');
6364
expect(spy).toHaveBeenCalled();
6465
});
6566
});

‎src/embedded/easdk/Messenger.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,10 @@ export default class Messenger {
127127
return this.normalizePayload(newPayload);
128128
});
129129
} else if (typeof payload === 'object') {
130-
return Object.keys(payload).reduce((newPayload, key) => {
130+
return Object.keys(payload).reduce<Message['data']>((newPayload, key) => {
131131
newPayload[key] = this.normalizePayload(payload[key]);
132132
return newPayload;
133-
}, {} as Message['data']);
133+
}, {});
134134
} else {
135135
return payload;
136136
}

‎src/utilities/tests/focus.test.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ describe('focus', () => {
66
it('calls blur on the currentTarget', () => {
77
const currentTarget = document.createElement('button');
88
currentTarget.blur = jest.fn();
9-
handleMouseUpByBlurring({currentTarget} as MouseEvent<HTMLButtonElement>);
9+
const mouseEvent = {currentTarget};
10+
handleMouseUpByBlurring(mouseEvent as MouseEvent<HTMLButtonElement>);
1011
expect(currentTarget.blur).toHaveBeenCalled();
1112
});
1213
});

‎tests/setup.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
import {configure} from 'enzyme';
2+
import Adapter from 'enzyme-adapter-react-16';
3+
4+
configure({adapter: new Adapter()});
5+
16
const IGNORE_ERROR_REGEXES = [
27
/Accessing PropTypes via the main React package is deprecated/,
38
/ReactTestUtils has been moved to react-dom\/test-utils/,

0 commit comments

Comments
 (0)