feat: create styled() addon

streamich · Mar 13, 2018 · a68d1d7 · a68d1d7
1 parent 76fdf23
commit a68d1d7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/.storybook/styled.stories.js b/.storybook/styled.stories.js
@@ -3,8 +3,10 @@ import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../lib');
+const {addonStyled} = require('../addon/styled');
 
 const renderer = create(h);
+addonStyled(renderer);
 const {styled} = renderer;
 
 const RedBorder = styled('div', {

diff --git a/addon/styled.js b/addon/styled.js
@@ -0,0 +1,33 @@
+'use strict';
+
+exports.addonStyled = function (renderer) {
+    renderer.styled = function (fn, styles, dynamicTemplate, block) {
+        var isElement = typeof fn === 'string';
+        var jsxComponent = renderer.jsx(fn, styles, block);
+
+        if (!block && !isElement)
+            block = fn.displayName || fn.name;
+
+        var Component = function(props) {
+            var copy = props;
+
+            if (process.env.NODE_ENV !== 'production') {
+                copy = Object.assign({}, props);
+            }
+
+            if (dynamicTemplate) {
+                copy.css = dynamicTemplate(props);
+            }
+
+            return jsxComponent(copy);
+        };
+
+        if (process.env.NODE_EVN !== 'production') {
+            if (block || (typeof fn === 'function')) {
+                Component.displayName = 'styled(' + (block || fn.displayName || fn.name) + ')';
+            }
+        }
+
+        return Component;
+    };
+};
diff --git a/lib/index.js b/lib/index.js
@@ -126,37 +126,9 @@ exports.create = function (h) {
             return isElement ? h(fn, copy) : fn(copy);
         };
 
-        if (block && (process.env.NODE_EVN !== 'production')) {
-            Component.displayName = 'jsx(' + block + ')';
-        }
-
-        return Component;
-    };
-
-    renderer.styled = function (fn, styles, dynamicTemplate, block) {
-        var isElement = typeof fn === 'string';
-        var jsxComponent = renderer.jsx(fn, styles, block);
-
-        if (!block && !isElement)
-            block = fn.displayName || fn.name;
-
-        var Component = function(props) {
-            var copy = props;
-
-            if (process.env.NODE_ENV !== 'production') {
-                copy = Object.assign({}, props);
-            }
-
-            if (dynamicTemplate) {
-                copy.css = dynamicTemplate(props);
-            }
-
-            return jsxComponent(copy);
-        };
-
         if (process.env.NODE_EVN !== 'production') {
-            if (block || (typeof fn === 'function')) {
-                Component.displayName = 'styled(' + (block || fn.displayName || fn.name) + ')';
+            if (block) {
+                Component.displayName = 'jsx(' + block + ')';
             }
         }