Skip to content

Commit

Permalink
build(js): upgrade babel and webpack toolchains (#4959)
Browse files Browse the repository at this point in the history
  • Loading branch information
mcous authored Feb 21, 2020
1 parent 7adea8d commit ec0645a
Show file tree
Hide file tree
Showing 17 changed files with 2,156 additions and 1,660 deletions.
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.16.0",
"@opentrons/shared-data": "3.16.0",
"@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",
"react-hot-loader": "^4.12.19",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",
Expand Down
7 changes: 5 additions & 2 deletions app/src/components/App.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// @flow
import React from 'react'
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 @@ -21,7 +22,7 @@ import styles from './App.css'

const stopEvent = (event: SyntheticEvent<>) => event.preventDefault()

export function App() {
export function AppComponent() {
return (
<div className={styles.wrapper} onDragOver={stopEvent} onDrop={stopEvent}>
<NavBar />
Expand All @@ -41,3 +42,5 @@ export function App() {
</div>
)
}

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
2 changes: 1 addition & 1 deletion components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"peerDependencies": {
"classnames": "^2.2.5",
"lodash": "^4.17.4",
"react": "^16.8.6",
"react": "16.8.6",
"react-router-dom": "^5.0.1"
},
"dependencies": {
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;
}
10 changes: 4 additions & 6 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.16.0",
"ajv": "^6.2.1",
"classnames": "^2.2.5",
Expand All @@ -26,13 +27,10 @@
"lodash": "^4.17.4",
"mixpanel-browser": "^2.29.1",
"query-string": "^6.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.0",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-hot-loader": "^4.12.19",
"react-router-dom": "^5.0.1",
"yup": "^0.27.0"
},
"devDependencies": {
"react-snap": "^1.23.0"
}
}
47 changes: 22 additions & 25 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",
"babel-jest": "^25.1.0",
"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 @@ -79,12 +76,12 @@
"handlebars-loader": "^1.7.1",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.8.0",
"jest": "^25.1.0",
"lerna": "^3.16.4",
"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 @@ -95,8 +92,8 @@
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-snap": "^1.23.0",
"react-styleguidist": "^8.0.1",
"react-test-renderer": "^16.8.6",
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.5",
"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.6",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2",
"worker-loader": "^2.0.0",
Expand Down
7 changes: 4 additions & 3 deletions 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.16.0",
"@typeform/embed": "^0.12.1",
"ajv": "^6.10.2",
Expand All @@ -32,11 +33,11 @@
"lodash": "^4.17.4",
"moment": "^2.19.1",
"query-string": "^6.2.0",
"react": "^16.8.6",
"react": "16.8.6",
"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-dom": "16.8.6",
"react-hot-loader": "^4.12.19",
"react-redux": "^7.1.0",
"redux": "^3.7.2",
"redux-actions": "^2.2.1",
Expand Down
7 changes: 4 additions & 3 deletions 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.16.0",
"@opentrons/shared-data": "3.16.0",
"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": "16.8.6",
"react-dom": "16.8.6",
"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)
Loading

0 comments on commit ec0645a

Please sign in to comment.