@reactables/core 0.4.0-alpha.0

package/README.md

@@ -0,0 +1,310 @@
+# Reactables Core
+
+## Description
+
+Reactive state management with RxJS.
+
+## Table of Contents
+
+1. [Installation](#installation)
+1. [Core concepts](#core-concepts)
+    1. [Reactables](#reactable-concept)
+    1. [Hub and Store](#hub-stores)
+    1. [Effects](#effects)
+    1. [Scoped Effects](#scoped-effects)
+    1. [Flow & Containment](#flow-containment)
+1. [Examples](#examples)
+    1. [Basic Counter](#basic-counter-example)
+    1. [Scoped Effects - Updating Todos](#scoped-effects-example)
+    1. [Connecting Multiple Reactables - Event Prices](#connecting-hub-example)
+1. [API](#api)
+    1. [Reactable](#reactable)
+    1. [RxBuilder](#rx-builder)
+        1. [RxConfig](#rx-config)
+    1. [Other Interfaces](#interfaces)
+        1. [Effect](#api-effect)
+        1. [ScopedEffects](#api-scoped-effects)
+        1. [Action](#api-action)
+        1. [Reducer](#api-reducer)
+1. [Testing](#testing)
+    1. [Reactables](#testing-reactables)
+
+## Installation <a name="installation"></a>
+
+`npm i @reactables/core`
+
+## Core concepts <a name="core-concepts"></a>
+
+**Prerequisite**: Basic understanding of [Redux](https://redux.js.org/introduction/core-concepts) and [RxJS](https://rxjs.dev/) is helpful.
+
+In this documentation the term *stream* will refer to an RxJS observable stream.
+
+### Reactables <a name="reactable-concept"></a>
+
+[Reactables](#reactable) (prefixed with Rx) are objects that encapulate all the logic required for state management. They expose a `state$` observable and `actions` methods. Applications can subscribe to `state$` to receive state changes and call action methods to trigger them.
+
+```javascript
+import { RxCounter } from '@reactables/examples';
+
+const counterReactable = RxCounter();
+
+const { state$, actions: { increment, reset } } = counterReactable;
+
+state$.subscribe(({ count }) => {
+  // Update the count when state changes.
+  document.getElementById('count').innerHTML = count;
+});
+
+// Bind click handlers
+document.getElementById('increment').addEventListener('click', increment);
+document.getElementById('reset').addEventListener('click', reset);
+
+```
+For a full example, see [Basic Counter Example](#basic-counter-example).
+
+### Hub and Store <a name="hub-stores"></a>
+
+Internally, [Reactables](#reactable-concept) are composed of a hub and store.
+
+The hub is responsible for dispatching actions to the store. It is also responsible for handling side effects.
+
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideOneHubStore.jpg" width="600" />
+
+### Effects<a name="effects"></a>
+
+When initializing a [Reactable](#reactable-concept) we can declare effects. The hub will listen for various actions and perform side effects as needed. The store will receive actions resulting from these effects.
+
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideTwoEffect.jpg" width="600" />
+
+### Scoped Effects <a name="scoped-effects"></a>
+
+Scoped Effects are dynamically created streams scoped to a particular action & key combination when an action is dispatch.
+
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideThreeScopedEffects.jpg" width="600" />
+
+### Flow & Containment <a name="flow-containment"></a>
+Actions and logic flow through the App in one direction and are **contained** in their respective streams. This makes state updates more predictable and traceable during debugging.
+
+Avoid [tapping](https://rxjs.dev/api/operators/tap) your streams. This prevents **logic leaking** from the stream(s).
+
+  - i.e do not [tap](https://rxjs.dev/api/operators/tap) stream A to trigger an action on stream B. Instead consider declaring stream A as a [source](#hub-sources) for stream B so the dependency is explicit.
+
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideSevenEightUnidirectionalFlow.jpg" />
+
+## Examples <a name="examples"></a>
+
+### Basic Counter <a name="basic-counter-example"></a>
+
+Basic counter example. Button clicks dispatch actions to increment or reset the counter.
+
+Basic Counter             |  Design Diagram           | Try it out on StackBlitz.<br /> Choose your framework
+:-------------------------:|:-------------------------:|:-------------------------:
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/BasicCounterExamplePic.jpg" width="200" />  | <img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide11BasicCounterExample.jpg" width="400" />  |  <a href="https://stackblitz.com/edit/github-qtpo1k?file=src%2Findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-hfk1t1?file=src%2FCounter.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /></a><br /><a href="https://stackblitz.com/edit/github-98unub?file=src%2Fapp%2Fcounter%2Fcounter.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
+
+### Scoped Effects - Updating Todos <a name="scoped-effects-example"></a>
+
+Updating statuses of todo items shows scoped effects in action. An 'update todo' stream is created for each todo during update. Pending async calls in their respective stream are cancelled if a new request comes in with RxJS [switchMap](https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap) operator.
+
+Todo Status Updates             |  Design Diagram           | Try it out on StackBlitz.<br /> Choose your framework
+:-------------------------:|:-------------------------:|:-------------------------:
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/ScopedEffectsTodosPic.jpg" width="200" />  | <img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide12ScopedEffectsExampleTodos.jpg" width="400" />  |  <a href="https://stackblitz.com/edit/github-6pgtev?file=src%2Findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-1r6pki?file=src%2FTodoUpdates.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /><br /><a href="https://stackblitz.com/edit/github-zfmupm?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ftodos%2Ftodos.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
+
+### Connecting Multiple Reactables - Event Prices  <a name="connecting-hub-example"></a>
+
+This examples shows two set reactables. The first is responsible for updating state of the user controls. The second fetches prices based on input from the first set.
+
+Event Prices             |  Design Diagram           | Try it out on StackBlitz.<br /> Choose your framework
+:-------------------------:|:-------------------------:|:-------------------------:
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/ConnectingHubsEventPricesPic.jpg" width="200" />  | <img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide13ConnectingHubsExampleEventPrices.jpg" width="400" />  | <a href="https://stackblitz.com/edit/github-pgpwly?file=src%2findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-eypqvc?file=src%2FEventTickets.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /></a><br /><a href="https://stackblitz.com/edit/github-66mbtu?file=src%2Fapp%2Fevent-tickets%2Fevent-tickets.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
+
+
+## API <a name="api"></a>
+
+### Reactable <a name="reactable"></a>
+
+Reactables provide the API for applications and UI components to receive and trigger state updates.
+
+```typescript
+export interface Reactable<T, S = ActionMap> {
+  state$: Observable<T>;
+  actions?: S;
+}
+
+export interface ActionMap {
+  [key: string | number]: (payload?: unknown) => void;
+}
+```
+| Property | Description |
+| -------- | ----------- |
+| state$ | Observable that emit state changes |
+| actions (optional) | Dictionary of methods that dispatches actions to update state |
+
+### RxBuilder <a name="rx-builder"></a>
+
+RxBuilder factory help build [Reactables](#reactable). Accepts a [RxConfig](#rx-confg) configuration object
+
+```typescript
+type RxBuilder = <T, S extends Cases<T>>(config: RxConfig<T, S>) => Reactable<T, unknown>
+
+```
+
+#### RxConfig <a name="rx-config"></a>
+
+Configuration object for creating Reactables.
+
+```typescript
+interface RxConfig <T, S extends Cases<T>>{
+  initialState: T;
+  reducers: S;
+  storeValue?: boolean;
+  debug?: boolean;
+  effects?: Effect<unknown, unknown>[];
+  sources?: Observable<Action<unknown>>[];
+}
+
+interface Cases<T> {
+  [key: string]: SingleActionReducer<T, unknown>
+    | {
+        reducer: SingleActionReducer<T, unknown>
+        effects?: (payload?: unknown) => ScopedEffects<unknown>
+      };
+}
+
+type SingleActionReducer<T, S> = (state: T, action: Action<S>) => T;
+```
+| Property | Description |
+| -------- | ----------- |
+| initialState | Initial state of the Reactable |
+| reducers | Dictionary of cases for the Reactable to handle. Each case can be a reducer function or a configuration object. RxBuilder will use this to generate Actions, Reducers, and add [ScopedEffects](#api-scoped-effects). |
+| debug (optional) | to turn on debugging to console.log all messages received by the store and state changes |
+| storeValue (optional) | Option to store value if Reactable is used to persist application state. Subsequent subscriptions will receive the latest stored value. Default to false |
+| effects (optional) | Array of [Effects](#api-effects) to be registered to the Reactable |
+| sources (optional) <a name="hub-sources"></a> | Additional [Action](#api-actions) Observables the Reactable is listening to |
+
+Debug Example:
+
+<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideSixDebug.jpg" width="500" />
+
+### Other Interfaces <a name="interfaces"></a>
+
+#### Effect <a name="api-effect"></a>
+
+Effects are expressed as [RxJS Operator Functions](https://rxjs.dev/api/index/interface/OperatorFunction). They pipe the [dispatcher$](#hub-dispatcher) stream and run side effects on incoming [Actions](#api-action).
+
+```typescript
+type Effect<T, S> = OperatorFunction<Action<T>, Action<S>>;
+```
+
+#### ScopedEffects <a name="api-scoped-effects"></a>
+
+Scoped Effects are declared in [Actions](#api-action). They are dynamically created stream(s) scoped to an Action `type` & `key` combination.
+
+```typescript
+interface ScopedEffects<T> {
+  key?: string;
+  effects: Effect<T, unknown>[];
+}
+```
+| Property | Description |
+| -------- | ----------- |
+| key (optional) | key to be combined with the Action `type` to generate a unique signature for the effect stream(s). Example: An id for the entity the action is being performed on. |
+| effects | Array of [Effects](#api-effects) scoped to the Action `type` & `key` |
+
+Example:
+
+```typescript
+
+const UPDATE_TODO = 'UPDATE_TODO';
+const UPDATE_TODO_SUCCESS = 'UPDATE_TODO_SUCCESS';
+const updateTodo = ({ id, message }, todoService: TodoService) => ({
+  type: UPDATE_TODO,
+  payload: { id, message },
+  scopedEffects: {
+    key: id,
+    effects: [
+      (updateTodoActions$: Observable<Action<string>>) =>
+        updateTodoActions$.pipe(
+          mergeMap(({ payload: { id, message } }) => todoService.updateTodo(id, message))
+          map(({ data }) => ({
+            type: UPDATE_TODO_SUCCESS,
+            payload: data
+          }))
+        )
+    ]
+  }
+})
+```
+
+#### Action <a name="api-action"></a>
+```typescript
+interface Action<T = undefined> {
+  type: string;
+  payload?: T;
+  scopedEffects?: ScopedEffects<T>;
+}
+```
+| Property | Description |
+| -------- | ----------- |
+| type | type of Action being dispatched |
+| payload (optional) | payload associated with Action |
+| scopedEffects (optional) | [See ScopedEffects](#api-scoped-effects) |
+
+#### Reducer <a name="api-reducer"></a>
+
+From [Redux Docs](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers)
+> Reducers are functions that take the current state and an action as arguments, and return a new state result
+
+```typescript
+type Reducer<T> = (state?: T, action?: Action<unknown>) => T;
+```
+
+## Testing <a name="testing"></a>
+
+We can use RxJS's built in [Marble Testing](https://rxjs.dev/guide/testing/marble-testing) for testing [Reactables](#reactable).
+
+### Reactables <a name="testing-reactables"></a>
+
+```typescript
+// https://github.com/reactables/reactables/blob/main/packages/examples/src/Counter/Counter.test.ts
+import { Counter } from './Counter';
+import { Subscription } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
+
+describe('Counter', () => {
+  let testScheduler: TestScheduler;
+  let subscription: Subscription;
+
+  beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  });
+  afterEach(() => {
+    subscription?.unsubscribe();
+  });
+
+  it('should increment and reset', () => {
+    testScheduler.run(({ expectObservable, cold }) => {
+      // Create Counter Reactable
+      const {
+        state$,
+        actions: { increment, reset },
+      } = Counter();
+
+      // Call actions
+      subscription = cold('--b-c', {
+        b: increment,
+        c: reset,
+      }).subscribe((action) => action());
+
+      // Assertions
+      expectObservable(state$).toBe('a-b-c', {
+        a: { count: 0 },
+        b: { count: 1 },
+        c: { count: 0 },
+      });
+    });
+  });
+});
+
+```

package/dist/Factories/HubFactory.d.ts

@@ -0,0 +1,2 @@
+import { Hub, HubConfig } from '../Models/Hub';
+export declare const HubFactory: ({ effects, sources }?: HubConfig) => Hub;

package/dist/Factories/HubFactory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/RxBuilder.d.ts

@@ -0,0 +1,8 @@
+import { SliceConfig, Cases } from './createSlice';
+import { HubConfig } from '../Models/Hub';
+import { Reactable } from '../Models/Reactable';
+export interface RxConfig<T, S extends Cases<T>> extends SliceConfig<T, S>, HubConfig {
+    debug?: boolean;
+    storeValue?: boolean;
+}
+export declare const RxBuilder: <T, S extends Cases<T>>({ effects, sources, debug, storeValue, ...sliceConfig }: RxConfig<T, S>) => Reactable<T, { [K in keyof S]: (payload?: unknown) => void; }>;

package/dist/Helpers/addEffects.d.ts

@@ -0,0 +1,5 @@
+import { Action, ActionCreator, ScopedEffects } from '../Models/Action';
+import { Effect } from '../Models/Effect';
+import { Observable } from 'rxjs';
+export declare const addEffects: <T>(actionCreator: ActionCreator<T>, scopedEffects: (payload: T) => ScopedEffects<T>) => ActionCreator<T>;
+export declare const createEffect: <T, S>(action: string, operator: (actions$: Observable<Action<T>>) => Observable<Action<S>>) => Effect<T, S>;

package/dist/Helpers/createSlice.d.ts

@@ -0,0 +1,24 @@
+import { Action, ActionCreator, ScopedEffects } from '../Models/Action';
+import { Reducer } from '../Models/Hub';
+export type SingleActionReducer<T, S> = (state: T, action: Action<S>) => T;
+export interface Slice<T> {
+    actions: {
+        [key: string]: ActionCreator<unknown>;
+    };
+    reducer: Reducer<T>;
+}
+export interface Cases<T> {
+    [key: string]: SingleActionReducer<T, unknown> | {
+        reducer: SingleActionReducer<T, unknown>;
+        effects?: (payload?: unknown) => ScopedEffects<unknown>;
+    };
+}
+export interface SliceConfig<T, S extends Cases<T>> {
+    initialState: T;
+    reducers: S;
+    name?: string;
+}
+export declare const createSlice: <T, S extends Cases<T>>(config: SliceConfig<T, S>) => {
+    reducer: Reducer<T>;
+    actions: { [K in keyof S]: ActionCreator<unknown>; };
+};

package/dist/Helpers/createSlice.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Helpers/index.d.ts

@@ -0,0 +1 @@
+export { RxBuilder } from './RxBuilder';

package/dist/Models/Action.d.ts

@@ -0,0 +1,11 @@
+import { Effect } from './Effect';
+export interface ScopedEffects<T> {
+    key?: string | number;
+    effects: Effect<T, unknown>[];
+}
+export interface Action<T = undefined> {
+    type: string;
+    scopedEffects?: ScopedEffects<T>;
+    payload?: T;
+}
+export type ActionCreator<T> = (payload?: T) => Action<T>;

package/dist/Models/Effect.d.ts

@@ -0,0 +1,3 @@
+import { OperatorFunction } from 'rxjs';
+import { Action } from './Action';
+export type Effect<T, S> = OperatorFunction<Action<T>, Action<S>>;

package/dist/Models/Hub.d.ts

@@ -0,0 +1,21 @@
+import { Action } from './Action';
+import { Effect } from './Effect';
+import { Observable } from 'rxjs';
+export type Reducer<T> = (state?: T, action?: Action<unknown>) => T;
+export interface StoreConfig<T> {
+    reducer: Reducer<T>;
+    initialState?: T;
+    name?: string;
+    debug?: boolean;
+    storeValue?: boolean;
+}
+export type Dispatcher = <T>(...actions: Action<T>[]) => void;
+export interface HubConfig {
+    effects?: Effect<unknown, unknown>[];
+    sources?: Observable<Action<unknown>>[];
+}
+export interface Hub {
+    messages$: Observable<Action<unknown>>;
+    store: <T>(config: StoreConfig<T>) => Observable<T>;
+    dispatch: Dispatcher;
+}

package/dist/Models/Reactable.d.ts

@@ -0,0 +1,8 @@
+import { Observable } from 'rxjs';
+export interface Reactable<T, S = ActionMap> {
+    state$: Observable<T>;
+    actions: S;
+}
+export interface ActionMap {
+    [key: string | number]: (payload?: unknown) => void;
+}

package/dist/Models/index.d.ts

@@ -0,0 +1,4 @@
+export { Action, ScopedEffects } from './Action';
+export { Effect } from './Effect';
+export { Hub, Reducer, HubConfig, StoreConfig, Dispatcher } from './Hub';
+export { Reactable, ActionMap } from './Reactable';

package/dist/Operators/ofType.d.ts

@@ -0,0 +1,3 @@
+import { OperatorFunction } from 'rxjs';
+import { Action } from '../Models/Action';
+export declare const ofType: (type: string) => OperatorFunction<Action<unknown>, Action<unknown>>;

package/dist/Testing/Actions.d.ts

@@ -0,0 +1,2 @@
+export declare const TEST_ACTION = "TEST_ACTION";
+export declare const TEST_ACTION_SUCCESS = "TEST_ACTION_SUCCESS";

package/dist/Testing/Effects.d.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+import { Action } from '../Models/Action';
+export declare const switchMapTestEffect: (action$: Observable<Action<string>>) => Observable<{
+    type: string;
+    payload: string;
+}>;
+export declare const debounceTestEffect: (action$: Observable<Action<string>>) => Observable<{
+    type: string;
+    payload: string;
+}>;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Models';
+export * from './Helpers';

package/dist/index.js

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rxjs = require('rxjs');
+var operators = require('rxjs/operators');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var addEffects = function (actionCreator, scopedEffects) {
+    return function (payload) { return (__assign(__assign({}, actionCreator(payload)), { scopedEffects: scopedEffects(payload) })); };
+};
+
+var createSlice = function (config) {
+    var name = config.name, initialState = config.initialState, reducers = config.reducers;
+    var reducer = Object.entries(reducers).reduce(function (acc, _a) {
+        var key = _a[0], _case = _a[1];
+        var _reducer = typeof _case === 'function' ? _case : _case.reducer;
+        var newFunc = function (state, action) {
+            if (action && action.type === "".concat(name ? "".concat(name, "/") : '').concat(key)) {
+                return _reducer(state, action);
+            }
+            return acc(state, action);
+        };
+        return newFunc;
+    }, function (state) {
+        if (state === void 0) { state = initialState; }
+        return state;
+    });
+    var actions = Object.entries(reducers).reduce(function (acc, _a) {
+        var key = _a[0], _case = _a[1];
+        acc[key] = function (payload) { return ({
+            type: "".concat(name ? "".concat(name, "/") : '').concat(key),
+            payload: payload
+        }); };
+        if (typeof _case !== 'function' && _case.effects) {
+            acc[key] = addEffects(acc[key], _case.effects);
+        }
+        return acc;
+    }, {});
+    return {
+        reducer: reducer,
+        actions: actions
+    };
+};
+
+var getScopedEffectSignature = function (actionType, key) {
+    return "type: ".concat(actionType, ", scoped: true").concat(key ? ",key:".concat(key) : '');
+};
+var HubFactory = function (_a) {
+    var _b = _a === void 0 ? {} : _a, effects = _b.effects, _c = _b.sources, sources = _c === void 0 ? [] : _c;
+    var dispatcher$ = new rxjs.ReplaySubject(1);
+    var inputStream$ = rxjs.merge.apply(void 0, __spreadArray([dispatcher$], sources.map(function (source) { return source.pipe(operators.shareReplay(1)); }), false));
+    var genericEffects = (effects === null || effects === void 0 ? void 0 : effects.reduce(function (result, effect) {
+        return result.concat(inputStream$.pipe(effect));
+    }, [])) || [];
+    // Should we keep this in the stream with a scan operator instead?
+    var scopedEffectsDict = {};
+    var mergedScopedEffects = inputStream$.pipe(operators.filter(function (_a) {
+        var type = _a.type, scopedEffects = _a.scopedEffects;
+        var hasEffects = Boolean(scopedEffects && scopedEffects.effects.length);
+        return (hasEffects &&
+            scopedEffectsDict[getScopedEffectSignature(type, scopedEffects.key)] === undefined);
+    }), operators.tap(function (_a) {
+        var type = _a.type, _b = _a.scopedEffects, key = _b.key, effects = _b.effects;
+        scopedEffectsDict[getScopedEffectSignature(type, key)] = effects;
+    }), operators.map(function (_a) {
+        var type = _a.type, _b = _a.scopedEffects, key = _b.key, effects = _b.effects;
+        var signature = getScopedEffectSignature(type, key);
+        var pipedEffects = effects.reduce(function (acc, effect) {
+            return acc.concat(inputStream$.pipe(operators.filter(function (initialAction) {
+                var _a;
+                return getScopedEffectSignature(initialAction.type, (_a = initialAction.scopedEffects) === null || _a === void 0 ? void 0 : _a.key) ===
+                    signature;
+            }), effect));
+        }, []);
+        return rxjs.merge.apply(void 0, pipedEffects);
+    }), operators.mergeAll());
+    var messages$ = rxjs.merge.apply(void 0, __spreadArray([inputStream$, mergedScopedEffects], genericEffects, false)).pipe(operators.share());
+    var store = function (_a) {
+        var reducer = _a.reducer, name = _a.name, debug = _a.debug, initialState = _a.initialState, _b = _a.storeValue, storeValue = _b === void 0 ? false : _b;
+        var debugName = "[Stream Name] ".concat(name || 'undefined');
+        var seedState = initialState !== undefined ? initialState : reducer();
+        var state$ = messages$.pipe(operators.tap(function (action) {
+            debug && console.log(debugName, '[Message Received]', action);
+        }), operators.scan(reducer, seedState), operators.startWith(null, seedState), operators.pairwise(), operators.tap(function (_a) {
+            var prevState = _a[0], newState = _a[1];
+            if (debug) {
+                var hasDiff = prevState !== newState;
+                if (hasDiff) {
+                    console.log(debugName, '[State changed] Prev State:', prevState, 'New State:', newState);
+                }
+                else {
+                    console.log(debugName, '[State unchanged] State:', newState);
+                }
+            }
+        }), operators.map(function (pair) { return pair[1]; }));
+        if (storeValue) {
+            var replaySubject_1 = new rxjs.ReplaySubject(1);
+            state$.subscribe(function (state) { return replaySubject_1.next(state); });
+            return replaySubject_1;
+        }
+        return state$;
+    };
+    return {
+        messages$: messages$,
+        store: store,
+        dispatch: function () {
+            var actions = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                actions[_i] = arguments[_i];
+            }
+            actions.forEach(function (action) {
+                dispatcher$.next(action);
+            });
+        }
+    };
+};
+
+var RxBuilder = function (_a) {
+    var effects = _a.effects, _b = _a.sources, sources = _b === void 0 ? [] : _b, _c = _a.debug, debug = _c === void 0 ? false : _c, _d = _a.storeValue, storeValue = _d === void 0 ? false : _d, sliceConfig = __rest(_a, ["effects", "sources", "debug", "storeValue"]);
+    var _e = createSlice(sliceConfig), reducer = _e.reducer, actions = _e.actions;
+    // Check sources and see if need to add effects
+    sources = sources.map(function (action$) {
+        return action$.pipe(rxjs.map(function (action) {
+            var _case = sliceConfig.reducers[action.type];
+            if (typeof _case !== 'function' && _case.effects) {
+                return __assign(__assign({}, action), { scopedEffects: _case.effects(action.payload) });
+            }
+            return action;
+        }));
+    });
+    var hub = HubFactory({ effects: effects, sources: sources });
+    var actionsResult = Object.fromEntries(Object.entries(actions).map(function (_a) {
+        var key = _a[0], actionCreator = _a[1];
+        return [
+            key,
+            function (payload) {
+                hub.dispatch(actionCreator(payload));
+            },
+        ];
+    }));
+    return {
+        state$: hub.store({ reducer: reducer, debug: debug, storeValue: storeValue }),
+        actions: actionsResult
+    };
+};
+
+exports.RxBuilder = RxBuilder;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@reactables/core",
+  "description": "State management with rxjs",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "jest",
+    "build": "rimraf dist && rollup --config",
+    "lint": "eslint --max-warnings 0 \"src/**/*.ts*\" && prettier --check src/",
+    "fix": "eslint --fix \"src/**/*.ts*\" && prettier --write \"src/**/*.(ts*|scss)\""
+  },
+  "author": "David Lai",
+  "license": "ISC",
+  "peerDependencies": {
+    "rxjs": "^6.0.0 || ^7.0.0"
+  },
+  "version": "0.4.0-alpha.0"
+}