Key selectors composition

src/__tests__/index.spec.js

@@ -1,6 +1,10 @@
 /* eslint comma-dangle: 0 */
 import * as reselect from 'reselect';
-import createCachedSelector, {FlatObjectCache} from '../../src/index';
+import createCachedSelector, {
+  createKeyComposedSelector,
+  FlatObjectCache,
+  FlatMapCache,
+} from '../../src/index';
 
 const createSelectorSpy = jest.spyOn(reselect, 'createSelector');
 const consoleWarnSpy = jest
@@ -44,6 +48,22 @@ describe('createCachedSelector', () => {
         expect(cachedSelector.recomputations()).toBe(2);
       });
     });
+
+    describe('keySelector missing', () => {
+      it('Should work without key selector as simple reselect selector', () => {
+        const cachedSelector = createCachedSelector(
+          state => state,
+          resultFuncMock
+        )();
+        const firstCallResult = cachedSelector('foo');
+        const secondCallResult = cachedSelector('foo');
+        const thirdCallResult = cachedSelector('bar');
+        const fourthCallResult = cachedSelector('bar');
+
+        expect(createSelectorSpy).toHaveBeenCalledTimes(1);
+        expect(cachedSelector.recomputations()).toBe(2);
+      });
+    });
   });
 
   describe('cacheKey validity check', () => {
@@ -249,3 +269,142 @@ describe('createCachedSelector', () => {
     });
   });
 });
+
+describe('createKeyComposedSelector', () => {
+  describe('composition of key selectors', () => {
+    const state = {
+      [1]: 'first item',
+      [2]: 'second item',
+    };
+
+    const dependency1 = createCachedSelector(
+      state => state,
+      (state, props) => props.id,
+      (state, id) => state[id]
+    )((state, props) => props.id);
+
+    const dependency2 = createCachedSelector(
+      state => state,
+      (state, props) => props.otherId,
+      (state, id) => state[id]
+    )((state, props) => props.otherId);
+
+    it('Should cache result without key selector by composition of input key selectors', () => {
+      const keyComposedSelector = createKeyComposedSelector(
+        dependency1,
+        dependency2,
+        resultFuncMock
+      )();
+
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: 2,
+      });
+      keyComposedSelector(state, {
+        id: 2,
+        otherId: 1,
+      });
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: 2,
+      });
+      keyComposedSelector(state, {
+        id: 2,
+        otherId: 1,
+      });
+
+      expect(keyComposedSelector.recomputations()).toBe(2);
+    });
+
+    it('Should be tolerant to non re-reselect dependencies', () => {
+      const keyComposedSelector = createKeyComposedSelector(
+        () => 123,
+        dependency1,
+        dependency2,
+        resultFuncMock
+      )();
+
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: 2,
+      });
+      keyComposedSelector(state, {
+        id: 2,
+        otherId: 1,
+      });
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: 2,
+      });
+      keyComposedSelector(state, {
+        id: 2,
+        otherId: 1,
+      });
+
+      expect(keyComposedSelector.recomputations()).toBe(2);
+    });
+
+    it('Should not try compose key selectors if some key selector returns object', () => {
+      const keyComposedSelector = createKeyComposedSelector(
+        dependency1,
+        dependency2,
+        resultFuncMock
+      )(undefined, {
+        cacheObject: new FlatMapCache(),
+      });
+
+      const key = {};
+
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: key,
+      });
+      keyComposedSelector(state, {
+        id: key,
+        otherId: 1,
+      });
+      keyComposedSelector(state, {
+        id: 1,
+        otherId: key,
+      });
+      keyComposedSelector(state, {
+        id: key,
+        otherId: 1,
+      });
+
+      expect(keyComposedSelector.recomputations()).toBe(4);
+    });
+
+    it('Should support "keySeparator" option for custom key separator', () => {
+      const keyComposedSelector = createKeyComposedSelector(
+        dependency1,
+        dependency2,
+        resultFuncMock
+      )(undefined, {
+        keySeparator: '|',
+      });
+
+      const key = keyComposedSelector.keySelector(state, {
+        id: 1,
+        otherId: 2,
+      });
+
+      expect(key).toBe('|1|2');
+    });
+
+    it('Should be possible provide additional key selector', () => {
+      const keyComposedSelector = createKeyComposedSelector(
+        [dependency1, dependency2, (state, props) => props.additionalId],
+        resultFuncMock
+      )((state, props) => props.additionalId);
+
+      const key = keyComposedSelector.keySelector(state, {
+        id: 1,
+        otherId: 2,
+        additionalId: 666,
+      });
+
+      expect(key).toBe('666:1:2');
+    });
+  });
+});

src/index.d.ts

@@ -33,19 +33,14 @@ export type OutputParametricSelector<S, P, R, C, D> = ParametricSelector<
 
 export type CreateSelectorInstance = typeof createSelector;
 
-type Options =
-  | {
-      selectorCreator?: CreateSelectorInstance;
-      cacheObject: ICacheObject;
-    }
-  | {
-      selectorCreator: CreateSelectorInstance;
-      cacheObject?: ICacheObject;
-    }
-  | CreateSelectorInstance;
+export type Options = {
+  selectorCreator?: CreateSelectorInstance;
+  cacheObject?: ICacheObject;
+  keySeparator?: string;
+};
 
 export type OutputCachedSelector<S, R, C, D> = (
-  keySelector: KeySelector<S>,
+  keySelector?: KeySelector<S>,
   optionsOrSelectorCreator?: Options
 ) => OutputSelector<S, R, C, D> & {
   getMatchingSelector: (state: S, ...args: any[]) => OutputSelector<S, R, C, D>;
@@ -56,7 +51,7 @@ export type OutputCachedSelector<S, R, C, D> = (
 };
 
 export type OutputParametricCachedSelector<S, P, R, C, D> = (
-  keySelector: ParametricKeySelector<S, P>,
+  keySelector?: ParametricKeySelector<S, P>,
   optionsOrSelectorCreator?: Options
 ) => OutputParametricSelector<S, P, R, C, D> & {
   getMatchingSelector: (
@@ -4424,3 +4419,9 @@ export class LruMapCache implements ICacheObject {
   remove(key: any): void;
   clear(): void;
 }
+
+/*
+ * createKeyComposedSelector
+ */
+
+export const createKeyComposedSelector: typeof createCachedSelector;

src/index.js

@@ -5,7 +5,7 @@ const defaultCacheCreator = FlatObjectCache;
 const defaultCacheKeyValidator = () => true;
 
 function createCachedSelector(...funcs) {
-  return (keySelector, options = {}) => {
+  return (keySelector = () => '', options = {}) => {
     // @NOTE Versions 0.x/1.x accepted "options" as a function
     if (typeof options === 'function') {
       throw new Error(
@@ -82,6 +82,61 @@ function createCachedSelector(...funcs) {
 
 export default createCachedSelector;
 
+const defaultKeySeparator = ':';
+
+const hasKeySelector = selector => 'keySelector' in selector;
+
+const composeKeySelectors = (
+  mainKeySelector,
+  otherKeySelectors,
+  keySeparator
+) =>
+  function() {
+    const mainKey = mainKeySelector.apply(null, arguments);
+    let resultKey = mainKey;
+
+    for (let i = 0, length = otherKeySelectors.length; i < length; i += 1) {
+      const otherKey = otherKeySelectors[i].apply(null, arguments);
+      if (
+        (typeof otherKey === 'object' && otherKey !== null) ||
+        typeof otherKey === 'function'
+      ) {
+        return mainKey;
+      }
+      resultKey += keySeparator + otherKey;
+    }
+
+    return resultKey;
+  };
+
+export function createKeyComposedSelector(...funcs) {
+  return (mainKeySelector = () => '', options = {}) => {
+    const resultFunc = funcs.pop();
+    const dependencies = Array.isArray(funcs[0]) ? funcs[0] : [...funcs];
+
+    const {keySeparator = defaultKeySeparator, ...restOptions} = options;
+
+    const otherKeySelectors = Array.from(
+      new Set(
+        dependencies
+          .filter(hasKeySelector)
+          .map(selector => selector.keySelector)
+      )
+    );
+
+    const keySelector = composeKeySelectors(
+      mainKeySelector,
+      otherKeySelectors,
+      keySeparator
+    );
+
+    return createCachedSelector(...dependencies, resultFunc)(
+      keySelector,
+      restOptions
+    );
+  };
+}
+
 // Cache objects
 export {FlatObjectCache};
 export {default as FifoObjectCache} from './cache/FifoObjectCache';

typescript_test/test.ts

@@ -351,11 +351,6 @@ function testResolver() {
 function testCustomSelectorCreator() {
   type State = {foo: string};
 
-  const selector1 = createCachedSelector(
-    (state: State) => state.foo,
-    foo => foo
-  )((state: State) => state.foo, createSelectorCreator(defaultMemoize));
-
   const selector2 = createCachedSelector(
     (state: State) => state.foo,
     foo => foo