enable stateless function components

Author: Luke William Westby

src/extendReactClass.js

@@ -0,0 +1,32 @@
+import linkClass from './linkClass';
+import React from 'react';
+import _ from 'lodash';
+
+let extendReactClass;
+
+extendReactClass = (Component, defaultStyles, options) => {
+    return class extends Component {
+        render () {
+            let renderResult,
+                styles;
+
+            if (this.props.styles) {
+                styles = this.props.styles;
+            } else if (_.isObject(defaultStyles)) {
+                styles = defaultStyles;
+            } else {
+                styles = {};
+            }
+
+            renderResult = super.render();
+
+            if (renderResult) {
+                return linkClass(renderResult, styles, options);
+            }
+
+            return React.createElement('noscript');
+        }
+    };
+};
+
+export default extendReactClass;

src/index.js

@@ -1,6 +1,5 @@
-import linkClass from './linkClass';
-import React from 'react';
-import _ from 'lodash';
+import extendReactClass from './extendReactClass';
+import wrapStatelessFunction from './wrapStatelessFunction';
 
 let decoratorConstructor,
     functionConstructor;
@@ -16,28 +15,9 @@ let decoratorConstructor,
 functionConstructor = (Component, defaultStyles, options) => {
     let decoratedClass;
 
-    decoratedClass = class extends Component {
-        render () {
-            let renderResult,
-                styles;
-
-            if (this.props.styles) {
-                styles = this.props.styles;
-            } else if (_.isObject(defaultStyles)) {
-                styles = defaultStyles;
-            } else {
-                styles = {};
-            }
-
-            renderResult = super.render();
-
-            if (renderResult) {
-                return linkClass(renderResult, styles, options);
-            }
-
-            return React.createElement('noscript');
-        }
-    };
+    decoratedClass = Component.isReactClass ?
+        extendReactClass(Component, defaultStyles, options) :
+        wrapStatelessFunction(Component, defaultStyles, options);
 
     if (Component.displayName) {
         decoratedClass.displayName = Component.displayName;

src/wrapStatelessFunction.js

@@ -0,0 +1,30 @@
+import linkClass from './linkClass';
+import React from 'react';
+import _ from 'lodash';
+
+let wrapStatelessFunction;
+
+wrapStatelessFunction = (Component, defaultStyles, options) => {
+    return (props, ...args) => {
+        let renderResult,
+            styles;
+
+        if (props.styles) {
+            styles = props.styles;
+        } else if (_.isObject(defaultStyles)) {
+            styles = defaultStyles;
+        } else {
+            styles = {};
+        }
+
+        renderResult = Component(props, ...args);
+
+        if (renderResult) {
+            return linkClass(renderResult, styles, options);
+        }
+
+        return React.createElement('noscript');
+    };
+};
+
+export default wrapStatelessFunction;

test/reactCssModules.js

@@ -34,54 +34,100 @@ describe('reactCssModules', () => {
         });
     });
     context('a ReactComponent renders an element with the styleName prop', () => {
-        it('that element should contain the equivalent className', () => {
-            let Foo,
-                component,
-                shallowRenderer;
+        context('the component is a class that extends React.Component', () => {
+            it('that element should contain the equivalent className', () => {
+                let Foo,
+                    component,
+                    shallowRenderer;
 
-            shallowRenderer = TestUtils.createRenderer();
+                shallowRenderer = TestUtils.createRenderer();
 
-            Foo = class extends React.Component {
-                render () {
-                    return <div styleName='foo'>Hello</div>;
-                }
-            };
+                Foo = class extends React.Component {
+                    render () {
+                        return <div styleName='foo'>Hello</div>;
+                    }
+                };
+
+                Foo = reactCssModules(Foo, {
+                    foo: 'foo-1'
+                });
+
+                shallowRenderer.render(<Foo />);
+
+                component = shallowRenderer.getRenderOutput();
 
-            Foo = reactCssModules(Foo, {
-                foo: 'foo-1'
+                expect(component.props.className).to.equal('foo-1');
             });
+        });
+        context('the component is a stateless function component', () => {
+            it('that element should contain the equivalent className', () => {
+                let Foo,
+                    component,
+                    shallowRenderer;
+
+                shallowRenderer = TestUtils.createRenderer();
+
+                Foo = () => <div styleName='foo'>Hello</div>;
 
-            shallowRenderer.render(<Foo />);
+                Foo = reactCssModules(Foo, {
+                    foo: 'foo-1'
+                });
 
-            component = shallowRenderer.getRenderOutput();
+                shallowRenderer.render(<Foo />);
 
-            expect(component.props.className).to.equal('foo-1');
+                component = shallowRenderer.getRenderOutput();
+
+                expect(component.props.className).to.equal('foo-1');
+            });
         });
     });
 
     context('a ReactComponent renders nothing', () => {
-        it('linkClass must not intervene', () => {
-            let Foo,
-                component,
-                shallowRenderer;
+        context('the component is a class that extends React.Component', () => {
+            it('linkClass must not intervene', () => {
+                let Foo,
+                    component,
+                    shallowRenderer;
 
-            shallowRenderer = TestUtils.createRenderer();
+                shallowRenderer = TestUtils.createRenderer();
 
-            Foo = class extends React.Component {
-                render () {
-                    return null;
-                }
-            };
+                Foo = class extends React.Component {
+                    render () {
+                        return null;
+                    }
+                };
+
+                Foo = reactCssModules(Foo, {
+                    foo: 'foo-1'
+                });
+
+                shallowRenderer.render(<Foo />);
+
+                component = shallowRenderer.getRenderOutput();
 
-            Foo = reactCssModules(Foo, {
-                foo: 'foo-1'
+                expect(typeof component).to.equal('object');
             });
+        });
+        context('the component is a stateless function component', () => {
+            it('that element should contain the equivalent className', () => {
+                let Foo,
+                    component,
+                    shallowRenderer;
+
+                shallowRenderer = TestUtils.createRenderer();
+
+                Foo = () => null;
 
-            shallowRenderer.render(<Foo />);
+                Foo = reactCssModules(Foo, {
+                    foo: 'foo-1'
+                });
 
-            component = shallowRenderer.getRenderOutput();
+                shallowRenderer.render(<Foo />);
 
-            expect(typeof component).to.equal('object');
+                component = shallowRenderer.getRenderOutput();
+
+                expect(typeof component).to.equal('object');
+            });
         });
     });
 });