Merge pull request #2 from tomchentw/feature/upgrade-react-0.12

feature/upgrade react 0.12
tomchentw · Nov 8, 2014 · 22d9242 · 22d9242
2 parents 9898931 + 317ff87
commit 22d9242
Show file tree

Hide file tree

Showing 13 changed files with 18 additions and 46 deletions.
diff --git a/client/scripts/index.js b/client/scripts/index.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 require("../styles/index.scss");
 var React = require("react/addons");
@@ -14,20 +13,20 @@ function geometryToComponentWithLatLng (geometry) {
   switch (type) {
     case "Polygon":
       return {
-        Component: Polygon,
+        ElementClass: Polygon,
         paths: coordinates.map(geometryToComponentWithLatLng, {type: "LineString"})[0]
       };
     case "LineString":
       coordinates = coordinates.map(geometryToComponentWithLatLng, {type: "Point"});
       return typeFromThis ? coordinates : {
-        Component: Polyline,
+        ElementClass: Polyline,
         path: coordinates
       };
     case "Point":
       coordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
       return typeFromThis ? coordinates : {
-        Component: Marker,
-        ChildComponent: InfoWindow,
+        ElementClass: Marker,
+        ChildElementClass: InfoWindow,
         position: coordinates
       };
     default:
@@ -149,53 +148,37 @@ var Body = React.createClass({
 
   _render (props, state) {
     var {geoStateBy} = state;
-    var components = state.geoJson.features.map((feature) => {
+    var elements = state.geoJson.features.map((feature) => {
       var {properties} = feature;
       var result = geometryToComponentWithLatLng(feature.geometry);
-      var Component = result.Component;
-      delete result.Component;
+      var ElementClass = result.ElementClass;
+      delete result.ElementClass;
       if (properties.isCenter) {
-        Component = Map;
+        ElementClass = Map;
         result.center = result.position;
         delete result.position;
       }
 
-      var geoStatesOfFeature = geoStateBy[feature.id] || {};
-      if (geoStatesOfFeature.visible === false) {
+      var {visible, child, ...geoStatesOfFeature} = geoStateBy[feature.id] || {};
+      if (false === visible) {
         return null;
       }
-      var {style} = properties;
-      if (style) {
-        style = update(properties.style, {
-          $merge: result
-        });
-      } else {
-        style = result;
-      }
 
-      if (geoStatesOfFeature) {
-        style = update(style, {
-          $merge: geoStatesOfFeature
-        });
-      }
-      if (style.child) {
-        var {ChildComponent} = result;
-        delete result.ChildComponent;
-        return Component(style, ChildComponent(style.child));
-      }
-      return Component(style);
+      return <ElementClass {...properties.style} {...result} {...geoStatesOfFeature}>
+        {child ? <result.ChildElementClass {...child} /> : null}
+      </ElementClass>;
     });
 
     return React.DOM.div({
       style: {
         height: "100%"
       }
-    }, components);
+    }, elements);
   }
 });
 
 
-var bodyRef = React.renderComponent(
+var bodyComponent = React.render(
   <Body initialGeoJson={require("./geojson")} />,
   document.getElementById("react-root")
 );
diff --git a/package.json b/package.json
@@ -54,16 +54,16 @@
     "html-webpack-plugin": "^1.1.0",
     "jest-cli": "^0.1.18",
     "jquery": "^2.1.1",
-    "jsx-loader": "^0.11.2",
-    "react-tools": "^0.11.2",
+    "jsx-loader": "^0.12.0",
+    "react-tools": "^0.12.0",
     "sass-loader": "^0.3.0",
     "style-loader": "^0.8.1",
     "tomchentw-npm-dev": "^1.1.0",
     "webpack": "^1.4.7",
     "webpack-dev-server": "^1.6.5"
   },
   "dependencies": {
-    "react": "^0.11.0",
+    "react": "^0.12.0",
     "deep-equal": "^0.2.1"
   },
   "jest": {

diff --git a/src/GoogleMapsMixin.js b/src/GoogleMapsMixin.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/InfoWindow.js b/src/InfoWindow.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/Map.js b/src/Map.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/Marker.js b/src/Marker.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/Polygon.js b/src/Polygon.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/Polyline.js b/src/Polyline.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 

diff --git a/src/__tests__/Map-test.js b/src/__tests__/Map-test.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 
 jest.dontMock("../Map.js");

diff --git a/src/__tests__/index-test.js b/src/__tests__/index-test.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 
 jest.dontMock("../index.js");

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 exports.GoogleMapsMixin = require("./GoogleMapsMixin");
 exports.Map = require("./Map");

diff --git a/src/mixins/ChildMixin.js b/src/mixins/ChildMixin.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
 var deepEqual = require("deep-equal");

diff --git a/src/mixins/EventBindingMixin.js b/src/mixins/EventBindingMixin.js
@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 "use strict";
 
 module.exports = {