handle composition with createComponent using combineRules

src/__snapshots__/createComponent.test.js.snap

@@ -12,3 +12,29 @@ Object {
   "text": "test",
 }
 `;
+
+exports[`createComponent should compose 1`] = `
+Object {
+  "children": undefined,
+  "data": Object {
+    "component": [Function],
+  },
+  "elm": undefined,
+  "key": undefined,
+  "sel": "div",
+  "text": "test",
+}
+`;
+
+exports[`createComponent should compose and overwrite rule 1`] = `
+Object {
+  "children": undefined,
+  "data": Object {
+    "component": [Function],
+  },
+  "elm": undefined,
+  "key": undefined,
+  "sel": "div",
+  "text": "test",
+}
+`;

src/createComponent.js

@@ -1,11 +1,18 @@
 import { h } from 'snabbdom'
+import { combineRules } from 'fela'
 
 export default function createComponent(rules, selector = 'div') {
   return function(props, children) {
     const c = arguments.length === 1 ? props : children
     const p = arguments.length === 1
       ? { component: rules }
       : Object.assign({}, props, { component: rules })
-    return h(selector, p, c)
+    if (typeof selector === 'string') {
+      return h(selector, p, c)
+    }
+    const sel = selector(p, c)
+    const mergedRules = combineRules(sel.data.component, rules)
+    const pp = Object.assign({}, p, { component: mergedRules })
+    return h(sel.sel, pp, c)
   }
 }

src/createComponent.test.js

@@ -4,11 +4,35 @@ test('createComponent should return a function', () =>
   expect(typeof createComponent(() => ({}))).toBe('function'))
 
 test('createComponent second call should return an object', () => {
-  const Div = createComponent(() => ({}))
+  const Div = createComponent(() => ({ color: 'red' }))
   const vdom = Div('test')
+  const style = vdom.data.component({})
 
   expect(typeof vdom).toBe('object')
+  expect(style).toEqual({ color: 'red' })
+
+  expect(vdom).toMatchSnapshot()
+})
+test('createComponent should compose', () => {
+  const Div = createComponent(() => ({ backgroundColor: 'red' }))
+  const RedBoldDiv = createComponent(() => ({ fontWeight: 'bold' }), Div)
+  const vdom = RedBoldDiv('test')
+  const style = vdom.data.component({})
+
+  expect(vdom).toMatchSnapshot()
+  expect(style).toEqual({ backgroundColor: 'red', fontWeight: 'bold' })
+})
+test('createComponent should compose and overwrite rule', () => {
+  const RedDiv = createComponent(() => ({ backgroundColor: 'red' }))
+  const YellowDiv = createComponent(
+    () => ({ fontWeight: 'bold', backgroundColor: 'yellow' }),
+    RedDiv,
+  )
+  const vdom = YellowDiv('test')
+  const style = vdom.data.component({})
+
   expect(vdom).toMatchSnapshot()
+  expect(style).toEqual({ backgroundColor: 'yellow', fontWeight: 'bold' })
 })
 
 test('createComponent should have a function in component props', () => {