From 200b47c33c7b3fbe96659955770ac185f66b7772 Mon Sep 17 00:00:00 2001 From: Thomas Bolis Date: Tue, 26 Apr 2016 13:32:26 +0300 Subject: [PATCH] Fixing eslint rules Upgrading to latest libraries - Major - React 15.0.1 - Fabric 1.6.0 - Other - babel - react-color - etc. --- .babelrc | 20 ++++++++++++-- .eslintrc | 18 ++++++------ CHANGELOG.md | 8 ++++++ examples/base.html | 2 +- examples/main.jsx | 15 +++++----- examples/run.jsx | 4 ++- karma.config.js | 3 ++ package.json | 67 +++++++++++++++++++++++++-------------------- src/SketchField.jsx | 4 +-- 9 files changed, 90 insertions(+), 51 deletions(-) diff --git a/.babelrc b/.babelrc index 31b2172e..3d0aa7db 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,19 @@ { - "stage": 1 -} \ No newline at end of file + "presets": [ + "es2015", + "react", + "stage-0" + ], + "env": { + "development": { + "presets": [ + "react-hmre" + ] + } + }, + "plugins": [ + "transform-runtime", + "transform-object-assign", + "transform-react-display-name" + ] +} diff --git a/.eslintrc b/.eslintrc index 0527d99e..f7b9d573 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,20 +1,18 @@ { "parser": "babel-eslint", "plugins": [ - "react" + "react", + "eslint-plugin-react" ], "ecmaFeatures": { - "defaultParams": true, - "modules": true, - "jsx": true + "jsx": true, + "modules": true }, "env": { "browser": true, "amd": true, "es6": true, - "mocha": true, - "phantomjs": true, - "node": true + "node": false }, "rules": { "comma-dangle": 1, @@ -26,6 +24,7 @@ "global-strict": 0, "no-extra-semi": 1, "no-underscore-dangle": 0, + "no-extra-parens": 0, "no-console": 1, "no-unused-vars": 1, "no-trailing-spaces": [ @@ -34,8 +33,9 @@ "skipBlankLines": true } ], - "no-unreachable": 1, "no-alert": 0, - "react/jsx-uses-react": 1 + "no-unreachable": 1, + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1 } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 15574abc..63d33c4c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,14 @@ ## Changelog +* **0.2.3** Upgrading to latest libraries + - Major + - React 15.0.1 + - Fabric 1.6.0 + - Other + - babel + - react-color + - etc. * **0.2.2** Minor bug fixes and improvements release * **0.2.1** Bundling fabric to the library, to avoid complexity by adding it as external dependency * **0.2.0** Adding FabricJS as the core of the sketch field diff --git a/examples/base.html b/examples/base.html index 870312cb..66a3869b 100644 --- a/examples/base.html +++ b/examples/base.html @@ -4,7 +4,7 @@ - {%= o.htmlWebpackPlugin.options.title %} + <%= htmlWebpackPlugin.options.title %> diff --git a/examples/main.jsx b/examples/main.jsx index 9a38453b..db7ac625 100644 --- a/examples/main.jsx +++ b/examples/main.jsx @@ -2,7 +2,7 @@ 'use strict'; import React from 'react'; -import ColorPicker from 'react-color'; +import {CompactPicker} from 'react-color'; import 'flexboxgrid'; import './main.css'; @@ -40,7 +40,7 @@ const styles = { gridList: { width: '100%', overflowY: 'auto', - marginBottom: 24 + marginBottom: '24px' }, gridTile: { backgroundColor: '#fcfcfc' @@ -287,16 +287,17 @@ class SketchFieldDemo extends React.Component { - this.setState({lineColor:'#'+color.hex})}/> + this.setState({lineColor:'#'+color.hex})}/>

this.setState({fillWithColor:!this.state.fillWithColor})}/> - this.setState({fillColor:'#'+color.hex})}/> + this.setState({fillColor:'#'+color.hex})}/> diff --git a/examples/run.jsx b/examples/run.jsx index 9074efca..84703309 100644 --- a/examples/run.jsx +++ b/examples/run.jsx @@ -1,9 +1,11 @@ +'use strict'; + (function () { let React = require('react'); let ReactDOM = require('react-dom'); let injectTapEventPlugin = require('react-tap-event-plugin'); - let Demo = require('./main'); + let Demo = require('./main').default; // Needed for React Developer Tools (Chrome Extension) window.React = React; diff --git a/karma.config.js b/karma.config.js index 0c3044b5..a7545d31 100644 --- a/karma.config.js +++ b/karma.config.js @@ -3,6 +3,9 @@ const path = require('path'); const srcPath = path.join(__dirname, 'src'); const testPath = path.join(__dirname, 'test'); +// Set environment to testing +process.env.NODE_ENV = 'testing'; + module.exports = function (config) { config.set({ basePath: './', diff --git a/package.json b/package.json index 18275921..e8dc26e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-sketch", - "version": "0.2.2", + "version": "0.2.3", "description": "Sketch Element for React based applications, backed-up by fabricjs as its core", "keywords": [ "react", @@ -39,49 +39,58 @@ "node": ">0.4.0 <1.0.0" }, "peerDependencies": { - "react": "^0.14.7", - "react-dom": "^0.14.7" + "react": "^15.0.1", + "react-dom": "^15.0.1" }, "devDependencies": { - "babel": "^5.0.0", - "babel-core": "^5.0.0", - "babel-eslint": "^4.1.6", - "babel-loader": "^5.0.0", + "babel-cli": "^6.7.7", + "babel-core": "^6.7.7", + "babel-eslint": "^6.0.4", + "babel-loader": "^6.2.4", + "babel-plugin-transform-object-assign": "^6.5.0", + "babel-plugin-transform-react-display-name": "^6.5.0", + "babel-plugin-transform-runtime": "^6.7.5", + "babel-preset-react-hmre": "^1.0.1", + "babel-polyfill": "^6.7.4", + "babel-preset-es2015": "^6.6.0", + "babel-preset-es2015-loose": "^7.0.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", "canvas": "^1.3.12", - "chai": "^3.4.1", - "core-js": "^2.0.3", + "chai": "^3.5.0", + "core-js": "^2.3.0", "css-loader": "^0.23.1", - "eslint": "^1.2.1", - "eslint-loader": "^1.0.0", - "eslint-plugin-react": "^3.3.0", - "fabric": "^1.5.0", + "eslint": "^2.8.0", + "eslint-loader": "^1.3.0", + "eslint-plugin-react": "^5.0.1", + "fabric": "^1.6.0", "flexboxgrid": "^6.3.0", - "html-webpack-plugin": "^1.7.0", - "karma": "^0.13.19", + "html-webpack-plugin": "^2.16.0", + "karma": "^0.13.22", "karma-babel-preprocessor": "^6.0.1", "karma-chai": "^0.1.0", - "karma-coverage": "^0.5.3", - "karma-mocha": "^0.2.1", - "karma-mocha-reporter": "^1.1.5", + "karma-coverage": "^0.5.5", + "karma-mocha": "^0.2.2", + "karma-mocha-reporter": "^2.0.2", "karma-phantomjs-launcher": "^1.0.0", - "karma-phantomjs-shim": "^1.2.0", + "karma-phantomjs-shim": "^1.3.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.7.0", - "material-ui": "^0.14.2", - "mocha": "^2.3.4", + "material-ui": "^0.14.4", + "mocha": "^2.4.5", "open": "0.0.5", "open-browser-webpack-plugin": "0.0.2", - "phantomjs": "^1.9.19", - "phantomjs-prebuilt": "^2.1.3", - "react": "latest", - "react-addons-test-utils": "^0.14.6", - "react-color": "^1.3.6", + "phantomjs": "^2.1.7", + "phantomjs-prebuilt": "^2.1.7", + "react": "^15.0.1", + "react-addons-test-utils": "^15.0.1", + "react-color": "^2.0.0", "react-dom": "latest", "react-hot-loader": "^1.3.0", "react-tap-event-plugin": "latest", - "rimraf": "^2.5.1", - "style-loader": "^0.13.0", - "webpack": "^1.12.11", + "rimraf": "^2.5.2", + "style-loader": "^0.13.1", + "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" } } diff --git a/src/SketchField.jsx b/src/SketchField.jsx index 180a6118..eafdfe79 100644 --- a/src/SketchField.jsx +++ b/src/SketchField.jsx @@ -400,9 +400,9 @@ class SketchField extends React.Component {
this._canvas = c} - width={width || this.state.parentWidth}> + width={(width || this.state.parentWidth) + 'px'}> Sorry, Canvas HTML5 element is not supported by your browser :(