├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
├── scripts
    └── test
├── src
    └── mixin.js
└── tests
    └── mixin.spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib/
3 | **/.DS_Store
4 | *.tgz
5 | tmp_test
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | tests/
3 | karma.conf.js
4 | .travis.yml
5 | lib/*.map
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "4.0"
4 | before_script:
5 |   - "npm install"
6 |   - "export DISPLAY=:99.0"
7 |   - "sh -e /etc/init.d/xvfb start"
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 angus croll
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # es6-react-mixins
  2 | 
  3 | [![Build Status](https://secure.travis-ci.org/angus-c/es6-react-mixins.png?branch=master)](http://travis-ci.org/angus-c/es6-react-mixins) [![npm version](http://img.shields.io/npm/v/es6-react-mixins.svg)](https://npmjs.org/package/es6-react-mixins)
  4 | 
  5 | `es6-react-mixins` is a module that lets you augment your ES6 React component classes with any number of custom ES6 mixins. You can also use it to merge traditional pre-ES6 React mixin objects into your ES6 React classes.
  6 | 
  7 | Inspired by [this gist](https://gist.github.com/sebmarkbage/fac0830dbb13ccbff596) by [Sebastian Markbåge](https://github.com/sebmarkbage) the strategy is transient class hierarchies – instead of locking classes into permanent *is a* roles, class realtionships are assembled and re-assembled at will.
  8 | 
  9 | ES6 mixins are functions that return classes. The `base` parameter is used internally to construct the mixin chain. There's no need to extend `React.component`, you get that for free.
 10 | 
 11 | ```js
 12 | const es6Mixin = base => class extends base {
 13 |   componentWillMount() {
 14 |     console.log("augmented componentWillMount");
 15 |   }
 16 |   render() {
 17 |     console.log("augmented render");
 18 |   }
 19 | };
 20 | ```
 21 | 
 22 | React components invoke mixins with a call to `super`.
 23 | 
 24 | ```js
 25 | import mixin from 'es6-react-mixins';
 26 | import React from 'react';
 27 | 
 28 | class MyComponent extends mixin(es6Mixin) {
 29 |   componentWillMount() {
 30 |     super.componentWillMount();
 31 |   }
 32 |   render() {
 33 |     super.render();
 34 |     return <div>hello/div>;
 35 |   }
 36 | }
 37 | 
 38 | React.render(<MyComponent>, document.body);
 39 | ```
 40 | The API works with any number of mixins. Obviously order matters with multiple mixins – each `super` call works its way up the mixin hierarchy.
 41 | 
 42 | ```js
 43 | const mixin1 = base => class extends base {
 44 |   componentWillMount() {
 45 |     super.componentWillMount();
 46 |     console.log("mixin1 componentWillMount");
 47 |   }
 48 |   render() {
 49 |     super.render();
 50 |     console.log("mixin1 render");
 51 |   }
 52 | };
 53 | 
 54 | const mixin2 = base => class extends base {
 55 |   componentWillMount() {
 56 |     super.componentWillMount();
 57 |     console.log("mixin2 componentWillMount");
 58 |   }
 59 |   render() {
 60 |     super.render();
 61 |     console.log("mixin2 render");
 62 |   }
 63 | };
 64 | 
 65 | class MyComponent extends mixin(mixin1, mixin2) {
 66 |   componentWillMount() {
 67 |     super.componentWillMount();
 68 |   }
 69 |   render() {
 70 |     super.render();
 71 |     return <div>hello/div>;
 72 |   }
 73 | }
 74 | ```
 75 | 
 76 | Notice that any mixin can call `super`, even though there may be no other mixins to hear it. Every mixin descends from a base mixin with no-op implementations of the react lifecycle methods.
 77 | 
 78 | `es6-react-mixins` also accepts traditional plain object mixins (a la pre-ES6 React), adapting them to ES6 style mixins internally.
 79 | 
 80 | ```js
 81 | var reactMixin = {
 82 |   componentWillMount: function () {
 83 |     console.log
 84 |   },
 85 |   render: function () {
 86 |     this.reactMixin_rendered = true;
 87 |   }
 88 | };
 89 | 
 90 | class MyComponent extends mixin(reactMixin) {
 91 |   componentWillMount() {
 92 |     super.componentWillMount();
 93 |   }
 94 |   render() {
 95 |     super.render();
 96 |     return <div>hello/div>;
 97 |   }
 98 | }
 99 | ```
100 | 
101 | # Installation
102 | 
103 | ```
104 | npm install es6-react-mixins
105 | ```
106 | 
107 | The source is written in es6 but there's an npm prebublish step which transpiles to es5 and dumps into `lib` directory - which is the default import.
108 | 
109 | # Testing
110 | 
111 | ```
112 | npm test
113 | ```
114 | 
115 | # Contributions
116 | 
117 | Yes please!
118 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "es6-react-mixins",
 3 |   "version": "0.2.0",
 4 |   "description": "Augments ES6 classes with ES6 or traditional React mixins",
 5 |   "author": "Angus Croll",
 6 |   "main": "lib/mixin.js",
 7 |   "scripts": {
 8 |     "compile": "babel --stage 0 --optional runtime src --out-dir lib",
 9 |     "prepublish": "npm run compile",
10 |     "test": "scripts/test"
11 |   },
12 |   "license": "MIT",
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/angus-c/es6-react-mixins.git"
16 |   },
17 |   "keywords": [
18 |     "es6",
19 |     "react",
20 |     "mixins",
21 |     "class"
22 |   ],
23 |   "devDependencies": {
24 |     "babel": "^5.8.23",
25 |     "babel-core": "^5.8.25",
26 |     "babel-loader": "^5.3.2",
27 |     "chai": "^3.3.0",
28 |     "jsdom": "^6.5.1",
29 |     "mocha": "^2.3.3",
30 |     "mocha-jsdom": "^1.0.0",
31 |     "webpack": "^1.12.2"
32 |   },
33 |   "dependencies": {
34 |     "babel-runtime": "^5.8.25",
35 |     "react": "^0.13.3"
36 |   },
37 |   "bugs": {
38 |     "url": "https://github.com/angus-c/es6-react-mixins/issues"
39 |   },
40 |   "homepage": "https://github.com/angus-c/es6-react-mixins",
41 |   "directories": {
42 |     "test": "tests"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/scripts/test:
--------------------------------------------------------------------------------
1 | #!/bin/bash -xe
2 | mkdir -p tmp_test/{src,tests}
3 | npm run compile
4 | cp lib/* tmp_test/src
5 | babel --stage 0 tests --out-file tmp_test/tests/index.js -s
6 | mocha tmp_test/tests/index.js
7 | rm -rf tmp_test
8 | 


--------------------------------------------------------------------------------
/src/mixin.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * based on https://gist.github.com/sebmarkbage/fac0830dbb13ccbff596
 3 |  * by Sebastian Markbåge
 4 |  */
 5 | 
 6 | import React from 'react';
 7 | 
 8 | const REACT_PROPS = [
 9 |   'childContextTypes', 'contextTypes', 'defaultProps', 'propTypes'
10 | ];
11 | const REACT_LIFECYCLES = [
12 |   'componentWillMount', 'componentDidMount', 'componentWillReceiveProps',
13 |   'componentWillUpdate', 'componentDidUpdate', 'componentWillUnmount',
14 |   'render'
15 | ];
16 | 
17 | const noop = () => null;
18 | const trueNoop = () => true;
19 | const es6ify = (mixin) => {
20 |   if (typeof mixin === 'function') {
21 |     // mixin is already es6 style
22 |     return mixin;
23 |   }
24 |   return (Base) => {
25 |     // mixin is old-react style plain object
26 |     // convert to ES6 class
27 |     class NewClass extends Base {}
28 | 
29 |     const clonedMixin = Object.assign({}, mixin);
30 |     // move React props to NewClass's constructor
31 |     upgradeReactProps(NewClass, clonedMixin);
32 |     // merge React props defined as ES7 class static properties
33 |     mergeStaticProps(NewClass, clonedMixin);
34 |     Object.assign(NewClass.prototype, clonedMixin);
35 | 
36 |     return NewClass;
37 |   };
38 | };
39 | 
40 | const mixin = (...mixins) => {
41 |   class Base extends React.Component {}
42 | 
43 |   Base.prototype.shouldComponentUpdate = trueNoop;
44 | 
45 |   // No-ops so we need not check before calling super()
46 |   REACT_LIFECYCLES.forEach(m => Base.prototype[m] = noop);
47 | 
48 |   mixins.reverse();
49 | 
50 |   mixins.forEach(mixin => Base = es6ify(mixin)(Base));
51 |   return Base;
52 | };
53 | 
54 | function upgradeReactProps(klass, mixin) {
55 |   const staticProps = REACT_PROPS.reduce((result, prop) => {
56 |     klass[prop] = mixin[prop];
57 |     delete mixin[prop];
58 |     return result;
59 |   }, {});
60 |   return klass;
61 | }
62 | 
63 | function mergeStaticProps(klass, clonedMixin) {
64 |   const superKlass = Object.getPrototypeOf(klass);
65 |   const mixin = clonedMixin || superKlass;
66 |   Object.keys(mixin).forEach(m => {
67 |     if (typeof m !== 'function') {
68 |       klass[m] = Object.assign(klass[m] || {}, mixin[m]);
69 |     }
70 |   });
71 | 
72 |   return klass;
73 | }
74 | 
75 | export {
76 |   mergeStaticProps
77 | };
78 | export default mixin;
79 | 


--------------------------------------------------------------------------------
/tests/mixin.spec.js:
--------------------------------------------------------------------------------
  1 | import { assert } from 'chai';
  2 | import jsdom from 'mocha-jsdom';
  3 | import mixin, { mergeStaticProps } from '../src/mixin.js';
  4 | import React from 'react/addons';
  5 | 
  6 | const ReactTestUtils = React.addons.TestUtils;
  7 | 
  8 | // es6 mixins
  9 | const es6Mixin1 = base => class extends base {
 10 |   componentWillMount() {
 11 |     super.componentWillMount();
 12 |     this.es6Mixin1_componentMounted = true;
 13 |   }
 14 |   render() {
 15 |     super.render();
 16 |     this.es6Mixin1_rendered = true;
 17 |   }
 18 | };
 19 | 
 20 | const es6Mixin2 = base => class extends base {
 21 |   componentWillMount() {
 22 |     super.componentWillMount();
 23 |     this.es6Mixin2_componentMounted = true;
 24 |   }
 25 |   render() {
 26 |     super.render();
 27 |     this.es6Mixin2_rendered = true;
 28 |   }
 29 | };
 30 | 
 31 | // old-style react mixin (ES5 syntax intentional)
 32 | const reactMixin = {
 33 |   componentWillMount: function () {
 34 |     this.reactMixin_componentMounted = true;
 35 |   },
 36 |   render: function () {
 37 |     this.reactMixin_rendered = true;
 38 |   }
 39 | };
 40 | 
 41 | describe('mixin', () => {
 42 |   jsdom();
 43 | 
 44 |   assert.typeOf(es6Mixin1, 'function');
 45 |   it('works with es6 mixins', () => {
 46 |     class Test extends mixin(es6Mixin1) {
 47 |       componentDidMount() {
 48 |         super.componentDidMount();
 49 |         this.componentMounted = true;
 50 |         assert.isTrue(this.componentMounted);
 51 |         assert.isTrue(this.es6Mixin1_componentMounted);
 52 |         assert.isUndefined(this.es6Mixin2_componentMounted);
 53 |       }
 54 |       render() {
 55 |         super.render();
 56 |         this.rendered = true;
 57 |         assert.isTrue(this.rendered);
 58 |         assert.isTrue(this.es6Mixin1_rendered);
 59 |         assert.isUndefined(this.es6Mixin2_rendered);
 60 |         return (
 61 |           <p>Test</p>
 62 |         );
 63 |       }
 64 |     }
 65 | 
 66 |     ReactTestUtils.renderIntoDocument(<Test/>);
 67 |   });
 68 | 
 69 |   it('works with multiple es6 mixins', () => {
 70 |     class Test extends mixin(es6Mixin1, es6Mixin2) {
 71 |       componentDidMount() {
 72 |         super.componentDidMount();
 73 |         this.componentMounted = true;
 74 |         assert.isTrue(this.componentMounted);
 75 |         assert.isTrue(this.es6Mixin1_componentMounted);
 76 |         assert.isTrue(this.es6Mixin2_componentMounted);
 77 |       }
 78 |       render() {
 79 |         super.render();
 80 |         this.rendered = true;
 81 |         assert.isTrue(this.rendered);
 82 |         assert.isTrue(this.es6Mixin1_rendered);
 83 |         assert.isTrue(this.es6Mixin2_rendered);
 84 |         return (
 85 |           <p>Test</p>
 86 |         );
 87 |       }
 88 |     }
 89 | 
 90 |     ReactTestUtils.renderIntoDocument(<Test/>);
 91 |   });
 92 | 
 93 |   it('works with old style react mixins', () => {
 94 |     assert.typeOf(reactMixin, 'object');
 95 |     class Test extends mixin(reactMixin) {
 96 |       componentDidMount() {
 97 |         super.componentDidMount();
 98 |         this.componentMounted = true;
 99 |         assert.isTrue(this.componentMounted);
100 |         assert.isTrue(this.reactMixin_componentMounted);
101 |       }
102 |       render() {
103 |         super.render();
104 |         this.rendered = true;
105 |         assert.isTrue(this.rendered);
106 |         assert.isTrue(this.reactMixin_rendered);
107 |         return (
108 |           <p>Test</p>
109 |         );
110 |       }
111 |     }
112 | 
113 |     ReactTestUtils.renderIntoDocument(<Test/>);
114 |   });
115 | 
116 |   it('defaults shouldComponentUpdate to truthy', () => {
117 |     class Test extends mixin(es6Mixin1) {
118 |       render() {
119 |         super.render();
120 |         return (
121 |           <p>Test</p>
122 |         );
123 |       }
124 |     }
125 | 
126 |     const testInstance = new Test({});
127 |     assert.ok(testInstance.shouldComponentUpdate());
128 |   });
129 | });
130 | 
131 | describe('static property mixin support', () => {
132 |   jsdom();
133 | 
134 |   const propTypes = {'test': true};
135 | 
136 |   const es6Mixin = base => {
137 |     class newClass extends base {};
138 |     newClass.propTypes = propTypes;
139 |     return newClass;
140 |   }
141 | 
142 |   const es5Mixin = {
143 |     propTypes: propTypes
144 |   };
145 | 
146 |   it('upgrades ES6 properties', () => {
147 |     class Test extends mixin(es6Mixin) {}
148 |     assert.equal(Test.propTypes, propTypes);
149 |   });
150 | 
151 |   it('upgrades ES5 properties', () => {
152 |     class Test extends mixin(es5Mixin) {}
153 |     assert.deepEqual(Test.propTypes, propTypes);
154 |   })
155 | });
156 | 
157 | describe('mergeStaticProps', () => {
158 |   jsdom();
159 | 
160 |   const mixin1 = {
161 |     propTypes: {a: 1}
162 |   };
163 |   const mixin2 = (Base) => {
164 |     class NewClass extends Base {}
165 |     NewClass.propTypes = {
166 |       ...Base.propTypes,
167 |       a: 2,
168 |       b: 1
169 |     };
170 |     return NewClass;
171 |   };
172 | 
173 |   it('merges ES7 static props of final class from its base class', () => {
174 |     class Test extends mixin(mixin2, mixin1) {
175 |       static propTypes = {a: 0, c: 3};
176 |     }
177 |     mergeStaticProps(Test);
178 |     assert.equal(Test.propTypes.a, 2);
179 |     assert.equal(Test.propTypes.b, 1);
180 |     assert.equal(Test.propTypes.c, 3);
181 |   });
182 | });
183 | 


--------------------------------------------------------------------------------