wip

packages/state-tunnel/src/declarations.ts

@@ -1,3 +1,3 @@
 export type PropList<T> = Extract<keyof T, string>[] | string;
-export type SubscribeCallback<T> = (el: any, props: PropList<T>) => () => void;
+export type SubscribeCallback<T> = (el: any, props: PropList<T>) => void;
 export type ConsumerRenderer<T> = (subscribe: SubscribeCallback<T>, renderer: Function) => any;

packages/state-tunnel/src/utils/__test__/state-tunnel.spec.tsx

@@ -0,0 +1,118 @@
+import { Component, Prop } from '@stencil/core';
+import { newSpecPage, mockDocument } from '@stencil/core/testing';
+import { createProviderConsumer } from '../state-tunnel';
+
+describe('createProviderConsumer', () => {
+  let Tunnel: any;
+  let createTunnelCallback: any;
+  let subscribe: any;
+  let elm: any;
+  let doc = mockDocument();
+
+  interface State {
+    messageLog: string[],
+    creatingMessage: boolean,
+    setCreatingMessage: () => void
+  }
+
+  beforeEach(() => {
+    elm = doc.createElement('stencil-element');
+
+    createTunnelCallback = jest.fn((subscribeFn) => {
+      subscribe = subscribeFn;
+    });
+    Tunnel = createProviderConsumer<State>({
+      messageLog: [],
+      creatingMessage: false,
+      setCreatingMessage: () => {}
+    }, createTunnelCallback);
+  });
+
+  it('should have a provider and consumer', () => {
+    expect(Tunnel.Provider).toBeDefined();
+    expect(Tunnel.Consumer).toBeDefined();
+  });
+
+  it('should call Tunnel consumerRender when Consumer created', () => {
+    const props = {};
+    const childAsFunction = jest.fn();
+    Tunnel.Consumer(props, [childAsFunction]);
+    subscribe(elm, 'all');
+
+    expect(createTunnelCallback.mock.calls.length).toBe(1);
+    expect(createTunnelCallback.mock.calls[0][1]).toBe(childAsFunction);
+  });
+
+  it('should set element prop as copy of state when only a string is passed', () => {
+    Tunnel.Consumer({}, [jest.fn()]);
+    subscribe(elm, 'all');
+
+    const newState = {
+      messageLog: ['a'],
+      creatingMessage: false,
+      setCreatingMessage: () => {}
+    }
+
+    Tunnel.Provider({ state: newState });
+    expect(elm.all).toEqual(newState);
+  });
+
+  it('should set element props array of strings', () => {
+    Tunnel.Consumer({}, [jest.fn()]);
+    subscribe(elm, ['messageLog', 'creatingMessage']);
+
+    const newState = {
+      messageLog: ['a'],
+      creatingMessage: false,
+      setCreatingMessage: () => {}
+    }
+
+    Tunnel.Provider({ state: newState });
+    expect(elm.messageLog).toEqual(['a']);
+    expect(elm.creatingMessage).toEqual(false);
+    expect(elm.setCreatingMessage).toBeUndefined();
+  });
+
+  fit('should set element props array of strings', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+      @Prop() messageLog: string[];
+      @Prop() creatingMessage: boolean;
+    }
+
+    Tunnel.injectProps(CmpA, ['messageLog', 'creatingMessage']);
+
+    const { root } = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`
+    });
+
+    expect(root.messageLog).toEqual([]);
+    expect(root.creatingMessage).toEqual(false);
+
+    let newState = {
+      messageLog: ['a'],
+      creatingMessage: true,
+      setCreatingMessage: () => {}
+    }
+
+    Tunnel.Provider({ state: newState });
+
+    expect(root.messageLog).toEqual(['a']);
+    expect(root.creatingMessage).toEqual(true);
+    expect(root.setCreatingMessage).toBeUndefined();
+
+    newState = {
+      messageLog: ['b'],
+      creatingMessage: false,
+      setCreatingMessage: () => {}
+    }
+
+    Tunnel.Provider({ state: newState });
+
+    expect(root.messageLog).toEqual(['b']);
+    expect(root.creatingMessage).toEqual(false);
+    expect(root.setCreatingMessage).toBeUndefined();
+  });
+
+});

packages/state-tunnel/src/utils/state-tunnel.tsx

@@ -1,6 +1,7 @@
 import { ComponentInterface, FunctionalComponent } from '@stencil/core';
 import { SubscribeCallback, ConsumerRenderer, PropList } from '../declarations';
 
+
 export const createProviderConsumer = <T extends {[key: string]: any}>(defaultState: T, consumerRender: ConsumerRenderer<T>) => {
 
   let listeners: Map<any, PropList<T>> = new Map();
@@ -20,14 +21,10 @@ export const createProviderConsumer = <T extends {[key: string]: any}>(defaultSt
   }
 
   const subscribe: SubscribeCallback<T> = (instance: ComponentInterface, propList: PropList<T>) => {
-    if (listeners.has(instance)) {
-      return noop;
+    if (!listeners.has(instance)) {
+      listeners.set(instance, propList);
+      updateListener(propList, instance);
     }
-
-    listeners.set(instance, propList);
-    updateListener(propList, instance);
-
-    return () => listeners.delete(instance);
   }
 
   const Provider: FunctionalComponent<{state: T}> = ({ state }, children) => {
@@ -42,24 +39,25 @@ export const createProviderConsumer = <T extends {[key: string]: any}>(defaultSt
     return consumerRender(subscribe, children[0] as any);
   }
 
-  const injectProps = (childComponent: any, fieldList: PropList<T>) => {
-    let unsubscribe: any = null;
+  const injectProps = (Cstr: any, fieldList: PropList<T>) => {
+    const CstrPrototype = Cstr.prototype;
+    const cstrComponentWillLoad = CstrPrototype.componentWillLoad;
+    const cstrComponentDidUnload = CstrPrototype.componentDidUnload;
 
-    const prevComponentWillLoad = (childComponent.prototype as ComponentInterface).componentWillLoad;
-    (childComponent.prototype as ComponentInterface).componentWillLoad = function() {
-      unsubscribe = subscribe(this, fieldList);
-      if (prevComponentWillLoad) {
-        return prevComponentWillLoad.bind(this)();
+    CstrPrototype.componentWillLoad = function() {
+      subscribe(this, fieldList);
+
+      if (cstrComponentWillLoad) {
+        return cstrComponentWillLoad.call(this);
       }
     }
 
-    const prevComponentDidUnload = childComponent.prototype.componentDidUnload;
-    childComponent.prototype.componentDidUnload = function() {
-      unsubscribe();
-      if (prevComponentDidUnload) {
-        return prevComponentDidUnload.bind(this)();
+    CstrPrototype.componentDidUnload = function() {
+      listeners.delete(this);
+      if (cstrComponentDidUnload) {
+        cstrComponentDidUnload.call(this);
       }
-    }
+    };
   }
 
   return {
@@ -68,5 +66,3 @@ export const createProviderConsumer = <T extends {[key: string]: any}>(defaultSt
     injectProps
   }
 }
-
-const noop = () => {};

packages/state-tunnel/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
-    "strict": true,
     "declaration": false,
     "experimentalDecorators": true,
     "lib": [