From ca974650eabbf9f313d57cd42ffb9a1d3ec44c5d Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 13:21:38 -0500 Subject: [PATCH 1/6] remove unnecessary plotly.js external from renderer webpack config --- dash-renderer/webpack.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/dash-renderer/webpack.config.js b/dash-renderer/webpack.config.js index 2e1b16134d..3e1e7c7551 100644 --- a/dash-renderer/webpack.config.js +++ b/dash-renderer/webpack.config.js @@ -52,7 +52,6 @@ const rendererOptions = { externals: { react: 'React', 'react-dom': 'ReactDOM', - 'plotly.js': 'Plotly', 'prop-types': 'PropTypes' }, ...defaults From 199a3faf54151af59aa3a582ee6b4fbc4f97b679 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 13:22:07 -0500 Subject: [PATCH 2/6] :hocho: raw-loader - just turn werkzeug css into a js string --- dash-renderer/package.json | 1 - .../src/components/error/FrontEnd/FrontEndError.react.js | 2 +- .../components/error/{werkzeug.css.txt => werkzeugcss.js} | 5 +++++ dash-renderer/webpack.config.js | 4 ---- 4 files changed, 6 insertions(+), 6 deletions(-) rename dash-renderer/src/components/error/{werkzeug.css.txt => werkzeugcss.js} (93%) diff --git a/dash-renderer/package.json b/dash-renderer/package.json index 51acf27e25..1478d7e8d1 100644 --- a/dash-renderer/package.json +++ b/dash-renderer/package.json @@ -59,7 +59,6 @@ "prettier-eslint": "^8.8.2", "prettier-eslint-cli": "^4.7.1", "prettier-stylelint": "^0.4.2", - "raw-loader": "^3.1.0", "style-loader": "^1.0.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.8", diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js index 7dfddb0ab3..a63ab622ff 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import '../Percy.css'; import {urlBase} from '../../../utils'; -import werkzeugCss from '../werkzeug.css.txt'; +import werkzeugCss from '../werkzeugcss'; class FrontEndError extends Component { constructor(props) { diff --git a/dash-renderer/src/components/error/werkzeug.css.txt b/dash-renderer/src/components/error/werkzeugcss.js similarity index 93% rename from dash-renderer/src/components/error/werkzeug.css.txt rename to dash-renderer/src/components/error/werkzeugcss.js index dd0c38dc4c..94fcac547b 100644 --- a/dash-renderer/src/components/error/werkzeug.css.txt +++ b/dash-renderer/src/components/error/werkzeugcss.js @@ -1,3 +1,7 @@ +// Werkzeug css included as a string, because we want to inject +// it into an iframe srcDoc + +export default ` body { margin: 0px; margin-top: 10px; @@ -102,3 +106,4 @@ div.debugger { .debugger .traceback .source pre.line img { display: none; } +`; diff --git a/dash-renderer/webpack.config.js b/dash-renderer/webpack.config.js index 3e1e7c7551..2c506f7899 100644 --- a/dash-renderer/webpack.config.js +++ b/dash-renderer/webpack.config.js @@ -29,10 +29,6 @@ const defaults = { { test: /\.svg$/, use: ['@svgr/webpack'], - }, - { - test: /\.txt$/i, - use: 'raw-loader', } ] } From 832e2cff1a9e9d050f4466bfc421e2d462e8554e Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 14:24:13 -0500 Subject: [PATCH 3/6] :hocho: uniqid --- dash-renderer/package.json | 1 - .../src/components/error/ComponentErrorBoundary.react.js | 3 --- .../src/components/error/FrontEnd/FrontEndError.react.js | 1 - dash-renderer/src/persistence.js | 2 -- dash-renderer/webpack.config.js | 2 +- 5 files changed, 1 insertion(+), 8 deletions(-) diff --git a/dash-renderer/package.json b/dash-renderer/package.json index 1478d7e8d1..faf1144195 100644 --- a/dash-renderer/package.json +++ b/dash-renderer/package.json @@ -32,7 +32,6 @@ "redux": "^3.4.0", "redux-actions": "^0.9.1", "redux-thunk": "^2.0.1", - "uniqid": "^5.0.3", "viz.js": "1.8.0" }, "devDependencies": { diff --git a/dash-renderer/src/components/error/ComponentErrorBoundary.react.js b/dash-renderer/src/components/error/ComponentErrorBoundary.react.js index 4de5e6bb9b..6b52be55a5 100644 --- a/dash-renderer/src/components/error/ComponentErrorBoundary.react.js +++ b/dash-renderer/src/components/error/ComponentErrorBoundary.react.js @@ -2,7 +2,6 @@ import {connect} from 'react-redux'; import {Component} from 'react'; import PropTypes from 'prop-types'; import Radium from 'radium'; -import uniqid from 'uniqid'; import {onError, revert} from '../../actions'; class UnconnectedComponentErrorBoundary extends Component { @@ -10,7 +9,6 @@ class UnconnectedComponentErrorBoundary extends Component { super(props); this.state = { myID: props.componentId, - myUID: uniqid(), oldChildren: null, hasError: false, }; @@ -24,7 +22,6 @@ class UnconnectedComponentErrorBoundary extends Component { const {dispatch} = this.props; dispatch( onError({ - myUID: this.state.myUID, myID: this.state.myID, type: 'frontEnd', error, diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js index a63ab622ff..b639686afc 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js @@ -167,7 +167,6 @@ const ErrorContent = connect(state => ({base: urlBase(state.config)}))( FrontEndError.propTypes = { e: PropTypes.shape({ - myUID: PropTypes.string, timestamp: PropTypes.object, error: errorPropTypes, }), diff --git a/dash-renderer/src/persistence.js b/dash-renderer/src/persistence.js index e1c45787cc..39bd011854 100644 --- a/dash-renderer/src/persistence.js +++ b/dash-renderer/src/persistence.js @@ -66,7 +66,6 @@ import { type, } from 'ramda'; import {createAction} from 'redux-actions'; -import uniqid from 'uniqid'; import Registry from './registry'; @@ -81,7 +80,6 @@ function err(e) { /* eslint-disable no-console */ return createAction('ON_ERROR')({ - myUID: uniqid(), myID: storePrefix, type: 'frontEnd', error, diff --git a/dash-renderer/webpack.config.js b/dash-renderer/webpack.config.js index 2c506f7899..b0e6583eae 100644 --- a/dash-renderer/webpack.config.js +++ b/dash-renderer/webpack.config.js @@ -10,7 +10,7 @@ const defaults = { rules: [ { test: /\.js$/, - exclude: /node_modules\/(?!uniqid\/|check-prop-types\/)/, + exclude: /node_modules\/(?!check-prop-types\/)/, use: { loader: 'babel-loader', }, From 36d0c71f30a4aae8028adc87f8a4eaf79bf4d4fd Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 15:44:18 -0500 Subject: [PATCH 4/6] pull in checkPropTypes --- dash-renderer/package-lock.json | 20 ------- dash-renderer/package.json | 1 - dash-renderer/src/TreeContainer.js | 2 +- dash-renderer/src/checkPropTypes.js | 89 +++++++++++++++++++++++++++++ dash-renderer/webpack.config.js | 11 +--- 5 files changed, 92 insertions(+), 31 deletions(-) create mode 100644 dash-renderer/src/checkPropTypes.js diff --git a/dash-renderer/package-lock.json b/dash-renderer/package-lock.json index bd22da13fe..5f8198fe40 100644 --- a/dash-renderer/package-lock.json +++ b/dash-renderer/package-lock.json @@ -2889,11 +2889,6 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, - "check-prop-types": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/check-prop-types/-/check-prop-types-1.1.2.tgz", - "integrity": "sha512-hGDrZ1yhRgKuP1yzZ5sUX/PPmlKBLOF1GyF0Z008Sienko3BFZmlCXnmq+npRTIL/WlFCUzThyd+F5PQnnT1ug==" - }, "chokidar": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", @@ -11795,16 +11790,6 @@ } } }, - "raw-loader": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-3.1.0.tgz", - "integrity": "sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==", - "dev": true, - "requires": { - "loader-utils": "^1.1.0", - "schema-utils": "^2.0.1" - } - }, "rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -14606,11 +14591,6 @@ "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", "dev": true }, - "uniqid": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.1.0.tgz", - "integrity": "sha512-iBt38h8uFnbDFrRK4E7vdzjtynBii5aSwGZ27gle7xnbYSIZzJ5x5BqughgUvMNCZ1cMhtnpcF+w7XGbqm6d9Q==" - }, "unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", diff --git a/dash-renderer/package.json b/dash-renderer/package.json index faf1144195..60b65df597 100644 --- a/dash-renderer/package.json +++ b/dash-renderer/package.json @@ -23,7 +23,6 @@ "react": "16.8.6", "react-dom": "16.8.6", "prop-types": "15.7.2", - "check-prop-types": "1.1.2", "cookie": "^0.3.1", "dependency-graph": "^0.5.0", "radium": "^0.22.1", diff --git a/dash-renderer/src/TreeContainer.js b/dash-renderer/src/TreeContainer.js index 37e12ed109..8713dc5d7c 100644 --- a/dash-renderer/src/TreeContainer.js +++ b/dash-renderer/src/TreeContainer.js @@ -25,7 +25,7 @@ import {notifyObservers, updateProps} from './actions'; import isSimpleComponent from './isSimpleComponent'; import {recordUiEdit} from './persistence'; import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react'; -import checkPropTypes from 'check-prop-types'; +import checkPropTypes from './checkPropTypes'; function validateComponent(componentDefinition) { if (type(componentDefinition) === 'Array') { diff --git a/dash-renderer/src/checkPropTypes.js b/dash-renderer/src/checkPropTypes.js new file mode 100644 index 0000000000..df5948c5d1 --- /dev/null +++ b/dash-renderer/src/checkPropTypes.js @@ -0,0 +1,89 @@ +/* + * Copied out of prop-types and modified - similar to check-prop-types, but + * simplified and tweaked to our needs, also so we don't need a special + * transpiling inclusion for this in node_modules - check-prop-types hasn't + * been modified in years and yet includes + */ +import ReactPropTypesSecret from 'prop-types/lib/ReactPropTypesSecret'; + +/** + * Assert that the values match with the type specs. + * Error messages are memorized and will only be shown once. + * + * @param {object} typeSpecs Map of name to a ReactPropType + * @param {object} values Runtime values that need to be type-checked + * @param {string} location e.g. "prop", "context", "child context" + * @param {string} componentName Name of the component for error messages. + * @param {?Function} getStack Returns the component stack. + * @return {string} Any error messsage resulting from checking the types + */ +export default function checkPropTypes( + typeSpecs, + values, + location, + componentName, + getStack +) { + const errors = []; + for (const typeSpecName in typeSpecs) { + if (typeSpecs.hasOwnProperty(typeSpecName)) { + let error; + // Prop type validation may throw. In case they do, we don't want to + // fail the render phase where it didn't fail before. So we log it. + // After these have been cleaned up, we'll let them throw. + try { + // This is intentionally an invariant that gets caught. It's the same + // behavior as without this statement except with a better message. + if (typeof typeSpecs[typeSpecName] !== 'function') { + error = Error( + (componentName || 'React class') + + ': ' + + location + + ' type `' + + typeSpecName + + '` is invalid; ' + + 'it must be a function, usually from the `prop-types` package, but received `' + + typeof typeSpecs[typeSpecName] + + '`.' + ); + error.name = 'Invariant Violation'; + } else { + error = typeSpecs[typeSpecName]( + values, + typeSpecName, + componentName, + location, + null, + ReactPropTypesSecret + ); + } + } catch (ex) { + error = ex; + } + if (error && !(error instanceof Error)) { + errors.push( + (componentName || 'React class') + + ': type specification of ' + + location + + ' `' + + typeSpecName + + '` is invalid; the type checker ' + + 'function must return `null` or an `Error` but returned a ' + + typeof error + + '. ' + + 'You may have forgotten to pass an argument to the type checker ' + + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + + 'shape all require an argument).' + ); + } + if (error instanceof Error) { + var stack = (getStack && getStack()) || ''; + + errors.push( + 'Failed ' + location + ' type: ' + error.message + stack + ); + } + } + } + return errors.join('\n\n'); +} diff --git a/dash-renderer/webpack.config.js b/dash-renderer/webpack.config.js index b0e6583eae..7df554cd08 100644 --- a/dash-renderer/webpack.config.js +++ b/dash-renderer/webpack.config.js @@ -10,21 +10,14 @@ const defaults = { rules: [ { test: /\.js$/, - exclude: /node_modules\/(?!check-prop-types\/)/, + exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.css$/, - use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - }, - ], + use: ['style-loader', 'css-loader'], }, { test: /\.svg$/, From 3f5bc181a6462004c74173c85b42a0be8cc66808 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 16:04:43 -0500 Subject: [PATCH 5/6] changelog for build simplification --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6cdb76e7c..2edf7aa879 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to `dash` will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## Unreleased + +### Changed +- [#1035](https://github.com/plotly/dash/pull/1035) Simplify our build process. + ## [1.7.0] - 2019-11-27 ### Added - [#967](https://github.com/plotly/dash/pull/967) Add support for defining From 26f9bcadf4a8c6dbd06c1e80fd7299fb72567f76 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 2 Dec 2019 16:49:15 -0500 Subject: [PATCH 6/6] update checkPropTypes comments --- dash-renderer/src/checkPropTypes.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/dash-renderer/src/checkPropTypes.js b/dash-renderer/src/checkPropTypes.js index df5948c5d1..04f4d7b821 100644 --- a/dash-renderer/src/checkPropTypes.js +++ b/dash-renderer/src/checkPropTypes.js @@ -1,14 +1,13 @@ /* - * Copied out of prop-types and modified - similar to check-prop-types, but - * simplified and tweaked to our needs, also so we don't need a special - * transpiling inclusion for this in node_modules - check-prop-types hasn't - * been modified in years and yet includes + * Copied out of prop-types and modified - inspired by check-prop-types, but + * simplified and tweaked to our needs: we don't need the NODE_ENV check, + * we report all errors, not just the first one, and we don't need the throwing + * variant `assertPropTypes`. */ import ReactPropTypesSecret from 'prop-types/lib/ReactPropTypesSecret'; /** * Assert that the values match with the type specs. - * Error messages are memorized and will only be shown once. * * @param {object} typeSpecs Map of name to a ReactPropType * @param {object} values Runtime values that need to be type-checked