Update npm modules and upgrade to React 0.14.0

- Update all outdated npm modules, including react - Update components (where possible) to ES2015 classes - Make code formatting changes - Refactor Reflux store in demo to avoid mixin - Add es7.decorators to build in order to use autobind decorator - Bumping package version
ZeroarcSoftware · Oct 21, 2015 · 6edbf8f · 6edbf8f
1 parent 9e6314a
commit 6edbf8f
Show file tree

Hide file tree

Showing 14 changed files with 8,948 additions and 11,347 deletions.
diff --git a/README.md b/README.md
@@ -42,4 +42,7 @@ Or to watch for changes:
 
     npm run demo-watch
 
+To reset the demo local storage, open the console and type:
+
+    localStorage.clear()
 
diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
   "name": "carbondream",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "Reactjs web annotation engine",
   "homepage": "http://carbondream.zeroarc.com/",
   "main": "dist/entry.js",
   "directories": {
     "test": "test"
   },
   "scripts": {
-    "build": "$(npm bin)/babel --optional es7.objectRestSpread src/ -d dist/ && cp -r node_modules/font-awesome/css web && cp -r node_modules/font-awesome/fonts web",
-    "demo-watch": "$(npm bin)/watchify --extension=.jsx -d -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread ] -s CarbonDream -o test/index.js -v ",
-    "demo-build": "$(npm bin)/browserify --extension=.jsx -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread ] -s CarbonDream -o test/index.js && cp -r node_modules/font-awesome/css web && cp -r node_modules/font-awesome/fonts web",
+    "build": "$(npm bin)/babel --optional es7.objectRestSpread --optional es7.decorators src/ -d dist/ && cp -r node_modules/font-awesome/css web && cp -r node_modules/font-awesome/fonts web",
+    "demo-watch": "$(npm bin)/watchify --extension=.jsx -d -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread --optional es7.decorators ] -s CarbonDream -o test/index.js -v ",
+    "demo-build": "$(npm bin)/browserify --extension=.jsx -e src/demo.jsx -t [ babelify --optional es7.objectRestSpread --optional es7.decorators ] -s CarbonDream -o test/index.js && cp -r node_modules/font-awesome/css web && cp -r node_modules/font-awesome/fonts web",
     "prepublish": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -29,17 +29,20 @@
     "url": "https://github.com/ZeroarcSoftware/carbondream/issues"
   },
   "devDependencies": {
-    "babel": "^5.8.21",
-    "babelify": "^6.2.0",
-    "browserify": "^11.0.1",
-    "watchify": "^3.3.1"
+    "autobind-decorator": "^1.3.2",
+    "babel": "^5.8.23",
+    "babelify": "^6.3.0",
+    "browserify": "^11.2.0",
+    "react-addons-shallow-compare": "^0.14.0",
+    "watchify": "^3.4.0"
   },
   "dependencies": {
-    "classnames": "^2.1.3",
+    "classnames": "^2.1.5",
     "font-awesome": "^4.4.0",
-    "immutable": "^3.7.4",
-    "react": "^0.13.3",
+    "immutable": "^3.7.5",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "react-timeago": "^2.2.1",
-    "reflux": "^0.2.12"
+    "reflux": "^0.3.0"
   }
 }
diff --git a/src/Annotation.jsx b/src/Annotation.jsx
@@ -6,7 +6,8 @@
 'use strict';
 
 // External
-let React = require('react/addons');
+let React = require('react');
+let Autobind = require('autobind-decorator');
 
 // Local
 let Marker = require('./Marker');
@@ -17,53 +18,11 @@ let Content = require('./Content');
 let Input = require('./Input');
 
 // Globals
-let BUBBLEDIM = {width: 260, height: 120};     // Make the marker land at the tip of the pointer. Not sure how this varies between browsers/OSes
-
-let Annotation = React.createClass({
-  propTypes: {
-    content: React.PropTypes.string.isRequired,
-    x1: React.PropTypes.number.isRequired,
-    y1: React.PropTypes.number.isRequired,
-    x2: React.PropTypes.number.isRequired,
-    y2: React.PropTypes.number.isRequired,
-    pending: React.PropTypes.bool.isRequired,
-    drawing: React.PropTypes.bool.isRequired,
-    deleteAnnotation: React.PropTypes.func.isRequired,
-    shouldDisplayViewer: React.PropTypes.bool.isRequired,
-    deemphasize: React.PropTypes.bool.isRequired,
-    type: React.PropTypes.string.isRequired,
-    containerOffset: React.PropTypes.object.isRequired,
-
-    //Optional
-    timeStamp: React.PropTypes.instanceOf(Date),
-    displayAnnotationViewer: React.PropTypes.func,
-    hideAnnotationViewer: React.PropTypes.func,
-  },
-
-  getDefaultProps() {
-    return {
-      drawing: false,
-      shouldDisplayViewer: false
-    };
-  },
-
-  handleMouseOver(e) {
-    e.stopPropagation();
-    if (this.props.pending) return;
-    this.props.displayAnnotationViewer(this.props.id);
-  },
-
-  handleMouseOut(e) {
-    e.stopPropagation();
-    if (this.props.pending) return;
-    this.props.hideAnnotationViewer(this.props.id);
-  },
+let BUBBLEDIM = {width: 260, height: 120};
 
-  handleClick(e) {
-    // Allow markers to be placed inside shapes, but not on other markers
-    if (this.props.type === 'marker') e.stopPropagation();
-  },
 
+@Autobind
+export default class Annotation extends React.Component {
   render() {
     // Desctructing is on one line b/c vim indenting gets confused
     let {x1, y1, x2, y2, displayAnnotationViewer, hideAnnotationViewer, ...other} = this.props;
@@ -157,6 +116,50 @@ let Annotation = React.createClass({
       </div>
     );
   }
-});
 
-module.exports = Annotation;
+  //
+  // Custom Methods
+  //
+
+  handleMouseOver(e) {
+    e.stopPropagation();
+    if (this.props.pending) return;
+    this.props.displayAnnotationViewer(this.props.id);
+  }
+
+  handleMouseOut(e) {
+    e.stopPropagation();
+    if (this.props.pending) return;
+    this.props.hideAnnotationViewer(this.props.id);
+  }
+
+  handleClick(e) {
+    // Allow markers to be placed inside shapes, but not on other markers
+    if (this.props.type === 'marker') e.stopPropagation();
+  }
+}
+
+Annotation.defaultProps = {
+  drawing: false,
+  shouldDisplayViewer: false
+};
+
+Annotation.propTypes = {
+  content: React.PropTypes.string.isRequired,
+  x1: React.PropTypes.number.isRequired,
+  y1: React.PropTypes.number.isRequired,
+  x2: React.PropTypes.number.isRequired,
+  y2: React.PropTypes.number.isRequired,
+  pending: React.PropTypes.bool.isRequired,
+  drawing: React.PropTypes.bool.isRequired,
+  deleteAnnotation: React.PropTypes.func.isRequired,
+  shouldDisplayViewer: React.PropTypes.bool.isRequired,
+  deemphasize: React.PropTypes.bool.isRequired,
+  type: React.PropTypes.string.isRequired,
+  containerOffset: React.PropTypes.object.isRequired,
+
+  // Optional
+  timeStamp: React.PropTypes.instanceOf(Date),
+  displayAnnotationViewer: React.PropTypes.func,
+  hideAnnotationViewer: React.PropTypes.func,
+};
diff --git a/src/Circle.jsx b/src/Circle.jsx
@@ -5,18 +5,12 @@
 
 'use strict';
 
-//External
-let React = require('react/addons');
+// External
+let React = require('react');
 let ClassNames = require('classnames');
 
 
-let Circle = React.createClass({
-  propTypes: {
-    width: React.PropTypes.number.isRequired,
-    height: React.PropTypes.number.isRequired,
-    deemphasize: React.PropTypes.bool.isRequired,
-  },
-
+export default class Circle extends React.Component {
   render() {
     let divStyle = {
       height: this.props.height,
@@ -35,6 +29,10 @@ let Circle = React.createClass({
       </div>
     );
   }
-});
+}
 
-module.exports = Circle;
+Circle.propTypes = {
+  width: React.PropTypes.number.isRequired,
+  height: React.PropTypes.number.isRequired,
+  deemphasize: React.PropTypes.bool.isRequired,
+};