feat(dynamic): support @dynamic get module by name

Author: unadlib

packages/reactant-module/src/decorators/dynamic.ts

@@ -1,68 +1,83 @@
+/* eslint-disable no-undef-init */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { multiOptional, ServiceIdentifier } from 'reactant-di';
 
-import { containerKey, dynamicModulesKey, identifierKey } from '../constants';
+import {
+  containerKey,
+  dynamicModulesKey,
+  identifierKey,
+  modulesKey,
+} from '../constants';
 import type { DynamicModules, PropertyDescriptor } from '../interfaces';
 
-type Dynamic = <M extends boolean = false>(
-  serviceIdentifier: ServiceIdentifier<unknown>,
+type Dynamic = <M extends boolean = false, T extends boolean = false>(
+  serviceIdentifierOrName: ServiceIdentifier<unknown>,
   options?: {
     /**
      * Whether to inject multiple instances.
      */
-    multiple?: boolean;
+    multiple?: T extends false ? false : M;
+    /**
+     * use token identifier to get service, use name to get service by default.
+     */
+    useToken?: T;
   }
 ) => (
   target: object,
   key: string | symbol,
   descriptor?: PropertyDescriptor<unknown>
 ) => void;
 
-export const dynamic: Dynamic = (serviceIdentifier, options) => (
-  target,
-  key
-) => {
-  const multipleInject = options?.multiple ?? false;
-  if (multipleInject) {
-    multiOptional(serviceIdentifier)(class {});
-  }
-  function getter(this: any) {
-    const dynamicModules: DynamicModules = this[dynamicModulesKey];
-    if (__DEV__ && !dynamicModules) {
+export const dynamic: Dynamic =
+  (serviceIdentifierOrName, options) => (target, key) => {
+    const multipleInject = options?.multiple ?? false;
+    const useToken = options?.useToken ?? false;
+    if (multipleInject) {
+      multiOptional(serviceIdentifierOrName)(class {});
+    }
+    function getter(this: any) {
+      if (!useToken) {
+        return this[modulesKey]?.[serviceIdentifierOrName as string];
+      }
+      const dynamicModules: DynamicModules = this[dynamicModulesKey];
+      if (__DEV__ && !dynamicModules) {
+        throw new Error(
+          `The property '${key.toString()}' is not readable when class ${
+            this[identifierKey] ?? this.constructor.name
+          } is constructing.`
+        );
+      }
+      if (dynamicModules.has(serviceIdentifierOrName)) {
+        return dynamicModules.get(serviceIdentifierOrName)!.value;
+      }
+      let value: unknown = undefined;
+      try {
+        const services = this[containerKey]!.getAll(serviceIdentifierOrName);
+        value = !multipleInject ? services[0] : services;
+      } catch (e) {
+        //
+      }
+      dynamicModules.set(serviceIdentifierOrName, {
+        multiple: multipleInject,
+        value,
+      });
+      return value;
+    }
+
+    function setter(this: any, _: unknown) {
       throw new Error(
-        `The property '${key.toString()}' is not readable when class ${
+        `Cannot assign to read only 'dynamic' injection property '${key.toString()}' of class '${
           this[identifierKey] ?? this.constructor.name
-        } is constructing.`
+        }'`
       );
     }
-    if (dynamicModules.has(serviceIdentifier)) {
-      return dynamicModules.get(serviceIdentifier)!.value;
-    }
-    let value: unknown = null;
-    try {
-      const services = this[containerKey]!.getAll(serviceIdentifier);
-      value = !multipleInject ? services[0] : services;
-    } catch (e) {
-      //
-    }
-    dynamicModules.set(serviceIdentifier, { multiple: multipleInject, value });
-    return value;
-  }
-
-  function setter(this: any, _: unknown) {
-    throw new Error(
-      `Cannot assign to read only 'dynamic' injection property '${key.toString()}' of class '${
-        this[identifierKey] ?? this.constructor.name
-      }'`
-    );
-  }
 
-  // It should be compatible with the TS decorator and the babel decorator
-  return {
-    configurable: true,
-    enumerable: true,
-    get: getter,
-    set: setter,
-  } as any;
-};
+    // It should be compatible with the TS decorator and the babel decorator
+    return {
+      configurable: true,
+      enumerable: true,
+      get: getter,
+      set: setter,
+    } as any;
+  };

packages/reactant/test/integration/dynamic.test.tsx

@@ -6,21 +6,75 @@ import {
   state,
   load,
   ModuleRef,
-  optional,
-  ModuleOptions,
-  inject,
-  ClassProvider,
-  multiInject,
-  multiOptional,
   dynamic,
 } from '../..';
 
-test('base `dynamic`', async () => {
+test('base `dynamic` use name by default', async () => {
   @injectable()
   class Counter {
     constructor(public moduleRef: ModuleRef) {}
 
-    @dynamic('todo')
+    @dynamic('todoModule')
+    readonly todo?: ITodo;
+
+    @state
+    count = 0;
+
+    @action
+    increase() {
+      this.count += 1;
+    }
+
+    get _todo() {
+      return this.moduleRef.get<ITodo>('todo');
+    }
+  }
+
+  const app = createApp({
+    main: Counter,
+    render: () => {
+      //
+    },
+  });
+
+  interface ITodo {
+    list: string[];
+    add(text: string): void;
+  }
+
+  @injectable({
+    name: 'todoModule',
+  })
+  class Todo implements ITodo {
+    @state
+    list: string[] = [];
+
+    @action
+    add(text: string) {
+      this.list.push(text);
+    }
+  }
+  expect(Object.values(app.store?.getState())).toEqual([{ count: 0 }]);
+  expect(app.instance.todo).toBeUndefined();
+  expect(() => {
+    // eslint-disable-next-line no-unused-expressions
+    app.instance._todo;
+  }).toThrowError(`No matching bindings found for serviceIdentifier: todo`);
+  await load(app.instance, [{ provide: 'todo', useClass: Todo }]);
+  expect(Object.values(app.store?.getState())).toEqual([
+    { count: 0 },
+    { list: [] },
+  ]);
+  expect(app.instance.todo).toBeInstanceOf(Todo);
+  expect(app.instance.todo).toBe(app.instance._todo);
+});
+
+test('base `dynamic` use token', async () => {
+  @injectable()
+  class Counter {
+    constructor(public moduleRef: ModuleRef) {}
+
+    @dynamic('todo', { useToken: true })
     todo?: ITodo;
 
     @state
@@ -59,7 +113,7 @@ test('base `dynamic`', async () => {
     }
   }
   expect(Object.values(app.store?.getState())).toEqual([{ count: 0 }]);
-  expect(app.instance.todo).toBeNull();
+  expect(app.instance.todo).toBeUndefined();
   expect(() => {
     // eslint-disable-next-line no-unused-expressions
     app.instance._todo;
@@ -76,7 +130,7 @@ test('base `dynamic`', async () => {
 test('base `dynamic` with multi-modules', async () => {
   @injectable()
   class Counter {
-    @dynamic('todo', { multiple: true })
+    @dynamic('todo', { multiple: true, useToken: true })
     todo?: ITodo[];
 
     @state
@@ -111,7 +165,7 @@ test('base `dynamic` with multi-modules', async () => {
     }
   }
   expect(Object.values(app.store?.getState())).toEqual([{ count: 0 }]);
-  expect(app.instance.todo).toBeNull();
+  expect(app.instance.todo).toBeUndefined();
   await load(app.instance, [{ provide: 'todo', useClass: Todo }]);
   expect(Object.values(app.store?.getState())).toEqual([
     { count: 0 },