From 0316489dc175e33d08b9eab5dc343ee0f4ef541c Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Mon, 7 Mar 2016 21:54:13 +0200 Subject: [PATCH 01/90] Remove styles from props after render Removing `styles` from `this.props` after render, in order not to hurt pure rendering logic. If `this.props.styles` will remain, then shallow comparing props to newly received props will always return false. (since even if nothing changed, the current props will have `styles: { ... }` and the new props will have `styles: undefined`; --- src/extendReactClass.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index 45b36a7..e4fa5e5 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -15,6 +15,7 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { const WrappedComponent = class extends Component { render () { let styles; + let propsChanged = false; if (this.props.styles) { styles = this.props.styles; @@ -23,12 +24,17 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { styles: defaultStyles }); + propsChanged = true; styles = defaultStyles; } else { styles = {}; } const renderResult = super.render(); + + if(propsChanged) { + delete this.props.styles; + } if (renderResult) { return linkClass(renderResult, styles, options); From 3acb2efe9663068ea3399186e2345b9d1996c828 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sun, 13 Mar 2016 11:26:26 +0000 Subject: [PATCH 02/90] Code style adjustment. --- src/extendReactClass.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index e4fa5e5..75b4dfd 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -14,8 +14,10 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; export default (Component: Object, defaultStyles: Object, options: Object) => { const WrappedComponent = class extends Component { render () { - let styles; - let propsChanged = false; + let styles, + propsChanged; + + propsChanged = false; if (this.props.styles) { styles = this.props.styles; @@ -31,8 +33,8 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { } const renderResult = super.render(); - - if(propsChanged) { + + if (propsChanged) { delete this.props.styles; } From 594ff0a9ed9b97771eaa5649a264599ea4f4ae33 Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Tue, 15 Mar 2016 22:05:08 +0200 Subject: [PATCH 03/90] Add test for pure-render logic --- package.json | 1 + tests/extendReactClass.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/package.json b/package.json index c8e6a8e..2b0a7e4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "jsdom": "^8.0.4", "pragmatist": "^3.0.16", "react": "^0.15.0-alpha.1", + "react-addons-shallow-compare": "^0.14.7", "react-addons-test-utils": "^0.15.0-alpha.1", "react-dom": "^0.15.0-alpha.1" }, diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index 2348bd5..e555f5c 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -6,6 +6,7 @@ import { import React from 'react'; import TestUtils from 'react-addons-test-utils'; +import shallowCompare from 'react-addons-shallow-compare'; import jsdom from 'jsdom'; import extendReactClass from './../src/extendReactClass'; @@ -52,6 +53,36 @@ describe('extendReactClass', () => { TestUtils.renderIntoDocument(); }); + it('does not affect pure-render logic', (done) => { + let Component, + instance, + rendered = false; + + const styles = { + foo: 'foo-1' + }; + + Component = class extends React.Component { + shouldComponentUpdate(newProps) { + if(rendered) { + expect(shallowCompare(this.props, newProps)).to.be.true; + done(); + } + return true; + } + + render () { + rendered = true; + } + }; + + Component = extendReactClass(Component, styles); + + instance = TestUtils.renderIntoDocument(); + + // trigger shouldComponentUpdate + instance.setState({}); + }); }); context('overwriting default styles using "styles" property of the extended component', () => { it('overwrites default styles', (done) => { From 1cad6c75465fa23a3fd99854f16b3621a9dd7b7a Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Tue, 15 Mar 2016 22:15:32 +0200 Subject: [PATCH 04/90] fix shallow-compare version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2b0a7e4..9aee655 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "jsdom": "^8.0.4", "pragmatist": "^3.0.16", "react": "^0.15.0-alpha.1", - "react-addons-shallow-compare": "^0.14.7", + "react-addons-shallow-compare": "^0.15.0-alpha.1", "react-addons-test-utils": "^0.15.0-alpha.1", "react-dom": "^0.15.0-alpha.1" }, From e684039954d0f8ec42e60c8940ed6fb4275a3f1e Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 15 Mar 2016 21:00:34 +0000 Subject: [PATCH 05/90] Style preference. --- tests/extendReactClass.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index e555f5c..0820182 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -55,8 +55,9 @@ describe('extendReactClass', () => { }); it('does not affect pure-render logic', (done) => { let Component, - instance, - rendered = false; + rendered; + + rendered = false const styles = { foo: 'foo-1' @@ -78,11 +79,11 @@ describe('extendReactClass', () => { Component = extendReactClass(Component, styles); - instance = TestUtils.renderIntoDocument(); - + const instance = TestUtils.renderIntoDocument(); + // trigger shouldComponentUpdate instance.setState({}); - }); + }); }); context('overwriting default styles using "styles" property of the extended component', () => { it('overwrites default styles', (done) => { From 135d4f42c966018ca1176ab3a53487a54e5a1f14 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 15 Mar 2016 21:06:34 +0000 Subject: [PATCH 06/90] Bumped dependency versions. --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 9aee655..9aa211f 100644 --- a/package.json +++ b/package.json @@ -22,17 +22,17 @@ "dependencies": { "es6-map": "^0.1.3", "hoist-non-react-statics": "^1.0.5", - "lodash": "^4.5.1", + "lodash": "^4.6.1", "object-unfreeze": "^1.0.2" }, "devDependencies": { "chai": "^3.5.0", - "jsdom": "^8.0.4", - "pragmatist": "^3.0.16", - "react": "^0.15.0-alpha.1", - "react-addons-shallow-compare": "^0.15.0-alpha.1", - "react-addons-test-utils": "^0.15.0-alpha.1", - "react-dom": "^0.15.0-alpha.1" + "jsdom": "^8.1.0", + "pragmatist": "^3.0.21", + "react": "^15.0.0-rc.1", + "react-addons-shallow-compare": "^15.0.0-rc.1", + "react-addons-test-utils": "^15.0.0-rc.1", + "react-dom": "^15.0.0-rc.1" }, "scripts": { "pragmatist": "node ./node_modules/.bin/pragmatist --es5", From de472cf220a00726e007c784bd3df9672d0c0176 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 15 Mar 2016 21:10:45 +0000 Subject: [PATCH 07/90] Style preferences. --- src/extendReactClass.js | 4 ++-- src/linkClass.js | 15 +++++---------- src/wrapStatelessFunction.js | 2 ++ tests/extendReactClass.js | 14 ++++++++------ tests/linkClass.js | 2 +- tests/reactCssModules.js | 2 +- 6 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index 75b4dfd..fd00abd 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -14,8 +14,8 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; export default (Component: Object, defaultStyles: Object, options: Object) => { const WrappedComponent = class extends Component { render () { - let styles, - propsChanged; + let propsChanged, + styles; propsChanged = false; diff --git a/src/linkClass.js b/src/linkClass.js index 618561b..2c3c930 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -1,18 +1,14 @@ import _ from 'lodash'; -import React from 'react'; +import React, { + ReactElement +} from 'react'; import makeConfiguration from './makeConfiguration'; import isIterable from './isIterable'; import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; import objectUnfreeze from 'object-unfreeze'; -import { - ReactElement -} from 'react'; - -let linkElement; - -linkElement = (element, styles, configuration) => { +const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => { let appendClassName, elementIsFrozen, elementShallowCopy; @@ -66,9 +62,8 @@ linkElement = (element, styles, configuration) => { * @param {ReactElement} element * @param {Object} styles CSS modules class map. * @param {CSSModules~Options} userConfiguration - * @returns {ReactElement} */ -export default (element, styles = {}, userConfiguration) => { +export default (element: ReactElement, styles = {}, userConfiguration): ReactElement => { // @see https://github.com/gajus/react-css-modules/pull/30 if (!_.isObject(element)) { return element; diff --git a/src/wrapStatelessFunction.js b/src/wrapStatelessFunction.js index 6ac5cea..878119a 100644 --- a/src/wrapStatelessFunction.js +++ b/src/wrapStatelessFunction.js @@ -1,3 +1,5 @@ +/* eslint-disable react/prop-types */ + import _ from 'lodash'; import React from 'react'; import linkClass from './linkClass'; diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index 0820182..16aed7f 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -1,4 +1,4 @@ -/* eslint-disable max-nested-callbacks */ +/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, react/prop-types, react/no-multi-comp */ import { expect @@ -57,18 +57,20 @@ describe('extendReactClass', () => { let Component, rendered; - rendered = false + rendered = false; const styles = { foo: 'foo-1' }; Component = class extends React.Component { - shouldComponentUpdate(newProps) { - if(rendered) { - expect(shallowCompare(this.props, newProps)).to.be.true; + shouldComponentUpdate (newProps) { + if (rendered) { + expect(shallowCompare(this.props, newProps)).to.equal(true); + done(); } + return true; } @@ -79,7 +81,7 @@ describe('extendReactClass', () => { Component = extendReactClass(Component, styles); - const instance = TestUtils.renderIntoDocument(); + const instance = TestUtils.renderIntoDocument(); // trigger shouldComponentUpdate instance.setState({}); diff --git a/tests/linkClass.js b/tests/linkClass.js index 4abac4a..5825ef3 100644 --- a/tests/linkClass.js +++ b/tests/linkClass.js @@ -1,4 +1,4 @@ -/* eslint-disable max-nested-callbacks */ +/* eslint-disable max-nested-callbacks, react/prefer-stateless-function */ import { expect diff --git a/tests/reactCssModules.js b/tests/reactCssModules.js index 6f4fcf2..16b1f47 100644 --- a/tests/reactCssModules.js +++ b/tests/reactCssModules.js @@ -1,4 +1,4 @@ -/* eslint-disable max-nested-callbacks, react/no-multi-comp, react/prop-types */ +/* eslint-disable max-nested-callbacks, react/no-multi-comp, react/prop-types, react/prefer-stateless-function */ import { expect From 0c3cd852f248d6ad5c23c475fc4f6112002db4f8 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 15 Mar 2016 21:11:01 +0000 Subject: [PATCH 08/90] 3.7.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9aa211f..6a40041 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.5", + "version": "3.7.6", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From e1b4a3da4667a7324a5d6f53f8895be6dc61f7ca Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Wed, 4 May 2016 12:11:37 +0100 Subject: [PATCH 09/90] Create ISSUE_TEMPLATE.md --- ISSUE_TEMPLATE.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 ISSUE_TEMPLATE.md diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..109eb2e --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,5 @@ + From 98938107a80940d048b7702926a8da0d23d3e8a7 Mon Sep 17 00:00:00 2001 From: Sharon Rolel Date: Sun, 29 May 2016 05:14:46 +0300 Subject: [PATCH 10/90] Replace es6-map with a simple implementation of a map. --- package.json | 3 +-- src/generateAppendClassName.js | 2 +- src/makeConfiguration.js | 2 +- src/simple-map.js | 20 ++++++++++++++++++++ 4 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 src/simple-map.js diff --git a/package.json b/package.json index 6a40041..202f34f 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ }, "license": "BSD-3-Clause", "dependencies": { - "es6-map": "^0.1.3", "hoist-non-react-statics": "^1.0.5", "lodash": "^4.6.1", "object-unfreeze": "^1.0.2" @@ -35,7 +34,7 @@ "react-dom": "^15.0.0-rc.1" }, "scripts": { - "pragmatist": "node ./node_modules/.bin/pragmatist --es5", + "pragmatist": "pragmatist --es5", "lint": "npm run pragmatist lint", "test": "npm run pragmatist test --type-annotations", "build": "npm run pragmatist build", diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index b4e6bd8..c896f6e 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -1,4 +1,4 @@ -import Map from 'es6-map'; +import Map from './simple-map'; const stylesIndex = new Map(); diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 22d0298..3254825 100644 --- a/src/makeConfiguration.js +++ b/src/makeConfiguration.js @@ -1,5 +1,5 @@ import _ from 'lodash'; -import Map from 'es6-map'; +import Map from './simple-map'; const userConfigurationIndex = new Map(); diff --git a/src/simple-map.js b/src/simple-map.js new file mode 100644 index 0000000..87a8512 --- /dev/null +++ b/src/simple-map.js @@ -0,0 +1,20 @@ +export default class SimpleMap { + constructor() { + this.keys = []; + this.values = []; + } + + get(key) { + const index = this.keys.indexOf(key); + if (index === -1) { + return; + } + return this.values[index]; + } + + set(key, value) { + this.keys.push(key); + this.values.push(value); + return value; + } +} \ No newline at end of file From 2b8c720aa73d98f504432fcfa8804cd3ce4d92e8 Mon Sep 17 00:00:00 2001 From: Sharon Rolel Date: Sun, 29 May 2016 13:58:52 +0300 Subject: [PATCH 11/90] code style --- src/simple-map.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/simple-map.js b/src/simple-map.js index 87a8512..0906ff7 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,20 +1,19 @@ export default class SimpleMap { - constructor() { + constructor () { this.keys = []; this.values = []; } - get(key) { + get (key) { const index = this.keys.indexOf(key); - if (index === -1) { - return; - } + return this.values[index]; } - - set(key, value) { + + set (key, value) { this.keys.push(key); this.values.push(value); + return value; } -} \ No newline at end of file +} From bcd891fc33c9a56ee95f570b9ad983d6ddf60d9a Mon Sep 17 00:00:00 2001 From: Sharon Rolel Date: Tue, 31 May 2016 10:57:39 +0300 Subject: [PATCH 12/90] Added tests and native Map fallback --- src/simple-map.js | 10 +++++++++- tests/simple-map.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 tests/simple-map.js diff --git a/src/simple-map.js b/src/simple-map.js index 0906ff7..4582e33 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,9 +1,13 @@ -export default class SimpleMap { +export class SimpleMap { constructor () { this.keys = []; this.values = []; } + get size () { + return this.keys.length; + } + get (key) { const index = this.keys.indexOf(key); @@ -17,3 +21,7 @@ export default class SimpleMap { return value; } } + +const exportedMap = typeof Map === 'undefined' ? SimpleMap : Map; + +export default exportedMap; diff --git a/tests/simple-map.js b/tests/simple-map.js new file mode 100644 index 0000000..29d12ac --- /dev/null +++ b/tests/simple-map.js @@ -0,0 +1,35 @@ +import { + expect +} from 'chai'; +import {SimpleMap} from './../src/simple-map'; + +const getTests = (map) => { + return () => { + const values = [ + [1, 'something'], + ['1', 'somethingElse'], + [{}, []], + [null, null] + ]; + + it('should set', () => { + values.forEach(([key, value]) => { + map.set(key, value); + }); + expect(map.size).to.equal(values.length); + }); + + it('should get', () => { + values.forEach(([key, value]) => { + expect(map.get(key)).to.equal(value); + }); + }); + }; +}; + +describe('SimpleMap', () => { + context('simple map with primitive or object as keys', getTests(new SimpleMap())); + if (typeof Map !== 'undefined') { + context('sanity - running tests against native Map', getTests(new Map())); + } +}); From 218279556cd1400fdb081f218b7ef70c34b26e3f Mon Sep 17 00:00:00 2001 From: Gustaf Dalemar Date: Mon, 6 Jun 2016 00:11:14 +0200 Subject: [PATCH 13/90] Removed the caching in makeConfiguration and moved where it is invoked This resolves a memory leak and gives greater performance overall --- src/index.js | 7 +++++-- src/linkClass.js | 7 ++----- src/makeConfiguration.js | 15 +-------------- 3 files changed, 8 insertions(+), 21 deletions(-) diff --git a/src/index.js b/src/index.js index 6c1a78c..38a1901 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import _ from 'lodash'; import extendReactClass from './extendReactClass'; import wrapStatelessFunction from './wrapStatelessFunction'; +import makeConfiguration from './makeConfiguration'; /** * @see https://github.com/gajus/react-css-modules#options @@ -20,10 +21,12 @@ const isReactComponent = (maybeReactComponent: any): boolean => { const functionConstructor = (Component: Function, defaultStyles: Object, options: OptionsType): Function => { let decoratedClass; + const configuration = makeConfiguration(options); + if (isReactComponent(Component)) { - decoratedClass = extendReactClass(Component, defaultStyles, options); + decoratedClass = extendReactClass(Component, defaultStyles, configuration); } else { - decoratedClass = wrapStatelessFunction(Component, defaultStyles, options); + decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration); } if (Component.displayName) { diff --git a/src/linkClass.js b/src/linkClass.js index 2c3c930..29433e2 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -2,7 +2,6 @@ import _ from 'lodash'; import React, { ReactElement } from 'react'; -import makeConfiguration from './makeConfiguration'; import isIterable from './isIterable'; import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; @@ -61,15 +60,13 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec /** * @param {ReactElement} element * @param {Object} styles CSS modules class map. - * @param {CSSModules~Options} userConfiguration + * @param {CSSModules~Options} configuration */ -export default (element: ReactElement, styles = {}, userConfiguration): ReactElement => { +export default (element: ReactElement, styles = {}, configuration = {}): ReactElement => { // @see https://github.com/gajus/react-css-modules/pull/30 if (!_.isObject(element)) { return element; } - const configuration = makeConfiguration(userConfiguration); - return linkElement(element, styles, configuration); }; diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 22d0298..83b2d41 100644 --- a/src/makeConfiguration.js +++ b/src/makeConfiguration.js @@ -1,7 +1,4 @@ import _ from 'lodash'; -import Map from 'es6-map'; - -const userConfigurationIndex = new Map(); /** * @typedef CSSModules~Options @@ -15,15 +12,7 @@ const userConfigurationIndex = new Map(); * @returns {CSSModules~Options} */ export default (userConfiguration = {}) => { - let configuration; - - configuration = userConfigurationIndex.get(userConfiguration); - - if (configuration) { - return configuration; - } - - configuration = { + const configuration = { allowMultiple: false, errorWhenNotFound: true }; @@ -40,7 +29,5 @@ export default (userConfiguration = {}) => { configuration[name] = value; }); - userConfigurationIndex.set(userConfiguration, configuration); - return configuration; }; From 8eeb0df0c2852dfc57c36952444c5135edd67c8a Mon Sep 17 00:00:00 2001 From: Darren Thompson Date: Thu, 16 Jun 2016 12:02:48 -0400 Subject: [PATCH 14/90] Added typeof check to Symbol in isIterable to avoid throwing a ReferenceError in iOS 8.0, mobile Safari 600.1.4 --- src/isIterable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/isIterable.js b/src/isIterable.js index ac6dc72..2c800b1 100644 --- a/src/isIterable.js +++ b/src/isIterable.js @@ -1,6 +1,6 @@ import _ from 'lodash'; -const ITERATOR_SYMBOL = _.isFunction(Symbol) && Symbol.iterator; +const ITERATOR_SYMBOL = typeof Symbol !== 'undefined' && _.isFunction(Symbol) && Symbol.iterator; const OLD_ITERATOR_SYMBOL = '@@iterator'; /** From c29c8b4dce9bef4da48426e4b6b535839c8231dc Mon Sep 17 00:00:00 2001 From: Matias Olivera Date: Sat, 2 Jul 2016 12:43:10 -0300 Subject: [PATCH 15/90] Delete styleName prop after adding the corresponding className React CSS Modules should "consume" the styleName property of a decorated Component as it is not intended for its children. --- src/linkClass.js | 3 ++- tests/linkClass.js | 14 +++++++------- tests/reactCssModules.js | 26 ++++++++++++++++++-------- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/linkClass.js b/src/linkClass.js index 2c3c930..3057a91 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -46,10 +46,11 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec } elementShallowCopy.props.className = appendClassName; - elementShallowCopy.props.styleName = null; } } + delete elementShallowCopy.props.styleName; + if (elementIsFrozen) { Object.freeze(elementShallowCopy.props); Object.freeze(elementShallowCopy); diff --git a/tests/linkClass.js b/tests/linkClass.js index 5825ef3..f1affb3 100644 --- a/tests/linkClass.js +++ b/tests/linkClass.js @@ -99,7 +99,7 @@ describe('linkClass', () => { expect(subject.props.children[0].props.className).to.equal('foo-1'); expect(subject.props.children[1].props.className).to.equal('bar-1'); }); - it('styleName is reset to null', () => { + it('styleName is deleted from props', () => { let subject; subject =
@@ -112,8 +112,8 @@ describe('linkClass', () => { foo: 'foo-1' }); - expect(subject.props.children[0].props.styleName).to.equal(null); - expect(subject.props.children[1].props.styleName).to.equal(null); + expect(subject.props.children[0].props).not.to.have.property('styleName'); + expect(subject.props.children[1].props).not.to.have.property('styleName'); }); }); context('when multiple descendants have styleName and are iterable', () => { @@ -262,7 +262,7 @@ describe('linkClass', () => { }); }); - it('unsets styleName property of the target element', () => { + it('deletes styleName property from the target element', () => { let subject; subject =
; @@ -272,10 +272,10 @@ describe('linkClass', () => { }); expect(subject.props.className).to.deep.equal('foo-1'); - expect(subject.props.styleName).to.deep.equal(null); + expect(subject.props).not.to.have.property('styleName'); }); - it('unsets styleName property of the target element (deep)', () => { + it('deletes styleName property from the target element (deep)', () => { let subject; subject =
@@ -289,6 +289,6 @@ describe('linkClass', () => { }); expect(subject.props.children[0].props.className).to.deep.equal('bar-1'); - expect(subject.props.children[0].props.styleName).to.deep.equal(null); + expect(subject.props.children[0].props).not.to.have.property('styleName'); }); }); diff --git a/tests/reactCssModules.js b/tests/reactCssModules.js index 16b1f47..da17d10 100644 --- a/tests/reactCssModules.js +++ b/tests/reactCssModules.js @@ -38,9 +38,10 @@ describe('reactCssModules', () => { }); context('a ReactComponent renders an element with the styleName prop', () => { context('the component is a class that extends React.Component', () => { - it('that element should contain the equivalent className', () => { - let Foo; + let Foo, + component; + beforeEach(() => { const shallowRenderer = TestUtils.createRenderer(); Foo = class extends React.Component { @@ -55,15 +56,20 @@ describe('reactCssModules', () => { shallowRenderer.render(); - const component = shallowRenderer.getRenderOutput(); - + component = shallowRenderer.getRenderOutput(); + }); + it('that element should contain the equivalent className', () => { expect(component.props.className).to.equal('foo-1'); }); + it('the styleName prop should be "consumed" in the process', () => { + expect(component.props).not.to.have.property('styleName'); + }); }); context('the component is a stateless function component', () => { - it('that element should contain the equivalent className', () => { - let Foo; + let Foo, + component; + beforeEach(() => { const shallowRenderer = TestUtils.createRenderer(); Foo = () => { @@ -76,10 +82,14 @@ describe('reactCssModules', () => { shallowRenderer.render(); - const component = shallowRenderer.getRenderOutput(); - + component = shallowRenderer.getRenderOutput(); + }); + it('that element should contain the equivalent className', () => { expect(component.props.className).to.equal('foo-1'); }); + it('the styleName prop should be "consumed" in the process', () => { + expect(component.props).not.to.have.property('styleName'); + }); }); }); context('a ReactComponent renders nothing', () => { From 7f41d407ed7bd1badf5482e5804c32534b1ac719 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:09:37 +0100 Subject: [PATCH 16/90] Add node v6 to Travis build --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index e07d95b..86981fb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,6 @@ language: node_js node_js: + - 6 - 5 - 4 notifications: From ab9a46c2a0cf7729ed3a2ed0c1cbba46b7e42dcf Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:09:53 +0100 Subject: [PATCH 17/90] Make code linting part of the build task --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index 86981fb..632963e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,3 +6,6 @@ node_js: notifications: email: false sudo: false +script: + - npm run test + - npm run lint From 6432438f5aac1719ef468fc5b88c2946ba73c2d0 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:15:45 +0100 Subject: [PATCH 18/90] Use Babel to build --- .babelrc | 24 ++++++++++++++++++++++++ package.json | 12 +++++++++--- 2 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e893433 --- /dev/null +++ b/.babelrc @@ -0,0 +1,24 @@ +{ + "presets": [ + "es2015", + "stage-0" + ], + "plugins": [ + "add-module-exports" + ], + "env": { + "development": { + "plugins": [ + "typecheck", + "syntax-flow", + "transform-flow-strip-types" + ] + }, + "production": { + "plugins": [ + "syntax-flow", + "transform-flow-strip-types" + ] + } + } +} diff --git a/package.json b/package.json index 6a40041..8f9d857 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,13 @@ "object-unfreeze": "^1.0.2" }, "devDependencies": { + "babel-cli": "^6.10.1", + "babel-plugin-add-module-exports": "^0.2.1", + "babel-plugin-syntax-flow": "^6.8.0", + "babel-plugin-transform-flow-strip-types": "^6.8.0", + "babel-plugin-typecheck": "^3.9.0", + "babel-preset-es2015": "^6.9.0", + "babel-preset-stage-0": "^6.5.0", "chai": "^3.5.0", "jsdom": "^8.1.0", "pragmatist": "^3.0.21", @@ -38,10 +45,9 @@ "pragmatist": "node ./node_modules/.bin/pragmatist --es5", "lint": "npm run pragmatist lint", "test": "npm run pragmatist test --type-annotations", - "build": "npm run pragmatist build", + "build": "babel ./src --out-dir ./dist", "watch": "npm run pragmatist watch", "watch-lint": "npm run pragmatist watch-lint", - "watch-test": "npm run pragmatist watch-test --type-annotations", - "watch-build": "npm run pragmatist watch-build" + "watch-test": "npm run pragmatist watch-test --type-annotations" } } From 66dcc7116d5febe64e70390498418cf46a52bac2 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:30:20 +0100 Subject: [PATCH 19/90] Use mocha to run tests --- .babelrc | 20 +++----------------- package.json | 8 ++++---- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/.babelrc b/.babelrc index e893433..34838cd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,24 +1,10 @@ { "presets": [ "es2015", - "stage-0" + "stage-0", + "react" ], "plugins": [ "add-module-exports" - ], - "env": { - "development": { - "plugins": [ - "typecheck", - "syntax-flow", - "transform-flow-strip-types" - ] - }, - "production": { - "plugins": [ - "syntax-flow", - "transform-flow-strip-types" - ] - } - } + ] } diff --git a/package.json b/package.json index 8f9d857..a01ebd1 100644 --- a/package.json +++ b/package.json @@ -28,13 +28,13 @@ "devDependencies": { "babel-cli": "^6.10.1", "babel-plugin-add-module-exports": "^0.2.1", - "babel-plugin-syntax-flow": "^6.8.0", - "babel-plugin-transform-flow-strip-types": "^6.8.0", - "babel-plugin-typecheck": "^3.9.0", "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", + "babel-register": "^6.9.0", "chai": "^3.5.0", "jsdom": "^8.1.0", + "mocha": "^2.5.3", "pragmatist": "^3.0.21", "react": "^15.0.0-rc.1", "react-addons-shallow-compare": "^15.0.0-rc.1", @@ -44,7 +44,7 @@ "scripts": { "pragmatist": "node ./node_modules/.bin/pragmatist --es5", "lint": "npm run pragmatist lint", - "test": "npm run pragmatist test --type-annotations", + "test": "mocha --compilers js:babel-register ./tests/**/*.js", "build": "babel ./src --out-dir ./dist", "watch": "npm run pragmatist watch", "watch-lint": "npm run pragmatist watch-lint", From c93adf62e512165f3c5db990db1a5e5a67ab4233 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:33:02 +0100 Subject: [PATCH 20/90] Use ESLint to lint code --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a01ebd1..78419c9 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,8 @@ "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.9.0", "chai": "^3.5.0", + "eslint": "^3.0.0", + "eslint-config-canonical": "^1.7.12", "jsdom": "^8.1.0", "mocha": "^2.5.3", "pragmatist": "^3.0.21", @@ -43,7 +45,7 @@ }, "scripts": { "pragmatist": "node ./node_modules/.bin/pragmatist --es5", - "lint": "npm run pragmatist lint", + "lint": "eslint ./src ./tests", "test": "mocha --compilers js:babel-register ./tests/**/*.js", "build": "babel ./src --out-dir ./dist", "watch": "npm run pragmatist watch", From c93ed50a98d5b0601e114a10f68d4fa00807ec5c Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:33:14 +0100 Subject: [PATCH 21/90] Fix linting errors --- src/extendReactClass.js | 2 +- src/index.js | 6 +++--- src/linkClass.js | 2 +- tests/extendReactClass.js | 1 - tests/linkClass.js | 1 - tests/makeConfiguration.js | 1 - tests/reactCssModules.js | 1 - 7 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index fd00abd..b5cfb2d 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -1,9 +1,9 @@ /* eslint-disable react/prop-types */ -import linkClass from './linkClass'; import React from 'react'; import _ from 'lodash'; import hoistNonReactStatics from 'hoist-non-react-statics'; +import linkClass from './linkClass'; /** * @param {ReactClass} Component diff --git a/src/index.js b/src/index.js index 6c1a78c..95a6ea4 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import wrapStatelessFunction from './wrapStatelessFunction'; /** * @see https://github.com/gajus/react-css-modules#options */ -type OptionsType = {}; +type TypeOptions = {}; /** * Determines if the given object has the signature of a class that inherits React.Component. @@ -17,7 +17,7 @@ const isReactComponent = (maybeReactComponent: any): boolean => { /** * When used as a function. */ -const functionConstructor = (Component: Function, defaultStyles: Object, options: OptionsType): Function => { +const functionConstructor = (Component: Function, defaultStyles: Object, options: TypeOptions): Function => { let decoratedClass; if (isReactComponent(Component)) { @@ -38,7 +38,7 @@ const functionConstructor = (Component: Function, defaultStyles: Object, options /** * When used as a ES7 decorator. */ -const decoratorConstructor = (defaultStyles: Object, options: OptionsType): Function => { +const decoratorConstructor = (defaultStyles: Object, options: TypeOptions): Function => { return (Component: Function) => { return functionConstructor(Component, defaultStyles, options); }; diff --git a/src/linkClass.js b/src/linkClass.js index 2c3c930..a569e25 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -2,11 +2,11 @@ import _ from 'lodash'; import React, { ReactElement } from 'react'; +import objectUnfreeze from 'object-unfreeze'; import makeConfiguration from './makeConfiguration'; import isIterable from './isIterable'; import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; -import objectUnfreeze from 'object-unfreeze'; const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => { let appendClassName, diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index 16aed7f..fe51a78 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -3,7 +3,6 @@ import { expect } from 'chai'; - import React from 'react'; import TestUtils from 'react-addons-test-utils'; import shallowCompare from 'react-addons-shallow-compare'; diff --git a/tests/linkClass.js b/tests/linkClass.js index 5825ef3..ebbc12b 100644 --- a/tests/linkClass.js +++ b/tests/linkClass.js @@ -3,7 +3,6 @@ import { expect } from 'chai'; - import React from 'react'; import TestUtils from 'react-addons-test-utils'; import jsdom from 'jsdom'; diff --git a/tests/makeConfiguration.js b/tests/makeConfiguration.js index 815fe52..7934771 100644 --- a/tests/makeConfiguration.js +++ b/tests/makeConfiguration.js @@ -3,7 +3,6 @@ import { expect } from 'chai'; - import makeConfiguration from './../src/makeConfiguration'; describe('makeConfiguration', () => { diff --git a/tests/reactCssModules.js b/tests/reactCssModules.js index 16b1f47..82761e8 100644 --- a/tests/reactCssModules.js +++ b/tests/reactCssModules.js @@ -3,7 +3,6 @@ import { expect } from 'chai'; - import React from 'react'; import ReactDOM from 'react-dom'; import TestUtils from 'react-addons-test-utils'; From fe9e555c832588222b4c672617be39b9b91975e2 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:35:43 +0100 Subject: [PATCH 22/90] Remove Pragmatist --- package.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index 78419c9..3c42492 100644 --- a/package.json +++ b/package.json @@ -37,19 +37,14 @@ "eslint-config-canonical": "^1.7.12", "jsdom": "^8.1.0", "mocha": "^2.5.3", - "pragmatist": "^3.0.21", "react": "^15.0.0-rc.1", "react-addons-shallow-compare": "^15.0.0-rc.1", "react-addons-test-utils": "^15.0.0-rc.1", "react-dom": "^15.0.0-rc.1" }, "scripts": { - "pragmatist": "node ./node_modules/.bin/pragmatist --es5", "lint": "eslint ./src ./tests", "test": "mocha --compilers js:babel-register ./tests/**/*.js", - "build": "babel ./src --out-dir ./dist", - "watch": "npm run pragmatist watch", - "watch-lint": "npm run pragmatist watch-lint", - "watch-test": "npm run pragmatist watch-test --type-annotations" + "build": "babel ./src --out-dir ./dist" } } From bb19d7c123b88638753ec223f1c41c0647685355 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 17:46:26 +0100 Subject: [PATCH 23/90] 3.7.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f6dbd8a..aff6f0c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.6", + "version": "3.7.7", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From 856a521255ab1cadbb6dd83a6dc310dd878e0f22 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 18:10:28 +0100 Subject: [PATCH 24/90] Add missing ESLint config --- .eslintrc | 3 +++ .gitignore | 1 + 2 files changed, 4 insertions(+) create mode 100644 .eslintrc diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..40288f8 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "canonical" +} diff --git a/.gitignore b/.gitignore index cf9c7f9..d54786c 100755 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ dist !.npmignore !.babelrc !.travis.yml +!.eslintrc From 991cd9e77517f03a972b449b6b63c57833bfcdea Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Mon, 4 Jul 2016 18:17:57 +0100 Subject: [PATCH 25/90] Remove node v4 from the test matrix Node v4 is supported. However, NPM@v2 is breking the ESLint dependency resolution. --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 632963e..3a0df49 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,7 +2,6 @@ language: node_js node_js: - 6 - 5 - - 4 notifications: email: false sudo: false From 93b16925e717b8c536d8d1855123df7195f439f7 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 19 Jul 2016 22:13:18 +0530 Subject: [PATCH 26/90] Add syntax for ExtractTextPlugin v2 --- README.md | 48 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 5c8c0ef..91cbc55 100644 --- a/README.md +++ b/README.md @@ -182,22 +182,48 @@ Setup: * Install [`style-loader`](https://www.npmjs.com/package/style-loader). * Install [`css-loader`](https://www.npmjs.com/package/css-loader). * Use [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) to extract chunks of CSS into a single stylesheet. + * Setup `/\.css$/` loader: -```js -{ - test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') -} -``` + * ExtractTextPlugin v1x: + + ```js + { + test: /\.css$/, + loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') + } + ``` + + * ExtractTextPlugin v2x: + + ```js + { + test: /\.css$/, + loader: ExtractTextPlugin.extract({ + notExtractLoader: 'style-loader', + loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url!postcss', + }), + } + ``` * Setup `extract-text-webpack-plugin` plugin: -```js -new ExtractTextPlugin('app.css', { - allChunks: true -}) -``` + * ExtractTextPlugin v1x: + + ```js + new ExtractTextPlugin('app.css', { + allChunks: true + }) + ``` + + * ExtractTextPlugin v2x: + + ```js + new ExtractTextPlugin({ + filename: 'app.css', + allChunks: true + }) + ``` Refer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) for an example of a complete setup. From 2f8d69b5158ce8fb9de27e9613121eb29cb03bd9 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Wed, 20 Jul 2016 11:08:41 +0100 Subject: [PATCH 27/90] Use babel-plugin-lodash plugin --- .babelrc | 3 ++- package.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 34838cd..159cafb 100644 --- a/.babelrc +++ b/.babelrc @@ -5,6 +5,7 @@ "react" ], "plugins": [ - "add-module-exports" + "add-module-exports", + "lodash" ] } diff --git a/package.json b/package.json index aff6f0c..eb7ae50 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "devDependencies": { "babel-cli": "^6.10.1", "babel-plugin-add-module-exports": "^0.2.1", + "babel-plugin-lodash": "^3.2.5", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", From 66dd8c51bbe2b53bbeffcd94fa785c5d2e00aa72 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Wed, 20 Jul 2016 11:08:46 +0100 Subject: [PATCH 28/90] 3.7.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eb7ae50..9a49f02 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.7", + "version": "3.7.8", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From 1e427d875b5bcd04409907f83d99ed488bc71bdf Mon Sep 17 00:00:00 2001 From: kevin940726 Date: Thu, 28 Jul 2016 10:57:18 +0800 Subject: [PATCH 29/90] add babel transform intend to fix #84 --- .babelrc | 5 ++++- package.json | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 159cafb..197c614 100644 --- a/.babelrc +++ b/.babelrc @@ -6,6 +6,9 @@ ], "plugins": [ "add-module-exports", - "lodash" + "lodash", + "transform-class-properties", + ["transform-es2015-classes", { "loose": true }], + "transform-proto-to-assign" ] } diff --git a/package.json b/package.json index 9a49f02..c273366 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "babel-cli": "^6.10.1", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-lodash": "^3.2.5", + "babel-plugin-transform-proto-to-assign": "^6.9.0", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", From 35b4a5377f3cb2d9aadf7b85e98be90a4162ae0f Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Thu, 28 Jul 2016 14:12:45 +0100 Subject: [PATCH 30/90] 3.7.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c273366..e8a0947 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.8", + "version": "3.7.9", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From c8f67992315411c61e40eb7fdb96bd1521db354f Mon Sep 17 00:00:00 2001 From: "Christian.Schilling" Date: Thu, 4 Aug 2016 13:33:59 +0200 Subject: [PATCH 31/90] Fix failing tests for IE11 map compatibility (fixes https://github.com/gajus/react-css-modules/issues/157) --- src/generateAppendClassName.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index c896f6e..3bbb23f 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -15,7 +15,8 @@ export default (styles, styleNames: Array, errorWhenNotFound: boolean): return styleNameIndex; } } else { - stylesIndexMap = stylesIndex.set(styles, new Map()); + stylesIndexMap = new Map(); + stylesIndex.set(styles, new Map()); } appendClassName = ''; From 478f0e6ff27317fdd5e62e60500d30a1734fcb6c Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Tue, 9 Aug 2016 11:38:49 +0100 Subject: [PATCH 32/90] 3.7.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e8a0947..369d02c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css", "modules" ], - "version": "3.7.9", + "version": "3.7.10", "author": { "name": "Gajus Kuizinas", "email": "gajus@gajus.com", From e49229fc7a582c257b4f014ccc5bc8ec31c479a5 Mon Sep 17 00:00:00 2001 From: fix-fix Date: Fri, 19 Aug 2016 14:47:50 +0500 Subject: [PATCH 33/90] Fix typo in class name example Cell element from the rendering output example has a class that looks like some mix of `styles.row` and `styles.cell`, but it should have exactly the same class from `styles.cell` as the other cell element. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5c8c0ef..6baaa37 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Rendering the component will produce a markup similar to: ```js
-
A0
+
A0
B0
From 1cb161d04fe05ecd561199511d24c476bb32643d Mon Sep 17 00:00:00 2001 From: Kinsey Van Ost Date: Fri, 2 Sep 2016 02:21:29 -0700 Subject: [PATCH 34/90] docs: change composting to composing (#175) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f21089c..8ffae15 100644 --- a/README.md +++ b/README.md @@ -574,7 +574,7 @@ This pattern emerged with the advent of OOCSS. The biggest disadvantage of this ### Class Composition Using CSS Preprocessors -This section of the document is included as a learning exercise to broaden the understanding about the origin of Class Composition. CSS Modules support a native method of composting CSS Modules using [`composes`](https://github.com/css-modules/css-modules#composition) keyword. CSS Preprocessor is not required. +This section of the document is included as a learning exercise to broaden the understanding about the origin of Class Composition. CSS Modules support a native method of composing CSS Modules using [`composes`](https://github.com/css-modules/css-modules#composition) keyword. CSS Preprocessor is not required. You can write compositions in SCSS using [`@extend`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) keyword and using [Mixin Directives](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), e.g. From fb3ca5e6b287f20b68776835cc934acbd7b51d5b Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sat, 10 Sep 2016 11:00:47 +0100 Subject: [PATCH 35/90] fix: implement SimpleMap without using getters/setters Squashed commit of the following: commit ea31b3a8b0a60f2e428a61fdf28f6cc0f8d469e2 Author: Gajus Kuizinas Date: Sat Sep 10 10:59:27 2016 +0100 refactor: remove SimpleMap factory commit 9549afdab039fb151387c65214e78edaef3a3ada Merge: 1cb161d fb31781 Author: Gajus Kuizinas Date: Sat Sep 10 10:54:33 2016 +0100 Merge branch 'simple-map-ie8-fix' of https://github.com/lbeschastny/react-css-modules into lbeschastny-simple-map-ie8-fix commit fb31781461b20de1bb5815c18d65a66fa626d89e Author: Leonid Beschastny Date: Mon Aug 29 12:00:17 2016 +0300 Add createSimpleMap factory function to defer SimpleMap creation commit 7e6a9f9d443d6307b230b7a13e1487c73f5eaaff Author: Leonid Beschastny Date: Mon Aug 29 11:52:35 2016 +0300 Replace size getter in SimpleMap class with regularly updated property --- src/simple-map.js | 6 ++---- tests/simple-map.js | 4 +++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/simple-map.js b/src/simple-map.js index 4582e33..ce412b7 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,13 +1,10 @@ export class SimpleMap { constructor () { + this.size = 0; this.keys = []; this.values = []; } - get size () { - return this.keys.length; - } - get (key) { const index = this.keys.indexOf(key); @@ -17,6 +14,7 @@ export class SimpleMap { set (key, value) { this.keys.push(key); this.values.push(value); + this.size = this.keys.length; return value; } diff --git a/tests/simple-map.js b/tests/simple-map.js index 29d12ac..9057eca 100644 --- a/tests/simple-map.js +++ b/tests/simple-map.js @@ -1,7 +1,9 @@ import { expect } from 'chai'; -import {SimpleMap} from './../src/simple-map'; +import { + SimpleMap +} from './../src/simple-map'; const getTests = (map) => { return () => { From 1aad1a0df44edf49a30ff38f0fa77d04e6e7ff98 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Sat, 10 Sep 2016 11:11:38 +0100 Subject: [PATCH 36/90] style: correct indentation --- src/extendReactClass.js | 66 ++--- src/generateAppendClassName.js | 54 ++-- src/index.js | 44 ++-- src/isIterable.js | 20 +- src/linkClass.js | 78 +++--- src/makeConfiguration.js | 28 +- src/parseStyleName.js | 24 +- src/simple-map.js | 30 +-- src/wrapStatelessFunction.js | 46 ++-- tests/extendReactClass.js | 212 +++++++-------- tests/linkClass.js | 459 ++++++++++++++++----------------- tests/makeConfiguration.js | 54 ++-- tests/reactCssModules.js | 287 +++++++++++---------- tests/simple-map.js | 50 ++-- tests/wrapStatelessFunction.js | 114 ++++---- 15 files changed, 783 insertions(+), 783 deletions(-) diff --git a/src/extendReactClass.js b/src/extendReactClass.js index b5cfb2d..4e56567 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -12,39 +12,39 @@ import linkClass from './linkClass'; * @returns {ReactClass} */ export default (Component: Object, defaultStyles: Object, options: Object) => { - const WrappedComponent = class extends Component { - render () { - let propsChanged, - styles; - - propsChanged = false; - - if (this.props.styles) { - styles = this.props.styles; - } else if (_.isObject(defaultStyles)) { - this.props = _.assign({}, this.props, { - styles: defaultStyles - }); - - propsChanged = true; - styles = defaultStyles; - } else { - styles = {}; - } - - const renderResult = super.render(); - - if (propsChanged) { - delete this.props.styles; - } - - if (renderResult) { - return linkClass(renderResult, styles, options); - } - - return React.createElement('noscript'); - } + const WrappedComponent = class extends Component { + render () { + let propsChanged, + styles; + + propsChanged = false; + + if (this.props.styles) { + styles = this.props.styles; + } else if (_.isObject(defaultStyles)) { + this.props = _.assign({}, this.props, { + styles: defaultStyles + }); + + propsChanged = true; + styles = defaultStyles; + } else { + styles = {}; + } + + const renderResult = super.render(); + + if (propsChanged) { + delete this.props.styles; + } + + if (renderResult) { + return linkClass(renderResult, styles, options); + } + + return React.createElement('noscript'); + } }; - return hoistNonReactStatics(WrappedComponent, Component); + return hoistNonReactStatics(WrappedComponent, Component); }; diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index 3bbb23f..e0fe7df 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -3,39 +3,39 @@ import Map from './simple-map'; const stylesIndex = new Map(); export default (styles, styleNames: Array, errorWhenNotFound: boolean): string => { - let appendClassName, - stylesIndexMap; + let appendClassName, + stylesIndexMap; - stylesIndexMap = stylesIndex.get(styles); + stylesIndexMap = stylesIndex.get(styles); - if (stylesIndexMap) { - const styleNameIndex = stylesIndexMap.get(styleNames); + if (stylesIndexMap) { + const styleNameIndex = stylesIndexMap.get(styleNames); - if (styleNameIndex) { - return styleNameIndex; - } - } else { - stylesIndexMap = new Map(); - stylesIndex.set(styles, new Map()); + if (styleNameIndex) { + return styleNameIndex; } - - appendClassName = ''; - - for (const styleName in styleNames) { - if (styleNames.hasOwnProperty(styleName)) { - const className = styles[styleNames[styleName]]; - - if (className) { - appendClassName += ' ' + className; - } else if (errorWhenNotFound === true) { - throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.'); - } - } + } else { + stylesIndexMap = new Map(); + stylesIndex.set(styles, new Map()); + } + + appendClassName = ''; + + for (const styleName in styleNames) { + if (styleNames.hasOwnProperty(styleName)) { + const className = styles[styleNames[styleName]]; + + if (className) { + appendClassName += ' ' + className; + } else if (errorWhenNotFound === true) { + throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.'); + } } + } - appendClassName = appendClassName.trim(); + appendClassName = appendClassName.trim(); - stylesIndexMap.set(styleNames, appendClassName); + stylesIndexMap.set(styleNames, appendClassName); - return appendClassName; + return appendClassName; }; diff --git a/src/index.js b/src/index.js index 7ee7e4e..b913b29 100644 --- a/src/index.js +++ b/src/index.js @@ -12,45 +12,45 @@ type TypeOptions = {}; * Determines if the given object has the signature of a class that inherits React.Component. */ const isReactComponent = (maybeReactComponent: any): boolean => { - return 'prototype' in maybeReactComponent && _.isFunction(maybeReactComponent.prototype.render); + return 'prototype' in maybeReactComponent && _.isFunction(maybeReactComponent.prototype.render); }; /** * When used as a function. */ const functionConstructor = (Component: Function, defaultStyles: Object, options: TypeOptions): Function => { - let decoratedClass; + let decoratedClass; - const configuration = makeConfiguration(options); + const configuration = makeConfiguration(options); - if (isReactComponent(Component)) { - decoratedClass = extendReactClass(Component, defaultStyles, configuration); - } else { - decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration); - } + if (isReactComponent(Component)) { + decoratedClass = extendReactClass(Component, defaultStyles, configuration); + } else { + decoratedClass = wrapStatelessFunction(Component, defaultStyles, configuration); + } - if (Component.displayName) { - decoratedClass.displayName = Component.displayName; - } else { - decoratedClass.displayName = Component.name; - } + if (Component.displayName) { + decoratedClass.displayName = Component.displayName; + } else { + decoratedClass.displayName = Component.name; + } - return decoratedClass; + return decoratedClass; }; /** * When used as a ES7 decorator. */ const decoratorConstructor = (defaultStyles: Object, options: TypeOptions): Function => { - return (Component: Function) => { - return functionConstructor(Component, defaultStyles, options); - }; + return (Component: Function) => { + return functionConstructor(Component, defaultStyles, options); + }; }; export default (...args) => { - if (_.isFunction(args[0])) { - return functionConstructor(args[0], args[1], args[2]); - } else { - return decoratorConstructor(args[0], args[1]); - } + if (_.isFunction(args[0])) { + return functionConstructor(args[0], args[1], args[2]); + } else { + return decoratorConstructor(args[0], args[1]); + } }; diff --git a/src/isIterable.js b/src/isIterable.js index 2c800b1..67d0a94 100644 --- a/src/isIterable.js +++ b/src/isIterable.js @@ -8,17 +8,17 @@ const OLD_ITERATOR_SYMBOL = '@@iterator'; * @see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols */ export default (maybeIterable: any): boolean => { - let iterator; + let iterator; - if (!_.isObject(maybeIterable)) { - return false; - } + if (!_.isObject(maybeIterable)) { + return false; + } - if (ITERATOR_SYMBOL) { - iterator = maybeIterable[ITERATOR_SYMBOL]; - } else { - iterator = maybeIterable[OLD_ITERATOR_SYMBOL]; - } + if (ITERATOR_SYMBOL) { + iterator = maybeIterable[ITERATOR_SYMBOL]; + } else { + iterator = maybeIterable[OLD_ITERATOR_SYMBOL]; + } - return _.isFunction(iterator); + return _.isFunction(iterator); }; diff --git a/src/linkClass.js b/src/linkClass.js index ea199e9..64a1636 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -8,54 +8,54 @@ import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => { - let appendClassName, - elementIsFrozen, - elementShallowCopy; + let appendClassName, + elementIsFrozen, + elementShallowCopy; - elementShallowCopy = element; + elementShallowCopy = element; - if (Object.isFrozen && Object.isFrozen(elementShallowCopy)) { - elementIsFrozen = true; + if (Object.isFrozen && Object.isFrozen(elementShallowCopy)) { + elementIsFrozen = true; // https://github.com/facebook/react/blob/v0.13.3/src/classic/element/ReactElement.js#L131 - elementShallowCopy = objectUnfreeze(elementShallowCopy); - elementShallowCopy.props = objectUnfreeze(elementShallowCopy.props); - } + elementShallowCopy = objectUnfreeze(elementShallowCopy); + elementShallowCopy.props = objectUnfreeze(elementShallowCopy.props); + } - const styleNames = parseStyleName(elementShallowCopy.props.styleName || '', configuration.allowMultiple); + const styleNames = parseStyleName(elementShallowCopy.props.styleName || '', configuration.allowMultiple); - if (React.isValidElement(elementShallowCopy.props.children)) { - elementShallowCopy.props.children = linkElement(React.Children.only(elementShallowCopy.props.children), styles, configuration); - } else if (_.isArray(elementShallowCopy.props.children) || isIterable(elementShallowCopy.props.children)) { - elementShallowCopy.props.children = React.Children.map(elementShallowCopy.props.children, (node) => { - if (React.isValidElement(node)) { - return linkElement(node, styles, configuration); - } else { - return node; - } - }); - } + if (React.isValidElement(elementShallowCopy.props.children)) { + elementShallowCopy.props.children = linkElement(React.Children.only(elementShallowCopy.props.children), styles, configuration); + } else if (_.isArray(elementShallowCopy.props.children) || isIterable(elementShallowCopy.props.children)) { + elementShallowCopy.props.children = React.Children.map(elementShallowCopy.props.children, (node) => { + if (React.isValidElement(node)) { + return linkElement(node, styles, configuration); + } else { + return node; + } + }); + } - if (styleNames.length) { - appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound); + if (styleNames.length) { + appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound); - if (appendClassName) { - if (elementShallowCopy.props.className) { - appendClassName = elementShallowCopy.props.className + ' ' + appendClassName; - } + if (appendClassName) { + if (elementShallowCopy.props.className) { + appendClassName = elementShallowCopy.props.className + ' ' + appendClassName; + } - elementShallowCopy.props.className = appendClassName; - } + elementShallowCopy.props.className = appendClassName; } + } - delete elementShallowCopy.props.styleName; + delete elementShallowCopy.props.styleName; - if (elementIsFrozen) { - Object.freeze(elementShallowCopy.props); - Object.freeze(elementShallowCopy); - } + if (elementIsFrozen) { + Object.freeze(elementShallowCopy.props); + Object.freeze(elementShallowCopy); + } - return elementShallowCopy; + return elementShallowCopy; }; /** @@ -65,9 +65,9 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec */ export default (element: ReactElement, styles = {}, configuration = {}): ReactElement => { // @see https://github.com/gajus/react-css-modules/pull/30 - if (!_.isObject(element)) { - return element; - } + if (!_.isObject(element)) { + return element; + } - return linkElement(element, styles, configuration); + return linkElement(element, styles, configuration); }; diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 83b2d41..0eae15f 100644 --- a/src/makeConfiguration.js +++ b/src/makeConfiguration.js @@ -12,22 +12,22 @@ import _ from 'lodash'; * @returns {CSSModules~Options} */ export default (userConfiguration = {}) => { - const configuration = { - allowMultiple: false, - errorWhenNotFound: true - }; + const configuration = { + allowMultiple: false, + errorWhenNotFound: true + }; - _.forEach(userConfiguration, (value, name) => { - if (_.isUndefined(configuration[name])) { - throw new Error('Unknown configuration property "' + name + '".'); - } + _.forEach(userConfiguration, (value, name) => { + if (_.isUndefined(configuration[name])) { + throw new Error('Unknown configuration property "' + name + '".'); + } - if (!_.isBoolean(value)) { - throw new Error('"' + name + '" property value must be a boolean.'); - } + if (!_.isBoolean(value)) { + throw new Error('"' + name + '" property value must be a boolean.'); + } - configuration[name] = value; - }); + configuration[name] = value; + }); - return configuration; + return configuration; }; diff --git a/src/parseStyleName.js b/src/parseStyleName.js index 39c328a..7b5ee55 100644 --- a/src/parseStyleName.js +++ b/src/parseStyleName.js @@ -3,20 +3,20 @@ import _ from 'lodash'; const styleNameIndex = {}; export default (styleNamePropertyValue: string, allowMultiple: boolean): Array => { - let styleNames; + let styleNames; - if (styleNameIndex[styleNamePropertyValue]) { - styleNames = styleNameIndex[styleNamePropertyValue]; - } else { - styleNames = _.trim(styleNamePropertyValue).split(' '); - styleNames = _.filter(styleNames); + if (styleNameIndex[styleNamePropertyValue]) { + styleNames = styleNameIndex[styleNamePropertyValue]; + } else { + styleNames = _.trim(styleNamePropertyValue).split(' '); + styleNames = _.filter(styleNames); - styleNameIndex[styleNamePropertyValue] = styleNames; - } + styleNameIndex[styleNamePropertyValue] = styleNames; + } - if (allowMultiple === false && styleNames.length > 1) { - throw new Error('ReactElement styleName property defines multiple module names ("' + styleNamePropertyValue + '").'); - } + if (allowMultiple === false && styleNames.length > 1) { + throw new Error('ReactElement styleName property defines multiple module names ("' + styleNamePropertyValue + '").'); + } - return styleNames; + return styleNames; }; diff --git a/src/simple-map.js b/src/simple-map.js index ce412b7..435ae25 100644 --- a/src/simple-map.js +++ b/src/simple-map.js @@ -1,23 +1,23 @@ export class SimpleMap { - constructor () { - this.size = 0; - this.keys = []; - this.values = []; - } + constructor () { + this.size = 0; + this.keys = []; + this.values = []; + } - get (key) { - const index = this.keys.indexOf(key); + get (key) { + const index = this.keys.indexOf(key); - return this.values[index]; - } + return this.values[index]; + } - set (key, value) { - this.keys.push(key); - this.values.push(value); - this.size = this.keys.length; + set (key, value) { + this.keys.push(key); + this.values.push(value); + this.size = this.keys.length; - return value; - } + return value; + } } const exportedMap = typeof Map === 'undefined' ? SimpleMap : Map; diff --git a/src/wrapStatelessFunction.js b/src/wrapStatelessFunction.js index 878119a..35ad3ba 100644 --- a/src/wrapStatelessFunction.js +++ b/src/wrapStatelessFunction.js @@ -8,34 +8,34 @@ import linkClass from './linkClass'; * @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components */ export default (Component: Function, defaultStyles: Object, options: Object): Function => { - const WrappedComponent = (props = {}, ...args) => { - let styles, - useProps; + const WrappedComponent = (props = {}, ...args) => { + let styles, + useProps; - if (props.styles) { - useProps = props; - styles = props.styles; - } else if (_.isObject(defaultStyles)) { - useProps = _.assign({}, props, { - styles: defaultStyles - }); + if (props.styles) { + useProps = props; + styles = props.styles; + } else if (_.isObject(defaultStyles)) { + useProps = _.assign({}, props, { + styles: defaultStyles + }); - styles = defaultStyles; - } else { - useProps = props; - styles = {}; - } + styles = defaultStyles; + } else { + useProps = props; + styles = {}; + } - const renderResult = Component(useProps, ...args); + const renderResult = Component(useProps, ...args); - if (renderResult) { - return linkClass(renderResult, styles, options); - } + if (renderResult) { + return linkClass(renderResult, styles, options); + } - return React.createElement('noscript'); - }; + return React.createElement('noscript'); + }; - _.assign(WrappedComponent, Component); + _.assign(WrappedComponent, Component); - return WrappedComponent; + return WrappedComponent; }; diff --git a/tests/extendReactClass.js b/tests/extendReactClass.js index fe51a78..83d308d 100644 --- a/tests/extendReactClass.js +++ b/tests/extendReactClass.js @@ -1,4 +1,4 @@ -/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, react/prop-types, react/no-multi-comp */ +/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, react/prop-types, react/no-multi-comp, class-methods-use-this */ import { expect @@ -10,140 +10,140 @@ import jsdom from 'jsdom'; import extendReactClass from './../src/extendReactClass'; describe('extendReactClass', () => { - beforeEach(() => { - global.document = jsdom.jsdom(''); + beforeEach(() => { + global.document = jsdom.jsdom(''); - global.window = document.defaultView; - }); - context('using default styles', () => { - it('exposes styles through this.props.styles property', (done) => { - let Component; + global.window = document.defaultView; + }); + context('using default styles', () => { + it('exposes styles through this.props.styles property', (done) => { + let Component; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = class extends React.Component { - render () { - expect(this.props.styles).to.equal(styles); - done(); - } - }; + Component = class extends React.Component { + render () { + expect(this.props.styles).to.equal(styles); + done(); + } + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - TestUtils.renderIntoDocument(); - }); - it('does not affect the other instance properties', (done) => { - let Component; + TestUtils.renderIntoDocument(); + }); + it('does not affect the other instance properties', (done) => { + let Component; - Component = class extends React.Component { - render () { - expect(this.props.bar).to.equal('baz'); - done(); - } - }; + Component = class extends React.Component { + render () { + expect(this.props.bar).to.equal('baz'); + done(); + } + }; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - TestUtils.renderIntoDocument(); - }); - it('does not affect pure-render logic', (done) => { - let Component, - rendered; + TestUtils.renderIntoDocument(); + }); + it('does not affect pure-render logic', (done) => { + let Component, + rendered; - rendered = false; + rendered = false; - const styles = { - foo: 'foo-1' - }; + const styles = { + foo: 'foo-1' + }; - Component = class extends React.Component { - shouldComponentUpdate (newProps) { - if (rendered) { - expect(shallowCompare(this.props, newProps)).to.equal(true); + Component = class extends React.Component { + shouldComponentUpdate (newProps) { + if (rendered) { + expect(shallowCompare(this.props, newProps)).to.equal(true); - done(); - } + done(); + } - return true; - } + return true; + } - render () { - rendered = true; - } - }; + render () { + rendered = true; + } + }; - Component = extendReactClass(Component, styles); + Component = extendReactClass(Component, styles); - const instance = TestUtils.renderIntoDocument(); + const instance = TestUtils.renderIntoDocument(); - // trigger shouldComponentUpdate - instance.setState({}); - }); + // trigger shouldComponentUpdate + instance.setState({}); }); - context('overwriting default styles using "styles" property of the extended component', () => { - it('overwrites default styles', (done) => { - let Component; - - const styles = { - foo: 'foo-1' - }; - - Component = class extends React.Component { - render () { - expect(this.props.styles).to.equal(styles); - done(); - } - }; - - Component = extendReactClass(Component, { - bar: 'bar-0', - foo: 'foo-0' - }); - - TestUtils.renderIntoDocument(); - }); + }); + context('overwriting default styles using "styles" property of the extended component', () => { + it('overwrites default styles', (done) => { + let Component; + + const styles = { + foo: 'foo-1' + }; + + Component = class extends React.Component { + render () { + expect(this.props.styles).to.equal(styles); + done(); + } + }; + + Component = extendReactClass(Component, { + bar: 'bar-0', + foo: 'foo-0' + }); + + TestUtils.renderIntoDocument(); }); - context('rendering Component that returns null', () => { - it('generates