From f03eca77da12a8419231fc20c5e2fec181e92176 Mon Sep 17 00:00:00 2001 From: tajo Date: Thu, 12 May 2016 20:25:06 -0400 Subject: [PATCH] eslint airbnb ruleset used and applied --- .eslintrc | 109 +----------------- devServer.js | 31 +++-- devServerIndex.js | 2 + examples/absoluteposition.js | 7 +- examples/index.js | 85 ++++++++------ examples/loadingbar.js | 26 ++--- examples/pseudomodal.js | 10 +- lib/portal.js | 70 +++++------ package.json | 39 ++++--- test/portal_spec.js | 55 +++++---- ...nfig.dev.js => webpack.config.dev.babel.js | 20 ++-- ...ig.prod.js => webpack.config.prod.babel.js | 28 ++--- 12 files changed, 186 insertions(+), 296 deletions(-) create mode 100644 devServerIndex.js rename webpack.config.dev.js => webpack.config.dev.babel.js (64%) rename webpack.config.prod.js => webpack.config.prod.babel.js (62%) diff --git a/.eslintrc b/.eslintrc index 2567530..b1c0e6f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,113 +1,6 @@ { "parser": "babel-eslint", - "rules": { - "array-bracket-spacing": [2, "never"], - "brace-style": [1, "1tbs", {"allowSingleLine": true}], - "camelcase": 1, - "comma-dangle": [1, "never"], - "comma-spacing": [1, {"before": false, "after": true}], - "comma-style": [1, "last"], - "computed-property-spacing": [2, "never"], - "consistent-this": [1, "self"], - "eqeqeq": [2, "allow-null"], - "eol-last": 1, - "guard-for-in": 0, - "indent": [2, 2], - "key-spacing": 0, - "new-cap": [1, {"capIsNew": false, "newIsCap": true}], - "new-parens": 0, - "no-bitwise": 0, - "no-cond-assign": 1, - "no-console": 1, - "no-constant-condition": 1, - "no-delete-var": 2, - "no-debugger": 1, - "no-dupe-keys": 1, - "no-duplicate-case": 1, - "no-empty-character-class": 1, - "no-eval": 1, - "no-ex-assign": 1, - "no-extend-native": 1, - "no-floating-decimal": 1, - "no-func-assign": 1, - "no-implied-eval": 1, - "no-inner-declarations": 1, - "no-invalid-regexp": 1, - "no-irregular-whitespace": 1, - "no-iterator": 1, - "no-labels": 1, - "no-lonely-if": 1, - "no-loop-func": 1, - "no-mixed-spaces-and-tabs": 1, - "no-native-reassign": 2, - "no-negated-in-lhs": 1, - "no-new-func": 1, - "no-new-object": 1, - "no-new-wrappers": 2, - "no-obj-calls": 1, - "no-octal": 1, - "no-plusplus": 1, - "no-proto": 2, - "no-redeclare": 1, - "no-return-assign": 1, - "no-self-compare": 1, - "no-sequences": 1, - "no-shadow": 1, - "no-spaced-func": 1, - "no-sparse-arrays": 1, - "no-throw-literal": 1, - "no-trailing-spaces": 1, - "no-unused-vars": [1, {"vars": "all", "args": "none"}], - "no-undef": 1, - "no-undefined": 2, - "no-undef-init": 1, - "no-underscore-dangle": 0, - "no-unreachable": 1, - "no-use-before-define": [1, "nofunc"], - "no-warning-comments": [1, {"terms": ["todo", "fixme"]}], - "object-curly-spacing": [2, "never"], - "quotes": [1, "single", "avoid-escape"], - "quote-props": [0, "as-needed"], - "radix": 1, - "semi": [2, "always"], - "semi-spacing": [1, {"before": false, "after": true}], - "space-after-keywords": [1, "always"], - "space-before-blocks": [1, "always"], - "space-before-function-paren": [1, "never"], - "space-infix-ops": 1, - "space-in-parens": [1, "never"], - "space-return-throw-case": 1, - "space-unary-ops": [1, {"words": true, "nonwords": false}], - "strict": [0, "never"], // babel does it - "use-isnan": 1, - "valid-typeof": 1, - "vars-on-top": 0, // disabled for now, see github.com/eslint/eslint/issues/2099 - "wrap-iife": [1, "inside"], - "yoda": 0, - // Node.js specific - "handle-callback-err": [1, "^(err|error)$"], - "no-mixed-requires": 1, - "no-new-require": 1, - "no-path-concat": 1, - // React - "react/jsx-boolean-value": 1, - "react/jsx-no-undef": 1, - "jsx-quotes": 1, - "react/jsx-sort-props": 1, - "react/jsx-uses-react": 1, - "react/jsx-uses-vars": 1, - "react/no-did-mount-set-state": 1, - "react/no-did-update-set-state": 1, - "react/no-multi-comp": 1, - "react/no-unknown-property": 1, - "react/prop-types": 1, - "react/react-in-jsx-scope": 1, - "react/self-closing-comp": 1, - "react/wrap-multilines": 1 - }, - "plugins": [ - "react" - ], + "extends" : ["airbnb"], "env": { "browser": true, "node": true, diff --git a/devServer.js b/devServer.js index 99788aa..35499b8 100644 --- a/devServer.js +++ b/devServer.js @@ -1,28 +1,25 @@ -var path = require('path'); -var express = require('express'); -var webpack = require('webpack'); -var config = require('./webpack.config.dev'); +import path from 'path'; +import express from 'express'; +import webpack from 'webpack'; +import config from './webpack.config.dev.babel'; +import webpackDev from 'webpack-dev-middleware'; +import webpackHot from 'webpack-hot-middleware'; -var app = express(); -var compiler = webpack(config); +const app = express(); +const compiler = webpack(config); -app.use(require('webpack-dev-middleware')(compiler, { +app.use(webpackDev(compiler, { noInfo: true, - publicPath: config.output.publicPath + publicPath: config.output.publicPath, })); -app.use(require('webpack-hot-middleware')(compiler)); +app.use(webpackHot(compiler)); -app.get('*', function(req, res) { +app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'examples/index_dev.html')); }); -/*eslint-disable*/ -app.listen(3000, 'localhost', function(err) { - if (err) { - console.log(err); - return; - } - console.log('Listening at http://localhost:3000'); +app.listen(3000, 'localhost', () => { + console.log('Listening at http://localhost:3000'); // eslint-disable-line }); diff --git a/devServerIndex.js b/devServerIndex.js new file mode 100644 index 0000000..6ad7d6a --- /dev/null +++ b/devServerIndex.js @@ -0,0 +1,2 @@ +require('babel-register'); +require('./devServer'); diff --git a/examples/absoluteposition.js b/examples/absoluteposition.js index d54739c..49fc894 100644 --- a/examples/absoluteposition.js +++ b/examples/absoluteposition.js @@ -1,7 +1,6 @@ import React from 'react'; -export default class AbsolutePosition extends React.Component { - +export default class AbsolutePosition extends React.Component { // eslint-disable-line render() { const style = { position: 'absolute', @@ -11,7 +10,7 @@ export default class AbsolutePosition extends React.Component { border: '1px solid gray', background: '#fff', margin: 10, - padding: 10 + padding: 10, }; return ( @@ -31,5 +30,5 @@ AbsolutePosition.propTypes = { top: React.PropTypes.number, left: React.PropTypes.number, width: React.PropTypes.number, - closePortal: React.PropTypes.func + closePortal: React.PropTypes.func, }; diff --git a/examples/index.js b/examples/index.js index b4b304c..0c94ded 100644 --- a/examples/index.js +++ b/examples/index.js @@ -13,40 +13,49 @@ export default class App extends React.Component { super(props); this.state = { isPortalOpened: false, - someValue: 'init' + someValue: 'init', }; } onClose() { - /*eslint no-console: 0*/ + /* eslint no-console: 0 */ console.log('Portal closed'); } onOpen(node) { - new TWEEN.Tween({opacity: 0}) - .to({opacity: 1}, 500) + new TWEEN.Tween({ opacity: 0 }) + .to({ opacity: 1 }, 500) .easing(TWEEN.Easing.Cubic.In) - .onUpdate(function() { - node.style.opacity = this.opacity; - }).start(); + .onUpdate(function() { // eslint-disable-line + node.style.opacity = this.opacity; // eslint-disable-line + }) + .start(); } beforeClose(node, removeFromDom) { - new TWEEN.Tween({opacity: 1}) - .to({opacity: 0}, 500) + new TWEEN.Tween({ opacity: 1 }) + .to({ opacity: 0 }, 500) .easing(TWEEN.Easing.Cubic.In) - .onUpdate(function() { - node.style.opacity = this.opacity; + .onUpdate(function() { // eslint-disable-line + node.style.opacity = this.opacity; // eslint-disable-line }) .onComplete(removeFromDom) .start(); } + toggleLoadingBar() { + this.setState({ isPortalOpened: !this.state.isPortalOpened }); + } + + changeValue() { + this.setState({ someValue: Math.random().toString(36).substring(7) }); + } + render() { const buttonStyles = { padding: 10, fontSize: 20, - marginBottom:10 + marginBottom: 10, }; function animate(time) { requestAnimationFrame(animate); @@ -57,23 +66,26 @@ export default class App extends React.Component { const button1 = ; const button2 = ; const button3 = ( - ); const button4 = ; return ( -
+

React portal examples

https://github.com/tajo/react-portal

@@ -96,7 +108,7 @@ export default class App extends React.Component { -
+

Click anywhere outside of this portal to close it.

@@ -106,9 +118,13 @@ export default class App extends React.Component { {this.setState({isOpened: false}); this.onClose();}} + onClose={() => { this.setState({ isOpened: false }); this.onClose(); }} > - +
@@ -122,24 +138,17 @@ export default class App extends React.Component { closeOnOutsideClick onOpen={this.onOpen} openByClickOn={button4} - style={{opacity: 0}} + style={{ opacity: 0 }} > -
-

Trigger Animations, or any arbitrary function, before removing the portal from the DOM, animates out on both click outside and on esc press

+
+

Trigger Animations, or any arbitrary function,{' '} + before removing the portal from the DOM, animates out{' '} + on both click outside and on esc press

); } - - toggleLoadingBar(e) { - this.setState({isPortalOpened: !this.state.isPortalOpened}); - } - - changeValue(e) { - this.setState({someValue: Math.random().toString(36).substring(7)}); - } - } ReactDOM.render(, document.getElementById('root')); diff --git a/examples/loadingbar.js b/examples/loadingbar.js index 1dfddac..4eda5e6 100644 --- a/examples/loadingbar.js +++ b/examples/loadingbar.js @@ -1,21 +1,9 @@ import React from 'react'; -export default class LoadingBar extends React.Component { - - render() { - return ( -
-

This could be a loading bar...

-

This portal is opened by the prop isOpened.

-

... when openByClickOn is not enough.

-

Notice, that by default you cannot close this by ESC or an outside click.

-
- ); - } - -} - -LoadingBar.propTypes = { - children: React.PropTypes.element, - closePortal: React.PropTypes.func -}; +export default () => +
+

This could be a loading bar...

+

This portal is opened by the prop isOpened.

+

... when openByClickOn is not enough.

+

Notice, that by default you cannot close this by ESC or an outside click.

+
; diff --git a/examples/pseudomodal.js b/examples/pseudomodal.js index 058b381..fee0275 100644 --- a/examples/pseudomodal.js +++ b/examples/pseudomodal.js @@ -1,22 +1,20 @@ import React from 'react'; -export default class PseudoModal extends React.Component { - +export default class PseudoModal extends React.Component { // eslint-disable-line render() { return ( -
+
{this.props.children}

); } - } PseudoModal.propTypes = { children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element + React.PropTypes.element, ]), - closePortal: React.PropTypes.func + closePortal: React.PropTypes.func, }; diff --git a/lib/portal.js b/lib/portal.js index 4d6ed84..d126f35 100644 --- a/lib/portal.js +++ b/lib/portal.js @@ -1,17 +1,17 @@ import React from 'react'; -import ReactDOM, {findDOMNode} from 'react-dom'; +import ReactDOM, { findDOMNode } from 'react-dom'; import CSSPropertyOperations from 'react/lib/CSSPropertyOperations'; import shallowCompare from 'react/lib/shallowCompare'; const KEYCODES = { - ESCAPE: 27 + ESCAPE: 27, }; export default class Portal extends React.Component { constructor() { super(); - this.state = {active: false}; + this.state = { active: false }; this.handleWrapperClick = this.handleWrapperClick.bind(this); this.closePortal = this.closePortal.bind(this); this.handleOutsideMouseClick = this.handleOutsideMouseClick.bind(this); @@ -56,6 +56,10 @@ export default class Portal extends React.Component { } } + shouldComponentUpdate(nextProps, nextState) { + return shallowCompare(this, nextProps, nextState); + } + componentWillUnmount() { if (this.props.closeOnEsc) { document.removeEventListener('keydown', this.handleKeydown); @@ -69,32 +73,6 @@ export default class Portal extends React.Component { this.closePortal(true); } - shouldComponentUpdate(nextProps, nextState) { - return shallowCompare(this, nextProps, nextState); - } - - renderPortal(props) { - if (!this.node) { - this.node = document.createElement('div'); - if (props.className) { - this.node.className = props.className; - } - if (props.style) { - CSSPropertyOperations.setValueForStyles(this.node, props.style); - } - document.body.appendChild(this.node); - } - this.portal = ReactDOM.unstable_renderSubtreeIntoContainer(this, React.cloneElement(props.children, {closePortal: this.closePortal}), this.node, this.props.onUpdate); - } - - render() { - if (this.props.openByClickOn) { - return React.cloneElement(this.props.openByClickOn, {onClick: this.handleWrapperClick}); - } else { - return null; - } - } - handleWrapperClick(e) { e.preventDefault(); e.stopPropagation(); @@ -103,9 +81,8 @@ export default class Portal extends React.Component { } openPortal(props = this.props) { - this.setState({active: true}); + this.setState({ active: true }); this.renderPortal(props); - this.props.onOpen(this.node); } @@ -118,7 +95,7 @@ export default class Portal extends React.Component { this.portal = null; this.node = null; if (isUnmounted !== true) { - this.setState({active: false}); + this.setState({ active: false }); } }; @@ -149,6 +126,31 @@ export default class Portal extends React.Component { } } + renderPortal(props) { + if (!this.node) { + this.node = document.createElement('div'); + if (props.className) { + this.node.className = props.className; + } + if (props.style) { + CSSPropertyOperations.setValueForStyles(this.node, props.style); + } + document.body.appendChild(this.node); + } + this.portal = ReactDOM.unstable_renderSubtreeIntoContainer( + this, + React.cloneElement(props.children, { closePortal: this.closePortal }), + this.node, + this.props.onUpdate + ); + } + + render() { + if (this.props.openByClickOn) { + return React.cloneElement(this.props.openByClickOn, { onClick: this.handleWrapperClick }); + } + return null; + } } Portal.propTypes = { @@ -162,11 +164,11 @@ Portal.propTypes = { onOpen: React.PropTypes.func, onClose: React.PropTypes.func, beforeClose: React.PropTypes.func, - onUpdate: React.PropTypes.func + onUpdate: React.PropTypes.func, }; Portal.defaultProps = { onOpen: () => {}, onClose: () => {}, - onUpdate: () => {} + onUpdate: () => {}, }; diff --git a/package.json b/package.json index 1de59e3..399621a 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,10 @@ "author": "Vojtech Miksu ", "license": "MIT", "scripts": { - "start": "node devServer.js", + "start": "node devServerIndex.js", "build": "mkdir -p build && babel ./lib/portal.js --out-file ./build/portal.js", "build:examples": "npm run clean && npm run build:examples:webpack", - "build:examples:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", + "build:examples:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.babel.js", "clean": "rimraf build", "test": "mocha", "lint": "mocha test/eslint_spec.js", @@ -38,31 +38,34 @@ "transportation" ], "devDependencies": { - "babel-cli": "^6.4.0", - "babel-core": "^6.4.0", - "babel-eslint": "^4.1.6", + "babel-cli": "^6.8.0", + "babel-core": "^6.8.0", + "babel-eslint": "^6.0.4", "babel-loader": "^6.2.1", - "babel-plugin-add-module-exports": "^0.1.2", + "babel-plugin-add-module-exports": "^0.2.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-react-hmre": "^1.0.1", - "babel-register": "^6.3.13", + "babel-register": "^6.8.0", "cross-env": "^1.0.7", - "enzyme": "^2.2.0", - "eslint": "^1.10.3", - "eslint-plugin-react": "^3.14.0", + "enzyme": "^2.3.0", + "eslint": "^2.9.0", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-import": "^1.8.0", + "eslint-plugin-jsx-a11y": "^1.2.0", + "eslint-plugin-react": "^5.1.1", "express": "^4.13.3", - "jsdom": "^7.2.2", + "jsdom": "^9.0.0", "mocha": "^2.3.4", - "mocha-eslint": "^1.0.0", - "react": "^15.0.1", - "react-addons-test-utils": "^15.0.1", - "react-dom": "^15.0.1", + "mocha-eslint": "^2.0.2", + "react": "^15.0.2", + "react-addons-test-utils": "^15.0.2", + "react-dom": "^15.0.2", "rimraf": "^2.5.0", - "sinon": "^1.17.2", + "sinon": "^1.17.4", "tween.js": "^16.3.1", - "webpack": "^1.12.11", - "webpack-dev-middleware": "^1.4.0", + "webpack": "^1.13.0", + "webpack-dev-middleware": "^1.6.1", "webpack-hot-middleware": "^2.6.0" } } diff --git a/test/portal_spec.js b/test/portal_spec.js index 8f0820e..73881c2 100644 --- a/test/portal_spec.js +++ b/test/portal_spec.js @@ -1,11 +1,9 @@ import jsdom from 'jsdom'; import Portal from '../lib/portal'; import assert from 'assert'; -import {spy} from 'sinon'; -import {render, unmountComponentAtNode} from 'react-dom'; -import { - mount -} from 'enzyme'; +import { spy } from 'sinon'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { mount } from 'enzyme'; describe('react-portal', () => { let React; @@ -13,9 +11,11 @@ describe('react-portal', () => { // Set up JSDOM global.document = jsdom.jsdom(''); global.window = document.defaultView; - global.navigator = {userAgent: 'node.js'}; + global.navigator = { userAgent: 'node.js' }; // Enzyme library uses React + /*eslint-disable */ React = require('react'); + /*eslint-enable */ }); it('propTypes.children should be required', () => { @@ -47,7 +47,7 @@ describe('react-portal', () => { const wrapper = mount(

Hi

); assert.equal(document.body.childElementCount, 0); // Enzyme docs say it merges previous props but without children, react complains - wrapper.setProps({isOpened: true, children:

Hi

}); + wrapper.setProps({ isOpened: true, children:

Hi

}); assert.equal(document.body.lastElementChild, wrapper.instance().node); assert.equal(document.body.childElementCount, 1); }); @@ -56,12 +56,11 @@ describe('react-portal', () => { const wrapper = mount(

Hi

); assert.equal(document.body.lastElementChild, wrapper.instance().node); assert.equal(document.body.childElementCount, 1); - wrapper.setProps({isOpened: false, children:

Hi

}); + wrapper.setProps({ isOpened: false, children:

Hi

}); assert.equal(document.body.childElementCount, 0); }); it('should pass Portal.closePortal to child component', () => { - let wrapper; let closePortal; /*eslint-disable*/ const Child = (props) => { @@ -69,7 +68,7 @@ describe('react-portal', () => { return

Hi

; }; /*eslint-enable*/ - wrapper = mount(); + const wrapper = mount(); assert.equal(closePortal, wrapper.instance().closePortal); }); @@ -79,21 +78,21 @@ describe('react-portal', () => { }); it('should add inline style to portal\'s wrapping node', () => { - mount(

Hi

); + mount(

Hi

); assert.equal(document.body.lastElementChild.style.color, 'blue'); }); describe('callbacks', () => { it('should call props.beforeClose() if passed when calling Portal.closePortal()', () => { - const props = {isOpened: true, beforeClose: spy()}; + const props = { isOpened: true, beforeClose: spy() }; const wrapper = mount(

Hi

); wrapper.instance().closePortal(); assert(props.beforeClose.calledOnce); assert(props.beforeClose.calledWith(wrapper.instance().node)); }); - it('should call props.beforeClose() only once even if closePortal is called multiple times', () => { - const props = {isOpened: true, beforeClose: spy((node, cb) => cb())}; + it('should call props.beforeClose() only 1x even if closePortal is called more times', () => { + const props = { isOpened: true, beforeClose: spy((node, cb) => cb()) }; const wrapper = mount(

Hi

); wrapper.instance().closePortal(); wrapper.instance().closePortal(); @@ -101,37 +100,37 @@ describe('react-portal', () => { }); it('should call props.onOpen() when portal opens', () => { - const props = {isOpened: true, onOpen: spy()}; + const props = { isOpened: true, onOpen: spy() }; const wrapper = mount(

Hi

); assert(props.onOpen.calledOnce); assert(props.onOpen.calledWith(wrapper.instance().node)); }); it('should not call props.onOpen() when portal receives props', () => { - const props = {isOpened: true, onOpen: spy(), className: 'old'}; + const props = { isOpened: true, onOpen: spy(), className: 'old' }; const wrapper = mount(

Hi

); assert(props.onOpen.calledOnce); - wrapper.setProps({isOpened: true, children:

Hi

, className: 'new'}); + wrapper.setProps({ isOpened: true, children:

Hi

, className: 'new' }); assert(props.onOpen.calledOnce); }); it('should call props.onUpdate() when portal is opened or receives props', () => { - const props = {isOpened: true, onUpdate: spy(), className: 'old'}; + const props = { isOpened: true, onUpdate: spy(), className: 'old' }; const wrapper = mount(

Hi

); assert(props.onUpdate.calledOnce); - wrapper.setProps({isOpened: true, children:

Hi

, className: 'new'}); + wrapper.setProps({ isOpened: true, children:

Hi

, className: 'new' }); assert(props.onUpdate.calledTwice); }); it('should call props.onClose() when portal closes', () => { - const props = {isOpened: true, onClose: spy()}; + const props = { isOpened: true, onClose: spy() }; const wrapper = mount(

Hi

); wrapper.instance().closePortal(); assert(props.onClose.calledOnce); }); it('should call props.onClose() only once even if closePortal is called multiple times', () => { - const props = {isOpened: true, onClose: spy()}; + const props = { isOpened: true, onClose: spy() }; const wrapper = mount(

Hi

); wrapper.instance().closePortal(); wrapper.instance().closePortal(); @@ -140,7 +139,7 @@ describe('react-portal', () => { it('should call props.onClose() only once when portal closes and then is unmounted', () => { const div = document.createElement('div'); - const props = {isOpened: true, onClose: spy()}; + const props = { isOpened: true, onClose: spy() }; const component = render(

Hi

, div); component.closePortal(); unmountComponentAtNode(div); @@ -149,7 +148,7 @@ describe('react-portal', () => { it('should call props.onClose() only once when directly unmounting', () => { const div = document.createElement('div'); - const props = {isOpened: true, onClose: spy()}; + const props = { isOpened: true, onClose: spy() }; render(

Hi

, div); unmountComponentAtNode(div); assert(props.onClose.calledOnce); @@ -157,7 +156,7 @@ describe('react-portal', () => { it('should not call this.setState() if portal is unmounted', () => { const div = document.createElement('div'); - const props = {isOpened: true}; + const props = { isOpened: true }; const wrapper = render(

Hi

, div); spy(wrapper, 'setState'); unmountComponentAtNode(div); @@ -174,7 +173,7 @@ describe('react-portal', () => { }); it('should render the props.openByClickOn element', () => { - const text = `open by click on me`; + const text = 'open by click on me'; const openByClickOn = ; const wrapper = mount(

Hi

); assert(wrapper.text(text)); @@ -200,7 +199,7 @@ describe('react-portal', () => { assert.equal(document.body.childElementCount, 1); // Had to use actual event since simulating wasn't working due to subtree // rendering and actual component returns null - const kbEvent = new window.KeyboardEvent('keydown', {keyCode: 27}); + const kbEvent = new window.KeyboardEvent('keydown', { keyCode: 27 }); document.dispatchEvent(kbEvent); assert.equal(document.body.childElementCount, 0); }); @@ -210,12 +209,12 @@ describe('react-portal', () => { assert.equal(document.body.childElementCount, 1); // Should not close when outside click isn't a main click - const rightClickMouseEvent = new window.MouseEvent('mouseup', {view: window, button: 2}); + const rightClickMouseEvent = new window.MouseEvent('mouseup', { view: window, button: 2 }); document.dispatchEvent(rightClickMouseEvent); assert.equal(document.body.childElementCount, 1); // Should close when outside click is a main click (typically left button click) - const leftClickMouseEvent = new window.MouseEvent('mouseup', {view: window, button: 0}); + const leftClickMouseEvent = new window.MouseEvent('mouseup', { view: window, button: 0 }); document.dispatchEvent(leftClickMouseEvent); assert.equal(document.body.childElementCount, 0); }); diff --git a/webpack.config.dev.js b/webpack.config.dev.babel.js similarity index 64% rename from webpack.config.dev.js rename to webpack.config.dev.babel.js index 508a458..a632021 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.babel.js @@ -1,20 +1,20 @@ -var path = require('path'); -var webpack = require('webpack'); +import path from 'path'; +import webpack from 'webpack'; -module.exports = { +export default { devtool: 'cheap-module-eval-source-map', entry: [ 'webpack-hot-middleware/client', - './examples/index' + './examples/index', ], output: { path: path.join(__dirname, 'build'), filename: 'examples_bundle.js', - publicPath: '/static/' + publicPath: '/static/', }, plugins: [ new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() + new webpack.NoErrorsPlugin(), ], module: { loaders: [{ @@ -22,8 +22,8 @@ module.exports = { loaders: ['babel'], include: [ path.join(__dirname, 'examples'), - path.join(__dirname, 'lib') - ] - }] - } + path.join(__dirname, 'lib'), + ], + }], + }, }; diff --git a/webpack.config.prod.js b/webpack.config.prod.babel.js similarity index 62% rename from webpack.config.prod.js rename to webpack.config.prod.babel.js index 1e14f05..98779fd 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.babel.js @@ -1,28 +1,28 @@ -var path = require('path'); -var webpack = require('webpack'); +import path from 'path'; +import webpack from 'webpack'; -module.exports = { +export default { devtool: 'source-map', entry: [ - './examples/index' + './examples/index', ], output: { path: path.join(__dirname, 'build'), filename: 'examples_bundle.js', - publicPath: '/static/' + publicPath: '/static/', }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env': { - 'NODE_ENV': JSON.stringify('production') - } + NODE_ENV: JSON.stringify('production'), + }, }), new webpack.optimize.UglifyJsPlugin({ compressor: { - warnings: false - } - }) + warnings: false, + }, + }), ], module: { loaders: [{ @@ -30,8 +30,8 @@ module.exports = { loaders: ['babel'], include: [ path.join(__dirname, 'examples'), - path.join(__dirname, 'lib') - ] - }] - } + path.join(__dirname, 'lib'), + ], + }], + }, };