Extended getComponent: system availability

src/core/system.js

@@ -227,8 +227,17 @@ export default class Store {
   }
 
   getComponents(component) {
-    if(typeof component !== "undefined")
+    const res = this.system.components[component]
+
+    if(Array.isArray(res)) {
+      return res.reduce((ori, wrapper) => {
+        return wrapper(ori, this.getSystem())
+      })
+    }
+    if(typeof component !== "undefined") {
       return this.system.components[component]
+    }
+
     return this.system.components
   }
 
@@ -322,17 +331,16 @@ function systemExtend(dest={}, src={}) {
   }
 
   // Wrap components
-  // Parses existing components in the system, injects new wrappers into the dest,
-  // and removes wrapComponents from the src so it doesn't make it into the final system
+  // Parses existing components in the system, and prepares them for wrapping via getComponents
   if(src.wrapComponents) {
-    objMap(src.wrapComponents, (wrapper, key) => {
-      if(src.components && src.components[key]) {
-        // eslint-disable-next-line no-console
-        console.warn("Warning: providing and wrapping the same component simultaneously is not supported.")
-      }
-
-      if(dest.components[key]) {
-        dest.components[key] = wrapper(dest.components[key])
+    objMap(src.wrapComponents, (wrapperFn, key) => {
+      const ori = dest.components[key]
+      if(ori && Array.isArray(ori)) {
+        dest.components[key] = ori.concat([wrapperFn])
+      } else if(ori) {
+        dest.components[key] = [ori, wrapperFn]
+      } else {
+        dest.components[key] = null
       }
     })
 

test/core/system/wrapComponent.js

@@ -86,7 +86,7 @@ describe("wrapComponents", () => {
     })
   })
 
-  it.skip("should provide a reference to the system to the wrapper", function(done){
+  it("should provide a reference to the system to the wrapper", function(){
 
     // Given
 
@@ -116,7 +116,7 @@ describe("wrapComponents", () => {
             wow: (OriginalComponent, system) => (props) => {
               return <container>
                 <OriginalComponent {...props}></OriginalComponent>
-                <OriginalComponent name="Wrapped"></OriginalComponent>
+                <div>{system.dogeSelectors.wow()}</div>
               </container>
             }
           }
@@ -125,7 +125,7 @@ describe("wrapComponents", () => {
     })
 
     // Then
-    var Component = system.getSystem().getComponents("wow")
+    var Component = mySystem.getSystem().getComponents("wow")
     const wrapper = render(<Component name="Normal" />)
 
     const container = wrapper.children().first()
@@ -134,6 +134,6 @@ describe("wrapComponents", () => {
     const children = container.children()
     expect(children.length).toEqual(2)
     expect(children.eq(0).text()).toEqual("Original component")
-    expect(children.eq(1).text()).toEqual("Wrapped component")
+    expect(children.eq(1).text()).toEqual("WOW much data")
   })
 })