From c69569a43329585ec83e906ac4ec86d5cc8456ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Tue, 14 Apr 2015 20:48:33 +0300 Subject: [PATCH 1/9] Use loadChild mixing from react-component-tree #1 --- package.json | 1 + src/components/component-playground.jsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 84c7bb7..fba1ec6 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "less-loader": "^2.2.0", "mocha": "^2.2.4", "react": "^0.13.1", + "react-component-tree": "^0.1.2", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "style-loader": "^0.10.1", diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx index e8df5ef..118dc57 100644 --- a/src/components/component-playground.jsx +++ b/src/components/component-playground.jsx @@ -2,8 +2,8 @@ require('./component-playground.less'); var _ = require('lodash'), React = require('react/addons'), - classSet = React.addons.classSet; -//ComponentTree = require('../mixins/component-tree.js'), + classSet = React.addons.classSet, + ComponentTree = require('react-component-tree'); //RouterMixin = require('../mixins/router.js'); module.exports = React.createClass({ @@ -14,7 +14,7 @@ module.exports = React.createClass({ */ displayName: 'ComponentPlayground', - mixins: [/*ComponentTree, RouterMixin*/], + mixins: [ComponentTree.Mixin], propTypes: { fixtures: React.PropTypes.object.isRequired, From f24c2a63575babe4913fbe54914aa607b3e6c422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Tue, 14 Apr 2015 21:20:59 +0300 Subject: [PATCH 2/9] Add React minimal router #1 --- package.json | 1 + src/components/component-playground.jsx | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index fba1ec6..50ff1be 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "mocha": "^2.2.4", "react": "^0.13.1", "react-component-tree": "^0.1.2", + "react-minimal-router": "^0.1.3", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", "style-loader": "^0.10.1", diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx index 118dc57..9f5ce91 100644 --- a/src/components/component-playground.jsx +++ b/src/components/component-playground.jsx @@ -3,8 +3,8 @@ require('./component-playground.less'); var _ = require('lodash'), React = require('react/addons'), classSet = React.addons.classSet, - ComponentTree = require('react-component-tree'); -//RouterMixin = require('../mixins/router.js'); + ComponentTree = require('react-component-tree'), + stringifyParams = require('react-minimal-router').uri.stringifyParams; module.exports = React.createClass({ /** @@ -112,7 +112,7 @@ module.exports = React.createClass({
{this._renderButtons()}

- React Component Playground @@ -174,7 +174,7 @@ module.exports = React.createClass({ return
  • - {fixtureName} @@ -237,14 +237,14 @@ module.exports = React.createClass({ } return
  • - Editor
    • ; }, _renderFullScreenButton: function() { - var fullScreenUrl = this.getUrlFromProps({ + var fullScreenUrl = stringifyParams({ selectedComponent: this.props.selectedComponent, selectedFixture: this.props.selectedFixture, fullScreen: true From c649ff5c5eebc4083324bc1c60a9f34e733aa7f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Tue, 14 Apr 2015 21:22:55 +0300 Subject: [PATCH 3/9] React can be required in more ways #1 --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index f757312..ae2f87a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,7 @@ module.exports = { entry: './src/components/component-playground.jsx', externals: { 'lodash': 'lodash', + 'react': 'react', 'react/addons': 'react/addons' }, module: { From 474c35a9428118643087d71808bb7fdb44a83227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 19:45:19 +0300 Subject: [PATCH 4/9] Remove router logic #1 --- src/components/component-playground.jsx | 4 ---- tests/components/component-playground/children.js | 8 -------- 2 files changed, 12 deletions(-) diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx index 9f5ce91..523b47a 100644 --- a/src/components/component-playground.jsx +++ b/src/components/component-playground.jsx @@ -89,10 +89,6 @@ module.exports = React.createClass({ key: JSON.stringify(this.state.fixtureContents) }; - if (this.props.router) { - props.router = this.props.router; - } - return _.merge(props, this.state.fixtureContents); } }, diff --git a/tests/components/component-playground/children.js b/tests/components/component-playground/children.js index 56484e1..175828d 100644 --- a/tests/components/component-playground/children.js +++ b/tests/components/component-playground/children.js @@ -66,14 +66,6 @@ describe('ComponentPlayground component', function() { expect(childProps.height).to.equal(fixtureContents.height); }); - it('should send (Cosmos) router instance to preview child', function() { - render({ - router: {} - }); - - expect(childProps.router).to.equal(props.router); - }); - it('should use fixture contents as key for preview child', function() { render(); From f130775e6e1200ef6fabd236114c985e57e0930c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 20:09:42 +0300 Subject: [PATCH 5/9] Adapt ComponentPlayground to ComponentTree and MinimalRouter #1 --- package.json | 2 +- .../component-playground/children.js | 50 +++++++++++-------- .../components/component-playground/events.js | 18 +++---- .../components/component-playground/render.js | 20 ++++---- .../components/component-playground/state.js | 18 +++---- 5 files changed, 60 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 50ff1be..026fa6a 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "less-loader": "^2.2.0", "mocha": "^2.2.4", "react": "^0.13.1", - "react-component-tree": "^0.1.2", + "react-component-tree": "^0.2.1", "react-minimal-router": "^0.1.3", "sinon": "^1.14.1", "sinon-chai": "^2.7.0", diff --git a/tests/components/component-playground/children.js b/tests/components/component-playground/children.js index 175828d..a4bfe45 100644 --- a/tests/components/component-playground/children.js +++ b/tests/components/component-playground/children.js @@ -1,30 +1,28 @@ -var $ = require('jquery'), - Cosmos = require('../../../cosmos.js'), - renderComponent = require('../../helpers/render-component.js'), +var ComponentTree = require('react-component-tree'), ComponentPlayground = - require('../../../src/components/component-playground.jsx'); + require('../../../src/components/component-playground.jsx'); describe('ComponentPlayground component', function() { var component, - $component, props, - childProps; + childParams; function render(extraProps) { // Alow tests to extend fixture before rendering _.merge(props, extraProps); - component = renderComponent(ComponentPlayground, props); - $component = $(component.getDOMNode()); + component = ComponentTree.render({ + component: ComponentPlayground, + snapshot: props, + container: document.createElement('div') + }); - if (Cosmos.createElement.callCount) { - childProps = Cosmos.createElement.lastCall.args[0]; - } - }; + childParams = component.children.preview.call(component); + } beforeEach(function() { // Don't render any children - sinon.stub(Cosmos, 'createElement'); + sinon.stub(ComponentTree.loadChild, 'loadChild'); props = { fixtures: {} @@ -32,14 +30,26 @@ describe('ComponentPlayground component', function() { }); afterEach(function() { - Cosmos.createElement.restore(); + ComponentTree.loadChild.loadChild.restore(); }) describe('children', function() { it('should not render child without fixture contents', function() { render(); - expect(Cosmos.createElement).to.not.have.been.called; + expect(ComponentTree.loadChild.loadChild).to.not.have.been.called; + }); + + it('should render child with fixture contents', function() { + render({ + state: { + fixtureContents: { + component: 'MyComponent' + } + } + }); + + expect(ComponentTree.loadChild.loadChild).to.have.been.called; }); describe('with fixture contents', function() { @@ -61,9 +71,9 @@ describe('ComponentPlayground component', function() { render(); var fixtureContents = component.state.fixtureContents; - expect(childProps.component).to.equal(fixtureContents.component); - expect(childProps.width).to.equal(fixtureContents.width); - expect(childProps.height).to.equal(fixtureContents.height); + expect(childParams.component).to.equal(fixtureContents.component); + expect(childParams.width).to.equal(fixtureContents.width); + expect(childParams.height).to.equal(fixtureContents.height); }); it('should use fixture contents as key for preview child', function() { @@ -72,7 +82,7 @@ describe('ComponentPlayground component', function() { var fixtureContents = component.state.fixtureContents, stringifiedFixtureContents = JSON.stringify(fixtureContents); - expect(childProps.key).to.equal(stringifiedFixtureContents); + expect(childParams.key).to.equal(stringifiedFixtureContents); }); it('should clone fixture contents sent to child', function() { @@ -86,7 +96,7 @@ describe('ComponentPlayground component', function() { } }); - expect(childProps.shouldBeCloned).to.not.equal(obj); + expect(childParams.shouldBeCloned).to.not.equal(obj); }); }); }); diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js index 4d350ca..49703e0 100644 --- a/tests/components/component-playground/events.js +++ b/tests/components/component-playground/events.js @@ -1,22 +1,22 @@ var React = require('react/addons'), - $ = require('jquery'), - Cosmos = require('../../../cosmos.js'), - renderComponent = require('../../helpers/render-component.js'), + ComponentTree = require('react-component-tree'), ComponentPlayground = - require('../../../src/components/component-playground.jsx'); + require('../../../src/components/component-playground.jsx'); describe('ComponentPlayground component', function() { var utils = React.addons.TestUtils, component, - $component, props; function render(extraProps) { // Alow tests to extend fixture before rendering _.merge(props, extraProps); - component = renderComponent(ComponentPlayground, props); - $component = $(component.getDOMNode()); + component = ComponentTree.render({ + component: ComponentPlayground, + snapshot: props, + container: document.createElement('div') + }); }; var triggerChange = function(value) { @@ -28,7 +28,7 @@ describe('ComponentPlayground component', function() { sinon.stub(console, 'error'); // Don't render any children - sinon.stub(Cosmos, 'createElement'); + sinon.stub(ComponentTree.loadChild, 'loadChild'); props = { fixtures: {} @@ -38,7 +38,7 @@ describe('ComponentPlayground component', function() { afterEach(function() { console.error.restore(); - Cosmos.createElement.restore(); + ComponentTree.loadChild.loadChild.restore(); }) describe('events', function() { diff --git a/tests/components/component-playground/render.js b/tests/components/component-playground/render.js index bf688f2..88668c4 100644 --- a/tests/components/component-playground/render.js +++ b/tests/components/component-playground/render.js @@ -1,9 +1,8 @@ var $ = require('jquery'), - Cosmos = require('../../../cosmos.js'), - serialize = require('../../../lib/serialize.js'), - renderComponent = require('../../helpers/render-component.js'), + ComponentTree = require('react-component-tree'), + parseLocation = require('react-minimal-router').uri.parseLocation, ComponentPlayground = - require('../../../src/components/component-playground.jsx'); + require('../../../src/components/component-playground.jsx'); describe('ComponentPlayground component', function() { var component, @@ -14,20 +13,23 @@ describe('ComponentPlayground component', function() { // Alow tests to extend fixture before rendering _.merge(props, extraProps); - component = renderComponent(ComponentPlayground, props); + component = ComponentTree.render({ + component: ComponentPlayground, + snapshot: props, + container: document.createElement('div') + }); $component = $(component.getDOMNode()); } function getUrlProps(element) { var href = $(element).attr('href'); - // The serialize and router.url libs are already tested - return serialize.getPropsFromQueryString(href.substr(1)); + return parseLocation(href); } beforeEach(function() { // Don't render any children - sinon.stub(Cosmos, 'createElement'); + sinon.stub(ComponentTree.loadChild, 'loadChild'); props = { fixtures: { @@ -44,7 +46,7 @@ describe('ComponentPlayground component', function() { }); afterEach(function() { - Cosmos.createElement.restore(); + ComponentTree.loadChild.loadChild.restore(); }) describe('render', function() { diff --git a/tests/components/component-playground/state.js b/tests/components/component-playground/state.js index a70200c..df0e42d 100644 --- a/tests/components/component-playground/state.js +++ b/tests/components/component-playground/state.js @@ -1,25 +1,25 @@ -var $ = require('jquery'), - Cosmos = require('../../../cosmos.js'), - renderComponent = require('../../helpers/render-component.js'), +var ComponentTree = require('react-component-tree'), ComponentPlayground = - require('../../../src/components/component-playground.jsx'); + require('../../../src/components/component-playground.jsx'); describe('ComponentPlayground component', function() { var component, - $component, props; function render(extraProps) { // Alow tests to extend fixture before rendering _.merge(props, extraProps); - component = renderComponent(ComponentPlayground, props); - $component = $(component.getDOMNode()); + component = ComponentTree.render({ + component: ComponentPlayground, + snapshot: props, + container: document.createElement('div') + }); }; beforeEach(function() { // Don't render any children - sinon.stub(Cosmos, 'createElement'); + sinon.stub(ComponentTree.loadChild, 'loadChild'); props = { fixtures: { @@ -38,7 +38,7 @@ describe('ComponentPlayground component', function() { }); afterEach(function() { - Cosmos.createElement.restore(); + ComponentTree.loadChild.loadChild.restore(); }) describe('state', function() { From 1476987609d8ee649142e335a304df660711d8af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 20:10:04 +0300 Subject: [PATCH 6/9] Make webpack output more versatile #1 --- webpack.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index ae2f87a..fb8e8b2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,7 +21,8 @@ module.exports = { }] }, output: { - libraryTarget: 'commonjs2', + libraryTarget: 'umd', + library: 'ComponentPlayground', path: path.join(__dirname, 'build'), filename: 'bundle.js' } From a94ad6f5b2392a469d3dad67c69d557e761589f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 20:16:07 +0300 Subject: [PATCH 7/9] Enable coverage for .jsx #1 --- karma.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/karma.conf.js b/karma.conf.js index c07043f..1232f9a 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -29,7 +29,7 @@ module.exports = function(config) { loader: 'style-loader!css-loader!less-loader' }], postLoaders: [{ - test: /\.js$/, + test: /\.jsx?$/, exclude: /(node_modules|tests)\//, loader: 'istanbul-instrumenter' }] From 38522b9b464b043a045b365fe62682b004ea15dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 20:46:59 +0300 Subject: [PATCH 8/9] classSet is now deprecated #1 --- src/components/component-playground.jsx | 16 ++++++++-------- webpack.config.js | 3 +-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx index 523b47a..d757cff 100644 --- a/src/components/component-playground.jsx +++ b/src/components/component-playground.jsx @@ -1,8 +1,8 @@ require('./component-playground.less'); var _ = require('lodash'), - React = require('react/addons'), - classSet = React.addons.classSet, + React = require('react'), + classNames = require('classnames'), ComponentTree = require('react-component-tree'), stringifyParams = require('react-minimal-router').uri.stringifyParams; @@ -94,7 +94,7 @@ module.exports = React.createClass({ }, render: function() { - var classes = classSet({ + var classes = classNames({ 'component-playground': true, 'full-screen': this.props.fullScreen }); @@ -136,7 +136,7 @@ module.exports = React.createClass({ return
      {_.map(this.props.fixtures, function(fixtures, componentName) { - var classes = classSet({ + var classes = classNames({ 'component': true, 'expanded': _.contains(this.state.expandedComponents, componentName) }); @@ -192,7 +192,7 @@ module.exports = React.createClass({ }, _renderFixtureEditor: function() { - var editorClasses = classSet({ + var editorClasses = classNames({ 'fixture-editor': true, 'invalid-syntax': !this.state.isFixtureUserInputValid }); @@ -216,7 +216,7 @@ module.exports = React.createClass({ }, _renderFixtureEditorButton: function() { - var classes = classSet({ + var classes = classNames({ 'fixture-editor-button': true, 'selected-button': this.props.fixtureEditor }); @@ -310,7 +310,7 @@ module.exports = React.createClass({ classes[this.props.containerClassName] = true; } - return classSet(classes); + return classNames(classes); }, _getFixtureClasses: function(componentName, fixtureName) { @@ -321,6 +321,6 @@ module.exports = React.createClass({ classes['selected'] = componentName === this.props.selectedComponent && fixtureName === this.props.selectedFixture; - return classSet(classes); + return classNames(classes); } }); diff --git a/webpack.config.js b/webpack.config.js index fb8e8b2..bd04556 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,8 +4,7 @@ module.exports = { entry: './src/components/component-playground.jsx', externals: { 'lodash': 'lodash', - 'react': 'react', - 'react/addons': 'react/addons' + 'react': 'react' }, module: { loaders: [{ From 8b06e46ce2a880df3f2da971e194df680a950486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 20:50:08 +0300 Subject: [PATCH 9/9] Forgot to --save-dev the first time #1 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 026fa6a..5a01337 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "babel-core": "^5.0.12", "babel-loader": "^5.0.0", "chai": "^2.2.0", + "classnames": "^1.2.0", "coveralls": "^2.11.2", "css-loader": "^0.10.1", "esprima-fb": "^14001.1.0-dev-harmony-fb",