feat: improve snake addon

Author: streamich

.storybook/snake.stories.js

@@ -10,7 +10,17 @@ const {addon: addonSnake} = require('../addon/snake');
 const nano = create({h});
 addonRule(nano);
 addonCache(nano);
-addonSnake(nano);
+addonSnake(nano, {
+    inline: function () {
+        this.display = 'inline';
+    },
+
+    cornerRadius: function (value) {
+        this.borderRadius = value;
+    },
+
+    style: 'fontStyle'
+});
 
 const {s} = nano;
 
@@ -31,5 +41,5 @@ storiesOf('Addons/snake', module)
         h('div', {className: lazy}, 'Hello world')
     )
     .add('Getters', () =>
-        h('div', {className: s.bgBlack.col('pink')}, 'Hello world')
+        h('div', {className: s.bgBlack.col('pink').inline.pointer.cornerRadius('4px').style('italic').bold}, 'Hello world')
     )

addon/snake.js

@@ -3,7 +3,7 @@
 
 var atoms = require('./atoms').atoms;
 
-var createSnake = function (renderer, rules) {
+exports.addon = function (renderer, rules) {
     rules = rules || {};
 
     var defaultRules = renderer.assign({}, atoms, {
@@ -14,9 +14,25 @@ var createSnake = function (renderer, rules) {
         bgBlack: function () {
             this.backgroundColor = '#000';
         },
+
+        pointer: function () {
+            this.cursor = 'pointer';
+        },
+
+        inlineBlock: function () {
+            this.display = 'inline-block';
+        },
+
+        bold: function () {
+            this.fontWeight = 'bold';
+        },
+
+        em: function () {
+            this.fontStyle = 'italic';
+        }
     });
 
-    rules = renderer.assign({}, defaultRules, rules);
+    rules = renderer.assign(defaultRules, rules);
 
     var snake = {};
 
@@ -31,6 +47,7 @@ var createSnake = function (renderer, rules) {
 
             return renderer.cache(instance.obj);
         };
+        instance.valueOf = instance.toString;
 
         return instance;
     };
@@ -78,11 +95,5 @@ var createSnake = function (renderer, rules) {
 
     for (var name in rules) onRule(name);
 
-    return snake;
-};
-
-exports.addon = function (renderer) {
-    var snake = createSnake(renderer);
-
     renderer.s = snake;
 };