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

The great Babel 7.0 migration #635

Merged
merged 8 commits into from
Oct 23, 2018
Merged

The great Babel 7.0 migration #635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a2a0028
The great Babel 7.0 migration
ticky Oct 15, 2018
d153311
Install the Babel 7 bridge for Jest
ticky Oct 15, 2018
879612e
Fix babel-jest properly(?)
ticky Oct 15, 2018
bebaed2
Remove hot reloading infrastructure as it's broken
ticky Oct 15, 2018
91b779d
Get rid of CachedStateWrapper as it can no longer be used this way
ticky Oct 15, 2018
55ef3ab
Update MyBuilds to use no unsafe lifecycle methods
ticky Oct 15, 2018
4d84732
Actually fix the MyBuilds counts' lifecycle stuff
ticky Oct 15, 2018
fde5569
OK this bit can just be its own thing
ticky Oct 15, 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
29 changes: 21 additions & 8 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,30 @@
{
"presets": [
"flow",
"react",
["env", {"modules": false}],
"stage-0"
"@babel/flow",
"@babel/react",
["@babel/env", {"modules": false}]
],
"plugins": [
["relay", {"compat": true, "schema": "app/graph/schema.json"}]
["relay", {"compat": true, "schema": "app/graph/schema.json"}],
Copy link
Contributor

Choose a reason for hiding this comment

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

Won’t need this anymore!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, really? Can it just be dropped?

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh wait — sorry, I was thinking about webpack when I wrote this lol. Excuse me, I haven’t had a coffee yet 🙄

"@babel/plugin-proposal-function-bind",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
["@babel/plugin-proposal-optional-chaining", { "loose": false }],
["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
"@babel/plugin-proposal-do-expressions",
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"
],
"env": {
"development": {
"presets": ["react-hmre"]
},
"development": {},
"test": {
"plugins": [
"react-pure-components",
Expand Down
108 changes: 73 additions & 35 deletions app/components/layout/Navigation/MyBuilds/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,22 @@ import Spinner from '../../../shared/Spinner';
import Dropdown from '../../../shared/Dropdown';
import Icon from '../../../shared/Icon';
import Badge from '../../../shared/Badge';
import CachedStateWrapper from '../../../../lib/CachedStateWrapper';

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

type ViewerPartial = {
scheduledBuilds: {
count: number
},
runningBuilds: {
count: number
},
user: Object
};

type Props = {
viewer?: Object,
viewer?: ViewerPartial,
relay: Object
};

Expand All @@ -29,27 +38,25 @@ type State = {
};

class MyBuilds extends React.Component<Props, State> {
state = {
isDropdownVisible: false,
scheduledBuildsCount: (
(this.props.viewer && this.props.viewer.scheduledBuilds)
? this.props.viewer.scheduledBuilds.count
: 0
),
runningBuildsCount: (
(this.props.viewer && this.props.viewer.runningBuilds)
? this.props.viewer.runningBuilds.count
: 0
)
}
constructor(props) {
super(props);

// When the MyBuilds starts, see if we've got either cached or
// current build numbers so we can show something right away.
const initialState = {
isDropdownVisible: false,
scheduledBuildsCount: (
(this.props.viewer && this.props.viewer.scheduledBuilds)
? this.props.viewer.scheduledBuilds.count
: 0
),
runningBuildsCount: (
(this.props.viewer && this.props.viewer.runningBuilds)
? this.props.viewer.runningBuilds.count
: 0
)
};

getCachedState;
setCachedState;

// When the MyBuilds mounts, we should see if we've got any cached
// builds numbers so we can show something right away.
componentWillMount() {
const initialState = {};
const cachedState = this.getCachedState();

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

this.setState(initialState);
this.state = initialState;
}

// NOTE: the localStorage key is 'CachedState:MyBuilds:' for backwards
// compatibility with data stored by the CachedStateWrapper this used to use.
getCachedState() {
const { state, expiresAt } = JSON.parse(localStorage['CachedState:MyBuilds:'] || '{}');

if (!state || (expiresAt && expiresAt < Date.now())) {
return {};
}

return state;
}

setCachedState(state = {}) {
this.setState(state, () => {
localStorage['CachedState:MyBuilds:'] = JSON.stringify({
state,
expiresAt: Date.now() + hour.bind(1)
});
});
}

componentDidMount() {
Expand All @@ -85,17 +113,31 @@ class MyBuilds extends React.Component<Props, State> {
// As we get new values for scheduledBuildsCount and runningBuildsCount from
// Relay + GraphQL, we'll be sure to update the cached state with the latest
// values so when the page re-loads, we can show the latest numbers.
componentWillReceiveProps(nextProps) {
if (!nextProps.viewer) {
componentDidUpdate(prevProps: { viewer?: ViewerPartial }) {
const { viewer } = this.props;
const { viewer: prevViewer } = prevProps;

// If we don't have a current Viewer object, we know we don't have fresh data
if (!viewer) {
return;
}

if (nextProps.viewer.scheduledBuilds || nextProps.viewer.runningBuilds) {
this.setCachedState({
scheduledBuildsCount: nextProps.viewer.scheduledBuilds.count,
runningBuildsCount: nextProps.viewer.runningBuilds.count
});
// If we have a previous viewer object with build data, let's
// check if any of the counts have changed, and abort if not
if (prevViewer && prevViewer.scheduledBuilds && prevViewer.runningBuilds) {
if (
viewer.scheduledBuilds.count === prevViewer.scheduledBuilds.count &&
viewer.runningBuilds.count === prevViewer.runningBuilds.count
) {
return;
}
}

// Finally, update the state
this.setCachedState({
scheduledBuildsCount: viewer.scheduledBuilds.count,
runningBuildsCount: viewer.runningBuilds.count
});
}

render() {
Expand Down Expand Up @@ -243,11 +285,7 @@ class MyBuilds extends React.Component<Props, State> {
};
}

// Wrap the MyBuilds in a CachedStateWrapper so we get access to methods
// like `setCachedState`
const CachedMyBuilds = CachedStateWrapper(MyBuilds, { validLength: hour.bind(1) });

export default Relay.createContainer(CachedMyBuilds, {
export default Relay.createContainer(MyBuilds, {
initialVariables: {
includeBuilds: false,
includeBuildCounts: false
Expand Down
73 changes: 0 additions & 73 deletions app/lib/CachedStateWrapper.js
View file
Open in desktop

This file was deleted.

33 changes: 24 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,27 @@
"build-storybook-sketch": "mkdir -p dist && yarn run html-sketchapp --url 'http://localhost:6006/iframe.html?selectedKind=Sketch&selectedStory=Export' --out-dir dist"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
Copy link
Contributor

Choose a reason for hiding this comment

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

lol babel

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I mean I consider this on us for using stage-0 ;P

Copy link
Contributor

Choose a reason for hiding this comment

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

😄🙃

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There are almost certainly some things we can drop from this list, but this is what we had so I’m keeping them for now. We can make more informed decisions about it in future.

"@storybook/addon-a11y": "4.0.0-rc.3",
"@storybook/addon-actions": "4.0.0-rc.3",
"@storybook/addon-centered": "4.0.0-rc.3",
Expand All @@ -37,18 +58,13 @@
"@storybook/cli": "4.0.0-rc.3",
"@storybook/react": "4.0.0-rc.3",
"assets-webpack-plugin": "3.9.7",
"babel-core": "6.26.3",
"babel-core": "^7.0.0-0",
"babel-eslint": "10.0.1",
"babel-loader": "7.1.5",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0",
"babel-plugin-react-pure-components": "2.2.2",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-relay": "1.6.2",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-flow": "6.23.0",
"babel-preset-react": "6.24.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.24.1",
"css-loader": "1.0.0",
"css-variables-loader": "2.0.2",
"eslint": "5.7.0",
Expand All @@ -74,7 +90,6 @@
"postcss-loader": "3.0.0",
"postcss-reporter": "6.0.0",
"react-test-renderer": "16.5.2",
"react-transform-hmr": "1.0.4",
"react-type-snob": "0.0.3",
"relay-compiler": "1.7.0-rc.1",
"stats-webpack-plugin": "0.7.0",
Expand Down
Loading