From cf35e4e2d3116a3536755195085e80e3f97b3e18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 15:55:16 +0300 Subject: [PATCH 1/2] Call children methods on component context #6 --- src/load-child-component.js | 3 +- src/load-child-mixin.js | 3 +- src/load-child.js | 21 +++++++------ tests/load-child-component.js | 5 ++- tests/load-child-mixin.js | 5 ++- tests/load-child.js | 57 ++++++++++++++++++++--------------- tests/load-missing-child.js | 14 +++++---- 7 files changed, 58 insertions(+), 50 deletions(-) diff --git a/src/load-child-component.js b/src/load-child-component.js index 0a2739c..d02fbd0 100644 --- a/src/load-child-component.js +++ b/src/load-child-component.js @@ -3,8 +3,7 @@ var React = require('react'), class LoadChildComponent extends React.Component { loadChild(childName, a, b, c, d, e, f) { - return loadChild.loadChild( - this.children, childName, a, b, c, d, e, f); + return loadChild.loadChild(this, childName, a, b, c, d, e, f); } } diff --git a/src/load-child-mixin.js b/src/load-child-mixin.js index d538fe9..ecf7804 100644 --- a/src/load-child-mixin.js +++ b/src/load-child-mixin.js @@ -2,7 +2,6 @@ var loadChild = require('./load-child.js'); module.exports = { loadChild: function(childName, a, b, c, d, e, f) { - return loadChild.loadChild( - this.children, childName, a, b, c, d, e, f); + return loadChild.loadChild(this, childName, a, b, c, d, e, f); } }; diff --git a/src/load-child.js b/src/load-child.js index 151bb64..92dd411 100644 --- a/src/load-child.js +++ b/src/load-child.js @@ -1,22 +1,23 @@ var _ = require('lodash'), React = require('react'); -exports.loadChild = function(childTemplates, childName, a, b, c, d, e, f) { +exports.loadChild = function(component, childName, a, b, c, d, e, f) { /** * Create a React element for a specific child type. * * The component class and props of the child are returned together by a - * corresponding function from the childTemplates object. The functions are + * corresponding function from the .children object. The functions are * mapped with the name of the child as the key. * * https://facebook.github.io/react/docs/top-level-api.html#react.createelement * - * @param {Object} childTemplates Map of functions that generate child - * component params (component+props) + * @param {Object} component Parent component + * @param {Object} component.children Map of functions that generate child + * component params (component+props) * @param {String} name Key that corresponds to the child component we want * to get the params for * @param {...*} [arguments] Optional extra arguments get passed to the - * component template function + * component .children function * * @returns {ReactElement} Created React element * @@ -39,7 +40,7 @@ exports.loadChild = function(childTemplates, childName, a, b, c, d, e, f) { * }); */ var params = getChildParams.call( - this, childTemplates, childName, a, b, c, d, e, f); + this, component, childName, a, b, c, d, e, f); // One child with bad params shouldn't block the entire app try { @@ -50,11 +51,11 @@ exports.loadChild = function(childTemplates, childName, a, b, c, d, e, f) { } }; -var getChildParams = function(childTemplates, childName, a, b, c, d, e, f) { - var params = childTemplates[childName].call(this, a, b, c, d, e, f); +var getChildParams = function(component, childName, a, b, c, d, e, f) { + var params = component.children[childName].call(component, a, b, c, d, e, f); - // Default the child ref to its key name if the template doesn't return a - // value + // Default the child ref to its key name if the child template doesn't return + // a value if (!params.ref) { params.ref = childName; } diff --git a/tests/load-child-component.js b/tests/load-child-component.js index 943d296..f363cca 100644 --- a/tests/load-child-component.js +++ b/tests/load-child-component.js @@ -6,13 +6,12 @@ var _ = require('lodash'), describe('Load child component', function() { var fakeReactElement = {}, - children = {}, myComponent; class MyComponent extends LoadChildComponent { constructor(props) { super(props); - this.children = children; + this.children = {}; } render() { return React.DOM.span(); @@ -33,7 +32,7 @@ describe('Load child component', function() { myComponent.loadChild('myChild', 5, 10, true); var args = loadChild.loadChild.lastCall.args; - expect(args[0]).to.equal(children); + expect(args[0]).to.equal(myComponent); expect(args[1]).to.equal('myChild'); expect(args[2]).to.equal(5); expect(args[3]).to.equal(10); diff --git a/tests/load-child-mixin.js b/tests/load-child-mixin.js index 8b278d0..36cd53f 100644 --- a/tests/load-child-mixin.js +++ b/tests/load-child-mixin.js @@ -6,12 +6,11 @@ var _ = require('lodash'), describe('Load child mixin', function() { var fakeReactElement = {}, - children = {}, myComponent; var MyComponent = React.createClass({ mixins: [LoadChildMixin], - children: children, + children: {}, render: function() { return React.DOM.span(); @@ -32,7 +31,7 @@ describe('Load child mixin', function() { myComponent.loadChild('myChild', 5, 10, true); var args = loadChild.loadChild.lastCall.args; - expect(args[0]).to.equal(children); + expect(args[0]).to.equal(myComponent); expect(args[1]).to.equal('myChild'); expect(args[2]).to.equal(5); expect(args[3]).to.equal(10); diff --git a/tests/load-child.js b/tests/load-child.js index 85676ee..b8caa72 100644 --- a/tests/load-child.js +++ b/tests/load-child.js @@ -4,22 +4,24 @@ var React = require('react'), describe('Load child', function() { var FirstComponent = {}, SecondComponent = {}, - childTemplates; + component; beforeEach(function() { - childTemplates = { - defaultRef: sinon.spy(function() { - return { - component: FirstComponent, - alwaysTrue: true - }; - }), - customRef: sinon.spy(function() { - return { - component: SecondComponent, - ref: 'fooChild' - }; - }) + component = { + children: { + defaultRef: sinon.spy(function() { + return { + component: FirstComponent, + alwaysTrue: true + }; + }), + customRef: sinon.spy(function() { + return { + component: SecondComponent, + ref: 'fooChild' + }; + }) + } }; sinon.stub(React, 'createElement'); @@ -29,40 +31,47 @@ describe('Load child', function() { React.createElement.restore(); }); - it('should call corresponding template function', function() { - loadChild(childTemplates, 'defaultRef'); + it('should call .children function', function() { + loadChild(component, 'defaultRef'); - expect(childTemplates.defaultRef).to.have.been.called; + expect(component.children.defaultRef).to.have.been.called; }); - it('should call corresponding template function with extra args', function() { - loadChild(childTemplates, 'customRef', 'first', 'second'); + it('should call .children function with component context', function() { + loadChild(component, 'defaultRef'); - expect(childTemplates.customRef).to.have.been.calledWith('first', 'second'); + expect(component.children.defaultRef).to.have.been.calledOn(component); + }); + + it('should call .children function with extra args', function() { + loadChild(component, 'customRef', 'first', 'second'); + + expect(component.children.customRef) + .to.have.been.calledWith('first', 'second'); }); it('should create element using returned component class', function() { - loadChild(childTemplates, 'defaultRef'); + loadChild(component, 'defaultRef'); expect(React.createElement.lastCall.args[0]).to.equal(FirstComponent); }); it('should create element using returned props', function() { - loadChild(childTemplates, 'defaultRef'); + loadChild(component, 'defaultRef'); var props = React.createElement.lastCall.args[1]; expect(props.alwaysTrue).to.equal(true); }); it('should use child name as ref if omitted', function() { - loadChild(childTemplates, 'defaultRef'); + loadChild(component, 'defaultRef'); var props = React.createElement.lastCall.args[1]; expect(props.ref).to.equal('defaultRef'); }); it('should use returned ref when present', function() { - loadChild(childTemplates, 'customRef'); + loadChild(component, 'customRef'); var props = React.createElement.lastCall.args[1]; expect(props.ref).to.equal('fooChild'); diff --git a/tests/load-missing-child.js b/tests/load-missing-child.js index 8e2e58a..4811525 100644 --- a/tests/load-missing-child.js +++ b/tests/load-missing-child.js @@ -2,12 +2,14 @@ var React = require('react'), loadChild = require('../src/load-child.js').loadChild; describe('Load missing child', function() { - var childTemplates; + var component; beforeEach(function() { - childTemplates = { - missingChild: function() { - return {}; + component = { + children: { + missingChild: function() { + return {}; + } } }; @@ -26,12 +28,12 @@ describe('Load missing child', function() { it('should handle exception', function() { expect(function whereAreYouSon() { - loadChild(childTemplates, 'missingChild'); + loadChild(component, 'missingChild'); }).to.not.throw(); }); it('should log error', function() { - loadChild(childTemplates, 'missingChild'); + loadChild(component, 'missingChild'); expect(console.error.lastCall.args[0]).to.be.an.instanceof(Error); }); From 0d150b4d093640393ae59a4a1b060782e6068645 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Wed, 15 Apr 2015 15:56:26 +0300 Subject: [PATCH 2/2] Wrap UMD and preserve externals in commonjs parent module #6 --- package.json | 2 +- webpack.config.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 81850c9..015f5f9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-component-tree", - "version": "0.1.2", + "version": "0.2.0", "description": "Serialize and reproduce the state of an entire tree of React components", "main": "build/bundle.js", "repository": { diff --git a/webpack.config.js b/webpack.config.js index 7046ea1..6b5a44b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,8 @@ module.exports = { }] }, output: { - libraryTarget: 'commonjs2', + libraryTarget: 'umd', + library: 'ComponentTree', path: path.join(__dirname, 'build'), filename: 'bundle.js' }