eslint-config-scratch: React + ES6 Edition

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+    env: {
+        node: true
+    }
+};

package.json

@@ -18,6 +18,9 @@
     "start": "webpack-dev-server --port $npm_package_config_port --content-base=./build",
     "test": "npm run lint && npm run build"
   },
+  "eslintConfig": {
+    "extends": ["scratch"]
+  },
   "author": "Massachusetts Institute of Technology",
   "license": "BSD-3-Clause",
   "homepage": "https://github.com/LLK/scratch-gui#readme",
@@ -31,14 +34,15 @@
   },
   "devDependencies": {
     "babel-core": "6.14.0",
-    "babel-eslint": "6.1.2",
+    "babel-eslint": "7.0.0",
     "babel-loader": "6.2.5",
     "babel-plugin-transform-object-rest-spread": "6.16.0",
     "babel-preset-es2015": "6.14.0",
     "babel-preset-react": "6.11.1",
     "copy-webpack-plugin": "3.0.1",
     "eslint": "3.5.0",
-    "eslint-plugin-react": "6.2.1",
+    "eslint-config-scratch": "^1.0.0",
+    "eslint-plugin-react": "6.4.1",
     "gh-pages": "0.11.0",
     "html-webpack-plugin": "2.22.0",
     "husky": "0.11.9",
@@ -50,6 +54,7 @@
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-modal": "1.5.2",
+    "react-style-proptype": "1.2.0",
     "scratch-blocks": "latest",
     "scratch-render": "latest",
     "scratch-vm": "latest",

src/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    env: {
+        node: false,
+        browser: true
+    },
+    extends: ['scratch/es6', 'scratch/react']
+};

src/components/blocks.js → src/components/blocks.jsx

@@ -8,8 +8,8 @@ class BlocksComponent extends React.Component {
         } = this.props;
         return (
             <div
-                ref={componentRef}
                 className="scratch-blocks"
+                ref={componentRef}
                 style={{
                     position: 'absolute',
                     top: 0,

src/components/costume-canvas.js → src/components/costume-canvas.jsx

@@ -16,46 +16,54 @@ class CostumeCanvas extends React.Component {
     componentDidUpdate (prevProps) {
         if (prevProps.url !== this.props.url) {
             this.load();
-        } else {
-            if (prevProps.width !== this.props.width ||
-                prevProps.height !== this.props.height ||
-                prevProps.direction !== this.props.direction) {
-                this.draw();
-            }
+        } else if (
+            prevProps.width !== this.props.width ||
+            prevProps.height !== this.props.height ||
+            prevProps.direction !== this.props.direction
+          ) {
+            this.draw();
         }
     }
     draw () {
-        if (!this.refs.costumeCanvas) {
+        if (!this.canvas) {
             return;
         }
+
         // Draw the costume to the rendered canvas.
         const img = this.img;
-        const context = this.refs.costumeCanvas.getContext('2d');
+        const context = this.canvas.getContext('2d');
+
         // Scale to fit.
         let scale;
+
         // Choose the larger dimension to scale by.
         if (img.width > img.height) {
-            scale = this.refs.costumeCanvas.width / img.width;
+            scale = this.canvas.width / img.width;
         } else {
-            scale = this.refs.costumeCanvas.height / img.height;
+            scale = this.canvas.height / img.height;
         }
+
         // Rotate by the Scratch-value direction.
         const angle = (-90 + this.props.direction) * Math.PI / 180;
+
         // Rotation origin point will be center of the canvas.
-        const contextTranslateX = this.refs.costumeCanvas.width / 2;
-        const contextTranslateY = this.refs.costumeCanvas.height / 2;
+        const contextTranslateX = this.canvas.width / 2;
+        const contextTranslateY = this.canvas.height / 2;
+
         // First, clear the canvas.
         context.clearRect(0, 0,
-            this.refs.costumeCanvas.width, this.refs.costumeCanvas.height);
+            this.canvas.width, this.canvas.height);
+
         // Translate the context to the center of the canvas,
         // then rotate canvas drawing by `angle`.
         context.translate(contextTranslateX, contextTranslateY);
         context.rotate(angle);
         context.drawImage(img,
             0, 0, img.width, img.height,
-            -(scale * img.width / 2),  -(scale * img.height / 2),
+            -(scale * img.width / 2), -(scale * img.height / 2),
             scale * img.width,
             scale * img.height);
+
         // Reset the canvas rotation and translation to 0, (0, 0).
         context.rotate(-angle);
         context.translate(-contextTranslateX, -contextTranslateY);
@@ -72,8 +80,8 @@ class CostumeCanvas extends React.Component {
                     url: url
                 }, (err, response, body) => {
                     if (!err) {
-                        svgToImage(body, (err, img) => {
-                            if (!err) {
+                        svgToImage(body, (svgErr, img) => {
+                            if (!svgErr) {
                                 this.img = img;
                                 this.draw();
                             }
@@ -84,7 +92,7 @@ class CostumeCanvas extends React.Component {
 
         } else {
             // Raster graphics: create Image and draw it.
-            let img = new Image();
+            const img = new Image();
             img.src = url;
             img.onload = () => {
                 this.img = img;
@@ -93,11 +101,13 @@ class CostumeCanvas extends React.Component {
         }
     }
     render () {
-        return <canvas
-            ref='costumeCanvas'
-            width={this.props.width}
-            height={this.props.height}
-        />;
+        return (
+            <canvas
+                height={this.props.height}
+                width={this.props.width}
+                ref={this._getCanvas} // eslint-disable-line react/jsx-sort-props
+            />
+        );
     }
 }
 
@@ -108,10 +118,10 @@ CostumeCanvas.defaultProps = {
 };
 
 CostumeCanvas.propTypes = {
-    url: React.PropTypes.string,
-    width: React.PropTypes.number,
+    direction: React.PropTypes.number,
     height: React.PropTypes.number,
-    direction: React.PropTypes.number
+    url: React.PropTypes.string,
+    width: React.PropTypes.number
 };
 
 module.exports = CostumeCanvas;

src/components/library-item.js → src/components/library-item.jsx

@@ -1,13 +1,26 @@
+const bindAll = require('lodash.bindall');
 const React = require('react');
+const stylePropType = require('react-style-proptype');
 
-const CostumeCanvas = require('./costume-canvas');
+const CostumeCanvas = require('./costume-canvas.jsx');
 
 class LibraryItem extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, ['handleClick']);
+    }
+    handleClick (e) {
+        this.props.onSelect(this.props.id);
+        e.preventDefault();
+    }
     render () {
-        let style = (this.props.selected) ?
+        const style = (this.props.selected) ?
             this.props.selectedGridTileStyle : this.props.gridTileStyle;
         return (
-            <div style={style} onClick={() => this.props.onSelect(this.props.id)}>
+            <div
+                style={style}
+                onClick={this.handleClick}
+            >
                 <CostumeCanvas url={this.props.iconURL} />
                 <p>{this.props.name}</p>
             </div>
@@ -37,13 +50,13 @@ LibraryItem.defaultProps = {
 };
 
 LibraryItem.propTypes = {
-    name: React.PropTypes.string,
+    gridTileStyle: stylePropType,
     iconURL: React.PropTypes.string,
-    gridTileStyle: React.PropTypes.object,
-    selectedGridTileStyle: React.PropTypes.object,
-    selected: React.PropTypes.bool,
+    id: React.PropTypes.number,
+    name: React.PropTypes.string,
     onSelect: React.PropTypes.func,
-    id: React.PropTypes.number
+    selected: React.PropTypes.bool,
+    selectedGridTileStyle: stylePropType
 };
 
 module.exports = LibraryItem;