├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── mocha.config.js
├── package.json
├── src
    ├── class.js
    ├── decorator.js
    ├── dom.js
    ├── index.js
    ├── state.js
    └── utils.js
├── test
    ├── components.js
    ├── components.spec.js
    ├── index.spec.js
    ├── state.spec.js
    └── utils.spec.js
└── winning.txt


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-0", "react"],
 3 |   "plugins": [
 4 |     "transform-decorators-legacy",
 5 |     "transform-class-properties",
 6 |     ["transform-runtime", {
 7 |       "polyfill": false,
 8 |       "regenerator": true
 9 |     }]
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "parser": "babel-eslint",
  3 |   "sourceType": "module",
  4 |   "ecmaFeatures": {
  5 |     "arrowFunctions": true,
  6 |     "blockBindings": true,
  7 |     "destructuring": true,
  8 |     "regexYFlag": true,
  9 |     "regexUFlag": true,
 10 |     "templateStrings": true,
 11 |     "binaryLiterals": true,
 12 |     "octalLiterals": true,
 13 |     "unicodeCodePointEscapes": true,
 14 |     "defaultParams": true,
 15 |     "restParams": true,
 16 |     "forOf": true,
 17 |     "objectLiteralComputedProperties": true,
 18 |     "objectLiteralShorthandMethods": true,
 19 |     "objectLiteralShorthandProperties": true,
 20 |     "objectLiteralDuplicateProperties": true,
 21 |     "generators": true,
 22 |     "spread": true,
 23 |     "classes": true,
 24 |     "modules": true,
 25 |     "jsx": true,
 26 |     "globalReturn": true
 27 |   },
 28 |   "rules": {
 29 |     "no-constant-condition": 2,
 30 |     "no-debugger": 2,
 31 |     "no-dupe-keys": 2,
 32 |     "no-empty": 2,
 33 |     "no-extra-boolean-cast": 2,
 34 |     "no-extra-semi": 2,
 35 |     "no-invalid-regexp": 2,
 36 |     "no-irregular-whitespace": 2,
 37 |     "no-regex-spaces": 2,
 38 |     "no-unreachable": 2,
 39 |     "use-isnan": 2,
 40 |     "valid-typeof": 2,
 41 |     "block-scoped-var": 0,
 42 |     // Uncomment when tracking down good refactor candidates
 43 |     // "complexity": [1, 2],
 44 |     "default-case": 2,
 45 |     "dot-notation": [2, {"allowKeywords": true, "allowPattern": ""}],
 46 |     "eqeqeq": 2,
 47 |     "guard-for-in": 2,
 48 |     "no-caller": 2,
 49 |     "no-else-return": 2,
 50 |     "no-eq-null": 2,
 51 |     "no-eval": 2,
 52 |     "no-extend-native": 2,
 53 |     "no-extra-bind": 2,
 54 |     "no-fallthrough": 2,
 55 |     "no-implied-eval": 2,
 56 |     "no-loop-func": 2,
 57 |     "no-new-wrappers": 2,
 58 |     "no-return-assign": 0,
 59 |     "no-script-url": 2,
 60 |     "no-self-compare": 2,
 61 |     "no-sequences": 2,
 62 |     "no-void": 2,
 63 |     "no-with": 2,
 64 |     "radix": 2,
 65 |     "vars-on-top": 2,
 66 |     "wrap-iife": [2, "outside"],
 67 |     "no-use-before-define": [2, "nofunc"],
 68 |     "indent": [2, 2],
 69 |     //"brace-style": [2, "1tbs", { "allowSingleLine": true }],
 70 |     "comma-spacing": [2, {"before": false, "after": true}],
 71 |     "consistent-this": [0, "self"],
 72 |     "eol-last": 2,
 73 |     "max-nested-callbacks": [2, 2],
 74 |     "no-mixed-spaces-and-tabs": 2,
 75 |     "semi-spacing": 2,
 76 |     "no-spaced-func": 2,
 77 |     "no-trailing-spaces": 2,
 78 |     "operator-assignment": [2, "always"],
 79 |     "quote-props": [2, "as-needed"],
 80 |     "quotes": [2, "single"],
 81 |     "semi": [2, "always"],
 82 |     "space-after-keywords": 2,
 83 |     "space-return-throw-case": 2,
 84 |     "spaced-comment": 0,
 85 |     "no-var": 2,
 86 |     "no-unused-vars": 0,
 87 |     "no-unused-expressions": 0,
 88 |     "new-cap": 0, // new-cap throws on Immutable.Map, etc
 89 |     "no-underscore-dangle": 0,
 90 |     "curly": 0,
 91 |     "yoda": 0,
 92 |     "no-multi-spaces": 0,
 93 |     "camelcase": 0,
 94 |     "key-spacing": 0
 95 |   },
 96 |   "env": {
 97 |     "browser": true,
 98 |     "node": true,
 99 |     "mocha": true
100 |   },
101 |   "globals": {
102 |     "angular": false,
103 |     "_": false
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | // OSX
 2 | .DS_Store
 3 | .Trashes
 4 | 
 5 | // Node
 6 | node_modules
 7 | 
 8 | // Built files
 9 | lib
10 | coverage
11 | *.min.js
12 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | // OSX
 2 | .DS_Store
 3 | .Trashes
 4 | 
 5 | // Node
 6 | node_modules
 7 | 
 8 | // Built files
 9 | coverage
10 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - "iojs"
 5 | 
 6 | branches:
 7 |   only:
 8 |     - master
 9 | 
10 | notifications:
11 |   email:
12 |     on_success: change
13 |     on_failure: always
14 | 
15 | script:
16 |   - npm run -s lint
17 |   - npm run -s test
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 InTurn
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="http://inturn.github.io/classy/">
  3 |     <img alt="Classy logo" src="https://inturn.github.io/classy/dist/classy-logo-color.svg" height="150" />
  4 |   </a>
  5 | </p>
  6 | <p align="center">
  7 |   <a href="http://badge.fury.io/js/react-classy">
  8 |     <img alt="npm version" src="https://badge.fury.io/js/react-classy.svg" />
  9 |   </a>
 10 |   <a>
 11 |     <img alt="npm downloads" src="http://img.shields.io/npm/dm/react-classy.svg" />
 12 |   </a>
 13 |   <a href="https://travis-ci.org/inturn/classy">
 14 |     <img alt="build status" src="https://travis-ci.org/inturn/classy.svg" />
 15 |   </a>
 16 |   <a href="https://david-dm.org/inturn/classy">
 17 |     <img alt="dependency status" src="https://david-dm.org/inturn/classy.svg" />
 18 |   </a>
 19 |   <a href="https://david-dm.org/inturn/classy#info=devDependencies">
 20 |     <img alt="devdependency status" src="https://david-dm.org/inturn/classy/dev-status.svg" />
 21 |   </a>
 22 | </p>
 23 | <br />
 24 | 
 25 | ### Table of Contents
 26 | 
 27 | - [Install](#install)
 28 | - [Getting Started](#getting-started)
 29 | - [Usage](#usage)
 30 | - [API](#api)
 31 | 
 32 | Install
 33 | -------
 34 | 
 35 | ##### `npm install react-classy`
 36 | 
 37 | Getting Started
 38 | ---------------
 39 | 
 40 | Classy makes styling React components *composable*, *extensible*, and *simple*.
 41 | Implementation requires only 3 steps:
 42 | 
 43 | 0. Import `react-classy` into your React component module
 44 | 0. Decorate your React component class with `@Classy`.
 45 | 0. Assign a CSS string to a static `style` prop on your React component class.
 46 | 
 47 | The styles defined on your React component will get automatically injected into
 48 | the DOM right before your component mounts. Check out some examples of basic
 49 | and advanced usage in the next section.
 50 | 
 51 | Usage
 52 | -----
 53 | 
 54 | ### Basic
 55 | 
 56 | ```js
 57 | import React, { Component } from 'react';
 58 | // Import Classy
 59 | import Classy from 'react-classy';
 60 | 
 61 | // Decorate your component
 62 | @Classy
 63 | export default class Button extends Component {
 64 |   // Add your CSS styles
 65 |   static style = `
 66 |     .button {
 67 |       background: blue;
 68 |     }
 69 |   `
 70 |   render() {
 71 |     return (
 72 |       <button className="button">
 73 |         {this.props.children}
 74 |       </button>
 75 |     );
 76 |   }
 77 | }
 78 | 
 79 | ```
 80 | 
 81 | ### Advanced
 82 | 
 83 | Classy is also highly customizable and supports asynchronous style
 84 | rendering, custom middleware, and theming! In the next example, we'll
 85 | demonstrate all of the aforementioned while creating a button that
 86 | switches themes when clicked.
 87 | 
 88 | ```js
 89 | import React, { Component } from 'react';
 90 | // Import the decorator and utils modules
 91 | import Classy, { Utils } from 'react-classy';
 92 | // CSS pre-processor
 93 | import stylus from 'stylus';
 94 | 
 95 | @Classy({
 96 | 
 97 |   // Makes Classy play nice with react-hot-loader :)
 98 |   hot: true,
 99 | 
100 |   // Logs component css to console
101 |   debug: true,
102 | 
103 |   // Will access specified prop to load component styles
104 |   // instead of default `style` prop
105 |   styleProp: 'stylus'
106 | 
107 | })
108 | export default class ToggleButton extends Component {
109 | 
110 |   render() {
111 |     return <button {...this.props} />;
112 |   }
113 | 
114 |   static defaultProps = {
115 |     className: 'toggle-button toggle-button--default',
116 |     children: 'Touch Me!',
117 | 
118 |     // Method that switches the component's theme.
119 |     // Will toggle from 'light' to 'dark' and vice versa.
120 |     onClick: function switchTheme(e) {
121 |       let { name } = ToggleButton;
122 |       let theme = Utils.getTheme(name);
123 |       theme = 'dark' === theme ? 'light' : 'dark';
124 |       Utils.setTheme(name, theme);
125 |     }
126 | 
127 |   }
128 | 
129 |   // Let's define our themes as a static.
130 |   // This makes it easy for others to modify a component's theme(s)
131 |   // via class extension.
132 |   static theme = {
133 |     light: {
134 |       textColor: '#a24bcf',
135 |       background: 'transparent',
136 |       borderRadius: '30px'
137 |     },
138 |     dark: {
139 |       textColor: '#fff',
140 |       background: '#4b79cf',
141 |       borderRadius: '4px'
142 |     }
143 |   }
144 | 
145 |   // Instead of a hard-coding your CSS,
146 |   // you can assign a method that returns Promise that fulfills a CSS string.
147 |   // Our default theme is set via rest param.
148 |   static stylus(theme=ToggleButton.theme.light) {
149 |     let styl = `
150 | 
151 |     .toggle-button
152 | 
153 |       &--default
154 |         color: convert($theme.textColor)
155 |         background: convert($theme.background)
156 |         border: 1px solid convert($theme.textColor)
157 |         border-radius: convert($theme.borderRadius)
158 |         outline: none
159 |         padding: 20px
160 |         font-size: 18px
161 |         font-family: 'Helvetica Neue', helvetica, sans-serif
162 |         transition: transform .3s ease
163 | 
164 |         &:hover
165 |           cursor: pointer
166 | 
167 |         &:focus
168 |           transform: translateY(4px)
169 | 
170 |     `;
171 |     // Finally, let's use our Stylus middleware to render actual CSS
172 |     // and return it with a Promise
173 |     return new Promise((yep, nope) => stylus(styl.trim())
174 |       .define('$theme', theme, true)
175 |       .render((err, css) => err ? nope(err) : yep(css))
176 |     );
177 |   }
178 | 
179 | }
180 | ```
181 | 
182 | [Decorator](#decorator) options and [utility](#utils) methods are comprehensively documented in the next
183 | section.
184 | 
185 | 
186 | API
187 | ---
188 | 
189 | ### Decorator
190 | 
191 | #### @Classy([options])
192 | 
193 | A class decorator will automatically inject styles into the DOM before your `ReactComponent` instance mounts.
194 | 
195 | Example:
196 | 
197 | ```js
198 | // ES2016
199 | @Classy
200 | export default class MyComponent extends React.Component { ... }
201 | 
202 | // ES2015
203 | class MyComponent extends React.Component { ... }
204 | export default Classy(MyComponent);
205 | 
206 | // ES5
207 | var MyComponent = React.createClass({ ... });
208 | module.exports = Classy(MyComponent);
209 | ```
210 | 
211 | ##### options
212 | 
213 | Type: `Object`
214 | 
215 | Default: see below
216 | 
217 | An object that allows you to customize your Classy component settings.
218 | All settings are optional. See defaults below.
219 | 
220 | ##### options.debug
221 | 
222 | Type: `Boolean`
223 | 
224 | Default: `false`
225 | 
226 | Logs rendered cssText to debug console whens component styles are updated
227 | 
228 | ##### options.hot
229 | 
230 | Type: `Boolean`
231 | 
232 | Default: `false`
233 | 
234 | Applies two effects:
235 | 
236 | * Replaces internal ref to the component if it gets hot-loaded
237 | * Component never uses cached cssText
238 | 
239 | ##### options.styleProp
240 | 
241 | Type: `String`
242 | 
243 | Default: `style`
244 | 
245 | Component prop to access for getting styles
246 | 
247 | ##### options.themeProp
248 | 
249 | Type: `String`
250 | 
251 | Default: `themes`
252 | 
253 | Component prop to access for getting themes
254 | 
255 | ##### options.alias
256 | 
257 | Type: `String`
258 | 
259 | Default: `<ReactComponent>.name`
260 | 
261 | Key under which Classy identifies your component.
262 | If not specified, your ReactComponent's `constructor.name` will be used.
263 | 
264 | ##### options.elemId
265 | 
266 | Type: `String`
267 | 
268 | Default: `alias + '_' + Utils.genHash()`
269 | 
270 | Example: `MyButton_fxhhf`
271 | 
272 | ID prop for component `<style>` tag. Uses `options.alias` plus a 5 character hash (separated by an underscore) to prevent unintentional id attribute collisions.
273 | 
274 | ##### options.elemProps
275 | 
276 | Type: `String`
277 | 
278 | Default: `{ type: 'text/css' }`
279 | 
280 | Other props to apply to component `<style>` tag
281 | 
282 | ##### options.appendTo
283 | 
284 | Type: `String`
285 | 
286 | Default: `head`
287 | 
288 | Element to append component `<style>` tag to
289 | 
290 | <hr />
291 | 
292 | ### Utils
293 | 
294 | #### #setTheme(alias [, theme, force=false])
295 | 
296 | Updates component styles with specified theme object
297 | 
298 | ##### alias
299 | 
300 | Type: `String`
301 | 
302 | Key under which Classy identifies your component. (See [decorator options](#optionsalias))
303 | 
304 | ##### theme
305 | 
306 | Type: `String`
307 | 
308 | Component theme to use
309 | 
310 | ##### force
311 | 
312 | Type: `Boolean`
313 | 
314 | Default: `false`
315 | 
316 | Re-render theme if already applied
317 | 
318 | #### #getTheme(alias)
319 | 
320 | Return: `Object`
321 | 
322 | Gets the current theme applied to a component
323 | (Convenience method for `State.getComponentState(...).currentTheme`).
324 | 
325 | ##### alias
326 | 
327 | Type: `String`
328 | 
329 | Key under which Classy identifies your component. (See [decorator options](#optionsalias))
330 | 
331 | #### #updateStyle(alias)
332 | 
333 | Return: `Promise`
334 | 
335 | Creates a component's `<style>` tag and/or updates its cssText.
336 | 
337 | ##### alias
338 | 
339 | Type: `String`
340 | 
341 | Key under which Classy identifies your component. (See [decorator options](#optionsalias))
342 | 
343 | #### #removeStyle(alias)
344 | 
345 | Return: `Promise`
346 | 
347 | Removes a component's `<style>` tag.
348 | 
349 | ##### alias
350 | 
351 | Type: `String`
352 | 
353 | Key under which Classy identifies your component. (See [decorator options](#optionsalias))
354 | 
355 | #### #getComponentState(alias)
356 | 
357 | Return: `Object`
358 | 
359 | Gets a component's Classy state object.
360 | 
361 | ##### alias
362 | 
363 | Type: `String`
364 | 
365 | Key under which Classy identifies your component. (See [decorator options](#optionsalias))
366 | 


--------------------------------------------------------------------------------
/mocha.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | require('babel-core/register');
 4 | 
 5 | // Create JSDOM and `document`/`window` globals
 6 | var document = global.document = require('jsdom').jsdom(
 7 |   '<!doctype html><html><head></head><body></body></html>'
 8 | );
 9 | var window = global.window = document.defaultView;
10 | 
11 | // Attach props from `global` to `window`
12 | for (var key in window) {
13 |   if (!window.hasOwnProperty(key)) continue;
14 |   if (key in global) continue;
15 |   global[key] = window[key];
16 | }
17 | 
18 | const React = global.React = require('react');
19 | const TestUtils = global.TestUtils = require('react-addons-test-utils');
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-classy",
 3 |   "version": "0.4.10",
 4 |   "description": "A composable, extensible, and simple solution for styling React components.",
 5 |   "author": "InTurn <ops@inturn.co> (https://github.com/inturn)",
 6 |   "license": "MIT",
 7 |   "homepage": "http://inturn.github.io/classy/",
 8 |   "main": "lib/index.js",
 9 |   "engines": {
10 |     "node": "*",
11 |     "npm": ">=2.0.0"
12 |   },
13 |   "scripts": {
14 |     "build": "npm run -s build:src",
15 |     "test": "npm run -s build:components.min && npm run -s mocha -- --reporter nyan --require mocha.config test/*.spec.js",
16 |     "build:components.min": "npm run -s rimraf -- ./test/components.min.js && babel test/components.js | npm run -s minify -- -o ./test/components.min.js",
17 |     "build:src": "npm run -s rimraf -- lib && npm run -s babel -- src -d lib",
18 |     "lint": "npm run -s eslint -s -- src && cat winning.txt",
19 |     "coverage": "npm run -s istanbul -- cover node_modules/.bin/_mocha -- --reporter nyan --require mocha.config test/*.spec.js",
20 |     "minify": "npm run -s uglifyjs -- --compress --mangle  --keep-fnames",
21 |     "babel": "node_modules/.bin/babel",
22 |     "eslint": "node_modules/.bin/eslint",
23 |     "istanbul": "node_modules/.bin/istanbul",
24 |     "mocha": "node_modules/.bin/mocha",
25 |     "rimraf": "node_modules/.bin/rimraf",
26 |     "uglifyjs": "node_modules/.bin/uglifyjs"
27 |   },
28 |   "precommit.silent": true,
29 |   "pre-commit": [
30 |     "lint",
31 |     "test"
32 |   ],
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/inturn/classy.git"
36 |   },
37 |   "keywords": [
38 |     "React",
39 |     "CSS",
40 |     "styling",
41 |     "ES6",
42 |     "ES7",
43 |     "decorators",
44 |     "classy"
45 |   ],
46 |   "bugs": {
47 |     "url": "https://github.com/inturn/classy/issues"
48 |   },
49 |   "dependencies": {
50 |     "classnames": "2.1.3"
51 |   },
52 |   "devDependencies": {
53 |     "babel-cli": "6.9.0",
54 |     "babel-core": "6.9.1",
55 |     "babel-eslint": "6.0.4",
56 |     "babel-plugin-transform-class-properties": "6.9.1",
57 |     "babel-plugin-transform-decorators-legacy": "1.3.4",
58 |     "babel-plugin-transform-runtime": "6.9.0",
59 |     "babel-preset-es2015": "6.9.0",
60 |     "babel-preset-react": "6.5.0",
61 |     "babel-preset-stage-0": "6.5.0",
62 |     "babel-runtime": "6.9.2",
63 |     "chai": "3.2.0",
64 |     "eslint": "1.10.3",
65 |     "istanbul": "0.3.18",
66 |     "jsdom": "6.1.0",
67 |     "mocha": "2.2.5",
68 |     "pre-commit": "1.1.1",
69 |     "react": "15.1.0",
70 |     "react-addons-test-utils": "15.1.0",
71 |     "react-dom": "15.1.0",
72 |     "rimraf": "2.4.2",
73 |     "uglifyjs": "2.4.10"
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/class.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * Classy - Class Helpers
  4 |  *
  5 |  * @module lib/class
  6 |  * @description
  7 |  *   Helpers for modifying and getting values from Classy ReactComponents
  8 |  */
  9 | 
 10 | import React from 'react';
 11 | import * as State from './state';
 12 | import * as DOM from './dom';
 13 | 
 14 | /**
 15 |  *
 16 |  * Redefines component lifecycle methods for auto style un/mounting
 17 |  *
 18 |  * @param {*} args - Arugments passed by callee
 19 |  */
 20 | export function redefineLifecycleMethods(...args) {
 21 |   [
 22 |     redefineRender,
 23 |     redefineComponentWillMount,
 24 |     redefineComponentWillUnmount
 25 |   ].forEach(fn => fn(...args));
 26 | }
 27 | 
 28 | 
 29 | /**
 30 |  *
 31 |  * If Component styles have loaded,
 32 |  * Component.prototype.render(...) will curry the original method
 33 |  * Otherwise, `null` will be returned to avoid FOUC
 34 |  *
 35 |  * @param {ReactComponent} Component - React component to be unstyled
 36 |  * @param {String}         alias     - Component alias
 37 |  */
 38 | export function redefineRender(Component, alias) {
 39 |   let method = 'render';
 40 |   let { [method]: fn } = Component.prototype;
 41 |   // Component is NOT a class
 42 |   if (fn && typeof fn !== 'function') throw new TypeError(
 43 |     'Classy Error: redefineRender(...)\n' +
 44 |     `Expected componentWillMount(...) to be a function.\n` +
 45 |     `-> Got type ${typeof fn}`
 46 |   );
 47 |   // Update prop descriptor
 48 |   let descriptor = Object.getOwnPropertyDescriptor(Component.prototype, method);
 49 |   Object.defineProperty(Component.prototype, method, {
 50 |     // Merge old descriptor
 51 |     ...descriptor,
 52 |     // With new value
 53 |     value: function render(...args) {
 54 |       let state = State.getComponentState(alias);
 55 |       let { isStyled } = state;
 56 |       return isStyled
 57 |         ? <span>{fn.call(this, ...args)}</span>
 58 |         : <span style={{ display: 'none' }}>{fn.call(this, ...args)}</span>;
 59 |     }
 60 |   });
 61 | }
 62 | 
 63 | /**
 64 |  *
 65 |  * Caches component instances and attempts to update styles
 66 |  * if component class styles have yet to be loaded
 67 |  *
 68 |  * @param {ReactComponent} Component - React component to be unstyled
 69 |  * @param {String}         alias     - Component alias
 70 |  */
 71 | export function redefineComponentWillMount(Component, alias) {
 72 |   let method = 'componentWillMount';
 73 |   let { [method]: fn } = Component.prototype;
 74 |   // Component is NOT a class
 75 |   if (fn && typeof fn !== 'function') throw new TypeError(
 76 |     'Classy Error: redefineComponentWillMount(...)\n' +
 77 |     `Expected componentWillMount(...) to be a function.\n` +
 78 |     `-> Got type ${typeof fn}`
 79 |   );
 80 |   // Update prop descriptor
 81 |   let descriptor = Object.getOwnPropertyDescriptor(Component.prototype, method);
 82 |   Object.defineProperty(Component.prototype, method, {
 83 |     // Merge old descriptor
 84 |     ...descriptor,
 85 |     // With new value
 86 |     value: function componentWillMount(...args) {
 87 |       // Cache instance
 88 |       let numMounted = State.cacheComponentInstance(alias, this);
 89 |       // Update styles
 90 |       let state = State.getComponentState(alias);
 91 |       let { instances, loadingStyles, isStyled, debug, settings } = state;
 92 |       // Update styles
 93 |       if (!isStyled && !loadingStyles) (async () => {
 94 |         try {
 95 |           await DOM.updateStyle(alias);
 96 |         } catch (err) {
 97 |           console.warn(err);
 98 |         }
 99 |       })();
100 |       // Call original method
101 |       if (fn) return fn.call(this, ...args);
102 |     }
103 |   });
104 | }
105 | 
106 | /**
107 |  *
108 |  * Removes cached component instance and, if no other instances are mounted,
109 |  * removes component class styles as well
110 |  *
111 |  * @param {ReactComponent} Component - React component to be unstyled
112 |  * @param {String}         alias     - Component alias
113 |  */
114 | export function redefineComponentWillUnmount(Component, alias) {
115 |   let method = 'componentWillUnmount';
116 |   let { [method]: fn } = Component.prototype;
117 |   // Component is NOT a class
118 |   if (fn && typeof fn !== 'function') throw new TypeError(
119 |     'Classy Error: redefineComponentWillUnmount(...)\n' +
120 |     `Expected componentWillUnmount(...) to be a function.\n` +
121 |     `-> Got type ${typeof fn}`
122 |   );
123 |   // Update prop descriptor
124 |   let descriptor = Object.getOwnPropertyDescriptor(Component.prototype, method);
125 |   Object.defineProperty(Component.prototype, method, {
126 |     // Merge old descriptor
127 |     ...descriptor,
128 |     // With new value
129 |     value: function componentWillUnmount(...args) {
130 |       // Clear instance from cache
131 |       let numMounted = State.clearComponentInstance(alias, this);
132 |       // Remove styles
133 |       let state = State.getComponentState(alias);
134 |       let { isStyled, debug, settings } = state;
135 |       let { hot } = settings;
136 |       // Remove styles
137 |       if (isStyled && numMounted < 1) (async () => {
138 |         try {
139 |           await DOM.removeStyle(alias);
140 |         } catch (err) {
141 |           console.warn(err);
142 |         }
143 |       })();
144 |       // Call original method
145 |       if (fn) return fn.call(this, ...args);
146 |     }
147 |   });
148 | }
149 | 
150 | /**
151 |  *
152 |  * Gets a component's cssText
153 |  *
154 |  * @param  {String}  alias - Component alias
155 |  * @return {Promise}       - Promise to fulfill component cssText
156 |  */
157 | export async function getComponentCSS(alias) {
158 |   let state = State.getComponentState(alias);
159 |   let { Component, currentTheme, previousTheme, cssText, settings } = state;
160 |   let { styleProp, themeProp, debug } = settings;
161 |   let { hot } = settings;
162 |   let style = Component[styleProp];
163 |   let themes = Component[themeProp];
164 |   let theme = themes ? themes[currentTheme] : undefined;
165 |   let returnValue;
166 |   // Use cached cssText
167 |   if (!hot && cssText && currentTheme !== previousTheme) {
168 |     return cssText;
169 |   }
170 |   // style is a string
171 |   if (typeof style === 'string') {
172 |     returnValue = style;
173 |   }
174 |   // style returns a Promise
175 |   else if (typeof style === 'function') {
176 |     returnValue = await style(theme);
177 |   }
178 |   // TypeError: style is NOT a string or Promise
179 |   else throw new TypeError(
180 |     'Classy Error: getComponentCSS(...)\n' +
181 |     `Expected component ${alias}'s styleProp to be a string or Promise ` +
182 |     'that fulfills with a string.\n' +
183 |     `-> Got type '${typeof style}'.`
184 |   );
185 |   return returnValue;
186 | }
187 | 


--------------------------------------------------------------------------------
/src/decorator.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Classy - Decorator
 4 |  *
 5 |  * @module lib/decorator
 6 |  * @description
 7 |  *   Reassigns component lifecycle methods and creates a component state object
 8 |  */
 9 | 
10 | import * as State from './state';
11 | import * as Class from './class';
12 | import * as DOM from './dom';
13 | 
14 | /**
15 |  *
16 |  * ReactComponent class decorator
17 |  *
18 |  * - Decorator usage:
19 |  *   @Classy([settings])
20 |  *
21 |  * - Functional usage:
22 |  *   Classy(Component [, settings])
23 |  *
24 |  * @param  {ReactComponent} Component - Component to be decorated
25 |  * @param  {Object}         settings  - Settings object -- See State.createComponentState(...)
26 |  * @return {ReactComponent}           - Decorated component
27 |  * @example
28 |  *
29 |  *   // ES2016
30 |  *   @Classy
31 |  *   export default class MyComponent extends React.Component { ... }
32 |  *
33 |  *   // ES2015
34 |  *   class MyComponent extends React.Component { ... }
35 |  *   export default Classy(MyComponent);
36 |  *
37 |  *	 // ES5
38 |  *	 var MyComponent = React.createClass({ ... });
39 |  *	 module.exports = Classy(MyComponent);
40 |  *
41 |  */
42 | export default function Classy(Component, settings) {
43 |   // Component is a settings object
44 |   if (typeof Component === 'object') {
45 |     return (realComponent) =>
46 |       Classy(realComponent, Component);
47 |   }
48 |   // Component is a class
49 |   else if (
50 |     Component.prototype &&
51 |     Component === Component.prototype.constructor
52 |   ) {
53 |     // Create state object
54 |     let state = State.createComponentState(Component, settings);
55 |     let { alias } = state.settings;
56 |     // Create a static prop for caching instances
57 |     let symbol = Symbol(alias);
58 |     Component[symbol] = [];
59 |     // Update state
60 |     State.mergeComponentState(alias, {
61 |       // component ref
62 |       Component,
63 |       // instances key
64 |       symbol
65 |     });
66 |     // Reassign lifecycle methods (mutates Component)
67 |     Class.redefineLifecycleMethods(Component, alias);
68 |   }
69 |   // Component is not a class nor a settings object
70 |   else throw new TypeError(
71 |     'Classy Error: classyDecorate(...)\n' +
72 |     `Expected component to be a class (function).\n` +
73 |     `-> Got type '${typeof Component}'.`
74 |   );
75 |   // All done!
76 |   return Component;
77 | }
78 | 


--------------------------------------------------------------------------------
/src/dom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Classy - DOM Helpers
 4 |  *
 5 |  * @module lib/DOM
 6 |  * @description
 7 |  *   Helpers for adding/removing Classy component styles to/from the DOM
 8 |  */
 9 | 
10 | import * as State from './state';
11 | import * as Class from './class';
12 | import * as Utils from './utils';
13 | 
14 | /**
15 |  *
16 |  * Creates a component's <style> tag and updates its cssText
17 |  *
18 |  * @param  {String}  alias - Component alias
19 |  * @return {Promise}       - Promise to fulfill component cssText
20 |  */
21 | export async function updateStyle(alias) {
22 |   let state = State.getComponentState(alias);
23 |   State.mergeComponentState(alias, { loadingStyles: true });
24 |   let { Component, settings } = state;
25 |   let { appendTo, elemId, elemProps, debug } = settings;
26 |   let parent = document.querySelector(appendTo);
27 |   // Can't find parent node
28 |   if (!parent) throw new ReferenceError(
29 |     // appendTo element could not be selected
30 |     // ...
31 |   );
32 |   let cssText = await Class.getComponentCSS(alias);
33 |   // Create <style>
34 |   let style = (
35 |     document.getElementById(elemId) ||
36 |     document.createElement('style')
37 |   );
38 |   style.id = style.id || elemId;
39 |   for (let prop in elemProps) {
40 |     if (!elemProps.hasOwnProperty(prop)) continue;
41 |     style[prop] = elemProps[prop];
42 |   }
43 |   style.type = style.type || elemProps;
44 |   style.innerHTML = cssText;
45 |   parent.appendChild(style);
46 |   // Update component state
47 |   State.mergeComponentState(alias, {
48 |     isStyled: true,
49 |     cssText,
50 |     loadingStyles: false
51 |   });
52 |   // Re-render component instances
53 |   State.getComponentInstances(alias).forEach(
54 |     c => c.forceUpdate()
55 |   );
56 |   // Handle subscriptions
57 |   Utils.publish(alias, 'updateStyle');
58 |   // Debug
59 |   if (debug) console.debug(
60 |     'Classy Debug: updateStyle(...)\n',
61 |     `${alias} cssText:
62 |     `,
63 |     cssText
64 |   );
65 |   return cssText;
66 | }
67 | 
68 | /**
69 |  *
70 |  * Removes a component's <style> tag
71 |  *
72 |  * @param  {String}  alias - Component alias
73 |  * @return {Promise}
74 |  */
75 | export async function removeStyle(alias) {
76 |   let state = State.getComponentState(alias);
77 |   let { settings } = state;
78 |   let { debug, elemId } = settings;
79 |   let style = document.getElementById(elemId);
80 |   if (!style) return console.warn(
81 |     // <style id={elemId}> could not be selected
82 |     // ...
83 |   );
84 |   if (style.remove) style.remove();
85 |   else style.parentElement.removeChild(style);
86 |   State.mergeComponentState(alias, {
87 |     isStyled: false,
88 |     cssText: undefined
89 |   });
90 |   // Handle subscriptions
91 |   Utils.publish(alias, 'removeStyle');
92 |   // Debug
93 |   if (debug) console.debug(
94 |     'Classy Debug: removeStyle(...)\n',
95 |     `${alias} styles were removed`
96 |   );
97 | }
98 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Classy
 4 |  *
 5 |  * @module index
 6 |  * @description
 7 |  *   Main Classy module; re-exports decorator and utils modules
 8 |  */
 9 | 
10 | export { default } from './decorator';
11 | export { default as Classy } from './decorator';
12 | export * as Utils from './utils';
13 | 


--------------------------------------------------------------------------------
/src/state.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * Classy - State Helpers
  4 |  *
  5 |  * @module lib/state
  6 |  * @description
  7 |  *   Helpers for interfacing with Classy's state object
  8 |  */
  9 | 
 10 | import * as Utils from './utils';
 11 | 
 12 | /**
 13 |  *
 14 |  * Tracks the states of all Classy components
 15 |  * @type {Object}
 16 |  *
 17 |  */
 18 | const STATE = {};
 19 | 
 20 | /**
 21 |  *
 22 |  * The internal state prop defaults --
 23 |  * These are props that should only be manipulated
 24 |  * internally or through the use of `Utils` module methods.
 25 |  * Other state props (Component, subscriptions, and settings)
 26 |  * are not considered 'internal'.
 27 |  * @type {Object}
 28 |  *
 29 |  */
 30 | const INTERNAL_STATE_DEFAULTS = {
 31 |   isStyled: false,
 32 |   currentTheme: undefined,
 33 |   previousTheme: undefined,
 34 |   loadingStyles: false,
 35 |   cssText: undefined
 36 | };
 37 | 
 38 | /**
 39 |  *
 40 |  * Creates a Classy component state object
 41 |  *
 42 |  * @param  {ReactComponent} Component                          - A ReactComponent
 43 |  * @param  {Object}         settings                           - Settings object with the following options:
 44 |  * @param  {Boolean}        debug=false                        - Logs rendered cssText to debug console whens component styles are updated
 45 |  * @param  {Boolean}        hot=false                          - Applies two effects:
 46 |  *                                                               - Replace Component ref in state object when redecorated
 47 |  *                                                               - Always update styles when mounting an instance
 48 |  * @param  {String}         styleProp=style                    - Component prop to access for getting styles
 49 |  * @param  {String}         themeProp=theme                    - Component prop to access for getting themes
 50 |  * @param  {String}         alias=Component.name               - Key under which component state will be cached
 51 |  * @param  {String}         elemId=${alias}_${Utils.genHash()} - ID prop for component <style> tag
 52 |  * @param  {Object}         elemProps={ type: 'text/css' }     - Other props to apply to component <style> tag
 53 |  * @param  {String}         appendTo=head                      - Element to append component <style> tag to
 54 |  * @return {Object}                                            - Component state object
 55 |  */
 56 | export function createComponentState(
 57 |   Component,
 58 |   {
 59 |     debug      = false,
 60 |     hot        = false,
 61 |     styleProp  = 'style',
 62 |     themeProp  = 'theme',
 63 |     alias      = Component.prototype.displayName || Component.name,
 64 |     elemId     = `${alias}_${Utils.genHash()}`,
 65 |     elemProps  = { type: 'text/css' },
 66 |     appendTo   = 'head'
 67 |   }={}
 68 | ) {
 69 |   if (!alias) throw new ReferenceError(
 70 |     'Classy Error: createComponentState(...)\n' +
 71 |     `Component must be named or component's settings must specify an 'alias'.`
 72 |   );
 73 |   let state = getComponentState(alias);
 74 |   // Already has state
 75 |   if (state && !hot) {
 76 |     console.warn(
 77 |       'Classy Warning: createComponentState(...)\n' +
 78 |       `State has already been created for component ${alias}.`
 79 |     );
 80 |   }
 81 |   // Construct initial state
 82 |   else {
 83 |     setComponentState(alias, {
 84 |       Component,
 85 |       settings: {
 86 |         debug,
 87 |         hot,
 88 |         styleProp,
 89 |         themeProp,
 90 |         alias,
 91 |         elemId,
 92 |         elemProps,
 93 |         appendTo
 94 |       },
 95 |       subscriptions: {},
 96 |       ...INTERNAL_STATE_DEFAULTS
 97 |     });
 98 |     if (debug) console.debug(
 99 |       'Classy Debug: createComponentState(...)\n',
100 |       alias+'\n',
101 |       getComponentState(alias)
102 |     );
103 |   }
104 |   return getComponentState(alias);
105 | }
106 | 
107 | /**
108 |  *
109 |  * Assigns component state to `null`
110 |  *
111 |  * @param {String} alias - Component alias
112 |  */
113 | export function nullifyComponentState(alias) {
114 |   STATE[alias] = null;
115 | }
116 | 
117 | /**
118 |  *
119 |  * Gets a component's classy state object
120 |  *
121 |  * @param  {String} alias - Component alias
122 |  * @return {Object}       - Copy of state object
123 |  */
124 | export function getComponentState(alias) {
125 |   let state = STATE[alias];
126 |   return state ? { ...state } : undefined;
127 | }
128 | 
129 | /**
130 |  *
131 |  * Sets a component's classy state object
132 |  *
133 |  * @param {String} alias - Component alias
134 |  * @param {Object} state - State object
135 |  */
136 | export function setComponentState(alias, state) {
137 |   STATE[alias] = state;
138 | }
139 | 
140 | /**
141 |  *
142 |  * Shallow merges object into component state
143 |  *
144 |  * @param {String} alias  - Component alias
145 |  * @param {Object} state  - Object to be merged into state
146 |  */
147 | export function mergeComponentState(alias, state) {
148 |   STATE[alias] = {
149 |     ...STATE[alias],
150 |     ...state
151 |   };
152 | }
153 | 
154 | /**
155 |  *
156 |  * Decrements a component state object prop
157 |  *
158 |  * @param {String} alias - Component alias
159 |  * @param {String} key   - Key of prop to be decremented
160 |  * @param {Number} num   - Amount to decrement
161 |  */
162 | export function decrProp(alias, key, num=1) {
163 |   let { [key]: val } = getComponentState(alias);
164 |   val -= num;
165 |   mergeComponentState(alias, { [key]: val });
166 | }
167 | 
168 | /**
169 |  *
170 |  * Increments a component state object prop
171 |  *
172 |  * @param {String} alias - Component alias
173 |  * @param {String} key   - Key of prop to be incremented
174 |  * @param {Number} num   - Amount to increment
175 |  */
176 | export function incrProp(alias, key, num=1) {
177 |   let { [key]: val } = getComponentState(alias);
178 |   val += num;
179 |   mergeComponentState(alias, { [key]: val });
180 | }
181 | 
182 | /**
183 |  *
184 |  * Adds component instance to the list of cached instances
185 |  *
186 |  * @param  {String} alias            - Component alias
187 |  * @param  {ReactComponent} instance - Instance of ReactComponent
188 |  * @return {Number}                  - Number of cached instances
189 |  */
190 | export function cacheComponentInstance(alias, instance) {
191 |   let cached = false;
192 |   let instances = getComponentInstances(alias);
193 |   instances.forEach(c => c === instance ? (cached = true) : null);
194 |   if (!cached) {
195 |     instances.push(instance);
196 |     setComponentInstances(alias, instances);
197 |   }
198 |   return getComponentInstances(alias).length;
199 | }
200 | 
201 | /**
202 |  *
203 |  * Removes component instance from the list of cached instances
204 |  *
205 |  * @param  {String} alias            - Component alias
206 |  * @param  {ReactComponent} instance - Instance of ReactComponent
207 |  * @return {Number}                  - Number of cached instances
208 |  */
209 | export function clearComponentInstance(alias, instance) {
210 |   let index;
211 |   let instances = getComponentInstances(alias);
212 |   instances.forEach((c, i) => c === instance ? (index = i) : null);
213 |   if (index !== undefined) {
214 |     instances.splice(index, 1);
215 |     setComponentInstances(alias, instances);
216 |   }
217 |   return getComponentInstances(alias).length;
218 | }
219 | 
220 | /**
221 |  *
222 |  * Gets the list of cached component instances
223 |  *
224 |  * @param  {String} alias - Component alias
225 |  * @return {Array}        - Component instances
226 |  */
227 | export function getComponentInstances(alias) {
228 |   let { symbol, Component } = getComponentState(alias);
229 |   return Component[symbol] ? Component[symbol].slice() : [];
230 | }
231 | 
232 | /**
233 |  *
234 |  * Sets the list of cached component instances
235 |  *
236 |  * @param {String} alias     - Component alias
237 |  * @param {Array}  instances - Component instances
238 |  */
239 | export function setComponentInstances(alias, instances) {
240 |   let { symbol, Component } = getComponentState(alias);
241 |   STATE[alias].Component[symbol] = instances;
242 | }
243 | 
244 | /**
245 |  *
246 |  * Resets the internal state props for all components
247 |  *
248 |  */
249 | export function resetAllInternalStates() {
250 |   let hasProp = STATE::{}.hasOwnProperty;
251 |   for (let alias in STATE) {
252 |     if (hasProp(alias)) resetInternalState(alias);
253 |   }
254 | }
255 | 
256 | /**
257 |  *
258 |  * Reset a component's internal state props
259 |  *
260 |  * @param {String} alias - Component alias
261 |  */
262 | export function resetInternalState(alias) {
263 |   mergeComponentState(alias, INTERNAL_STATE_DEFAULTS);
264 | }
265 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * Classy - Utils
  4 |  *
  5 |  * @module utils
  6 |  * @description
  7 |  *   Public and private utility methods
  8 |  */
  9 | 
 10 | import * as State from './state';
 11 | import * as DOM from './dom';
 12 | 
 13 | /**
 14 |  *
 15 |  * Updates component styles with specified theme object
 16 |  *
 17 |  * @param  {String}  alias       - Classy component alias
 18 |  * @param  {String}  theme       - Classy component theme name
 19 |  * @param  {Boolean} force=false - Re-render theme if already applied
 20 |  * @return {Promise}
 21 |  */
 22 | export async function setTheme(alias, theme, force=false) {
 23 |   let state = State.getComponentState(alias);
 24 |   let { isStyled, currentTheme, cssText } = state;
 25 |   // Component is already styled with specified theme
 26 |   if (!force && isStyled && theme === currentTheme) {
 27 |     return cssText;
 28 |   }
 29 |   State.mergeComponentState(alias, { currentTheme: theme });
 30 |   return await DOM.updateStyle(alias);
 31 | }
 32 | 
 33 | /**
 34 |  *
 35 |  * Convenience method for State.getComponentState(...).currentTheme
 36 |  *
 37 |  * @return {String} - Name of the currently applied theme
 38 |  */
 39 | export function getTheme(...args) {
 40 |   return State.getComponentState(...args).currentTheme;
 41 | }
 42 | 
 43 | /**
 44 |  *
 45 |  * Curries async DOM.updateStyle(...)
 46 |  *
 47 |  */
 48 | export async function updateStyle(...args) {
 49 |   return await DOM.updateStyle(...args);
 50 | }
 51 | 
 52 | /**
 53 |  *
 54 |  * Curries async DOM.removeStyle(...)
 55 |  *
 56 |  */
 57 | export async function removeStyle(...args) {
 58 |   return await DOM.removeStyle(...args);
 59 | }
 60 | 
 61 | /**
 62 |  *
 63 |  * Curries State.getComponentState(...)
 64 |  *
 65 |  */
 66 | export function getComponentState(...args) {
 67 |   return State.getComponentState(...args);
 68 | }
 69 | 
 70 | /**
 71 |  *
 72 |  * Manually initalize your component with Classy
 73 |  *
 74 |  */
 75 | export function createComponentState(...args) {
 76 |   return State.createComponentState(...args);
 77 | }
 78 | 
 79 | /**
 80 |  *
 81 |  * Resets the internal state props for a component
 82 |  * Curries State.resetInternalState(...)
 83 |  *
 84 |  */
 85 | export function resetInternalState(...args) {
 86 |   return State.resetInternalState(...args);
 87 | }
 88 | 
 89 | /**
 90 |  *
 91 |  * Basically, resets Classy
 92 |  * Curries State.resetAllInternalStates(...)
 93 |  *
 94 |  */
 95 | export function resetAllInternalStates(...args) {
 96 |   return State.resetAllInternalStates(...args);
 97 | }
 98 | 
 99 | /**
100 |  *
101 |  * Generates a simple hash with low prob of collision
102 |  *
103 |  * @param  {Number} len=5 - Length of hash to be generated
104 |  * @return {String}       - A five char hash
105 |  */
106 | export function genHash(len=5) {
107 |   let hash = (+new Date * Math.random())
108 |     .toString(36)
109 |     .substring(0, len)
110 |     .replace('.', '');
111 |   while (hash.length !== len) {
112 |     if (hash.length > len) hash = hash.substr(0, len);
113 |     if (hash.length < len) hash += genHash(len - hash.length);
114 |   }
115 |   return hash;
116 | }
117 | 
118 | // @todo: move functions below into an 'events' module
119 | 
120 | /**
121 |  *
122 |  * Calls handler attached to an event
123 |  *
124 |  * @param  {String} alias - Classy component alias
125 |  * @param  {String} event - The event handler to call
126 |  * @param  {Object} more  - Any number of additional args to pass to handler
127 |  */
128 | export function publish(alias, event, ...more) {
129 |   let state = State.getComponentState(alias);
130 |   let { subscriptions } = state;
131 |   if (subscriptions[event]) subscriptions[event](state, ...more);
132 | }
133 | 
134 | /**
135 |  *
136 |  * Attaches a handler to an event
137 |  *
138 |  * @param  {String}   alias   - Classy component alias
139 |  * @param  {String}   event   - The event to assign handler to
140 |  * @param  {Function} handler - The event handler
141 |  */
142 | export function subscribe(alias, event, handler) {
143 |   State.mergeComponentState(alias, {
144 |     subscriptions: { [event]: handler }
145 |   });
146 | }
147 | 
148 | /**
149 |  *
150 |  * Detaches a handler from an event
151 |  *
152 |  * @param  {String} alias - Classy component alias
153 |  * @param  {String} event - The event to unassign handler from
154 |  */
155 | export function unsubscribe(alias, event) {
156 |   State.mergeComponentState(alias, {
157 |     subscriptions: { [event]: null }
158 |   });
159 | }
160 | 


--------------------------------------------------------------------------------
/test/components.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import React, { Component } from 'react';
  4 | import Classy from '../src';
  5 | import cx from 'classnames';
  6 | 
  7 | /**
  8 |  * @class Button
  9 |  * @extends ReactComponent
 10 |  * @description
 11 |  *   A basic button
 12 |  */
 13 | @Classy
 14 | export class Button extends Component {
 15 |   static style = `
 16 |     .button {
 17 |       background: blue;
 18 |     }
 19 |   `
 20 |   render() {
 21 |     return (
 22 |       <button
 23 |         ref="button"
 24 |         className="button">
 25 |         {this.props.children}
 26 |       </button>
 27 |     );
 28 |   }
 29 | }
 30 | 
 31 | /**
 32 |  * @class ToggleButton
 33 |  * @extends ReactComponent
 34 |  * @description
 35 |  *   A button which can be turned on/off
 36 |  */
 37 | @Classy
 38 | export class ToggleButton extends Component {
 39 |   constructor(props) {
 40 |     super(props);
 41 |     this.state = {
 42 |       active: false
 43 |     };
 44 |   }
 45 |   static style = `
 46 |     .toggle-button {
 47 |       background: red;
 48 |     }
 49 |     .toggle-button.toggle-button--active {
 50 |       background: green;
 51 |     }
 52 |   `
 53 |   static defaultProps = {}
 54 |   on() {
 55 |     this.setState({ active: true });
 56 |   }
 57 |   off() {
 58 |     this.setState({ active: false });
 59 |   }
 60 |   toggle() {
 61 |     this.setState({ active: !this.state.active });
 62 |   }
 63 |   render() {
 64 |     return (
 65 |       <button
 66 |         ref="button"
 67 |         className={cx({
 68 |           'toggle-button': true,
 69 |           'toggle-button--active': this.state.active
 70 |         })}
 71 |         onClick={::this.toggle}>
 72 |         {
 73 |           this.props.children
 74 |           ? this.props.children
 75 |           : this.state.active
 76 |             ? 'On'
 77 |             : 'Off'
 78 |         }
 79 |       </button>
 80 |     );
 81 |   }
 82 | }
 83 | 
 84 | /**
 85 |  * @class App
 86 |  * @extends ReactComponent
 87 |  * @description
 88 |  *   A basic React "app"
 89 |  */
 90 | @Classy
 91 | export class App extends Component {
 92 |   static style = `
 93 |     .app {
 94 |       background: white;
 95 |     }
 96 |   `
 97 |   render() {
 98 |     return (
 99 |       <div
100 |         ref="container"
101 |         className="app">
102 |         <Button
103 |           ref="button">
104 |           Touch me!
105 |         </Button>
106 |         <ToggleButton
107 |           ref="toggle"
108 |         />
109 |       </div>
110 |     );
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/test/components.spec.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import { expect } from 'chai';
  4 | import reactDOM from 'react-dom';
  5 | import * as Utils from '../src/utils';
  6 | import {
  7 |   Button,
  8 |   ToggleButton,
  9 |   App
 10 | } from './components.min'; // test with minified script
 11 | const render = ::TestUtils.renderIntoDocument;
 12 | const find = ::reactDOM.findDOMNode;
 13 | const sub = ::Utils.subscribe;
 14 | const unsub = ::Utils.unsubscribe;
 15 | const reset = ::Utils.resetAllInternalStates;
 16 | const getStyle = ::window.getComputedStyle;
 17 | 
 18 | describe('component', () => {
 19 | 
 20 |   beforeEach(function() {
 21 |     reset();
 22 |     document.body.innerHTML = '';
 23 |     document.head.innerHTML = '';
 24 |   });
 25 | 
 26 |   describe('Button', () => {
 27 | 
 28 |     it('should apply styles', (done) => {
 29 |       let button = render(
 30 |         <Button />
 31 |       );
 32 |       sub('Button', 'updateStyle', () => {
 33 |         try {
 34 |           let node = find(button.refs.button);
 35 |           let style = getStyle(node);
 36 |           expect(style.background).to.equal('blue');
 37 |           unsub('Button', 'updateStyle');
 38 |           done();
 39 |         } catch(err) {
 40 |           done(err);
 41 |         }
 42 |       });
 43 |     });
 44 | 
 45 |   });
 46 | 
 47 |   describe('ToggleButton', () => {
 48 | 
 49 |     it('should apply styles', (done) => {
 50 |       let toggle = render(
 51 |         <ToggleButton />
 52 |       );
 53 |       sub('ToggleButton', 'updateStyle', () => {
 54 |         try {
 55 |           let node = find(toggle.refs.button);
 56 |           expect(getStyle(node).background)
 57 |             .to.equal('red');
 58 |           toggle.toggle();
 59 |           expect(getStyle(node).background)
 60 |             .to.equal('green');
 61 |           unsub('ToggleButton', 'updateStyle');
 62 |           done();
 63 |         } catch(err) {
 64 |           done(err);
 65 |         }
 66 |       });
 67 |     });
 68 | 
 69 |   });
 70 | 
 71 |   describe('App', () => {
 72 | 
 73 |     it('should apply styles to container', (done) => {
 74 |       let app = render(
 75 |         <App />
 76 |       );
 77 |       sub('App', 'updateStyle', () => {
 78 |         try {
 79 |           {
 80 |             let node = find(app.refs.container);
 81 |             let style = getStyle(node);
 82 |             expect(style.background).to.equal('white');
 83 |           }
 84 |           {
 85 |             let node = find(app.refs.toggle.refs.button);
 86 |             let style = getStyle(node);
 87 |             expect(style.background).to.equal('red');
 88 |           }
 89 |           unsub('App', 'updateStyle');
 90 |           done();
 91 |         } catch(err) {
 92 |           done(err);
 93 |         }
 94 |       });
 95 |     });
 96 | 
 97 |     it('should apply styles to children', (done) => {
 98 |       let app = render(
 99 |         <App />
100 |       );
101 |       app.refs.toggle.on();
102 |       sub('App', 'updateStyle', () => {
103 |         try {
104 |           let node = find(app.refs.toggle.refs.button);
105 |           let style = getStyle(node);
106 |           expect(style.background).to.equal('green');
107 |           unsub('App', 'updateStyle');
108 |           done();
109 |         } catch(err) {
110 |           done(err);
111 |         }
112 |       });
113 |     });
114 | 
115 |   });
116 | 
117 | });
118 | 


--------------------------------------------------------------------------------
/test/index.spec.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { expect } from 'chai';
 4 | 
 5 | describe('main module', () => {
 6 | 
 7 |   it('should re-export expected submodules', () => {
 8 |     const Classy = require('../src/index');
 9 |     const decorator = require('../src/decorator');
10 |     const utils = require('../src/utils');
11 |     expect(Classy.default).to.be.a('function');
12 |     expect(Classy.default).to.equal(Classy.Classy);
13 |     expect(Classy.default).to.equal(decorator.default);
14 |     expect(Classy.Utils).to.be.an('object');
15 |     expect(Classy.Utils).to.equal(utils);
16 |   });
17 | 
18 | });
19 | 


--------------------------------------------------------------------------------
/test/state.spec.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { expect } = require('chai');
 4 | 
 5 | describe('State module', () => {
 6 | 
 7 |   it('should ...', () => {
 8 |     let State = require('../src/state');
 9 |     
10 |   });
11 | 
12 | });
13 | 


--------------------------------------------------------------------------------
/test/utils.spec.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import { expect } from 'chai';
 4 | 
 5 | describe('Utils module', () => {
 6 | 
 7 |   it('should create "hash" with correct length', () => {
 8 |     let { genHash } = require('../src/utils');
 9 |     for (let i = 0; i < 100; ++i) {
10 |       let len = Math.round(Number(Math.random().toFixed(2))*100);
11 |       if (len > 36) while (len > 36) len = Math.round(Number(Math.random().toFixed(2))*100);
12 |       let hash = genHash(len);
13 |       expect(hash.length).to.equal(len);
14 |     }
15 |   });
16 | 
17 | });
18 | 


--------------------------------------------------------------------------------
/winning.txt:
--------------------------------------------------------------------------------
1 | 
2 |   ＼＼\\ ٩(๑❛ワ❛๑)و //／／
3 | ~ Your Code is Beautiful! ~
4 | 
5 | 


--------------------------------------------------------------------------------