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

Commit 6c75dea

Browse files
tickyticky
authored
Merge pull request #635 from buildkite/babel-7.x
The great Babel 7.0 migration
2 parents 6de69ce + fde5569 commit 6c75dea

File tree

5 files changed

+366
-388
lines changed

5 files changed

+366
-388
lines changed

‎.babelrc

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
{
22
"presets": [
3-
"flow",
4-
"react",
5-
["env", {"modules": false}],
6-
"stage-0"
3+
"@babel/flow",
4+
"@babel/react",
5+
["@babel/env", {"modules": false}]
76
],
87
"plugins": [
9-
["relay", {"compat": true, "schema": "app/graph/schema.json"}]
8+
["relay", {"compat": true, "schema": "app/graph/schema.json"}],
9+
"@babel/plugin-proposal-function-bind",
10+
"@babel/plugin-proposal-export-default-from",
11+
"@babel/plugin-proposal-logical-assignment-operators",
12+
["@babel/plugin-proposal-optional-chaining", { "loose": false }],
13+
["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
14+
["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
15+
"@babel/plugin-proposal-do-expressions",
16+
["@babel/plugin-proposal-decorators", { "legacy": true }],
17+
"@babel/plugin-proposal-function-sent",
18+
"@babel/plugin-proposal-export-namespace-from",
19+
"@babel/plugin-proposal-numeric-separator",
20+
"@babel/plugin-proposal-throw-expressions",
21+
"@babel/plugin-syntax-dynamic-import",
22+
"@babel/plugin-syntax-import-meta",
23+
["@babel/plugin-proposal-class-properties", { "loose": false }],
24+
"@babel/plugin-proposal-json-strings"
1025
],
1126
"env": {
12-
"development": {
13-
"presets": ["react-hmre"]
14-
},
27+
"development": {},
1528
"test": {
1629
"plugins": [
1730
"react-pure-components",

‎app/components/layout/Navigation/MyBuilds/index.js

Lines changed: 73 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,22 @@ import Spinner from '../../../shared/Spinner';
1212
import Dropdown from '../../../shared/Dropdown';
1313
import Icon from '../../../shared/Icon';
1414
import Badge from '../../../shared/Badge';
15-
import CachedStateWrapper from '../../../../lib/CachedStateWrapper';
1615

1716
import Build from './build';
1817
import DropdownButton from './../dropdown-button';
1918

19+
type ViewerPartial = {
20+
scheduledBuilds: {
21+
count: number
22+
},
23+
runningBuilds: {
24+
count: number
25+
},
26+
user: Object
27+
};
28+
2029
type Props = {
21-
viewer?: Object,
30+
viewer?: ViewerPartial,
2231
relay: Object
2332
};
2433

@@ -29,27 +38,25 @@ type State = {
2938
};
3039

3140
class MyBuilds extends React.Component<Props, State> {
32-
state = {
33-
isDropdownVisible: false,
34-
scheduledBuildsCount: (
35-
(this.props.viewer && this.props.viewer.scheduledBuilds)
36-
? this.props.viewer.scheduledBuilds.count
37-
: 0
38-
),
39-
runningBuildsCount: (
40-
(this.props.viewer && this.props.viewer.runningBuilds)
41-
? this.props.viewer.runningBuilds.count
42-
: 0
43-
)
44-
}
41+
constructor(props) {
42+
super(props);
43+
44+
// When the MyBuilds starts, see if we've got either cached or
45+
// current build numbers so we can show something right away.
46+
const initialState = {
47+
isDropdownVisible: false,
48+
scheduledBuildsCount: (
49+
(this.props.viewer && this.props.viewer.scheduledBuilds)
50+
? this.props.viewer.scheduledBuilds.count
51+
: 0
52+
),
53+
runningBuildsCount: (
54+
(this.props.viewer && this.props.viewer.runningBuilds)
55+
? this.props.viewer.runningBuilds.count
56+
: 0
57+
)
58+
};
4559

46-
getCachedState;
47-
setCachedState;
48-
49-
// When the MyBuilds mounts, we should see if we've got any cached
50-
// builds numbers so we can show something right away.
51-
componentWillMount() {
52-
const initialState = {};
5360
const cachedState = this.getCachedState();
5461

5562
if (!this.props.viewer || !this.props.viewer.scheduledBuilds) {
@@ -60,7 +67,28 @@ class MyBuilds extends React.Component<Props, State> {
6067
initialState.runningBuildsCount = cachedState.runningBuildsCount || 0;
6168
}
6269

63-
this.setState(initialState);
70+
this.state = initialState;
71+
}
72+
73+
// NOTE: the localStorage key is 'CachedState:MyBuilds:' for backwards
74+
// compatibility with data stored by the CachedStateWrapper this used to use.
75+
getCachedState() {
76+
const { state, expiresAt } = JSON.parse(localStorage['CachedState:MyBuilds:'] || '{}');
77+
78+
if (!state || (expiresAt && expiresAt < Date.now())) {
79+
return {};
80+
}
81+
82+
return state;
83+
}
84+
85+
setCachedState(state = {}) {
86+
this.setState(state, () => {
87+
localStorage['CachedState:MyBuilds:'] = JSON.stringify({
88+
state,
89+
expiresAt: Date.now() + hour.bind(1)
90+
});
91+
});
6492
}
6593

6694
componentDidMount() {
@@ -85,17 +113,31 @@ class MyBuilds extends React.Component<Props, State> {
85113
// As we get new values for scheduledBuildsCount and runningBuildsCount from
86114
// Relay + GraphQL, we'll be sure to update the cached state with the latest
87115
// values so when the page re-loads, we can show the latest numbers.
88-
componentWillReceiveProps(nextProps) {
89-
if (!nextProps.viewer) {
116+
componentDidUpdate(prevProps: { viewer?: ViewerPartial }) {
117+
const { viewer } = this.props;
118+
const { viewer: prevViewer } = prevProps;
119+
120+
// If we don't have a current Viewer object, we know we don't have fresh data
121+
if (!viewer) {
90122
return;
91123
}
92124

93-
if (nextProps.viewer.scheduledBuilds || nextProps.viewer.runningBuilds) {
94-
this.setCachedState({
95-
scheduledBuildsCount: nextProps.viewer.scheduledBuilds.count,
96-
runningBuildsCount: nextProps.viewer.runningBuilds.count
97-
});
125+
// If we have a previous viewer object with build data, let's
126+
// check if any of the counts have changed, and abort if not
127+
if (prevViewer && prevViewer.scheduledBuilds && prevViewer.runningBuilds) {
128+
if (
129+
viewer.scheduledBuilds.count === prevViewer.scheduledBuilds.count &&
130+
viewer.runningBuilds.count === prevViewer.runningBuilds.count
131+
) {
132+
return;
133+
}
98134
}
135+
136+
// Finally, update the state
137+
this.setCachedState({
138+
scheduledBuildsCount: viewer.scheduledBuilds.count,
139+
runningBuildsCount: viewer.runningBuilds.count
140+
});
99141
}
100142

101143
render() {
@@ -243,11 +285,7 @@ class MyBuilds extends React.Component<Props, State> {
243285
};
244286
}
245287

246-
// Wrap the MyBuilds in a CachedStateWrapper so we get access to methods
247-
// like `setCachedState`
248-
const CachedMyBuilds = CachedStateWrapper(MyBuilds, { validLength: hour.bind(1) });
249-
250-
export default Relay.createContainer(CachedMyBuilds, {
288+
export default Relay.createContainer(MyBuilds, {
251289
initialVariables: {
252290
includeBuilds: false,
253291
includeBuildCounts: false

‎app/lib/CachedStateWrapper.js

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎package.json

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,27 @@
2727
"build-storybook-sketch": "mkdir -p dist && yarn run html-sketchapp --url 'http://localhost:6006/iframe.html?selectedKind=Sketch&selectedStory=Export' --out-dir dist"
2828
},
2929
"devDependencies": {
30+
"@babel/core": "^7.1.2",
31+
"@babel/plugin-proposal-class-properties": "^7.0.0",
32+
"@babel/plugin-proposal-decorators": "^7.0.0",
33+
"@babel/plugin-proposal-do-expressions": "^7.0.0",
34+
"@babel/plugin-proposal-export-default-from": "^7.0.0",
35+
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
36+
"@babel/plugin-proposal-function-bind": "^7.0.0",
37+
"@babel/plugin-proposal-function-sent": "^7.0.0",
38+
"@babel/plugin-proposal-json-strings": "^7.0.0",
39+
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
40+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
41+
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
42+
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
43+
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
44+
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
45+
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
46+
"@babel/plugin-syntax-import-meta": "^7.0.0",
47+
"@babel/polyfill": "^7.0.0",
48+
"@babel/preset-env": "^7.0.0",
49+
"@babel/preset-flow": "^7.0.0",
50+
"@babel/preset-react": "^7.0.0",
3051
"@storybook/addon-a11y": "4.0.0-rc.3",
3152
"@storybook/addon-actions": "4.0.0-rc.3",
3253
"@storybook/addon-centered": "4.0.0-rc.3",
@@ -37,18 +58,13 @@
3758
"@storybook/cli": "4.0.0-rc.3",
3859
"@storybook/react": "4.0.0-rc.3",
3960
"assets-webpack-plugin": "3.9.7",
40-
"babel-core": "6.26.3",
61+
"babel-core": "^7.0.0-0",
4162
"babel-eslint": "10.0.1",
42-
"babel-loader": "7.1.5",
63+
"babel-jest": "^23.6.0",
64+
"babel-loader": "^8.0.0",
4365
"babel-plugin-react-pure-components": "2.2.2",
4466
"babel-plugin-react-transform": "3.0.0",
4567
"babel-plugin-relay": "1.6.2",
46-
"babel-polyfill": "6.26.0",
47-
"babel-preset-env": "1.7.0",
48-
"babel-preset-flow": "6.23.0",
49-
"babel-preset-react": "6.24.1",
50-
"babel-preset-react-hmre": "1.1.1",
51-
"babel-preset-stage-0": "6.24.1",
5268
"css-loader": "1.0.0",
5369
"css-variables-loader": "2.0.2",
5470
"eslint": "5.7.0",
@@ -74,7 +90,6 @@
7490
"postcss-loader": "3.0.0",
7591
"postcss-reporter": "6.0.0",
7692
"react-test-renderer": "16.5.2",
77-
"react-transform-hmr": "1.0.4",
7893
"react-type-snob": "0.0.3",
7994
"relay-compiler": "1.7.0-rc.1",
8095
"stats-webpack-plugin": "0.7.0",

0 commit comments

Comments
 (0)