@reactables/core 0.4.0-alpha.2 → 0.4.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +11 -11
  2. package/dist/Helpers/RxBuilder.d.ts +8 -2
  3. package/dist/Models/Reactable.d.ts +1 -1
  4. package/dist/index.js +8 -2
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -97,25 +97,25 @@ Avoid [tapping](https://rxjs.dev/api/operators/tap) your streams. This prevents
97
97
 
98
98
  Basic counter example. Button clicks dispatch actions to increment or reset the counter.
99
99
 
100
- Basic Counter | Design Diagram | Try it out on StackBlitz.<br /> Choose your framework
101
- :-------------------------:|:-------------------------:|:-------------------------:
102
- <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>
100
+ Basic Counter | Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
101
+ :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
102
+ <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" /> | [See Code for RxCounter](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxCounter) | <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>
103
103
 
104
104
  ### Scoped Effects - Updating Todos <a name="scoped-effects-example"></a>
105
105
 
106
106
  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.
107
107
 
108
- Todo Status Updates | Design Diagram | Try it out on StackBlitz.<br /> Choose your framework
109
- :-------------------------:|:-------------------------:|:-------------------------:
110
- <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>
108
+ Todo Status Updates | Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
109
+ :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
110
+ <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" /> | [See Code for RxTodoUpdates](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxTodoUpdates) | <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>
111
111
 
112
112
  ### Connecting Multiple Reactables - Event Prices <a name="connecting-hub-example"></a>
113
113
 
114
114
  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.
115
115
 
116
- Event Prices | Design Diagram | Try it out on StackBlitz.<br /> Choose your framework
117
- :-------------------------:|:-------------------------:|:-------------------------:
118
- <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>
116
+ Event Prices | Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
117
+ :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
118
+ <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" />| [See Code for RxEventTickets](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxEventTickets) | <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>
119
119
 
120
120
 
121
121
  ## API <a name="api"></a>
@@ -159,7 +159,7 @@ interface RxConfig <T, S extends Cases<T>>{
159
159
  storeValue?: boolean;
160
160
  debug?: boolean;
161
161
  effects?: Effect<unknown, unknown>[];
162
- sources?: Observable<Action<unknown>>[];
162
+ sources?: Observable<Action<unknown>>[] | { [key: string]: Observable<unknown> };
163
163
  }
164
164
 
165
165
  interface Cases<T> {
@@ -179,7 +179,7 @@ type SingleActionReducer<T, S> = (state: T, action: Action<S>) => T;
179
179
  | debug (optional) | to turn on debugging to console.log all messages received by the store and state changes |
180
180
  | 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 |
181
181
  | effects (optional) | Array of [Effects](#api-effects) to be registered to the Reactable |
182
- | sources (optional) <a name="hub-sources"></a> | Additional [Action](#api-actions) Observables the Reactable is listening to |
182
+ | sources (optional) <a name="hub-sources"></a> | Additional [Action](#api-actions) Observables the Reactable is listening to. Can be an array or a dictionary where key is the action type and value is the Observable emitting the payload |
183
183
 
184
184
  Debug Example:
185
185
 
package/dist/Helpers/RxBuilder.d.ts CHANGED
@@ -1,8 +1,14 @@
1
+ import { Observable } from 'rxjs';
1
2
  import { SliceConfig, Cases } from './createSlice';
2
- import { HubConfig } from '../Models/Hub';
3
3
  import { Reactable } from '../Models/Reactable';
4
- export interface RxConfig<T, S extends Cases<T>> extends SliceConfig<T, S>, HubConfig {
4
+ import { Effect } from '../Models/Effect';
5
+ import { Action } from '../Models/Action';
6
+ export interface RxConfig<T, S extends Cases<T>> extends SliceConfig<T, S> {
5
7
  debug?: boolean;
6
8
  storeValue?: boolean;
9
+ effects?: Effect<unknown, unknown>[];
10
+ sources?: Observable<Action<unknown>>[] | {
11
+ [key: string]: Observable<unknown>;
12
+ };
7
13
  }
8
14
  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/Models/Reactable.d.ts CHANGED
@@ -4,5 +4,5 @@ export interface Reactable<T, S = ActionMap> {
4
4
  actions: S;
5
5
  }
6
6
  export interface ActionMap {
7
- [key: string | number]: (payload?: unknown) => void;
7
+ [key: string | number]: (payload?: unknown) => void | ActionMap;
8
8
  }
package/dist/index.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var rxjs = require('rxjs');
6
5
  var operators = require('rxjs/operators');
6
+ var rxjs = require('rxjs');
7
7
 
8
8
  /******************************************************************************
9
9
  Copyright (c) Microsoft Corporation.
@@ -172,8 +172,14 @@ var RxBuilder = function (_a) {
172
172
  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"]);
173
173
  var _e = createSlice(sliceConfig), reducer = _e.reducer, actions = _e.actions;
174
174
  // Check sources and see if need to add effects
175
+ if (!Array.isArray(sources)) {
176
+ sources = Object.entries(sources).map(function (_a) {
177
+ var key = _a[0], obs$ = _a[1];
178
+ return obs$.pipe(operators.map(function (value) { return ({ type: key, payload: value }); }));
179
+ });
180
+ }
175
181
  sources = sources.map(function (action$) {
176
- return action$.pipe(rxjs.map(function (action) {
182
+ return action$.pipe(operators.map(function (action) {
177
183
  var _case = sliceConfig.reducers[action.type];
178
184
  if (typeof _case !== 'function' && _case.effects) {
179
185
  return __assign(__assign({}, action), { scopedEffects: _case.effects(action.payload) });
package/package.json CHANGED
@@ -16,5 +16,5 @@
16
16
  "peerDependencies": {
17
17
  "rxjs": "^6.0.0 || ^7.0.0"
18
18
  },
19
- "version": "0.4.0-alpha.2"
19
+ "version": "0.4.1-alpha.0"
20
20
  }