Merge pull request #1118 from plotly/undo-jsx-transform

Revert "New JSX transform" + version bump

Author: dmt0

.babelrc

@@ -1,13 +1,5 @@
 {
-  "presets": [
-    [
-      "@babel/preset-react",
-      {
-        "runtime": "automatic"
-      }
-    ],
-    "@babel/env"
-  ],
+  "presets": ["@babel/react", "@babel/env"],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",
     [

.eslintrc

@@ -110,15 +110,14 @@
     "radix": ["error"],
     "react/jsx-no-duplicate-props": ["error"],
     "react/jsx-no-undef": ["error"],
-    "react/jsx-uses-react": ["off"],
+    "react/jsx-uses-react": ["error"],
     "react/jsx-uses-vars": ["error"],
     "react/no-did-update-set-state": ["error"],
     "react/no-direct-mutation-state": ["error"],
     "react/no-is-mounted": ["error"],
     "react/no-unknown-property": ["error"],
     "react/prefer-es6-class": ["error", "always"],
-    "react/prop-types": ["error"],
-    "react/react-in-jsx-scope": ["off"],
+    "react/prop-types": "error",
     "valid-jsdoc": ["error"],
     "yoda": ["error"],
     "spaced-comment": ["error", "always", {

.storybook/webpack.config.js

@@ -6,23 +6,5 @@ module.exports = async ({config, mode}) => {
     use: ['style-loader', 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../'),
   });
-  config.module.rules.push({
-    test: /\.js?$/,
-    use: {
-      loader: 'babel-loader',
-      options: {
-        presets: [
-          [
-            '@babel/preset-react',
-            {
-              runtime: 'automatic',
-            },
-          ],
-          '@babel/env',
-        ],
-      },
-    },
-    exclude: [/node_modules/],
-  });
   return config;
 };

dev/App.js

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import React, {Component} from 'react';
 import {hot} from 'react-hot-loader/root';
 import plotly from 'plotly.js/dist/plotly-with-meta';
 import '../src/styles/main.scss';
@@ -16,16 +16,15 @@ import ACCESS_TOKENS from '../accessTokens';
 
 // import {customConfigTest} from '../src/__stories__';
 
-const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));
 
 const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 
-// eslint-disable-next-line no-unused-vars
 const traceTypesConfig = {
-  traces: (_) => [
+  traces: _ => [
     {
       value: 'scatter',
       icon: 'scatter',
@@ -67,19 +66,16 @@ const traceTypesConfig = {
   complex: true,
 };
 
-// eslint-disable-next-line no-unused-vars
 const chartHelp = {
   area: {
     helpDoc: 'https://help.plot.ly/make-an-area-graph/',
     examplePlot: () => {
-      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
   bar: {
     helpDoc: 'https://help.plot.ly/stacked-bar-chart/',
     examplePlot: () => {
-      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
@@ -126,8 +122,8 @@ class App extends Component {
     // curl https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks \
     // | jq '[.[] | .name ]' > mocks.json
     fetch('/mocks.json')
-      .then((response) => response.json())
-      .then((mocks) => this.setState({mocks}));
+      .then(response => response.json())
+      .then(mocks => this.setState({mocks}));
   }
 
   loadMock(mockIndex) {
@@ -139,8 +135,8 @@ class App extends Component {
     fetch(prefix + mockName, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
-      .then((response) => response.json())
-      .then((figure) => {
+      .then(response => response.json())
+      .then(figure => {
         const {data, layout, frames} = figure;
         this.updateState(data, layout, frames, mockIndex);
       });
@@ -223,7 +219,7 @@ class App extends Component {
                   }))}
                   searchable={true}
                   searchPromptText="Search for a mock"
-                  onChange={(option) => this.loadMock(option.value)}
+                  onChange={option => this.loadMock(option.value)}
                   noResultsText={'No Results'}
                   placeholder={'Search for a mock'}
                 />
@@ -238,7 +234,7 @@ class App extends Component {
               <AceEditor
                 mode="json"
                 theme="textmate"
-                onChange={(json_string) => this.setState({json_string})}
+                onChange={json_string => this.setState({json_string})}
                 value={this.state.json_string}
                 name="UNIQUE_ID_OF_DIV"
                 style={{height: '80vh'}}

dev/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles.css';
 import App from './App';

examples/custom/src/App.js

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import CustomEditor from './CustomEditor';
@@ -9,7 +9,7 @@ const dataSources = {
   col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
-const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));

examples/custom/src/CustomEditor.js

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import React, {Component} from 'react';
 import {
   Flaglist,
   ColorPicker,
@@ -47,28 +47,19 @@ export default class CustomEditor extends Component {
                 label="Dropdown"
                 attr="xaxis.title"
                 show
-                options={[
-                  {label: 'Yes', value: 'yes'},
-                  {label: 'No', value: 'no'},
-                ]}
+                options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
               />
               <Radio
                 label="Radio"
                 attr="yaxis.title"
                 show
-                options={[
-                  {label: 'Yes', value: 'yes'},
-                  {label: 'No', value: 'no'},
-                ]}
+                options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
               />
               <Flaglist
                 label="Flaglist"
                 attr="title.font.family"
                 show
-                options={[
-                  {label: 'Yes', value: 'y'},
-                  {label: 'No', value: 'n'},
-                ]}
+                options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
               />
               <ColorPicker label="ColorPicker" attr="plot_bgcolor" show />
               <TextEditor attr="title" label="TextEditor default" />

examples/custom/src/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

examples/demo/src/App.js

@@ -1,11 +1,11 @@
-import {Component} from 'react';
+import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import 'react-chart-editor/lib/react-chart-editor.css';
 import Nav from './Nav';
 import dataSources from './dataSources';
 
-const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));
@@ -29,17 +29,17 @@ class App extends Component {
 
   UNSAFE_componentWillMount() {
     fetch('https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks')
-      .then((response) => response.json())
-      .then((mocks) => this.setState({mocks}));
+      .then(response => response.json())
+      .then(mocks => this.setState({mocks}));
   }
 
   loadMock(mockIndex) {
     const mock = this.state.mocks[mockIndex];
     fetch(mock.url, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
-      .then((response) => response.json())
-      .then((figure) => {
+      .then(response => response.json())
+      .then(figure => {
         this.setState({
           currentMockIndex: mockIndex,
           data: figure.data,

examples/demo/src/Nav.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import React from 'react';
 import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown';
 
 const Nav = ({mocks, currentMockIndex, loadMock}) => (
@@ -19,7 +20,7 @@ const Nav = ({mocks, currentMockIndex, loadMock}) => (
           value: i,
         }))}
         value={currentMockIndex}
-        onChange={(option) => loadMock(option)}
+        onChange={option => loadMock(option)}
       />
     </div>
   </div>

examples/demo/src/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

examples/redux/src/App.js

@@ -1,7 +1,7 @@
 import 'react-chart-editor/lib/react-chart-editor.css';
 import PlotlyEditor from 'react-chart-editor';
 import PropTypes from 'prop-types';
-import {Component} from 'react';
+import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
@@ -12,7 +12,7 @@ const dataSources = {
   col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
-const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));
@@ -29,7 +29,14 @@ class App extends Component {
   }
 
   render() {
-    const {actions, dataSources, dataSourceOptions, data, layout, frames} = this.props;
+    const {
+      actions,
+      dataSources,
+      dataSourceOptions,
+      data,
+      layout,
+      frames,
+    } = this.props;
 
     return (
       <div className="app">
@@ -60,15 +67,15 @@ App.propTypes = {
   frames: PropTypes.array,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   dataSourceOptions: state.dataSourceOptions,
   dataSources: state.dataSources,
   data: state.data,
   layout: state.layout,
   frames: state.frames,
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(actions, dispatch),
 });
 

examples/redux/src/index.js

@@ -1,5 +1,6 @@
 import './index.css';
 import App from './App';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import reducer from './reducer';
 import {Provider} from 'react-redux';

examples/simple/src/App.js

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
 import PlotlyEditor from 'react-chart-editor';
 import 'react-chart-editor/lib/react-chart-editor.css';
@@ -9,7 +9,7 @@ const dataSources = {
   col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
 };
 
-const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));
@@ -33,7 +33,9 @@ class App extends Component {
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout, frames) => this.setState({data, layout, frames})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/simple/src/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';