Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build(js): upgrade babel and webpack toolchains #4959

Merged
merged 5 commits into from
Feb 21, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
3 changes: 3 additions & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ module.name_mapper.extension='css' -> '@opentrons/components/interfaces/CSSModul
module.ignore_non_literal_requires=true
merge_timeout=300
esproposal.optional_chaining=enable
; default value of 19 (16 * 2^19 bytes > 8ish MB) isn't quite enough and can
; result in flow crashing with `Unhandled exception: SharedMem.Hash_table_full`
sharedmemory.hash_table_pow=20

[strict]
deprecated-type
Expand Down
7 changes: 4 additions & 3 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
},
"homepage": "https://github.com/Opentrons/opentrons",
"dependencies": {
"@hot-loader/react-dom": "16.8.6",
"@opentrons/components": "3.15.2",
"@opentrons/shared-data": "3.15.2",
"@thi.ng/paths": "^1.6.5",
Expand All @@ -32,9 +33,9 @@
"moment": "^2.19.1",
"netmask": "^1.0.6",
"path-to-regexp": "^3.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^3.0.0-beta.7",
"react": "16.8.6",
"react-dom": "16.8.6",
Copy link
Member

Choose a reason for hiding this comment

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

Just curious — why is it that we were previously using semantic versioning for react and not we're not?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Judgement call and a safety thing:

  • In order for hooks support of react-hot-loader, we have to swap out react-dom with @hot-loader/react-dom
  • The version of @hot-loader/react-dom needs to match react-dom
  • We're already locking our dependencies implicitly via the lock file, so locking them down explicitly here felt like the safest thing to do

Longer term, I think we should probably lock all of our production dependencies explicitely (I'm generally good keeping dev deps on semver). That being said, I'd rather not mess with all our app deps in this PR

"react-hot-loader": "^4.12.19",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",
Expand Down
12 changes: 7 additions & 5 deletions app/src/components/App.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react'
// @flow
import * as React from 'react'
import { hot } from 'react-hot-loader/root'
import { Switch, Route, Redirect } from 'react-router-dom'

// TODO(mc, 2020-01-06): move typeface import to global CSS once postcss
Expand All @@ -18,7 +20,9 @@ import Run from '../pages/Run'
import { PortalRoot as ModalPortalRoot } from './portal'
import styles from './App.css'

export function App() {
const stopEvent = (event: SyntheticEvent<>) => event.preventDefault()

export function AppComponent() {
return (
<div className={styles.wrapper} onDragOver={stopEvent} onDrop={stopEvent}>
<NavBar />
Expand All @@ -39,6 +43,4 @@ export function App() {
)
}

function stopEvent(event) {
event.preventDefault()
}
export const App = hot(AppComponent)
27 changes: 9 additions & 18 deletions app/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import React from 'react'
import ReactDom from 'react-dom'
import { Provider } from 'react-redux'
import { AppContainer } from 'react-hot-loader'
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'

Expand Down Expand Up @@ -44,22 +43,6 @@ const store = createStore(rootReducer, composeEnhancers(middleware))

epicMiddleware.run(rootEpic)

const renderApp = () =>
ReactDom.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('root')
)

if (module.hot) {
module.hot.accept('./components/App', renderApp)
}

const { config } = store.getState()

// attach store to window if devtools are on
Expand All @@ -76,4 +59,12 @@ store.dispatch(checkShellUpdate())
store.dispatch(startDiscovery())

log.info('Rendering app UI')
renderApp()

ReactDom.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
)
7 changes: 1 addition & 6 deletions babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,7 @@ module.exports = {
],
},
},
plugins: [
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-syntax-dynamic-import',
],
plugins: ['@babel/plugin-proposal-class-properties'],
presets: [
'@babel/preset-flow',
'@babel/preset-react',
Expand Down
58 changes: 58 additions & 0 deletions flow-typed/npm/react-hot-loader_v4.6.x.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// flow-typed signature: 8a7e73fee92a885e2d4c8f94329ddbe2
// flow-typed version: c6154227d1/react-hot-loader_v4.6.x/flow_>=v0.104.x

// @flow
declare module "react-hot-loader" {
declare type Module = { id: string, ... };

declare type ErrorReporterProps = {|
error: Error,
errorInfo: { componentStack: string, ... }
|}

declare export type ContainerProps = {|
children: React$Element<any>,
errorBoundary?: boolean,
errorReporter?: React$ComponentType<ErrorReporterProps>,
|}

declare export class AppContainer extends React$Component<ContainerProps> {}

declare export function hot(module: Module): <T: React$ComponentType<any>>(
Component: T,
props?: $Diff<ContainerProps, { children: React$Element<any>, ... }>
) => T

declare export function cold<T: React$ComponentType<any>>(component: T): T

declare export function areComponentsEqual<T>(
typeA: React$ComponentType<T>,
typeB: React$ComponentType<T>
): boolean

declare type Config = {|
logLevel: 'debug' | 'log' | 'warn' | 'error',
pureSFC: boolean,
pureRender: boolean,
allowSFC: boolean,
disableHotRenderer: boolean,
disableHotRendererWhenInjected: boolean,
ignoreSFC: boolean,
ignoreComponents: boolean,
errorReporter: React$ComponentType<ErrorReporterProps>,
ErrorOverlay: React$ComponentType<{ errors: Array<ErrorReporterProps>, ... }>,
onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any,
onComponentCreate: (type: any, displayName: string) => any,
|}

declare export function setConfig(config: $Shape<Config>): void
}

declare module "react-hot-loader/root" {
import type { ContainerProps } from 'react-hot-loader';

declare export function hot<T: React$ComponentType<any>>(
Component: T,
props?: $Diff<ContainerProps, { children: React$Element<any>, ... }>
): T;
}
6 changes: 2 additions & 4 deletions labware-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@hot-loader/react-dom": "16.8.6",
"@opentrons/components": "3.15.2",
"ajv": "^6.2.1",
"classnames": "^2.2.5",
Expand All @@ -28,11 +29,8 @@
"query-string": "^6.2.0",
"react": "^16.8.6",
mcous marked this conversation as resolved.
Show resolved Hide resolved
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.0",
"react-hot-loader": "^4.12.19",
"react-router-dom": "^5.0.1",
"yup": "^0.27.0"
},
"devDependencies": {
"react-snap": "^1.23.0"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

All devDependencies go in monorepo package.json, where this entry already exists

}
}
41 changes: 19 additions & 22 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,22 @@
"node": ">=12"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-proposal-optional-chaining": "^7.6.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-modules-commonjs": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-flow": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"ajv": "^6.10.2",
"aws-sdk": "^2.493.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-eslint": "^11.0.0-beta.2",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Beta release required for flow inexact object syntax; keep an eye on this

Copy link
Member

Choose a reason for hiding this comment

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

That's annoying — let's def keep an eye out

"babel-jest": "^25.1.0",
mcous marked this conversation as resolved.
Show resolved Hide resolved
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-unassert": "^3.0.1",
"codecov": "^3.1.0",
"concurrently": "^4.1.2",
"core-js": "^3.2.1",
"core-js": "^3.6.4",
"css-loader": "^3.2.0",
"cypress": "^3.8.1",
"cypress-file-upload": "3.1.2",
Expand All @@ -54,11 +51,11 @@
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^6.0.1",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.3.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-cypress": "^2.8.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-json": "^1.4.0",
"eslint-plugin-node": "^9.1.0",
Expand All @@ -69,7 +66,7 @@
"eslint-plugin-standard": "^4.0.0",
"express": "^4.16.4",
"favicons-webpack-plugin": "^1.0.2",
"file-loader": "^4.2.0",
"file-loader": "^5.0.2",
"flow-bin": "^0.110.1",
"flow-typed": "^2.6.2",
"fs-extra": "^6.0.1",
Expand All @@ -84,7 +81,7 @@
"lost": "^8.3.1",
"madge": "^3.6.0",
"mime": "^2.4.4",
"mini-css-extract-plugin": "^0.8.0",
"mini-css-extract-plugin": "^0.9.0",
"onchange": "^6.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"portfinder": "^1.0.13",
Expand All @@ -105,16 +102,16 @@
"rehype-urls": "^1.0.0",
"script-ext-html-webpack-plugin": "^2.1.4",
"shx": "^0.2.2",
"style-loader": "^1.0.0",
"style-loader": "^1.1.3",
"stylelint": "^11.0.0",
"stylelint-config-standard": "^19.0.0",
"terser-webpack-plugin": "^2.1.0",
"terser-webpack-plugin": "^2.3.4",
"url-loader": "^2.1.0",
"wait-on": "^3.3.0",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^3.5.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1",
"webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2",
"worker-loader": "^2.0.0",
Expand Down
3 changes: 2 additions & 1 deletion protocol-designer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"homepage": "https://github.com/Opentrons/opentrons",
"license": "Apache-2.0",
"dependencies": {
"@hot-loader/react-dom": "16.8.6",
"@opentrons/components": "3.15.2",
"@typeform/embed": "^0.12.1",
"ajv": "^6.10.2",
Expand All @@ -36,7 +37,7 @@
"react-dnd": "^6.0.0",
"react-dnd-mouse-backend": "0.1.2",
"react-dom": "^16.8.6",
"react-hot-loader": "^3.0.0-beta.7",
"react-hot-loader": "^4.12.19",
"react-redux": "^7.1.0",
"redux": "^3.7.2",
"redux-actions": "^2.2.1",
Expand Down
3 changes: 2 additions & 1 deletion protocol-library-kludge/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@
"homepage": "https://github.com/Opentrons/opentrons",
"license": "Apache-2.0",
"dependencies": {
"@hot-loader/react-dom": "16.8.6",
"@opentrons/components": "3.15.2",
"@opentrons/shared-data": "3.15.2",
"classnames": "^2.2.5",
"lodash": "^4.17.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^3.0.0-beta.7"
"react-hot-loader": "^4.12.19"
}
}
7 changes: 5 additions & 2 deletions protocol-library-kludge/src/App.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
// @flow
import React from 'react'
import * as React from 'react'
import { hot } from 'react-hot-loader/root'
import URLDeck from './URLDeck'
import './globals.css'

export default function App() {
export function AppComponent() {
return <URLDeck />
}

export const App = hot(AppComponent)
26 changes: 8 additions & 18 deletions protocol-library-kludge/src/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
import React from 'react'
// @flow
import * as React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App'
import { App } from './App'

const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root')
)
}

render(App)
const root = document.getElementById('root')

// Hot Module Replacement API
if (module.hot) {
module.hot.accept('./App', () => {
render(App)
})
if (!root) {
throw new Error('Unable to find #root')
}

ReactDOM.render(<App />, root)
5 changes: 0 additions & 5 deletions shared-data/js/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
// @flow
// Requires `make build` to have run to create this .json
import labwareDefinitions from '../build/labware.json'

// Sorted list of all labware
export const labwareList: Array<string> = Object.keys(labwareDefinitions).sort()

export * from './constants'
export * from './getLabware'
Expand Down
7 changes: 6 additions & 1 deletion webpack-config/lib/base-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const { DEV_MODE, ENABLE_ANALYZER, DEFAULT_PORT } = require('./env')
module.exports = {
target: 'web',

// TODO(mc, 2019-03-12): react-hot-loader@4 no longer needs this entry
entry: DEV_MODE ? ['react-hot-loader/patch'] : [],

output: {
Expand Down Expand Up @@ -44,6 +43,12 @@ module.exports = {
new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }),
].filter(Boolean),

resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
},

optimization: {
minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: true }),
Expand Down
Loading