Skip to content

Commit 06ddb29

Browse files
dmt0dmt0
committed
New JSX transform
1 parent b2c6cb6 commit 06ddb29

File tree

162 files changed

+199
-203
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

162 files changed

+199
-203
lines changed

‎.babelrc

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
{
2-
"presets": ["@babel/react", "@babel/env"],
2+
"presets": [
3+
[
4+
"@babel/preset-react",
5+
{
6+
"runtime": "automatic"
7+
}
8+
],
9+
"@babel/env"
10+
],
311
"plugins": [
412
"@babel/plugin-proposal-object-rest-spread",
513
[

‎.eslintrc

+3-2
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,15 @@
110110
"radix": ["error"],
111111
"react/jsx-no-duplicate-props": ["error"],
112112
"react/jsx-no-undef": ["error"],
113-
"react/jsx-uses-react": ["error"],
113+
"react/jsx-uses-react": ["off"],
114114
"react/jsx-uses-vars": ["error"],
115115
"react/no-did-update-set-state": ["error"],
116116
"react/no-direct-mutation-state": ["error"],
117117
"react/no-is-mounted": ["error"],
118118
"react/no-unknown-property": ["error"],
119119
"react/prefer-es6-class": ["error", "always"],
120-
"react/prop-types": "error",
120+
"react/prop-types": ["error"],
121+
"react/react-in-jsx-scope": ["off"],
121122
"valid-jsdoc": ["error"],
122123
"yoda": ["error"],
123124
"spaced-comment": ["error", "always", {

‎.storybook/webpack.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,23 @@ module.exports = async ({config, mode}) => {
66
use: ['style-loader', 'css-loader', 'sass-loader'],
77
include: path.resolve(__dirname, '../'),
88
});
9+
config.module.rules.push({
10+
test: /\.js?$/,
11+
use: {
12+
loader: 'babel-loader',
13+
options: {
14+
presets: [
15+
[
16+
'@babel/preset-react',
17+
{
18+
runtime: 'automatic',
19+
},
20+
],
21+
'@babel/env',
22+
],
23+
},
24+
},
25+
exclude: [/node_modules/],
26+
});
927
return config;
1028
};

‎dev/App.js

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import {hot} from 'react-hot-loader/root';
33
import plotly from 'plotly.js/dist/plotly-with-meta';
44
import '../src/styles/main.scss';
@@ -16,15 +16,16 @@ import ACCESS_TOKENS from '../accessTokens';
1616

1717
// import {customConfigTest} from '../src/__stories__';
1818

19-
const dataSourceOptions = Object.keys(dataSources).map(name => ({
19+
const dataSourceOptions = Object.keys(dataSources).map((name) => ({
2020
value: name,
2121
label: name,
2222
}));
2323

2424
const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
2525

26+
// eslint-disable-next-line no-unused-vars
2627
const traceTypesConfig = {
27-
traces: _ => [
28+
traces: (_) => [
2829
{
2930
value: 'scatter',
3031
icon: 'scatter',
@@ -66,16 +67,19 @@ const traceTypesConfig = {
6667
complex: true,
6768
};
6869

70+
// eslint-disable-next-line no-unused-vars
6971
const chartHelp = {
7072
area: {
7173
helpDoc: 'https://help.plot.ly/make-an-area-graph/',
7274
examplePlot: () => {
75+
// eslint-disable-next-line no-console
7376
console.log('example bar plot!');
7477
},
7578
},
7679
bar: {
7780
helpDoc: 'https://help.plot.ly/stacked-bar-chart/',
7881
examplePlot: () => {
82+
// eslint-disable-next-line no-console
7983
console.log('example bar plot!');
8084
},
8185
},
@@ -122,8 +126,8 @@ class App extends Component {
122126
// curl https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks \
123127
// | jq '[.[] | .name ]' > mocks.json
124128
fetch('/mocks.json')
125-
.then(response => response.json())
126-
.then(mocks => this.setState({mocks}));
129+
.then((response) => response.json())
130+
.then((mocks) => this.setState({mocks}));
127131
}
128132

129133
loadMock(mockIndex) {
@@ -135,8 +139,8 @@ class App extends Component {
135139
fetch(prefix + mockName, {
136140
headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
137141
})
138-
.then(response => response.json())
139-
.then(figure => {
142+
.then((response) => response.json())
143+
.then((figure) => {
140144
const {data, layout, frames} = figure;
141145
this.updateState(data, layout, frames, mockIndex);
142146
});
@@ -219,7 +223,7 @@ class App extends Component {
219223
}))}
220224
searchable={true}
221225
searchPromptText="Search for a mock"
222-
onChange={option => this.loadMock(option.value)}
226+
onChange={(option) => this.loadMock(option.value)}
223227
noResultsText={'No Results'}
224228
placeholder={'Search for a mock'}
225229
/>
@@ -234,7 +238,7 @@ class App extends Component {
234238
<AceEditor
235239
mode="json"
236240
theme="textmate"
237-
onChange={json_string => this.setState({json_string})}
241+
onChange={(json_string) => this.setState({json_string})}
238242
value={this.state.json_string}
239243
name="UNIQUE_ID_OF_DIV"
240244
style={{height: '80vh'}}

‎dev/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom';
32
import './styles.css';
43
import App from './App';

‎examples/custom/src/App.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import plotly from 'plotly.js/dist/plotly';
33
import PlotlyEditor from 'react-chart-editor';
44
import CustomEditor from './CustomEditor';
@@ -9,7 +9,7 @@ const dataSources = {
99
col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
1010
col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
1111
};
12-
const dataSourceOptions = Object.keys(dataSources).map(name => ({
12+
const dataSourceOptions = Object.keys(dataSources).map((name) => ({
1313
value: name,
1414
label: name,
1515
}));

‎examples/custom/src/CustomEditor.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import {
33
Flaglist,
44
ColorPicker,
@@ -47,19 +47,28 @@ export default class CustomEditor extends Component {
4747
label="Dropdown"
4848
attr="xaxis.title"
4949
show
50-
options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
50+
options={[
51+
{label: 'Yes', value: 'yes'},
52+
{label: 'No', value: 'no'},
53+
]}
5154
/>
5255
<Radio
5356
label="Radio"
5457
attr="yaxis.title"
5558
show
56-
options={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}]}
59+
options={[
60+
{label: 'Yes', value: 'yes'},
61+
{label: 'No', value: 'no'},
62+
]}
5763
/>
5864
<Flaglist
5965
label="Flaglist"
6066
attr="title.font.family"
6167
show
62-
options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
68+
options={[
69+
{label: 'Yes', value: 'y'},
70+
{label: 'No', value: 'n'},
71+
]}
6372
/>
6473
<ColorPicker label="ColorPicker" attr="plot_bgcolor" show />
6574
<TextEditor attr="title" label="TextEditor default" />

‎examples/custom/src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom';
32
import './index.css';
43
import App from './App';

‎examples/demo/src/App.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import plotly from 'plotly.js/dist/plotly';
33
import PlotlyEditor from 'react-chart-editor';
44
import 'react-chart-editor/lib/react-chart-editor.css';
55
import Nav from './Nav';
66
import dataSources from './dataSources';
77

8-
const dataSourceOptions = Object.keys(dataSources).map(name => ({
8+
const dataSourceOptions = Object.keys(dataSources).map((name) => ({
99
value: name,
1010
label: name,
1111
}));
@@ -29,17 +29,17 @@ class App extends Component {
2929

3030
UNSAFE_componentWillMount() {
3131
fetch('https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks')
32-
.then(response => response.json())
33-
.then(mocks => this.setState({mocks}));
32+
.then((response) => response.json())
33+
.then((mocks) => this.setState({mocks}));
3434
}
3535

3636
loadMock(mockIndex) {
3737
const mock = this.state.mocks[mockIndex];
3838
fetch(mock.url, {
3939
headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
4040
})
41-
.then(response => response.json())
42-
.then(figure => {
41+
.then((response) => response.json())
42+
.then((figure) => {
4343
this.setState({
4444
currentMockIndex: mockIndex,
4545
data: figure.data,

‎examples/demo/src/Nav.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import PropTypes from 'prop-types';
2-
import React from 'react';
32
import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown';
43

54
const Nav = ({mocks, currentMockIndex, loadMock}) => (
@@ -20,7 +19,7 @@ const Nav = ({mocks, currentMockIndex, loadMock}) => (
2019
value: i,
2120
}))}
2221
value={currentMockIndex}
23-
onChange={option => loadMock(option)}
22+
onChange={(option) => loadMock(option)}
2423
/>
2524
</div>
2625
</div>

‎examples/demo/src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom';
32
import './index.css';
43
import App from './App';

‎examples/redux/src/App.js

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'react-chart-editor/lib/react-chart-editor.css';
22
import PlotlyEditor from 'react-chart-editor';
33
import PropTypes from 'prop-types';
4-
import React, {Component} from 'react';
4+
import {Component} from 'react';
55
import plotly from 'plotly.js/dist/plotly';
66
import {bindActionCreators} from 'redux';
77
import {connect} from 'react-redux';
@@ -12,7 +12,7 @@ const dataSources = {
1212
col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
1313
col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
1414
};
15-
const dataSourceOptions = Object.keys(dataSources).map(name => ({
15+
const dataSourceOptions = Object.keys(dataSources).map((name) => ({
1616
value: name,
1717
label: name,
1818
}));
@@ -29,14 +29,7 @@ class App extends Component {
2929
}
3030

3131
render() {
32-
const {
33-
actions,
34-
dataSources,
35-
dataSourceOptions,
36-
data,
37-
layout,
38-
frames,
39-
} = this.props;
32+
const {actions, dataSources, dataSourceOptions, data, layout, frames} = this.props;
4033

4134
return (
4235
<div className="app">
@@ -67,15 +60,15 @@ App.propTypes = {
6760
frames: PropTypes.array,
6861
};
6962

70-
const mapStateToProps = state => ({
63+
const mapStateToProps = (state) => ({
7164
dataSourceOptions: state.dataSourceOptions,
7265
dataSources: state.dataSources,
7366
data: state.data,
7467
layout: state.layout,
7568
frames: state.frames,
7669
});
7770

78-
const mapDispatchToProps = dispatch => ({
71+
const mapDispatchToProps = (dispatch) => ({
7972
actions: bindActionCreators(actions, dispatch),
8073
});
8174

‎examples/redux/src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import './index.css';
22
import App from './App';
3-
import React from 'react';
43
import ReactDOM from 'react-dom';
54
import reducer from './reducer';
65
import {Provider} from 'react-redux';

‎examples/simple/src/App.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import plotly from 'plotly.js/dist/plotly';
33
import PlotlyEditor from 'react-chart-editor';
44
import 'react-chart-editor/lib/react-chart-editor.css';
@@ -9,7 +9,7 @@ const dataSources = {
99
col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
1010
};
1111

12-
const dataSourceOptions = Object.keys(dataSources).map(name => ({
12+
const dataSourceOptions = Object.keys(dataSources).map((name) => ({
1313
value: name,
1414
label: name,
1515
}));
@@ -33,9 +33,7 @@ class App extends Component {
3333
dataSources={dataSources}
3434
dataSourceOptions={dataSourceOptions}
3535
plotly={plotly}
36-
onUpdate={(data, layout, frames) =>
37-
this.setState({data, layout, frames})
38-
}
36+
onUpdate={(data, layout, frames) => this.setState({data, layout, frames})}
3937
useResizeHandler
4038
debug
4139
advancedTraceTypeSelector

‎examples/simple/src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom';
32
import './index.css';
43
import App from './App';

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"url": "https://github.com/plotly/react-chart-editor/issues"
88
},
99
"scripts": {
10-
"lint": "prettier --write \"src/**/*.js\"",
10+
"lint": "prettier --write \"src/**/*.js\" \"dev/**/*.js\" \"examples/**/*.js\"",
1111
"make:arrows": "node scripts/makeArrows.js",
1212
"make:combined-translation-keys": "npm run make:translation-keys && node scripts/combineTranslationKeys.js",
1313
"make:lib:css": "mkdirp lib && babel-node scripts/styles.js && SASS_ENV=ie babel-node scripts/styles.js && babel-node scripts/postcss.js && SASS_ENV=ie babel-node scripts/postcss.js",
@@ -19,8 +19,8 @@
1919
"storybook": "start-storybook -p 9001 -c .storybook",
2020
"test": "npm run test:lint && npm run test:pretty && npm run test:js",
2121
"test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill --maxWorkers=2",
22-
"test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
23-
"test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
22+
"test:lint": "eslint \"src/**/*.js\" \"dev/**/*.js\" \"examples/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
23+
"test:pretty": "prettier -l \"src/**/*.js\" \"dev/**/*.js\" \"examples/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
2424
"test:percy": "node --max-old-space-size=4096 $(npm bin)/build-storybook && percy-storybook --widths=500",
2525
"test:percy-local": "node --max-old-space-size=4096 $(npm bin)/build-storybook",
2626
"watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",

‎src/DefaultEditor.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import {PanelMenuWrapper} from './components';
44
import {

‎src/EditorControls.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import DefaultEditor from './DefaultEditor';
22
import PropTypes from 'prop-types';
3-
import React, {Component} from 'react';
3+
import {Component} from 'react';
44
import {
55
bem,
66
localizeString,

‎src/PlotlyEditor.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import {Component} from 'react';
22
import createPlotComponent from 'react-plotly.js/factory';
33
import EditorControls from './EditorControls';
44
import PropTypes from 'prop-types';

‎src/__stories__/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import '../../dev/styles.css';
1010
import '../styles/main.scss';
1111
import './stories.css';
1212

13-
import React from 'react';
1413
import {storiesOf} from '@storybook/react';
1514
export const customConfigTest = {
1615
visibility_rules: {

0 commit comments

Comments
 (0)