fix props getting applied on initial render before aframe ready (fixes #57)

Author: ngokevin

dist/index.js

@@ -32,7 +32,14 @@ function doSetAttribute(el, props, propName) {
   } else if (props[propName].constructor === Function) {
     return;
   } else {
-    el.setAttribute(propName, props[propName]);
+    if (el.isNode) {
+      el.setAttribute(propName, props[propName]);
+    } else {
+      el.addEventListener('nodeready', function () {
+        console.log("WAITING");
+        el.setAttribute(propName, props[propName]);
+      });
+    }
   }
 }
 
@@ -117,7 +124,7 @@ var Entity = exports.Entity = function (_React$Component) {
     value: function render() {
       var props = this.props;
       var elementName = this.isScene ? 'a-scene' : props.primitive || 'a-entity';
-      return _react2.default.createElement(elementName, Object.assign({ ref: this.updateDOM }, props), props.children);
+      return _react2.default.createElement(elementName, Object.assign({ ref: this.updateDOM }), props.children);
     }
   }]);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aframe-react",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Build virtual reality experiences with A-Frame and React.",
   "main": "dist/index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     ]
   },
   "peerDependencies": {
-    "aframe": "*"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
     "aframe": "^0.5.0",
@@ -50,10 +51,6 @@
     "sinon-chai": "2.8.0",
     "webpack": "^2.3.2"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ngokevin/aframe-react.git"

src/index.js

@@ -10,7 +10,14 @@ function doSetAttribute (el, props, propName) {
   } else if (props[propName].constructor === Function) {
     return;
   } else {
-    el.setAttribute(propName, props[propName]);
+    if (el.isNode) {
+      el.setAttribute(propName, props[propName]);
+    } else {
+      el.addEventListener('nodeready', function () {
+        console.log("WAITING");
+        el.setAttribute(propName, props[propName]);
+      });
+    }
   }
 }
 
@@ -78,7 +85,7 @@ export class Entity extends React.Component {
     const elementName = this.isScene ? 'a-scene' : (props.primitive || 'a-entity');
     return React.createElement(
       elementName,
-      Object.assign({ref: this.updateDOM}, props),
+      Object.assign({ref: this.updateDOM}),
       props.children);
   }
 }

tests/browser/index.test.js

@@ -110,7 +110,7 @@ suite('<Entity primitive/>', () => {
     });
   });
 
-  test.skip('handles overrides with updating component', done => {
+  test('handles overrides with updating component', done => {
     ReactDOM.render(<Scene><Entity primitive='a-cylinder' geometry={{width: 5}}/></Scene>,
                     div);
     const cylinderEl = div.querySelector('a-cylinder');