Merge pull request #14 from albyrock87/memoized-selectors

Added support for Selectors

Author: amcdnl

package-lock.json

@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "ng-packagr -p package.json",
-    "test": "ngc -p tsconfig.json && jasmine dist/*.spec.js",
+    "test": "ngc -p tsconfig.spec.json && jasmine dist/spec/*.spec.js",
     "publish": "npm publish dist",
     "precommit": "lint-staged",
     "lint": "tslint -c tslint.json 'src/**/*.ts'",
@@ -51,7 +51,7 @@
     "rxjs": "^5.5.6",
     "tsickle": "^0.26.0",
     "tslint": "^5.8.0",
-    "typescript": "~2.5.3"
+    "typescript": "^2.6.2"
   },
   "ngPackage": {
     "lib": {

package.json

@@ -1,8 +1,2 @@
 import 'reflect-metadata';
-export * from './module';
-export * from './action';
-export * from './of-action';
-export * from './store';
-export * from './select';
-export * from './symbols';
-export * from './factory';
+export * from './public_api';

src/index.ts

@@ -1,7 +1,7 @@
-import { Action } from '@ngrx/store';
+import { ActionType } from './symbols';
 
 export interface ActionMeta {
-  action: { new (...args: any[]): Action };
+  action: ActionType;
   fn: string;
   type: string;
 }

src/internals.ts

@@ -1,14 +1,11 @@
 import { Action } from '@ngrx/store';
-import { Actions } from '@ngrx/effects';
 import { filter } from 'rxjs/operators';
-import { Observable } from 'rxjs/Observable';
 import { OperatorFunction } from 'rxjs/interfaces';
+import { ActionType } from './symbols';
 
-export function ofAction<T extends Action>(allowedType: { new (...args: any[]): T }): OperatorFunction<Action, T>;
-export function ofAction<T extends Action>(
-  ...allowedTypes: { new (...args: any[]): Action }[]
-): OperatorFunction<Action, Action>;
-export function ofAction(...allowedTypes: { new (...args: any[]): Action }[]): OperatorFunction<Action, Action> {
+export function ofAction<T extends Action>(allowedType: ActionType<T>): OperatorFunction<Action, T>;
+export function ofAction<T extends Action>(...allowedTypes: ActionType[]): OperatorFunction<Action, T>;
+export function ofAction(...allowedTypes: ActionType[]): OperatorFunction<Action, Action> {
   const allowedMap = {};
   allowedTypes.forEach(klass => (allowedMap[new klass().type] = true));
   return filter((action: Action) => {

src/memoize.ts

@@ -0,0 +1,6 @@
+export { NgrxActionsModule } from './module';
+export { Action } from './action';
+export { ofAction } from './of-action';
+export { Store } from './store';
+export { Select, NgrxSelect } from './select';
+export { createReducer } from './factory';

src/of-action.ts

@@ -1,27 +1,48 @@
 import { Injectable } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import { memoize } from './memoize';
+import { Store, Selector } from '@ngrx/store';
 
 @Injectable()
 export class NgrxSelect {
-  static store: Store<any> = undefined;
+  static store: Store<any> | undefined = undefined;
   connect(store: Store<any>) {
     NgrxSelect.store = store;
   }
 }
 
-export function Select(path?: string): any {
-  return function(target: any, name: string, descriptor: TypedPropertyDescriptor<any>): void {
+export function Select<TState = any, TValue = any>(
+  selector: Selector<TState, TValue>
+): (target: any, name: string) => void;
+export function Select<TState = any, TValue = any>(
+  selectorOrFeature?: string,
+  ...paths: string[]
+): (target: any, name: string) => void;
+export function Select<TState = any, TValue = any>(
+  selectorOrFeature?: string | Selector<TState, TValue>,
+  ...paths: string[]
+) {
+  return function(target: any, name: string): void {
+    let fn: Selector<TState, TValue>;
+    // Nothing here? Use propery name as selector
+    if (!selectorOrFeature) {
+      selectorOrFeature = name;
+    }
+    // Handle string vs Selector<TState, TValue>
+    if (typeof selectorOrFeature === 'string') {
+      const propsArray = paths.length ? [selectorOrFeature, ...paths] : selectorOrFeature.split('.');
+      fn = fastPropGetter(propsArray);
+    } else {
+      fn = selectorOrFeature;
+    }
+    // Redefine property
     if (delete target[name]) {
       Object.defineProperty(target, name, {
         get: () => {
-          if (!NgrxSelect.store) {
+          // get connected store
+          const store = NgrxSelect.store;
+          if (!store) {
             throw new Error('NgrxSelect not connected to store!');
           }
-
-          const fn = memoize(state => getValue(state, path || name));
-          return NgrxSelect.store.select(fn);
+          return store.select(fn);
         },
         enumerable: true,
         configurable: true
@@ -30,9 +51,22 @@ export function Select(path?: string): any {
   };
 }
 
-function getValue(state, prop: string) {
-  if (prop) {
-    return prop.split('.').reduce((acc, part) => acc && acc[part], state);
+/**
+ * The generated function is faster than:
+ * - pluck (Observable operator)
+ * - memoize (old ngrx-actions implementation)
+ * - MemoizedSelector (ngrx)
+ * @param path
+ */
+export function fastPropGetter(paths: string[]): (x: any) => any {
+  const segments = paths;
+  let seg = 'store.' + segments[0],
+    i = 0;
+  const l = segments.length;
+  let expr = seg;
+  while (++i < l) {
+    expr = expr + ' && ' + (seg = seg + '.' + segments[i]);
   }
-  return state;
+  const fn = new Function('store', 'return ' + expr + ';');
+  return <(x: any) => any>fn;
 }

src/public_api.ts

@@ -1,10 +1,16 @@
-import { Store, createReducer, Action, ofAction } from './index';
-import { of } from 'rxjs/Observable/of';
-import { Action as NgRxAction } from '@ngrx/store';
+import { Store, createReducer, Action, ofAction, Select, NgrxSelect } from '../index';
+import { Action as NgRxAction, createFeatureSelector, createSelector, Store as NgRxStore } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
 
 describe('actions', () => {
   interface FooState {
     foo: boolean | null;
+    bar?: {
+      a?: {
+        b?: any;
+      };
+    };
   }
 
   it('has strict type checking working', () => {
@@ -20,9 +26,9 @@ describe('actions', () => {
       }
     }
 
-    const reducer = createReducer<FooState>(Bar);
+    const reducer = createReducer<FooState | undefined>(Bar);
     const res = reducer(undefined, new MyAction());
-    expect(res.foo).toBe(true);
+    expect(res && res.foo).toBe(true);
   });
 
   it('adds defaults', () => {
@@ -131,13 +137,72 @@ describe('actions', () => {
       readonly type = 'myaction2';
     }
 
-    const action = new MyAction('foo');
-    const actions = of<NgRxAction>(action, new MyAction2());
-    let tappedAction: NgRxAction;
-    actions.pipe(ofAction(MyAction)).subscribe(a => {
-      tappedAction = a;
+    class MyAction3 implements NgRxAction {
+      readonly type = 'myaction3';
+      constructor(public foo: any, public bar: any) {}
+    }
+
+    const action = new MyAction('foo'),
+      action2 = new MyAction2(),
+      action3 = new MyAction3('a', 0);
+    const actions = of<NgRxAction>(action, action2, action3);
+    const tappedActions: NgRxAction[] = [];
+    actions.pipe(ofAction<MyAction | MyAction2>(MyAction, MyAction2)).subscribe(a => {
+      tappedActions.push(a);
     });
 
-    expect(tappedAction).toBe(action);
+    expect(tappedActions.length).toEqual(2);
+    expect(tappedActions[0]).toBe(action);
+    expect(tappedActions[1]).toBe(action2);
+  });
+
+  it('selects sub state', () => {
+    const globalState: {
+      myFeature: FooState;
+    } = {
+      myFeature: {
+        foo: true,
+        bar: {
+          a: {
+            b: {
+              c: {
+                d: 'world'
+              }
+            }
+          }
+        }
+      }
+    };
+
+    const msFeature = createFeatureSelector<FooState>('myFeature');
+    const msBar = createSelector(msFeature, state => state.bar);
+
+    class MyStateSelector {
+      @Select('myFeature.bar.a.b.c.d') hello$: Observable<string>; // deeply nested props
+      @Select() myFeature: Observable<FooState>; // implied by name
+      @Select(msBar) bar$: Observable<any>; // using MemoizedSelector
+    }
+
+    const store = new NgRxStore(of(globalState), undefined, undefined);
+
+    try {
+      NgrxSelect.store = store;
+
+      const mss = new MyStateSelector();
+
+      mss.hello$.subscribe(n => {
+        expect(n).toBe('world');
+      });
+
+      mss.myFeature.subscribe(n => {
+        expect(n).toBe(globalState.myFeature);
+      });
+
+      mss.bar$.subscribe(n => {
+        expect(n).toBe(globalState.myFeature.bar);
+      });
+    } finally {
+      NgrxSelect.store = undefined;
+    }
   });
 });

src/select.ts

@@ -0,0 +1,4 @@
+/* This file is for IDE only */
+{
+    "extends": "../../tsconfig.spec.json"
+}

src/index.spec.ts src/spec/index.spec.ts

@@ -1,5 +1,4 @@
 import { INITIAL_STATE_KEY } from './keys';
-import { Action } from '@ngrx/store';
 
 export function Store<TState>(initialState?: TState): (target: Function) => void;
 export function Store(initialState?: any): (target: Function) => void;

src/spec/tsconfig.json

@@ -1,3 +1,3 @@
 import { Action } from '@ngrx/store';
 
-export type ActionType = { new (...args: any[]): Action };
+export type ActionType<T extends Action = Action> = { new (...args: any[]): T };

src/store.ts

@@ -14,6 +14,9 @@
     "rootDir": "src/",
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "strict": true,
     "sourceMap": true,
     "target": "es5",
     "types": [
@@ -23,5 +26,8 @@
   },
   "include": [
     "src/**/*"
+  ],
+  "exclude": [
+    "src/spec/**/*"
   ]
 }

src/symbols.ts

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "strictNullChecks": false
+  },
+  "files": ["src/spec/index.spec.ts"]
+}