diff --git a/.babelrc b/.babelrc index 197c614..d51020f 100644 --- a/.babelrc +++ b/.babelrc @@ -6,9 +6,9 @@ ], "plugins": [ "add-module-exports", - "lodash", "transform-class-properties", ["transform-es2015-classes", { "loose": true }], - "transform-proto-to-assign" + "transform-proto-to-assign", + "transform-object-assign" ] } diff --git a/package.json b/package.json index 369d02c..52575e0 100644 --- a/package.json +++ b/package.json @@ -21,13 +21,12 @@ "license": "BSD-3-Clause", "dependencies": { "hoist-non-react-statics": "^1.0.5", - "lodash": "^4.6.1", "object-unfreeze": "^1.0.2" }, "devDependencies": { "babel-cli": "^6.10.1", "babel-plugin-add-module-exports": "^0.2.1", - "babel-plugin-lodash": "^3.2.5", + "babel-plugin-transform-object-assign": "^6.8.0", "babel-plugin-transform-proto-to-assign": "^6.9.0", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", diff --git a/src/extendReactClass.js b/src/extendReactClass.js index b5cfb2d..f3f4d4b 100644 --- a/src/extendReactClass.js +++ b/src/extendReactClass.js @@ -1,9 +1,9 @@ /* eslint-disable react/prop-types */ import React from 'react'; -import _ from 'lodash'; import hoistNonReactStatics from 'hoist-non-react-statics'; import linkClass from './linkClass'; +import {isObject} from './utils'; /** * @param {ReactClass} Component @@ -21,8 +21,8 @@ export default (Component: Object, defaultStyles: Object, options: Object) => { if (this.props.styles) { styles = this.props.styles; - } else if (_.isObject(defaultStyles)) { - this.props = _.assign({}, this.props, { + } else if (isObject(defaultStyles)) { + this.props = Object.assign({}, this.props, { styles: defaultStyles }); diff --git a/src/index.js b/src/index.js index 7ee7e4e..94c1824 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ -import _ from 'lodash'; import extendReactClass from './extendReactClass'; import wrapStatelessFunction from './wrapStatelessFunction'; import makeConfiguration from './makeConfiguration'; +import {isFunction} from './utils'; /** * @see https://github.com/gajus/react-css-modules#options @@ -12,7 +12,7 @@ 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); }; /** @@ -48,7 +48,7 @@ const decoratorConstructor = (defaultStyles: Object, options: TypeOptions): Func }; export default (...args) => { - if (_.isFunction(args[0])) { + 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..b507ba2 100644 --- a/src/isIterable.js +++ b/src/isIterable.js @@ -1,6 +1,6 @@ -import _ from 'lodash'; +import {isFunction, isObject} from './utils'; -const ITERATOR_SYMBOL = typeof Symbol !== 'undefined' && _.isFunction(Symbol) && Symbol.iterator; +const ITERATOR_SYMBOL = typeof Symbol !== 'undefined' && isFunction(Symbol) && Symbol.iterator; const OLD_ITERATOR_SYMBOL = '@@iterator'; /** @@ -10,7 +10,7 @@ const OLD_ITERATOR_SYMBOL = '@@iterator'; export default (maybeIterable: any): boolean => { let iterator; - if (!_.isObject(maybeIterable)) { + if (!isObject(maybeIterable)) { return false; } @@ -20,5 +20,5 @@ export default (maybeIterable: any): boolean => { iterator = maybeIterable[OLD_ITERATOR_SYMBOL]; } - return _.isFunction(iterator); + return isFunction(iterator); }; diff --git a/src/linkClass.js b/src/linkClass.js index ea199e9..60811c9 100644 --- a/src/linkClass.js +++ b/src/linkClass.js @@ -1,4 +1,3 @@ -import _ from 'lodash'; import React, { ReactElement } from 'react'; @@ -6,6 +5,7 @@ import objectUnfreeze from 'object-unfreeze'; import isIterable from './isIterable'; import parseStyleName from './parseStyleName'; import generateAppendClassName from './generateAppendClassName'; +import {isObject, isArray} from './utils'; const linkElement = (element: ReactElement, styles: Object, configuration: Object): ReactElement => { let appendClassName, @@ -26,7 +26,7 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec 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)) { + } 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); @@ -65,7 +65,7 @@ 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)) { + if (!isObject(element)) { return element; } diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 83b2d41..757cc56 100644 --- a/src/makeConfiguration.js +++ b/src/makeConfiguration.js @@ -1,5 +1,3 @@ -import _ from 'lodash'; - /** * @typedef CSSModules~Options * @see {@link https://github.com/gajus/react-css-modules#options} @@ -17,17 +15,21 @@ export default (userConfiguration = {}) => { errorWhenNotFound: true }; - _.forEach(userConfiguration, (value, name) => { - if (_.isUndefined(configuration[name])) { - throw new Error('Unknown configuration property "' + name + '".'); - } + for (const name in userConfiguration) { + if (userConfiguration.hasOwnProperty(name)) { + const value = userConfiguration[name]; - if (!_.isBoolean(value)) { - throw new Error('"' + name + '" property value must be a boolean.'); - } + if (!(name in configuration)) { + throw new Error('Unknown configuration property "' + name + '".'); + } - configuration[name] = value; - }); + if (value !== true && value !== false) { + throw new Error('"' + name + '" property value must be a boolean.'); + } + + configuration[name] = value; + } + } return configuration; }; diff --git a/src/parseStyleName.js b/src/parseStyleName.js index 39c328a..e0aeb09 100644 --- a/src/parseStyleName.js +++ b/src/parseStyleName.js @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import {trim, filterForTruthy} from './utils'; const styleNameIndex = {}; @@ -8,8 +8,7 @@ export default (styleNamePropertyValue: string, allowMultiple: boolean): Array { context('ReactElement does not define styleName', () => { it('does not affect element properties', () => { - expect(linkClass(
)).to.deep.equal(
); + expect(linkClass(
)).to.deep.equal(
); }); it('does not affect element properties with a single element child', () => { - expect(linkClass(

)).to.deep.equal(

); + expect(linkClass(

)).to.deep.equal(

); }); it('does not affect element properties with a single text child', () => { @@ -23,7 +23,7 @@ describe('linkClass', () => { }); it('does not affect the className', () => { - expect(linkClass(
)).to.deep.equal(
); + expect(linkClass(
)).to.deep.equal(
); }); xit('does not affect element with a single children when that children is contained in an array', () => { @@ -71,7 +71,7 @@ describe('linkClass', () => { let subject; subject =
-

+

; subject = linkClass(subject, { @@ -86,8 +86,8 @@ describe('linkClass', () => { let subject; subject =
-

-

+

+

; subject = linkClass(subject, { @@ -102,8 +102,8 @@ describe('linkClass', () => { let subject; subject =
-

-

+

+

; subject = linkClass(subject, { @@ -120,8 +120,8 @@ describe('linkClass', () => { let subject; const iterable = { - 0:

, - 1:

, + 0:

, + 1:

, length: 2, /* eslint-disable no-use-extend-native/no-use-extend-native */ [Symbol.iterator]: Array.prototype[Symbol.iterator] @@ -143,7 +143,7 @@ describe('linkClass', () => { it('uses the generated class name to set the className property', () => { let subject; - subject =

; + subject =
; subject = linkClass(subject, { foo: 'foo-1' @@ -156,7 +156,7 @@ describe('linkClass', () => { it('appends the generated class name to the className property', () => { let subject; - subject =
; + subject =
; subject = linkClass(subject, { bar: 'bar-1' @@ -172,7 +172,7 @@ describe('linkClass', () => { let subject; subject =
-

+

; subject = linkClass(subject, { @@ -191,7 +191,7 @@ describe('linkClass', () => { context('when false', () => { it('throws an error', () => { expect(() => { - linkClass(
, {}, {allowMultiple: false}); + linkClass(
, {}, {allowMultiple: false}); }).to.throw(Error, 'ReactElement styleName property defines multiple module names ("foo bar").'); }); }); @@ -199,7 +199,7 @@ describe('linkClass', () => { it('appends a generated class name for every referenced CSS module', () => { let subject; - subject =
; + subject =
; subject = linkClass(subject, { bar: 'bar-1', @@ -220,7 +220,7 @@ describe('linkClass', () => { it('ignores the missing CSS module', () => { let subject; - subject =
; + subject =
; subject = linkClass(subject, {}, {errorWhenNotFound: false}); @@ -230,7 +230,7 @@ describe('linkClass', () => { context('when is true', () => { it('throws an error', () => { expect(() => { - linkClass(
, {}, {errorWhenNotFound: true}); + linkClass(
, {}, {errorWhenNotFound: true}); }).to.throw(Error, '"foo" CSS module is undefined.'); }); }); @@ -264,7 +264,7 @@ describe('linkClass', () => { it('deletes styleName property from the target element', () => { let subject; - subject =
; + subject =
; subject = linkClass(subject, { foo: 'foo-1' @@ -278,8 +278,8 @@ describe('linkClass', () => { let subject; subject =
-
-
+
+
; subject = linkClass(subject, { diff --git a/tests/reactCssModules.js b/tests/reactCssModules.js index 44f7ad6..3d11c9b 100644 --- a/tests/reactCssModules.js +++ b/tests/reactCssModules.js @@ -174,7 +174,7 @@ describe('reactCssModules', () => { subject = TestUtils.renderIntoDocument(); - subject = ReactDOM.findDOMNode(subject); + subject = ReactDOM.findDOMNode(subject); // eslint-disable-line react/no-find-dom-node expect(subject.firstChild.className).to.equal('foo-0'); });