[feat] Call get after inject to create full cache (#2647)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/components/src/injector.tsx

@@ -70,7 +70,7 @@ export function injector(map = new Map()): InjectorType {
 
 // entryPoint
 export function flattenDeps(allDeps: Factory[], factory: any): Factory[] {
-  const addToDeps = allDeps.concat([factory]);
+  const addToDeps = allDeps.includes(factory) ? allDeps : allDeps.concat([factory]);
   return Array.isArray(factory.deps) && factory.deps.length
     ? factory.deps.reduce((accu, dep) => flattenDeps(accu, dep), addToDeps)
     : addToDeps;
@@ -79,7 +79,7 @@ export function flattenDeps(allDeps: Factory[], factory: any): Factory[] {
 export function provideRecipesToInjector(recipes: [Factory, Factory][], appInjector: InjectorType) {
   const provided = new Map();
 
-  return recipes.reduce((inj, recipe) => {
+  const injector = recipes.reduce((inj, recipe) => {
     if (!typeCheckRecipe(recipe)) {
       return inj;
     }
@@ -101,6 +101,13 @@ export function provideRecipesToInjector(recipes: [Factory, Factory][], appInjec
     provided.set(recipe[0], recipe[1]);
     return inj.provide(...recipe);
   }, appInjector);
+
+  // make sure all component instance are cached
+  provided.forEach(v => {
+    injector.get(v);
+  });
+
+  return injector;
 }
 
 export function typeCheckRecipe(recipe) {

test/browser/components/injector-test.js

@@ -10,7 +10,13 @@ import {Provider} from 'react-redux';
 import sinon from 'sinon';
 import {console as Console} from 'global/window';
 
-import {withState, injectComponents, PanelHeaderFactory} from '@kepler.gl/components';
+import {
+  withState,
+  injector,
+  injectComponents,
+  PanelHeaderFactory,
+  provideRecipesToInjector
+} from '@kepler.gl/components';
 
 import {keplerGlInit} from '@kepler.gl/actions';
 import {
@@ -299,3 +305,49 @@ test('Components -> injector -> actions', t => {
 
   t.end();
 });
+
+test('Components -> injector -> provideRecipesToInjector', t => {
+  /// Header1 -> Header 2 -> Header 3
+  const spyMyHeader3Factory = sinon.spy();
+  const spyMyHeader2Factory = sinon.spy();
+  const spyMyHeader1Factory = sinon.spy();
+
+  const myHeader3Factory = () => {
+    spyMyHeader3Factory('getHeader3');
+    const Header3 = () => <div className="my-test-header-3">hello world</div>;
+    return Header3;
+  };
+
+  const myHeader2Factory = MyHeader3 => {
+    spyMyHeader2Factory('getHeader2');
+    const Header2 = () => (
+      <div className="my-test-header-2">
+        <MyHeader3 />
+      </div>
+    );
+    return Header2;
+  };
+  myHeader2Factory.deps = [myHeader3Factory];
+
+  const myHeader1Factory = MyCustomHeader2 => {
+    spyMyHeader1Factory('getHeader1');
+    const Header1 = () => (
+      <div className="my-test-header-1">
+        <MyCustomHeader2 />
+      </div>
+    );
+    return Header1;
+  };
+
+  myHeader1Factory.deps = [myHeader2Factory];
+
+  const recipe1 = [myHeader1Factory, myHeader1Factory];
+
+  provideRecipesToInjector([recipe1], injector());
+
+  t.equal(spyMyHeader1Factory.called, true, 'Should call myHeader1Factory');
+  t.equal(spyMyHeader2Factory.called, true, 'Should call myHeader2Factory');
+  t.equal(spyMyHeader3Factory.called, true, 'Should call myHeader3Factory');
+
+  t.end();
+});