Feature/initial draft

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["@babel/preset-env",
+    {
+      "targets": {
+        "node": "current"
+      }
+    }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

__tests__/plug.spec.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { render, cleanup, waitForElement } from 'react-testing-library';
+import 'jest-dom/extend-expect'
+import { plug } from '../lib';
+import { of, Observable, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { PluggedTestComponent, setTotal10ChangedTrue } from '../lib/aux/aux-code';
+
+describe('Plug', () => {
+  afterEach(cleanup);
+
+  it('Renders', async done => {
+    const { getByTestId } = render(<PluggedTestComponent name="Test Testersson" />);
+
+    const nameNode = await waitForElement(() => getByTestId('name'))
+    const totalNode = await waitForElement(() => getByTestId('total'))
+    const changedNode = await waitForElement(() => getByTestId('changed'))
+
+    expect(nameNode).toHaveTextContent('Test Testersson');
+    expect(totalNode).toHaveTextContent('Total: 0');
+    expect(changedNode).toHaveTextContent(`The store wasn't changed`);
+    done();
+  })
+
+  it('Renders with new State', async done => {
+    setTotal10ChangedTrue();
+
+    const { getByTestId } = render(<PluggedTestComponent name="Test Testersson" />);
+
+    const nameNode = await waitForElement(() => getByTestId('name'))
+    const totalNode = await waitForElement(() => getByTestId('total'))
+    const changedNode = await waitForElement(() => getByTestId('changed'))
+
+    expect(nameNode).toHaveTextContent('Test Testersson');
+    expect(totalNode).toHaveTextContent('Total: 10');
+    expect(changedNode).toHaveTextContent(`The store was changed`);
+    done();
+  })
+})
+
+

__tests__/store.spec.ts

@@ -0,0 +1,75 @@
+import { createStore } from "../lib";
+import { take, skip } from 'rxjs/operators';
+import { state$, setTotal10ChangedTrue, setTotal20, getCurrentState, setTotalDouble } from "../lib/aux/aux-code";
+
+describe('Store', () => {
+  beforeAll(() => {
+    process.env = Object.assign(process.env, { isTesting: 'true' });
+  });
+
+  it('Creates a Store', async done => {
+    state$.pipe(
+      take(1)
+    ).subscribe(data => {
+      expect(data).toEqual({
+        total: 0,
+        changed: false
+      });
+      done();
+    })
+  });
+
+  it('Update State', async done => {
+    state$.pipe(
+      skip(1),
+      take(1)
+    ).subscribe(data => {
+      expect(data).toEqual({
+        total: 10,
+        changed: true
+      });
+      done();
+    });
+
+    setTotal10ChangedTrue();
+  });
+
+  it('Update State Partially', async done => {
+    state$.pipe(
+      skip(1),
+      take(1)
+    ).subscribe(data => {
+      expect(data).toEqual({
+        total: 20,
+        changed: true
+      });
+      done();
+    })
+
+    setTotal20();
+  });
+
+  it('Retrieve current State', () => {
+    const currentState = getCurrentState();
+
+    expect(currentState).toEqual({
+      total: 20,
+      changed: true
+    });
+  });
+
+  it('Update State using Callback', async done => {
+    state$.pipe(
+      skip(1),
+      take(1)
+    ).subscribe(data => {
+      expect(data).toEqual({
+        total: 40,
+        changed: true
+      });
+      done();
+    })
+
+    setTotalDouble();
+  });
+})

dist/aux/clone.d.ts

@@ -0,0 +1 @@
+export declare const clone: (target: any) => any;

dist/aux/clone.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clone = (target) => JSON.parse(JSON.stringify(target));

dist/index.d.ts

@@ -1 +1,3 @@
-export declare function testLib(): string;
+import { plug } from "./plug";
+import { createStore } from "./store";
+export { plug, createStore };

dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function testLib() {
-    return "It's working!";
-}
-exports.testLib = testLib;
+const plug_1 = require("./plug");
+exports.plug = plug_1.plug;
+const store_1 = require("./store");
+exports.createStore = store_1.createStore;

dist/interfaces/plug.d.ts

@@ -0,0 +1,10 @@
+import { Observable } from "rxjs";
+export declare type TStream = (stream: any) => Observable<any>;
+export interface ILifecycle {
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+}
+export interface IPlugState {
+    hasEmmited: boolean;
+    innerData?: any;
+}

dist/interfaces/plug.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/interfaces/store.d.ts

@@ -0,0 +1,7 @@
+import { BehaviorSubject } from 'rxjs';
+export interface IStore<T> {
+    state$: BehaviorSubject<T>;
+    updateState(request: Function | Partial<T>): void;
+    stateInjector<T>(func: Function): () => T;
+    getCurrentState(): T;
+}

dist/interfaces/store.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/plug.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Subscription } from 'rxjs';
+import { TStream, ILifecycle, IPlugState } from './interfaces/plug';
+export declare const plug: (stream: TStream, lifecycleHooks: Partial<ILifecycle>) => (WrappedComponent: any) => {
+    new (props: any): {
+        _streamSubscription: Subscription;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        render(): JSX.Element | null;
+        context: any;
+        setState<K extends "innerData" | "hasEmmited">(state: IPlugState | ((prevState: Readonly<IPlugState>, props: Readonly<any>) => IPlugState | Pick<IPlugState, K> | null) | Pick<IPlugState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<IPlugState>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+    };
+    contextType?: import("react").Context<any> | undefined;
+};

dist/plug.jsx

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+exports.plug = (stream, lifecycleHooks) => (WrappedComponent) => class PluggedComponent extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasEmmited: false,
+        };
+    }
+    componentDidMount() {
+        this._streamSubscription = stream(this.props).subscribe((data) => this.setState({
+            hasEmmited: true,
+            innerData: data,
+        }));
+        if (lifecycleHooks.componentDidMount) {
+            lifecycleHooks.componentDidMount();
+        }
+    }
+    componentWillUnmount() {
+        this._streamSubscription.unsubscribe();
+        if (lifecycleHooks.componentWillUnmount) {
+            lifecycleHooks.componentWillUnmount();
+        }
+    }
+    render() {
+        const { hasEmmited, innerData } = this.state;
+        if (hasEmmited) {
+            return <WrappedComponent {...innerData}/>;
+        }
+        return null;
+    }
+};

dist/store.d.ts

@@ -0,0 +1,3 @@
+import { IStore } from './interfaces/store';
+declare function createStore<IState>(initialState: IState): IStore<IState>;
+export { createStore };

dist/store.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const clone_1 = require("./aux/clone");
+const rxjs_1 = require("rxjs");
+function createStore(initialState) {
+    const state$ = new rxjs_1.BehaviorSubject(clone_1.clone(initialState));
+    const updateState = (request) => {
+        const isFunction = request instanceof Function;
+        const currentState = clone_1.clone(state$.getValue());
+        const newKeys = isFunction ? request(currentState) : request;
+        state$.next(Object.assign({}, currentState, newKeys));
+    };
+    function stateInjector(func) {
+        return () => func(state$.getValue());
+    }
+    const getCurrentState = () => state$.getValue();
+    return {
+        state$,
+        stateInjector,
+        updateState,
+        getCurrentState,
+    };
+}
+exports.createStore = createStore;

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  roots: [
+    "<rootDir>"
+  ],
+  globals: {
+    'ts-jest': {
+      babelConfig: true
+    }
+  },
+  moduleFileExtensions: [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ],
+}

lib/aux/aux-code.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { plug, createStore } from "../../lib";
+import { map, combineLatest } from "rxjs/operators";
+import { of, Observable } from "rxjs";
+
+interface IProp {
+  name: string;
+}
+
+interface IStore {
+  total: number;
+  changed: boolean;
+}
+
+const initialState: IStore = {
+  total: 0,
+  changed: false
+}
+
+const { updateState, getCurrentState, state$ } = createStore(initialState);
+
+const TestComponent = (props: IStore & IProp) => {
+  const { total, changed, name } = props;
+  return (
+    <div>
+      <h1 data-testid="name">{name}</h1>
+      <p data-testid="total">Total: {total}</p>
+      <p data-testid="changed">The store was{changed ? '' : `n't`} changed.</p>
+    </div>
+  )
+}
+
+const stream = (props: IProp): Observable<IStore & IProp> => {
+  return of(props).pipe(
+    combineLatest(state$),
+    map(([props, state]) => {
+      const data: IStore & IProp = {
+        name: props.name,
+        ...state
+      }
+      return data;
+    })
+  );
+}
+
+const setTotal10ChangedTrue = () => updateState({
+  total: 10, changed: true
+});
+
+const setTotal20 = () => updateState({
+  total: 20
+});
+
+const setTotalDouble = () => updateState((state: any) => ({
+  total: state.total * 2
+}));
+
+const PluggedTestComponent = plug<IProp>(stream)(TestComponent);
+
+export {
+  state$,
+  getCurrentState,
+  PluggedTestComponent,
+  setTotal10ChangedTrue,
+  setTotal20,
+  setTotalDouble
+}

lib/aux/clone.ts

@@ -0,0 +1 @@
+export const clone = (target: any) => JSON.parse(JSON.stringify(target));

lib/index.ts

@@ -1,3 +1,7 @@
-export function testLib(): string {
-  return `It's working!`;
+import { plug } from "./plug";
+import { createStore } from "./store";
+
+export {
+  plug,
+  createStore
 }

lib/interfaces/plug.ts

@@ -0,0 +1,13 @@
+import { Observable } from "rxjs";
+
+export type TStream = (stream: any) => Observable<any>;
+
+export interface ILifecycle {
+  componentDidMount: () => void;
+  componentWillUnmount: () => void;
+}
+
+export interface IPlugState {
+  hasEmmited: boolean;
+  innerData?: any;
+}

lib/interfaces/store.ts

@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+
+export interface IStore<T> {
+  state$: Observable<T>;
+  updateState(request: Function | Partial<T>): void;
+  stateInjector<T>(func: Function): () => T;
+  getCurrentState(): T;
+}