refactor: major refactoring for addon model

.storybook/atoms.stories.js

@@ -5,7 +5,7 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 const {addon} = require('../addon/atoms');
 
-const renderer = create(h);
+const renderer = create({h});
 addon(renderer);
 const {rule} = renderer;
 

.storybook/decorator.stories.tsx

@@ -5,7 +5,7 @@ const {linkTo} = require('@storybook/addon-links');
 
 import {create} from '../lib';
 import {addon} from '../addon/decorator';
-const renderer = create();
+const renderer = create({h});
 addon(renderer);
 const {css} = renderer;
 

.storybook/jsx.stories.js

@@ -4,7 +4,7 @@ const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 
-const renderer = create(h);
+const renderer = create({h});
 const {jsx} = renderer;
 
 const RedBorder = jsx('div', {

.storybook/nesting.stories.js

@@ -5,7 +5,7 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 const {addon} = require('../addon/nesting');
 
-const renderer = create(h);
+const renderer = create({h});
 addon(renderer);
 const {rule} = renderer;
 

.storybook/put.stories.js

@@ -0,0 +1,26 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../index');
+
+const renderer = create();
+const {put} = renderer;
+
+put('red-border', {
+  border: '1px solid red',
+  ':hover': {
+      fontWeight: 'bold'
+  },
+  span: {
+      color: 'red'
+  }
+});
+
+storiesOf('put()', module)
+  .add('Default', () =>
+    h('div', {className: 'red-border'}, 'Hello world')
+  )
+  .add('Nesting', () =>
+    h('div', {className: 'red-border'}, 'Hello ', h('span', null, 'world'))
+  )

.storybook/rule.stories.js

@@ -2,9 +2,11 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-const {create} = require('../lib');
+const {create} = require('../index');
+const {addon} = require('../addon/rule');
 
-const renderer = create(h);
+const renderer = create();
+addon(renderer);
 const {rule} = renderer;
 
 const className1 = rule({

.storybook/sheet.stories.js

@@ -2,10 +2,10 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-const {create} = require('../lib');
+const {create} = require('../index');
 const {addon} = require('../addon/sheet');
 
-const renderer = create(h);
+const renderer = create({h});
 addon(renderer);
 const {sheet} = renderer;
 
@@ -28,7 +28,7 @@ const styles2 = renderer.sheet({
     },
 });
 
-storiesOf('Addons/sheet()', module)
+storiesOf('sheet()', module)
     .add('Default', () =>
         h('div', null,
             h('div', {className: styles.tomato}, 'Red'),

.storybook/stable.stories.js

@@ -5,7 +5,7 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 const {addon} = require('../addon/stable');
 
-const renderer = create(h);
+const renderer = create({h});
 addon(renderer);
 const {rule} = renderer;
 

.storybook/styled.stories.js → .storybook/style.stories.js

@@ -2,14 +2,18 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-const {create} = require('../lib');
-const {addon} = require('../addon/styled');
+const {create} = require('../index');
+const {addon: addonRule} = require('../addon/rule');
+const {addon: addonJsx} = require('../addon/jsx');
+const {addon: addonStyle} = require('../addon/style');
 
-const renderer = create(h);
-addon(renderer);
-const {styled} = renderer;
+const renderer = create({h});
+addonRule(renderer);
+addonJsx(renderer);
+addonStyle(renderer);
+const {style} = renderer;
 
-const RedBorder = styled('div', {
+const RedBorder = style('div', {
   border: '1px solid red'
 }, (props) => {
     if (props.primary) {
@@ -19,7 +23,11 @@ const RedBorder = styled('div', {
     }
 });
 
-storiesOf('Addons/styled()', module)
+const RedBorderItalic = style(RedBorder, {
+    fontStyle: 'italic'
+});
+
+storiesOf('style()', module)
     .add('Default', () =>
         h(RedBorder, null, 'Hello world')
     )
@@ -29,3 +37,6 @@ storiesOf('Addons/styled()', module)
     .add('Inline styles', () =>
         h(RedBorder, {style: {color: 'red'}, primary: true}, 'Hello world')
     )
+    .add('Composability', () =>
+        h(RedBorderItalic, null, 'Hello world')
+    )

.storybook/useStyles.stories.js

@@ -4,7 +4,7 @@ const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 
-const renderer = create(h);
+const renderer = create({h});
 require('../addon/sheet').addon(renderer);
 require('../addon/useStyles').addon(renderer);
 const {useStyles} = renderer;

.storybook/withStyles.stories.js

@@ -4,7 +4,7 @@ const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
 
-const renderer = create(h);
+const renderer = create({h});
 require('../addon/sheet').addon(renderer);
 require('../addon/withStyles').addon(renderer);
 const {withStyles} = renderer;

addon/cache.js

@@ -0,0 +1,17 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    var cache = {};
+
+    renderer.cache = function (styles) {
+        if (!styles) return '';
+
+        var key = renderer.hash(styles);
+
+        if (!cache[key]) {
+            cache[key] = renderer.rule(styles, key);
+        }
+
+        return cache[key];
+    };
+};

addon/config.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var KEBAB_REGEX = /[A-Z]/g;
+
+var hash = function (str) {
+    var hash = 5381, i = str.length;
+
+    while (i) hash = (hash * 33) ^ str.charCodeAt(--i);
+
+    return '_' + (hash >>> 0).toString(36);
+};
+
+exports.addon = function (renderer, config) {
+    config = config || {};
+    var extend = config.extend || Object.assign;
+
+    extend(renderer, {
+        raw: '',
+        cns: {},
+        pfx: '_',
+        client: typeof window === 'object',
+        extend: extend,
+        stringify: JSON.stringify,
+        decl: function (key, value) {
+            key = key.replace(KEBAB_REGEX, '-$&').toLowerCase();
+            return key + ':' + value + ';';
+        },
+        hash: function (obj) {
+            return hash(renderer.stringify(obj));
+        },
+        selector: function (parent, selector) {
+            return parent + (selector[0] === ':' ? ''  : ' ') + selector;
+        },
+    }, config);
+};

addon/decorator.js

@@ -3,13 +3,11 @@
 var cloneElement = require('react').cloneElement;
 
 exports.addon = function (renderer) {
-    var transformStatic = function (fn, styles, block) {
-        block = block || fn.displayName || fn.name;
-
-        var render_ = fn.prototype.render;
+    var transformStatic = function (prototype, styles, block) {
+        var render_ = prototype.render;
         var className = '';
 
-        fn.prototype.render = function() {
+        prototype.render = function() {
             var element = render_.call(this);
 
             if (element) {
@@ -30,9 +28,34 @@ exports.addon = function (renderer) {
         };
     };
 
+    /*
+    var transformDynamic = function (prototype, dynamicTemplate) {
+        var render_ = prototype.render;
+
+        prototype.render = function () {
+            var element = render_.apply(this, arguments);
+            var props = element.props;
+            var className =
+                (props.className || '') +
+                renderer.render(this.constructor, this, this[$$el], dynamicTemplate(this));
+
+            if (process.env.NODE_ENV === 'production') {
+                element.ref = ref;
+                props.className = className;
+                return element;
+            }
+
+            return cloneElement(element, Object.assign({}, props, {ref: ref, className: className}), props.children);
+        };
+    };
+    */
+
     renderer.css = function (a, b) {
         return function (Klass) {
-            transformStatic(Klass, a, b);
+            var block = b || Klass.displayName || Klass.name;
+            var prototype = Klass.prototype;
+
+            transformStatic(prototype, a, block);
         };
     };
 };

addon/jsx.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var addonCache = require('./cache').addon;
+
+exports.addon = function (renderer) {
+    if (!renderer.cache) {
+        addonCache(renderer);
+    }
+
+    renderer.jsx = function (fn, styles, block) {
+        var className;
+        var isElement = typeof fn === 'string';
+
+        if (!block && !isElement)
+            block = fn.displayName || fn.name;
+
+        var Component = function (props) {
+            if (!className) {
+                className = renderer.rule(styles, block);
+            }
+
+            var copy = props;
+
+            if (process.env.NODE_ENV !== 'production') {
+                copy = Object.assign({}, props);
+            }
+
+            var dynamicClassName = renderer.cache(props.css);
+            delete copy.css;
+
+            copy.className = (props.className || '') + className + dynamicClassName;
+
+            return isElement ? renderer.h(fn, copy) : fn(copy);
+        };
+
+        if (process.env.NODE_EVN !== 'production') {
+            if (block) {
+                Component.displayName = 'jsx(' + block + ')';
+            }
+        }
+
+        return Component;
+    };
+};

addon/put.js

@@ -0,0 +1,42 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    var putRaw;
+
+    if (renderer.client) {
+        var sheet = document.head.appendChild(document.createElement('style')).sheet;
+        putRaw = function (rawCss) {
+            sheet.insertRule(rawCss, 0);
+        };
+    } else {
+        putRaw = function (rawCss) {
+            renderer.raw += rawCss;
+        };
+    }
+
+    var put = function (selector, decls, atrule) {
+        var str = '';
+        var prop, value;
+
+        for (prop in decls) {
+            value = decls[prop];
+
+            if (value instanceof Object) {
+                if (prop[0] === '@') {
+                    put(selector, value, prop);
+                } else {
+                    put(renderer.selector(selector, prop), value, atrule);
+                }
+            } else {
+                str += renderer.decl(prop, value);
+            }
+        }
+
+        if (str) {
+            str = '.' + selector + '{' + str + '}';
+            putRaw(atrule ? atrule + '{' + str + '}' : str);
+        }
+    };
+
+    renderer.put = put;
+};