React 0.14

README.md

@@ -9,6 +9,10 @@ surfaces any implicit dependencies. It also forces you to define sane inputs
 for every component, making them more predictable and easier to debug down
 the road.
 
+React compatibility:
+- `react-component-playground@0.3` with `react@0.13` and below
+- `react-component-playground@0.4` with `react@0.14` and above
+
 Features include:
 
 - Rendering full-screen components or with the navigation pane on the side.

fixtures/component-playground/default.js

@@ -26,7 +26,8 @@ module.exports = {
           children: [
             React.createElement('span', {
               key: '1',
-              children: 'test child'
+              children: 'test child',
+              customProp: function() {}
             })
           ],
           state: {

fixtures/component-playground/selected-fixture.js

@@ -22,7 +22,8 @@ module.exports = _.merge({}, defaultFixture, {
       children: [
         React.createElement('span', {
           key: '1',
-          children: 'test child'
+          children: 'test child',
+          customProp: function() {}
         })
       ]
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-playground",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Isolated loader for React components",
   "main": "build/bundle.js",
   "repository": {
@@ -10,8 +10,8 @@
   "dependencies": {
     "classnames": "^1.2.0",
     "lodash": "^3.6.0",
-    "react-component-tree": "^0.2.3",
-    "react-querystring-router": "^0.2.0"
+    "react-component-tree": "^0.3.1",
+    "react-querystring-router": "^0.3.0"
   },
   "devDependencies": {
     "babel-core": "^5.0.12",
@@ -36,14 +36,15 @@
     "less": "^2.5.0",
     "less-loader": "^2.2.0",
     "mocha": "^2.2.4",
-    "react": "^0.13.1",
+    "react": "^0.14.2",
+    "react-addons-test-utils": "^0.14.2",
     "sinon": "^1.14.1",
     "sinon-chai": "^2.7.0",
     "style-loader": "^0.12.3",
     "webpack": "^1.8.2"
   },
   "peerDependencies": {
-    "react": "^0.13.1"
+    "react": "^0.14.2"
   },
   "scripts": {
     "pretest": "jscs --esprima=esprima-fb ./",

src/components/component-playground.jsx

@@ -29,7 +29,7 @@ module.exports = React.createClass({
 
   statics: {
     isFixtureSelected: function(props) {
-      return props.component && props.fixture;
+      return !!(props.component && props.fixture);
     },
 
     didFixtureChange: function(prevProps, nextProps) {
@@ -119,7 +119,7 @@ module.exports = React.createClass({
   },
 
   render: function() {
-    var isFixtureSelected = this.constructor.isFixtureSelected(this.props);
+    var isFixtureSelected = this._isFixtureSelected();
 
     var classes = {};
     classes[style['component-playground']] = true;
@@ -211,8 +211,7 @@ module.exports = React.createClass({
     var classes = {};
     classes[style.button] = true;
     classes[style['play-button']] = true;
-    classes[style['selected-button']] =
-      !this.constructor.isFixtureSelected(this.props);
+    classes[style['selected-button']] = !this._isFixtureSelected();
 
     classes = classNames(classes);
 
@@ -386,6 +385,10 @@ module.exports = React.createClass({
     this._updateContentFrameOrientation();
   },
 
+  _isFixtureSelected: function() {
+    return this.constructor.isFixtureSelected(this.props);
+  },
+
   _getPreviewComponentKey: function() {
     return this.props.component + '-' +
            this.props.fixture + '-' +
@@ -438,7 +441,7 @@ module.exports = React.createClass({
   },
 
   _focusOnEditor: function() {
-    this.refs.editor.getDOMNode().focus();
+    this.refs.editor.focus();
   },
 
   _injectPreviewChildState: function() {
@@ -450,11 +453,11 @@ module.exports = React.createClass({
   },
 
   _updateContentFrameOrientation: function() {
-    if (!this.constructor.isFixtureSelected(this.props)) {
+    if (!this._isFixtureSelected()) {
       return;
     }
 
-    var contentNode = this.refs.contentFrame.getDOMNode();
+    var contentNode = this.refs.contentFrame;
 
     this.setState({
       orientation: contentNode.offsetHeight > contentNode.offsetWidth ?

src/components/component-playground.less

@@ -60,7 +60,7 @@
       overflow: hidden;
 
       .button {
-        display: inline-block;
+        float: left;
         width: @header-button-size;
         height: @header-button-size;
         border-radius: 100%;

tests/components/component-playground/default/render/children.js

@@ -3,15 +3,15 @@ var FIXTURE = 'default';
 describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
   var loadChild = require('react-component-tree').loadChild,
       render = require('tests/lib/render-component.js'),
-      stubLoadChild = require('tests/setup/stub-load-child.js'),
+      spyLoadChild = require('tests/setup/spy-load-child.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
   var component,
       $component,
       container,
       fixture;
 
-  stubLoadChild();
+  spyLoadChild();
 
   beforeEach(function() {
     ({container, component, $component} = render(fixture));

tests/components/component-playground/default/render/dom.js

@@ -19,7 +19,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
     for (var componentName in fixture.components) {
       var nameElement = component.refs['componentName-' + componentName];
 
-      expect($(nameElement.getDOMNode()).text()).to.equal(componentName);
+      expect($(nameElement).text()).to.equal(componentName);
     }
   });
 
@@ -42,7 +42,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
         var fixtureButton = component.refs[
             'fixtureButton-' + componentName + '-' + fixtureName];
 
-        expect($(fixtureButton.getDOMNode()).text()).to.equal(fixtureName);
+        expect($(fixtureButton).text()).to.equal(fixtureName);
       }
     }
   });
@@ -64,7 +64,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add selected class on home button', function() {
-    expect($(component.refs.homeButton.getDOMNode())
+    expect($(component.refs.homeButton)
            .hasClass(style['selected-button'])).to.be.true;
   });
 });

tests/components/component-playground/default/transitions/mount.js

@@ -1,7 +1,7 @@
 var FIXTURE = 'default';
 
 describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
-  var React = require('react'),
+  var ReactDOM = require('react-dom'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
@@ -35,7 +35,7 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
   });
 
   it('should clear fixture update interval on unmount', function() {
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
 
     expect(window.clearInterval).to.have.been.calledWith(timeoutId);
   });
@@ -46,7 +46,7 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
   });
 
   it('should remove window resize listener on unmount', function() {
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
 
     expect(window.removeEventListener).to.have.been.calledWith(
         'resize', component.onWindowResize);

tests/components/component-playground/selected-fixture-and-editor/events/dom.js

@@ -1,8 +1,7 @@
 var FIXTURE = 'selected-fixture-and-editor';
 
 describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
-  var React = require('react/addons'),
-      utils = React.addons.TestUtils,
+  var utils = require('react-addons-test-utils'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
@@ -16,11 +15,11 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
   });
 
   it('should focus on editor on fixture click', function() {
-    var editorNode = component.refs.editor.getDOMNode();
+    var editorNode = component.refs.editor;
     sinon.spy(editorNode, 'focus');
 
     utils.Simulate.click(
-        component.refs['fixtureButton-SecondComponent-index'].getDOMNode());
+        component.refs['fixtureButton-SecondComponent-index']);
 
     expect(editorNode.focus).to.have.been.called;
   });
@@ -31,7 +30,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
     function triggerEditorEvent(event, eventData) {
       sinon.spy(component, 'setState');
 
-      utils.Simulate[event](component.refs.editor.getDOMNode(), eventData);
+      utils.Simulate[event](component.refs.editor, eventData);
       stateSet = component.setState.lastCall.args[0];
 
       component.setState.restore();

tests/components/component-playground/selected-fixture-and-editor/render/dom.js

@@ -20,12 +20,12 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add editor class on content frame node', function() {
-    expect($(component.refs.contentFrame.getDOMNode())
+    expect($(component.refs.contentFrame)
            .hasClass(style['with-editor'])).to.be.true;
   });
 
   it('should add selected class on editor button', function() {
-    expect($(component.refs.editorButton.getDOMNode())
+    expect($(component.refs.editorButton)
            .hasClass(style['selected-button'])).to.be.true;
   });
 
@@ -34,15 +34,15 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
       fixtureUserInput: 'lorem ipsum'
     });
 
-    expect(component.refs.editor.getDOMNode().value).to.equal('lorem ipsum');
+    expect(component.refs.editor.value).to.equal('lorem ipsum');
   });
 
   it('should add invalid class on editor on state flag', function() {
     component.setState({
       isFixtureUserInputValid: false
     });
 
-    expect($(component.refs.editor.getDOMNode())
+    expect($(component.refs.editor)
            .hasClass(style['invalid-syntax'])).to.be.true;
   });
 });

tests/components/component-playground/selected-fixture/events/dom.js

@@ -1,8 +1,7 @@
 var FIXTURE = 'selected-fixture';
 
 describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
-  var React = require('react/addons'),
-      utils = React.addons.TestUtils,
+  var utils = require('react-addons-test-utils'),
       _ = require('lodash'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
@@ -29,26 +28,26 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
   });
 
   it('should route link on home button', function() {
-    utils.Simulate.click(component.refs.homeButton.getDOMNode());
+    utils.Simulate.click(component.refs.homeButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on editor button', function() {
-    utils.Simulate.click(component.refs.editorButton.getDOMNode());
+    utils.Simulate.click(component.refs.editorButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on full screen button', function() {
-    utils.Simulate.click(component.refs.fullScreenButton.getDOMNode());
+    utils.Simulate.click(component.refs.fullScreenButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on new fixture button', function() {
     utils.Simulate.click(
-        component.refs['fixtureButton-FirstComponent-error'].getDOMNode());
+        component.refs['fixtureButton-FirstComponent-error']);
 
     expect(component.props.router.goTo).to.have.been.called;
   });
@@ -60,7 +59,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
       sinon.spy(component, 'setState');
 
       utils.Simulate.click(
-          component.refs['fixtureButton-FirstComponent-default'].getDOMNode());
+          component.refs['fixtureButton-FirstComponent-default']);
 
       stateSet = component.setState.lastCall.args[0];
     });

tests/components/component-playground/selected-fixture/events/handlers.js

@@ -22,18 +22,14 @@ describe(`ComponentPlayground (${FIXTURE}) Events Handlers`, function() {
 
   describe('orientation', function() {
     function simulateWindowResize(width, height) {
-      sinon.stub(component.refs.contentFrame, 'getDOMNode').returns({
+      component.refs.contentFrame = {
         offsetWidth: width,
         offsetHeight: height
-      });
+      };
 
       component.onWindowResize();
     }
 
-    afterEach(function() {
-      component.refs.contentFrame.getDOMNode.restore();
-    });
-
     it('should be set to landscape on width > height', function() {
       simulateWindowResize(300, 200);
 

tests/components/component-playground/selected-fixture/render/children.js

@@ -3,7 +3,7 @@ var FIXTURE = 'selected-fixture';
 describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
   var loadChild = require('react-component-tree').loadChild,
       render = require('tests/lib/render-component.js'),
-      stubLoadChild = require('tests/setup/stub-load-child.js'),
+      spyLoadChild = require('tests/setup/spy-load-child.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
   var component,
@@ -12,7 +12,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
       fixture,
       childParams;
 
-  stubLoadChild();
+  spyLoadChild();
 
   beforeEach(function() {
     ({container, component, $component} = render(fixture));

tests/components/component-playground/selected-fixture/render/dom.js

@@ -16,20 +16,20 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add orientation class on content frame element', function() {
-    var $contentFrame = $(component.refs.contentFrame.getDOMNode());
+    var $contentFrame = $(component.refs.contentFrame);
 
     expect($contentFrame.hasClass(
         style['orientation-' + component.state.orientation])).to.be.true;
   });
 
   it('should add container class on preview element', function() {
-    var $previewContainer = $(component.refs.previewContainer.getDOMNode());
+    var $previewContainer = $(component.refs.previewContainer);
 
     expect($previewContainer.hasClass(fixture.containerClassName)).to.be.true;
   });
 
   it('should remove selected class on home button', function() {
-    expect($(component.refs.homeButton.getDOMNode())
+    expect($(component.refs.homeButton)
            .hasClass(style['selected-button'])).to.be.false;
   });
 

tests/components/component-playground/selected-fixture/transitions/props.js

@@ -18,6 +18,8 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Props`, function() {
     sinon.stub(ComponentTree, 'injectState');
     sinon.spy(component, 'setState');
 
+    // TODO: Replace with new render call. Problem is instance changes from one
+    // render to another
     component.setProps({
       component: 'SecondComponent',
       fixture: 'index'