From df7c69e1eff8fda05b0810af89c25de93079ad17 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Thu, 30 Apr 2015 23:07:20 +0300
Subject: [PATCH 1/2] Upgrade router #11

---
 package.json                                    | 4 ++--
 src/components/component-playground.jsx         | 2 +-
 tests/components/component-playground/render.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9411d9e..5ad762c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-component-playground",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Isolated loader for React components",
   "main": "build/bundle.js",
   "repository": {
@@ -11,7 +11,7 @@
     "classnames": "^1.2.0",
     "lodash": "^3.6.0",
     "react-component-tree": "^0.2.2",
-    "react-minimal-router": "^0.1.3"
+    "react-querystring-router": "^0.2.0"
   },
   "devDependencies": {
     "babel-core": "^5.0.12",
diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 87c37eb..d5000b8 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -4,7 +4,7 @@ var _ = require('lodash'),
     React = require('react'),
     classNames = require('classnames'),
     ComponentTree = require('react-component-tree'),
-    stringifyParams = require('react-minimal-router').uri.stringifyParams;
+    stringifyParams = require('react-querystring-router').uri.stringifyParams;
 
 module.exports = React.createClass({
   /**
diff --git a/tests/components/component-playground/render.js b/tests/components/component-playground/render.js
index da1f851..a400e4e 100644
--- a/tests/components/component-playground/render.js
+++ b/tests/components/component-playground/render.js
@@ -1,6 +1,6 @@
 var $ = require('jquery'),
     ComponentTree = require('react-component-tree'),
-    parseLocation = require('react-minimal-router').uri.parseLocation,
+    parseLocation = require('react-querystring-router').uri.parseLocation,
     ComponentPlayground =
         require('../../../src/components/component-playground.jsx');
 

From fd3c20e420fc01a59cb33552370ea69dcffeb621 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Thu, 30 Apr 2015 23:15:08 +0300
Subject: [PATCH 2/2] Shorten props #11

---
 src/components/component-playground.jsx       | 63 ++++++++---------
 .../component-playground/children.js          |  8 +--
 .../components/component-playground/events.js | 20 +++---
 .../components/component-playground/render.js | 70 +++++++++----------
 .../components/component-playground/state.js  |  8 +--
 5 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index d5000b8..8f80b62 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -18,34 +18,33 @@ module.exports = React.createClass({
 
   propTypes: {
     components: React.PropTypes.object.isRequired,
-    selectedComponent: React.PropTypes.string,
-    selectedFixture: React.PropTypes.string,
-    fixtureEditor: React.PropTypes.bool,
+    component: React.PropTypes.string,
+    fixture: React.PropTypes.string,
+    editor: React.PropTypes.bool,
     fullScreen: React.PropTypes.bool,
     containerClassName: React.PropTypes.string
   },
 
   statics: {
     getExpandedComponents: function(props, alreadyExpanded) {
-      if (!props.selectedComponent ||
-          _.contains(alreadyExpanded, props.selectedComponent)) {
+      if (!props.component || _.contains(alreadyExpanded, props.component)) {
         return alreadyExpanded;
       }
 
-      return alreadyExpanded.concat(props.selectedComponent);
+      return alreadyExpanded.concat(props.component);
     },
 
     isFixtureSelected: function(props) {
-      return props.selectedComponent && props.selectedFixture;
+      return props.component && props.fixture;
     },
 
     getSelectedComponentClass: function(props) {
-      return props.components[props.selectedComponent].class;
+      return props.components[props.component].class;
     },
 
     getSelectedFixtureContents: function(props) {
-      return props.components[props.selectedComponent]
-                  .fixtures[props.selectedFixture];
+      return props.components[props.component]
+                  .fixtures[props.fixture];
     },
 
     getSelectedFixtureUserInput: function(props) {
@@ -74,7 +73,7 @@ module.exports = React.createClass({
 
   getDefaultProps: function() {
     return {
-      fixtureEditor: false,
+      editor: false,
       fullScreen: false
     };
   },
@@ -162,9 +161,9 @@ module.exports = React.createClass({
       {_.map(fixtures, function(props, fixtureName) {
 
         var fixtureProps = {
-          selectedComponent: componentName,
-          selectedFixture: fixtureName,
-          fixtureEditor: this.props.fixtureEditor
+          component: componentName,
+          fixture: fixtureName,
+          editor: this.props.editor
         };
 
         return <li className={this._getFixtureClasses(componentName,
@@ -187,7 +186,7 @@ module.exports = React.createClass({
       <div ref="previewContainer" className={this._getPreviewClasses()}>
         {this.loadChild('preview')}
       </div>
-      {this.props.fixtureEditor ? this._renderFixtureEditor() : null}
+      {this.props.editor ? this._renderFixtureEditor() : null}
     </div>
   },
 
@@ -198,7 +197,7 @@ module.exports = React.createClass({
     });
 
     return <div className="fixture-editor-outer">
-      <textarea ref="fixtureEditor"
+      <textarea ref="editor"
                 className={editorClasses}
                 value={this.state.fixtureUserInput}
                 onChange={this.onFixtureChange}>
@@ -216,26 +215,26 @@ module.exports = React.createClass({
   _renderFixtureEditorButton: function() {
     var classes = classNames({
       'fixture-editor-button': true,
-      'selected-button': this.props.fixtureEditor
+      'selected-button': this.props.editor
     });
 
-    var fixtureEditorUrlProps = {
-      fixtureEditor: !this.props.fixtureEditor,
-      selectedComponent: this.props.selectedComponent,
-      selectedFixture: this.props.selectedFixture
+    var editorUrlProps = {
+      editor: !this.props.editor,
+      component: this.props.component,
+      fixture: this.props.fixture
     };
 
     return <li className={classes}>
-      <a href={stringifyParams(fixtureEditorUrlProps)}
-         ref="fixtureEditorButton"
+      <a href={stringifyParams(editorUrlProps)}
+         ref="editorButton"
          onClick={this.props.router.routeLink}>Editor</a>
     </li>;
   },
 
   _renderFullScreenButton: function() {
     var fullScreenUrl = stringifyParams({
-      selectedComponent: this.props.selectedComponent,
-      selectedFixture: this.props.selectedFixture,
+      component: this.props.component,
+      fixture: this.props.fixture,
       fullScreen: true
     });
 
@@ -253,8 +252,8 @@ module.exports = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
-    if (nextProps.selectedComponent !== this.props.selectedComponent ||
-        nextProps.selectedFixture !== this.props.selectedFixture) {
+    if (nextProps.component !== this.props.component ||
+        nextProps.fixture !== this.props.fixture) {
       this.setState(this.constructor.getFixtureState(
           nextProps, this.state.expandedComponents));
     }
@@ -264,8 +263,8 @@ module.exports = React.createClass({
     if (this.refs.preview && (
         // Avoid deep comparing the fixture contents when component and/or
         // fixture changed, because it's more expensive
-        this.props.selectedComponent !== prevProps.selectedComponent ||
-        this.props.selectedFixture !== prevProps.selectedFixture ||
+        this.props.component !== prevProps.component ||
+        this.props.fixture !== prevProps.fixture ||
         !_.isEqual(this.state.fixtureContents, prevState.fixtureContents))) {
       this._injectPreviewChildState();
     }
@@ -313,7 +312,7 @@ module.exports = React.createClass({
   _getPreviewClasses: function() {
     var classes = {
       'preview': true,
-      'aside-fixture-editor': this.props.fixtureEditor
+      'aside-fixture-editor': this.props.editor
     };
 
     if (this.props.containerClassName) {
@@ -328,8 +327,8 @@ module.exports = React.createClass({
       'component-fixture': true
     };
 
-    classes['selected'] = componentName === this.props.selectedComponent &&
-                          fixtureName === this.props.selectedFixture;
+    classes['selected'] = componentName === this.props.component &&
+                          fixtureName === this.props.fixture;
 
     return classNames(classes);
   },
diff --git a/tests/components/component-playground/children.js b/tests/components/component-playground/children.js
index 3b751f5..8d18c6c 100644
--- a/tests/components/component-playground/children.js
+++ b/tests/components/component-playground/children.js
@@ -17,7 +17,7 @@ describe('ComponentPlayground component', function() {
       container: document.createElement('div')
     });
 
-    if (params.selectedComponent) {
+    if (params.component) {
       childParams = component.children.preview.call(component);
     }
   }
@@ -54,8 +54,8 @@ describe('ComponentPlayground component', function() {
 
     it('should render child with selected fixture', function() {
       render({
-        selectedComponent: 'FirstComponent',
-        selectedFixture: 'default state'
+        component: 'FirstComponent',
+        fixture: 'default state'
       });
 
       expect(ComponentTree.loadChild.loadChild).to.have.been.called;
@@ -64,7 +64,7 @@ describe('ComponentPlayground component', function() {
     describe('with fixture contents', function() {
       beforeEach(function() {
         _.assign(params, {
-          selectedComponent: 'FirstComponent',
+          component: 'FirstComponent',
           // Children draw their props from state.fixtureContents. Generating
           // state from props is tested in the state.js suite
           state: {
diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index cdcf01b..7109a27 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -20,7 +20,7 @@ describe('ComponentPlayground component', function() {
   };
 
   var triggerChange = function(value) {
-    utils.Simulate.change(component.refs.fixtureEditor.getDOMNode(),
+    utils.Simulate.change(component.refs.editor.getDOMNode(),
                           {target: {value: value}});
   };
 
@@ -99,8 +99,8 @@ describe('ComponentPlayground component', function() {
       describe('router links', function() {
         beforeEach(function() {
           render({
-            selectedComponent: 'SecondComponent',
-            selectedFixture: 'simple state'
+            component: 'SecondComponent',
+            fixture: 'simple state'
           });
         });
 
@@ -118,7 +118,7 @@ describe('ComponentPlayground component', function() {
         });
 
         it('should route link on fixture editor button', function() {
-          utils.Simulate.click(component.refs.fixtureEditorButton.getDOMNode());
+          utils.Simulate.click(component.refs.editorButton.getDOMNode());
         });
 
         it('should route link on full screen button', function() {
@@ -137,9 +137,9 @@ describe('ComponentPlayground component', function() {
               }
             }
           },
-          selectedComponent: 'MyComponent',
-          selectedFixture: 'simple state',
-          fixtureEditor: true,
+          component: 'MyComponent',
+          fixture: 'simple state',
+          editor: true,
           state: {
             fixtureContents: {
               lorem: 'dolor sit'
@@ -206,9 +206,9 @@ describe('ComponentPlayground component', function() {
               }
             }
           },
-          selectedComponent: 'MyComponent',
-          selectedFixture: 'simple state',
-          fixtureEditor: true
+          component: 'MyComponent',
+          fixture: 'simple state',
+          editor: true
         });
 
         render();
diff --git a/tests/components/component-playground/render.js b/tests/components/component-playground/render.js
index a400e4e..59c12a1 100644
--- a/tests/components/component-playground/render.js
+++ b/tests/components/component-playground/render.js
@@ -108,8 +108,8 @@ describe('ComponentPlayground component', function() {
       var firstFixtureLink = $component.find('.component-fixture a'),
           urlProps = getUrlProps(firstFixtureLink);
 
-      expect(urlProps.selectedComponent).to.equal('FirstComponent');
-      expect(urlProps.selectedFixture).to.equal('blank state');
+      expect(urlProps.component).to.equal('FirstComponent');
+      expect(urlProps.fixture).to.equal('blank state');
     });
 
     it('should not add full-screen class when prop is false', function() {
@@ -139,20 +139,20 @@ describe('ComponentPlayground component', function() {
        function() {
       render();
 
-      expect(component.refs.fixtureEditorButton).to.not.exist;
+      expect(component.refs.editorButton).to.not.exist;
     });
 
     it('should not render fixture editor by default', function() {
       render();
 
-      expect(component.refs.fixtureEditor).to.not.exist;
+      expect(component.refs.editor).to.not.exist;
     });
 
     describe('with fixture selected', function() {
       beforeEach(function() {
         _.assign(params, {
-          selectedComponent: 'FirstComponent',
-          selectedFixture: 'simple state'
+          component: 'FirstComponent',
+          fixture: 'simple state'
         })
       });
 
@@ -185,10 +185,10 @@ describe('ComponentPlayground component', function() {
       it('should add class to selected fixture', function() {
         render();
 
-        var $selectedFixture = $component.find('.component-fixture.selected');
+        var $fixture = $component.find('.component-fixture.selected');
 
-        expect($selectedFixture.length).to.equal(1);
-        expect($selectedFixture.text()).to.equal('simple state');
+        expect($fixture.length).to.equal(1);
+        expect($fixture.text()).to.equal('simple state');
       });
 
       it('should generate full-screen url', function() {
@@ -197,8 +197,8 @@ describe('ComponentPlayground component', function() {
         var element = component.refs.fullScreenButton.getDOMNode(),
             urlProps = getUrlProps(element);
 
-        expect(urlProps.selectedComponent).to.equal('FirstComponent');
-        expect(urlProps.selectedFixture).to.equal('simple state');
+        expect(urlProps.component).to.equal('FirstComponent');
+        expect(urlProps.fixture).to.equal('simple state');
         expect(urlProps.fullScreen).to.equal(true);
       });
 
@@ -206,35 +206,35 @@ describe('ComponentPlayground component', function() {
          function() {
         render();
 
-        var element = component.refs.fixtureEditorButton.getDOMNode(),
+        var element = component.refs.editorButton.getDOMNode(),
             urlProps = getUrlProps(element);
 
-        expect(urlProps.selectedComponent).to.equal('FirstComponent');
-        expect(urlProps.selectedFixture).to.equal('simple state');
-        expect(urlProps.fixtureEditor).to.equal(true);
+        expect(urlProps.component).to.equal('FirstComponent');
+        expect(urlProps.fixture).to.equal('simple state');
+        expect(urlProps.editor).to.equal(true);
       });
 
       it('should include component and fixture in fixture editor url',
          function() {
         render();
 
-        var element = component.refs.fixtureEditorButton.getDOMNode(),
+        var element = component.refs.editorButton.getDOMNode(),
             urlProps = getUrlProps(element);
 
-        expect(urlProps.selectedComponent).to.equal('FirstComponent');
-        expect(urlProps.selectedFixture).to.equal('simple state');
-        expect(urlProps.fixtureEditor).to.equal(true);
+        expect(urlProps.component).to.equal('FirstComponent');
+        expect(urlProps.fixture).to.equal('simple state');
+        expect(urlProps.editor).to.equal(true);
       });
 
       describe('with fixture editor open', function() {
         beforeEach(function() {
-          params.fixtureEditor = true;
+          params.editor = true;
         });
 
         it('should render fixture editor', function() {
           render();
 
-          expect(component.refs.fixtureEditor).to.exist;
+          expect(component.refs.editor).to.exist;
         });
 
         it('should add class on preview container', function() {
@@ -251,7 +251,7 @@ describe('ComponentPlayground component', function() {
             }
           });
 
-          expect(component.refs.fixtureEditor.getDOMNode().value)
+          expect(component.refs.editor.getDOMNode().value)
                  .to.equal(component.state.fixtureUserInput);
         });
 
@@ -266,19 +266,19 @@ describe('ComponentPlayground component', function() {
         it('should generate url for closing fixture editor', function() {
           render();
 
-          var element = component.refs.fixtureEditorButton.getDOMNode(),
+          var element = component.refs.editorButton.getDOMNode(),
               urlProps = getUrlProps(element);
 
-          expect(urlProps.fixtureEditor).to.equal(false);
+          expect(urlProps.editor).to.equal(false);
         });
 
         it('should include fixtor editor in fixture url', function() {
           var firstFixtureLink = $component.find('.component-fixture a'),
               urlProps = getUrlProps(firstFixtureLink);
 
-          expect(urlProps.selectedComponent).to.equal('FirstComponent');
-          expect(urlProps.selectedFixture).to.equal('blank state');
-          expect(urlProps.fixtureEditor).to.equal(true);
+          expect(urlProps.component).to.equal('FirstComponent');
+          expect(urlProps.fixture).to.equal('blank state');
+          expect(urlProps.editor).to.equal(true);
         });
 
         it('should add invalid class on fixture editor on state flag',
@@ -289,24 +289,24 @@ describe('ComponentPlayground component', function() {
             }
           });
 
-          expect($(component.refs.fixtureEditor.getDOMNode())
+          expect($(component.refs.editor.getDOMNode())
                  .hasClass('invalid-syntax')).to.be.true;
         });
       });
 
       it('should generate url for closing editor with fixture', function() {
         render({
-          selectedComponent: 'FirstComponent',
-          selectedFixture: 'simple state',
-          fixtureEditor: true
+          component: 'FirstComponent',
+          fixture: 'simple state',
+          editor: true
         });
 
-        var element = component.refs.fixtureEditorButton.getDOMNode(),
+        var element = component.refs.editorButton.getDOMNode(),
             urlProps = getUrlProps(element);
 
-        expect(urlProps.selectedComponent).to.equal('FirstComponent');
-        expect(urlProps.selectedFixture).to.equal('simple state');
-        expect(urlProps.fixtureEditor).to.equal(false);
+        expect(urlProps.component).to.equal('FirstComponent');
+        expect(urlProps.fixture).to.equal('simple state');
+        expect(urlProps.editor).to.equal(false);
       });
     });
   });
diff --git a/tests/components/component-playground/state.js b/tests/components/component-playground/state.js
index 4be979a..53d12a3 100644
--- a/tests/components/component-playground/state.js
+++ b/tests/components/component-playground/state.js
@@ -65,8 +65,8 @@ describe('ComponentPlayground component', function() {
     describe('with fixture selected', function() {
       beforeEach(function() {
         _.extend(params, {
-          selectedComponent: 'FirstComponent',
-          selectedFixture: 'blank state'
+          component: 'FirstComponent',
+          fixture: 'blank state'
         });
       });
 
@@ -112,8 +112,8 @@ describe('ComponentPlayground component', function() {
           });
 
           component.setProps({
-            selectedComponent: 'SecondComponent',
-            selectedFixture: 'simple state'
+            component: 'SecondComponent',
+            fixture: 'simple state'
           });
         });