Refactor component function to create subclass

README.md

@@ -49,7 +49,7 @@ var App = React.createClass({
 
 })
 
-// Wrap the component with a higher order component.
+// Extend `App` to create a new class with style injection.
 App = Style.component(App)
 
 // Render to the document.
@@ -58,6 +58,35 @@ React.render(<App />, document.body)
 
 **Note:** You should render `Style.Element` at the root level of your application, but it must be a child of `Style.component()`. I recommend rendering it last so it receives all styles after the first render (required for isomorphic applications).
 
+### With ES6/7
+
+```js
+import { create, injectStyle } from 'react-free-style'
+
+const Style = create()
+
+const TEXT_STYLE = Style.registerStyle({
+  backgroundColor: 'red'
+})
+
+@injectStyle(Style)
+class App extends React.Component {
+
+  render () {
+    return (
+      <div className={TEXT_STYLE.className}>
+        Hello world!
+
+        <Style.Element />
+      </div>
+    )
+  }
+
+}
+
+React.render(<App />, document.body)
+```
+
 ### Register Style
 
 Register a [name spaced style](https://github.com/blakeembrey/free-style#namespaced-styles) object.

package.json

@@ -43,10 +43,11 @@
     "istanbul": "^0.3.13",
     "mocha": "^2.1.0",
     "pre-commit": "^1.0.6",
-    "typescript": "^1.5.0-alpha"
+    "typescript": "microsoft/TypeScript"
   },
   "dependencies": {
-    "free-style": "^0.5.2"
+    "free-style": "^0.5.4",
+    "xtend": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=0.12.0"

src/react-free-style.spec.ts

@@ -2,21 +2,21 @@
 
 import { expect } from 'chai'
 import * as React from 'react'
-import { create, ReactFreeStyle, FreeStyle } from './react-free-style'
+import { create, ReactFreeStyle, FreeStyle, injectStyle } from './react-free-style'
 
 describe('react free style', function () {
-  var Style: ReactFreeStyle
+  let Style: ReactFreeStyle
 
   beforeEach(function () {
     Style = create()
   })
 
   it('should render the main example', function () {
-    var TEXT_STYLE = Style.registerStyle({
+    const TEXT_STYLE = Style.registerStyle({
       backgroundColor: 'red'
     })
 
-    var App = Style.component(React.createClass({
+    const App = Style.component(React.createClass({
 
       displayName: 'App',
 
@@ -40,14 +40,14 @@ describe('react free style', function () {
   })
 
   it('should render the example dynamic styles', function () {
-    var inlineStyle: FreeStyle.Style
+    let inlineStyle: FreeStyle.Style
 
-    var BUTTON_STYLE = Style.registerStyle({
+    const BUTTON_STYLE = Style.registerStyle({
       backgroundColor: 'red',
       padding: 10
     })
 
-    var ButtonComponent = React.createClass({
+    const ButtonComponent = React.createClass({
 
       contextTypes: {
         freeStyle: React.PropTypes.object.isRequired
@@ -69,7 +69,7 @@ describe('react free style', function () {
 
     })
 
-    var App = Style.component(React.createClass({
+    const App = Style.component(React.createClass({
 
       render: function () {
         return React.createElement(
@@ -95,17 +95,17 @@ describe('react free style', function () {
   })
 
   it('should work with children', function () {
-    var ChildStyle = create()
+    const ChildStyle = create()
 
-    var APP_STYLE = Style.registerStyle({
+    const APP_STYLE = Style.registerStyle({
       color: 'blue'
     })
 
-    var BUTTON_STYLE = ChildStyle.registerStyle({
+    const BUTTON_STYLE = ChildStyle.registerStyle({
       backgroundColor: 'red'
     })
 
-    var Button = ChildStyle.component(React.createClass({
+    const Button = ChildStyle.component(React.createClass({
 
       render: function () {
         return React.createElement(
@@ -117,7 +117,7 @@ describe('react free style', function () {
 
     }))
 
-    var Child = ChildStyle.component(React.createClass({
+    const Child = ChildStyle.component(React.createClass({
 
       render: function () {
         return React.createElement(
@@ -129,7 +129,7 @@ describe('react free style', function () {
 
     }))
 
-    var App = Style.component(React.createClass({
+    const App = Style.component(React.createClass({
 
       render: function () {
         return React.createElement(
@@ -151,4 +151,33 @@ describe('react free style', function () {
       '</div>'
     )
   })
+
+  it('should set display name to the component name', function () {
+    const TEXT_STYLE = Style.registerStyle({
+      backgroundColor: 'red'
+    })
+
+    @injectStyle(Style)
+    class App extends React.Component<{}, {}> {
+
+      render () {
+        return React.createElement(
+          'div',
+          { className: TEXT_STYLE.className },
+          'Hello world!',
+          React.createElement(Style.Element)
+        )
+      }
+
+    }
+
+    expect((<any> App).displayName).to.equal('App')
+
+    expect(React.renderToStaticMarkup(React.createElement(App))).to.equal(
+      '<div class="' + TEXT_STYLE.className + '">' +
+      'Hello world!' +
+      '<style>' + TEXT_STYLE.selector + '{background-color:red;}</style>' +
+      '</div>'
+    )
+  })
 })

src/react-free-style.ts

@@ -1,9 +1,9 @@
 import React = require('react')
 import ReactCurrentOwner = require('react/lib/ReactCurrentOwner')
-import ExecutionEnvironment = require('react/lib/ExecutionEnvironment')
+import extend = require('xtend')
 export import FreeStyle = require('free-style')
 
-declare var module: any
+declare const module: any
 
 /**
  * Create a specialized free style instance.
@@ -12,8 +12,6 @@ export class ReactFreeStyle extends FreeStyle.FreeStyle {
 
   /**
    * Expose the `StyleElement` for use.
-   *
-   * @type {StyleElement}
    */
   Element = StyleElement
 
@@ -33,66 +31,66 @@ export class ReactFreeStyle extends FreeStyle.FreeStyle {
   }
 
   /**
-   * Wrap a React component in a higher order `ReactFreeStyle` component.
-   *
-   * @param  {React.ComponentClass<any>} component
-   * @return {React.ComponentClass<any>}
+   * Create a React component that inherits from a user component. This is
+   * required for methods on the user component to continue working once
+   * wrapped with the style functionality.
    */
-  component (component: React.ComponentClass<any>): React.ClassicComponentClass<{}> {
+  component (Component: React.ComponentClass<any>): React.ComponentClass<any> {
     /**
      * Alias `free-style` instance for changes.
      */
-    var freeStyle = this
+    const freeStyle = this
+    const proto = Component.prototype
 
-    /**
-     * Create a higher order style component.
-     */
-    var ReactFreeStyleComponent = React.createClass({
+    class ReactFreeStyleComponent extends Component {
+      context: any
+      _freeStyle = freeStyle
+      _parentFreeStyle = this.context.freeStyle || new ReactFreeStyle()
 
-      displayName: 'ReactFreeStyle',
+      // Make sure debugging with React looks the same.
+      static displayName = (<any> Component).displayName || (<any> Component).name
 
-      contextTypes: {
+      static contextTypes = extend(Component.contextTypes, {
         freeStyle: React.PropTypes.object
-      },
+      })
 
-      childContextTypes: {
+      static childContextTypes = extend(Component.childContextTypes, {
         freeStyle: React.PropTypes.object.isRequired
-      },
+      })
 
       getChildContext () {
-        return {
+        return extend((proto.getChildContext || noop).call(this), {
           freeStyle: this._parentFreeStyle
-        }
-      },
-
-      getInitialState () {
-        return { freeStyle }
-      },
+        })
+      }
 
       componentWillUpdate () {
         // Hook into component updates to keep styles in sync over hot code
         // reloads. This works great with React Hot Loader!
-        if (module.hot && this.state.freeStyle.id !== freeStyle.id) {
+        if (module.hot && this._freeStyle.id !== freeStyle.id) {
+          this._parentFreeStyle.detach(this._freeStyle)
           this._parentFreeStyle.attach(freeStyle)
-          this._parentFreeStyle.detach(this.state.freeStyle)
-          this.state.freeStyle = freeStyle
+          this._freeStyle = freeStyle
         }
-      },
+
+        ;(proto.componentWillUpdate || noop).apply(this, arguments)
+      }
 
       componentWillMount () {
-        this._parentFreeStyle = this.context.freeStyle || new ReactFreeStyle()
-        this._parentFreeStyle.attach(this.state.freeStyle)
-      },
+        this._parentFreeStyle.attach(this._freeStyle)
+
+        ;(proto.componentWillMount || noop).call(this)
+      }
 
       componentWillUnmount () {
-        this._parentFreeStyle.detach(this.state.freeStyle)
-      },
+        this._parentFreeStyle.detach(this._freeStyle)
 
-      render () {
-        return React.createElement(component, this.props)
+        ;(proto.componentWillUnmount || noop).call(this)
       }
+    }
 
-    })
+    // Alias `render` to the prototype for React Hot Loader to pick up changes.
+    ;(<any> ReactFreeStyleComponent).prototype.render = proto.render
 
     return ReactFreeStyleComponent
   }
@@ -113,15 +111,11 @@ export class StyleElement extends React.Component<{}, {}> {
   onChange = () => this.forceUpdate()
 
   componentWillMount () {
-    if (ExecutionEnvironment.canUseDOM) {
-      this.context.freeStyle.addChangeListener(this.onChange)
-    }
+    this.context.freeStyle.addChangeListener(this.onChange)
   }
 
   componentWillUnmount () {
-    if (ExecutionEnvironment.canUseDOM) {
-      this.context.freeStyle.removeChangeListener(this.onChange)
-    }
+    this.context.freeStyle.removeChangeListener(this.onChange)
   }
 
   render () {
@@ -132,6 +126,23 @@ export class StyleElement extends React.Component<{}, {}> {
 
 }
 
+/**
+ * Create a React Free Style instance.
+ */
 export function create () {
   return new ReactFreeStyle()
 }
+
+/**
+ * Accept a style instance for use with decorators.
+ */
+export function injectStyle (Style: ReactFreeStyle) {
+  return function <T> (Component: T): T {
+    return <any> Style.component(<any> Component)
+  }
+}
+
+/**
+ * Noop.
+ */
+function noop () {}

tsconfig.json

@@ -6,7 +6,8 @@
     "declaration": true,
     "noImplicitAny": true,
     "removeComments": false,
-    "sourceMap": true
+    "sourceMap": true,
+    "experimentalDecorators": true
   },
   "files": [
     "src/react-free-style.ts",

typings/_custom/react.d.ts

@@ -9,11 +9,3 @@ declare module 'react/lib/ReactCurrentOwner' {
 
   export = ReactCurrentOwner
 }
-
-declare module 'react/lib/ExecutionEnvironment' {
-  var ExecutionEnvironment: {
-    canUseDOM: boolean
-  }
-
-  export = ExecutionEnvironment
-}

typings/_custom/xtend.d.ts

@@ -0,0 +1,17 @@
+declare module 'xtend/mutable' {
+  function extend <T> (dest: T, ...src: Object[]): T
+
+  export = extend
+}
+
+declare module 'xtend/immutable' {
+  function extend <T> (dest: T, ...src: Object[]): T
+
+  export = extend
+}
+
+declare module 'xtend' {
+  import immutable = require('xtend/immutable')
+
+  export = immutable
+}

typings/tsd.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="react/react.d.ts" />
 /// <reference path="_custom/react.d.ts" />
+/// <reference path="_custom/xtend.d.ts" />
 /// <reference path="../node_modules/free-style/free-style.d.ts" />
 /// <reference path="chai/chai.d.ts" />
 /// <reference path="mocha/mocha.d.ts" />