diff --git a/.babelrc.js b/.babelrc.js index b241105f88..a3d9c54939 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -6,11 +6,18 @@ const modules = output == null ? false : output; const options = { presets: [['@babel/env', { loose: true, modules }], '@babel/react'], - plugins: ['@babel/proposal-object-rest-spread', ['@babel/proposal-class-properties', { loose: true }]], + plugins: [ + '@babel/plugin-syntax-dynamic-import', + '@babel/proposal-object-rest-spread', + ['@babel/proposal-class-properties', { loose: true }], + ], }; if (target === 'examples') { - options.plugins.push(['transform-react-remove-prop-types', { removeImport: true }]); + options.plugins.push([ + 'transform-react-remove-prop-types', + { removeImport: true }, + ]); } else { options.plugins.push(['transform-react-remove-prop-types', { mode: 'wrap' }]); } diff --git a/.eslintrc b/.eslintrc index ad1f0c4dfb..523af9eb43 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,10 +8,7 @@ "plugins": ["prettier"], "rules": { "no-plusplus": "off", - "prettier/prettier": [ - "error", - { "singleQuote": true, "printWidth": 100, "trailingComma": "all" } - ], + "prettier/prettier": "error", "react/require-default-props": "off", "react/jsx-filename-extension": ["error", { "extensions": [".js"] }], "react/forbid-prop-types": "off", diff --git a/.gitignore b/.gitignore index 424ae53048..7db34eb1ee 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ npm-debug.log lib/ dist/ esm/ +yarn-error.log diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..ae113a8fd3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "arrowParens": "avoid", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "printWidth": 80, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "useTabs": false + } \ No newline at end of file diff --git a/examples/src/components/ExampleItem.js b/examples/src/components/ExampleItem.js index 6f13cac37f..aa60a991e2 100644 --- a/examples/src/components/ExampleItem.js +++ b/examples/src/components/ExampleItem.js @@ -1,15 +1,27 @@ import React, { Component } from 'react'; import T from 'prop-types'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; // eslint-disable-line -import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; import classNames from 'classnames'; +let ReactLive; + const scope = { Tabs, Tab, TabList, TabPanel }; export default class ExampleItem extends Component { state = { editorOpen: false, + liveLoaded: false, }; + + constructor(props) { + super(props); + + import('react-live').then(Live => { + ReactLive = Live; + this.setState({ liveLoaded: true }); + }); + } + toggleCheckbox({ target: { name, checked } }) { this.setState({ [name]: checked, @@ -28,10 +40,34 @@ export default class ExampleItem extends Component { return