allow to pass params to decorator

Author: pavelvlasov

Compiler.coffee

@@ -1,17 +1,15 @@
 React = require 'react'
 _ = require 'underscore'
 
-
-defaultElementDelimeter = '_'
-defaultModifierDelimeter = '--'
+defaultConfig =
+  elementDelimeter: '_'
+  modifierDelimeter: '--'
+  isStrict: true
 
 
 class Compiler
   constructor: (config={}) ->
-    @config = _.defaults config,
-      isStrict: true
-      elementDelimeter: defaultElementDelimeter
-      modifierDelimeter: defaultModifierDelimeter
+    @config = _.defaults(config, defaultConfig)
 
   setDelimeters: (elementDelimeter, modifierDelimeter) ->
     @config =
@@ -84,4 +82,6 @@ class Compiler
     @config.isStrict = isStrict
 
 
-module.exports = new Compiler
+module.exports = Compiler
+module.exports.setDefaults = (config) ->
+  _.extend(defaultConfig, config)

Decorator.coffee

@@ -1,17 +1,27 @@
-compiler = require './Compiler.coffee'
+Compiler = require './Compiler.coffee'
 
 getDisplayName = (WrappedComponent) ->
   WrappedComponent.displayName or WrappedComponent.name or 'Component'
 
-module.exports = (WrappedComponent) ->
-  class ClassNames extends WrappedComponent
-    @displayName = "ClassNames(#{getDisplayName(WrappedComponent)})"
+module.exports = (config) ->
+  decorator = (WrappedComponent) ->
+    class ClassNames extends WrappedComponent
+      @displayName = "ClassNames(#{getDisplayName(WrappedComponent)})"
 
-    render: ->
-      if WrappedComponent::render
-        compiler.traverse(super())
-      else if @_render
-        compiler.traverse @_render()
-      else if window.error
-        console.error 'Warning: bluecore-classnames requires _render
-          method to be defined'
+      render: ->
+        if WrappedComponent::render
+          compiler.traverse(super())
+        else if @_render
+          compiler.traverse @_render()
+        else if window.error
+          console.error 'Warning: bluecore-classnames requires _render
+            method to be defined'
+
+    return ClassNames
+
+  if typeof config is 'function'
+    compiler = new Compiler()
+    return decorator(config)
+  else
+    compiler = new Compiler(config)
+    return decorator

README.md

@@ -14,7 +14,7 @@ class MyComponent extends React.Component
     super(props);
     this.state = {hovered: true};
   }
-  
+
   render() {
     return (
       <div className={cx('base')}>
@@ -52,13 +52,13 @@ class MyComponent extends ClassNames React.Component
   constructor: (props) ->
     super props
     @state = hovered: true
-    
+
   _render: ->
     div className: cx('base'),
       div className: cx('inner'),
         div className: cx('first', ['active'])
         div className: cx('second', hovered: @state.hovered)
-  
+
 module.exports = MyComponent
 
 ```
@@ -82,17 +82,21 @@ modifiers: ?<[String] || Object>, where object key is modifier name
 cx(element: <String>, modifiers: ?<Array, Object>)
 ```
 
-Also you can set delimeters:
+Also you can set default values for compiler:
 
 ```js
-import {compiler} from 'bluecore-classnames';
-compiler.setDelimeters('__', '_');
+import {Compiler} from 'bluecore-classnames';
+Compiler.setDefaults({
+  isStrict: false,
+  elementDelimeter: '-',
+  modifierDelimeter: '__'
+});
 ```
 
 If decorator found `className`s with `<string>` type it treats them as usual classNames.
 ```js
-import {compiler} from 'bluecore-classnames';
-compiler.setStrict(false);
+import {Compiler} from 'bluecore-classnames';
+Compiler.setDefaults({isStrict: false});
 ```
 will make compiler to treat string classNames as element,
 so code below will work too:

__tests__/ClassNames-test.coffee

@@ -1,13 +1,24 @@
 jest.autoMockOff()
 
+jest = jest
+
+{describe, it, expect} = global
+
+{createFactory, createElement} = require 'react'
 {findDOMNode} = require 'react-dom'
 {renderIntoDocument} = require 'react-addons-test-utils'
 _ = require 'underscore'
 
-compiler = require '../Compiler.coffee'
-StrictTestComponent = require '../examples/StrictTestComponent.coffee'
-TestComponent = require '../examples/TestComponent.coffee'
-DecoratedComponent = require '../examples/DecoratedTestComponent.coffee'
+Compiler = require '../Compiler.coffee'
+Decorator = require '../Decorator.coffee'
+{
+  StrictTestComponent,
+  ChildStrictTestComponent
+} = require '../examples/StrictTestComponent.coffee'
+{
+  TestComponent,
+  ChildTestComponent
+} = require '../examples/TestComponent.coffee'
 
 classTree =
   className: 'my-base-class'
@@ -36,6 +47,8 @@ classTree =
 strictComponent = null
 component = null
 
+render = (Component, child) ->
+  return findDOMNode(renderIntoDocument(createFactory(Component)({}, child)))
 
 checkClasses = (element, classConfig, parentClass) ->
   expect(element).toBeTruthy()
@@ -74,21 +87,32 @@ checkClasses = (element, classConfig, parentClass) ->
 
 describe 'ClassNames', ->
   it 'should render strict component into DOM', ->
-    strictComponent = findDOMNode renderIntoDocument StrictTestComponent()
+    strictComponent = render(
+      Decorator(StrictTestComponent),
+      createElement(Decorator(ChildStrictTestComponent)))
     expect(strictComponent).toBeTruthy()
 
   it 'should build classes', ->
     checkClasses strictComponent, classTree, ''
 
   it 'should render component into DOM', ->
-    compiler.setStrict false
-    component = findDOMNode renderIntoDocument TestComponent()
+    Compiler.setDefaults(isStrict: false)
+    component = render(
+      Decorator(TestComponent),
+      createElement(Decorator(ChildTestComponent)))
     expect(component).toBeTruthy()
 
   it 'should build classes in forgiving mode', ->
     checkClasses component, classTree, ''
 
-  it 'should render decorated class properly', ->
-    component = findDOMNode renderIntoDocument DecoratedComponent()
-    expect(component).toBeDefined()
-    checkClasses(component, classTree, '')
+  it 'should wrap component with config', ->
+    Compiler.setDefaults(isStrict: true)
+
+    component = render(
+      Decorator(isStrict: false)(TestComponent),
+      createElement(Decorator(isStrict: false)(ChildTestComponent))
+    )
+    expect(component).toBeTruthy()
+
+  it 'should render wrapped component properly', ->
+    checkClasses component, classTree, ''

examples/DecoratedTestComponent.coffee

@@ -3,21 +3,18 @@ React = require 'react'
 
 {div} = React.DOM
 
-ClassNamesDecorator = require '../Decorator.coffee'
 cx = require '../ClassNames.coffee'
 
 
-class ChildStrictTestComponent extends ClassNamesDecorator Component
-  _render: ->
+class ChildStrictTestComponent extends Component
+  render: ->
     div className: cx('base-inner'),
       div className: cx('inner'),
         'Inner'
 
-ChildStrictTestComponent = React.createFactory ChildStrictTestComponent
 
-
-class StrictTestComponent extends ClassNamesDecorator Component
-  _render: ->
+class StrictTestComponent extends Component
+  render: ->
     div
       className:
         className: 'my-base-class'
@@ -31,9 +28,10 @@ class StrictTestComponent extends ClassNamesDecorator Component
           active: true
           hovered: false
         ),
-          ChildStrictTestComponent {}
+          @props.children
       div className: cx('footer'),
         'Footer'
 
 
-module.exports = React.createFactory StrictTestComponent
+module.exports.StrictTestComponent = StrictTestComponent
+module.exports.ChildStrictTestComponent = ChildStrictTestComponent

examples/StrictTestComponent.coffee

@@ -3,21 +3,18 @@ React = require 'react'
 
 {div} = React.DOM
 
-ClassNamesDecorator = require '../Decorator.coffee'
 cx = require '../ClassNames.coffee'
 
 
-class ChildTestComponent extends ClassNamesDecorator Component
-  _render: ->
+class ChildTestComponent extends Component
+  render: ->
     div className: 'base-inner',
       div className: 'inner',
         'Inner'
 
-ChildTestComponent = React.createFactory ChildTestComponent
 
-
-class TestComponent extends ClassNamesDecorator Component
-  _render: ->
+class TestComponent extends Component
+  render: ->
     div
       className:
         className: 'my-base-class'
@@ -31,9 +28,10 @@ class TestComponent extends ClassNamesDecorator Component
           active: true
           hovered: false
         ),
-          ChildTestComponent {}
+          @props.children
       div className: 'footer',
         'Footer'
 
 
-module.exports = React.createFactory TestComponent
+module.exports.TestComponent = TestComponent
+module.exports.ChildTestComponent = ChildTestComponent

examples/TestComponent.coffee

@@ -1,4 +1,4 @@
 module.exports =
   cx: require './ClassNames.coffee'
   ClassNames: require './Decorator.coffee'
-  compiler: require './Compiler.coffee'
+  Compiler: require './Compiler.coffee'

index.coffee

@@ -1,6 +1,6 @@
 {
   "name": "bluecore-classnames",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Automatic class builder for React components",
   "keywords": [
     "react",