fix(di): fix multi injection for dynamic load

unadlib · unadlib · commit 4b3261e1614f · 2022-12-15T22:41:15.000+08:00
diff --git a/packages/reactant-di/src/constants.ts b/packages/reactant-di/src/constants.ts
@@ -1,6 +1,7 @@
 export const METADATA_KEY = {
   optional: 'reactant:optional',
   provide: 'reactant:provide',
+  multiple: 'reactant:multiple',
   lazy: 'reactant:lazy',
   paramtypes: 'design:paramtypes',
   inversifyParamtypes: 'inversify:paramtypes',
diff --git a/packages/reactant-di/src/decorators/multiInject.ts b/packages/reactant-di/src/decorators/multiInject.ts
@@ -1,8 +1,12 @@
 import { multiInject as multiInjectWithInversify, decorate } from 'inversify';
+import { METADATA_KEY } from '../constants';
 import { ServiceIdentifier } from '../interfaces';
+import { setMetadata } from '../util';
 
 export function multiInject(serviceIdentifier: ServiceIdentifier<any>) {
   return (target: object, key?: string, index?: number) => {
+    const paramtypes = Reflect.getMetadata(METADATA_KEY.paramtypes, target);
+    setMetadata(METADATA_KEY.multiple, paramtypes[index!], serviceIdentifier);
     decorate(
       multiInjectWithInversify(serviceIdentifier) as ClassDecorator,
       target,
diff --git a/packages/reactant-di/src/decorators/multiOptional.ts b/packages/reactant-di/src/decorators/multiOptional.ts
@@ -8,6 +8,7 @@ export function multiOptional(serviceIdentifier: ServiceIdentifier<any>) {
   return (target: object, key?: string, index?: number) => {
     const paramtypes = Reflect.getMetadata(METADATA_KEY.paramtypes, target);
     setMetadata(METADATA_KEY.optional, paramtypes[index!], serviceIdentifier);
+    setMetadata(METADATA_KEY.multiple, paramtypes[index!], serviceIdentifier);
     decorate(multiInject(serviceIdentifier) as ClassDecorator, target, index);
     decorate(optionalWithInversify() as ClassDecorator, target, index);
   };
diff --git a/packages/reactant-di/src/index.ts b/packages/reactant-di/src/index.ts
@@ -12,4 +12,6 @@ export {
 export { Optional } from './optional';
 export { forwardRef } from './forwardRef';
 export { ModuleRef } from './moduleRef';
+export { METADATA_KEY } from './constants';
+export { getMetadata } from './util';
 export * from './interfaces';
diff --git a/packages/reactant-module/src/core/createStore.ts b/packages/reactant-module/src/core/createStore.ts
@@ -7,8 +7,10 @@ import {
   produce,
   setAutoFreeze,
 } from 'immer';
-import type {
+import {
   Container,
+  getMetadata,
+  METADATA_KEY,
   ModuleOptions,
   ServiceIdentifiersMap,
 } from 'reactant-di';
@@ -103,16 +105,23 @@ export function createStore<T = any>({
       ServiceIdentifiers.set(moduleIdentifier, []);
     }
   }
+  const multipleInjectMap = getMetadata(METADATA_KEY.multiple);
   for (const [ServiceIdentifier] of ServiceIdentifiers) {
     // `Service` should be bound before `createStore`.
-    if (
+    const isMultipleInjection = multipleInjectMap.has(ServiceIdentifier);
+    const shouldInstantiate =
       container.isBound(ServiceIdentifier) &&
-      !loadedModules.has(ServiceIdentifier)
-    ) {
+      (isMultipleInjection ||
+        (!isMultipleInjection && !loadedModules.has(ServiceIdentifier)));
+    if (shouldInstantiate) {
       const services: IService[] = container.getAll(ServiceIdentifier);
       loadedModules.add(ServiceIdentifier);
       services.forEach((service, index) => {
-        if (typeof service !== 'object' || service === null) {
+        if (
+          typeof service !== 'object' ||
+          service === null ||
+          (service[modulesKey] && isMultipleInjection)
+        ) {
           return;
         }
         handlePlugin(service, pluginHooks);
diff --git a/packages/reactant-module/src/index.ts b/packages/reactant-module/src/index.ts
@@ -10,6 +10,8 @@ export {
   Optional,
   forwardRef,
   ModuleRef,
+  getMetadata,
+  METADATA_KEY,
 } from 'reactant-di';
 
 export type {
diff --git a/packages/reactant/src/createApp.tsx b/packages/reactant/src/createApp.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable no-shadow */
 import React, { FunctionComponent, StrictMode, Context } from 'react';
 import { Provider } from 'react-redux';
@@ -14,6 +15,8 @@ import {
   modulesKey,
   Service,
   unsubscriptionsKey,
+  getMetadata,
+  METADATA_KEY,
 } from 'reactant-module';
 import { Config, App, Renderer } from './interfaces';
 
@@ -95,9 +98,26 @@ function createApp<T, S extends any[], R extends Renderer<S>>({
   const loadedModules = new Set();
 
   const loader: Loader = (loadModules, beforeReplaceReducer) => {
-    bindModules(container, loadModules);
+    const multipleInjectMap = getMetadata(METADATA_KEY.multiple);
+    const filteredModules = loadModules.filter((module) => {
+      const serviceIdentifier =
+        typeof module === 'function'
+          ? module
+          : typeof module === 'object'
+          ? module.provide
+          : undefined;
+      if (serviceIdentifier) {
+        return (
+          multipleInjectMap.has(serviceIdentifier) ||
+          (!multipleInjectMap.has(serviceIdentifier) &&
+            !container.isBound(serviceIdentifier))
+        );
+      }
+      return true;
+    });
+    bindModules(container, filteredModules);
     createStore({
-      modules: loadModules,
+      modules: filteredModules,
       container,
       ServiceIdentifiers,
       loadedModules,
diff --git a/packages/reactant/test/integration/load.test.tsx b/packages/reactant/test/integration/load.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import {
   createApp,
   injectable,
@@ -9,6 +10,8 @@ import {
   ModuleOptions,
   inject,
   ClassProvider,
+  multiInject,
+  multiOptional,
 } from '../..';
 
 test('base `load`', async () => {
@@ -106,6 +109,47 @@ test('base `load` with multi-modules', async () => {
     }
   }
 
+  @injectable({
+    name: 'Counter1',
+  })
+  class Counter1 {
+    @state
+    count1 = 0;
+  }
+
+  @injectable({
+    name: 'Counter2',
+  })
+  class Counter2 {
+    constructor(public counter1: Counter1) {}
+
+    @state
+    count2 = 0;
+  }
+
+  interface ITodo {
+    list: string[];
+    add(text: string): void;
+    counter1: Counter1;
+    counter2: Counter2;
+  }
+
+  @injectable()
+  class Todo implements ITodo {
+    constructor(
+      public counter1: Counter1,
+      @inject('counter2token') public counter2: Counter2
+    ) {}
+
+    @state
+    list: string[] = [];
+
+    @action
+    add(text: string) {
+      this.list.push(text);
+    }
+  }
+
   const app = createApp({
     modules: [{ provide: 'Counter0', useClass: Counter0 }],
     main: Counter,
@@ -114,6 +158,92 @@ test('base `load` with multi-modules', async () => {
     },
   });
 
+  expect(Object.values(app.store?.getState())).toEqual([
+    { count0: 0 },
+    { count: 0 },
+  ]);
+  expect(app.instance.todo).toBeUndefined();
+  await app.instance.loadTodoModule([
+    { provide: 'todo', useClass: Todo },
+    { provide: 'counter2token', useClass: Counter2 },
+  ]);
+  expect(app.instance.todo).toBeInstanceOf(Todo);
+  expect(app.instance.todoModule).toBe(app.instance.todo);
+  expect(Object.values(app.store?.getState())).toEqual([
+    { count0: 0 },
+    { count: 0 },
+    {
+      list: [],
+    },
+    { count2: 0 },
+    { count1: 0 },
+  ]);
+  expect(app.instance.todo.counter2.counter1).toBeInstanceOf(Counter1);
+});
+
+test('base `load` with multi-modules and multi injection', async () => {
+  @injectable({
+    name: 'Counter0',
+  })
+  class Counter0 {
+    @state
+    count0 = 0;
+  }
+
+  @injectable({
+    name: 'Counter3',
+  })
+  class Counter3 {
+    @state
+    count3 = 0;
+  }
+
+  @injectable({
+    name: 'Counter4',
+  })
+  class Counter4 {
+    @state
+    count4 = 0;
+  }
+
+  @injectable({
+    name: 'Counter5',
+  })
+  class Counter5 {
+    @state
+    count5 = 0;
+  }
+
+  @injectable()
+  class Counter {
+    constructor(
+      @inject('Counter0') public counter0: Counter0,
+      @inject('Counter3') public counter3: Counter3,
+      @multiInject('Counter4') public counter4: Counter4[],
+      public moduleRef: ModuleRef,
+      @optional('todo') public todo?: ITodo,
+      @optional('todo1') public todo1?: ITodo,
+      @multiOptional('Counter5') public counter5?: Counter5[]
+    ) {}
+
+    async loadTodoModule(modules: ModuleOptions[] = []) {
+      const container = await load(this, modules);
+      this.todo = container.get('todo');
+    }
+
+    get todoModule() {
+      return this.moduleRef.get('todo');
+    }
+
+    @state
+    count = 0;
+
+    @action
+    increase() {
+      this.count += 1;
+    }
+  }
+
   @injectable({
     name: 'Counter1',
   })
@@ -154,25 +284,50 @@ test('base `load` with multi-modules', async () => {
       this.list.push(text);
     }
   }
+
+  const app = createApp({
+    modules: [
+      { provide: 'Counter0', useClass: Counter0 },
+      { provide: 'Counter3', useClass: Counter3 },
+      { provide: 'Counter4', useClass: Counter4 },
+      { provide: 'Counter5', useClass: Counter5 },
+    ],
+    main: Counter,
+    render: () => {
+      //
+    },
+  });
+
   expect(Object.values(app.store?.getState())).toEqual([
     { count0: 0 },
+    { count3: 0 },
+    { count4: 0 },
+    { count5: 0 },
     { count: 0 },
   ]);
   expect(app.instance.todo).toBeUndefined();
   await app.instance.loadTodoModule([
     { provide: 'todo', useClass: Todo },
+    { provide: 'Counter3', useClass: Counter3 },
     { provide: 'counter2token', useClass: Counter2 },
+    { provide: 'Counter4', useClass: Counter4 },
+    { provide: 'Counter5', useClass: Counter5 },
   ]);
   expect(app.instance.todo).toBeInstanceOf(Todo);
   expect(app.instance.todoModule).toBe(app.instance.todo);
   expect(Object.values(app.store?.getState())).toEqual([
     { count0: 0 },
+    { count3: 0 },
+    { count4: 0 },
+    { count5: 0 },
     { count: 0 },
+    { count4: 0 },
+    { count5: 0 },
     {
       list: [],
     },
     { count2: 0 },
     { count1: 0 },
   ]);
-  expect(app.instance.todo.counter2.counter1).toBeInstanceOf(Counter1);
+  expect(app.instance.todo!.counter2.counter1).toBeInstanceOf(Counter1);
 });
