feat(reactant-module): implement @dynamic for dynamic load modules

Author: unadlib

packages/reactant-di/src/decorators/multiInject.ts

@@ -6,7 +6,7 @@ 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);
+    setMetadata(METADATA_KEY.multiple, paramtypes?.[index!], serviceIdentifier);
     decorate(
       multiInjectWithInversify(serviceIdentifier) as ClassDecorator,
       target,

packages/reactant-di/src/decorators/multiOptional.ts

@@ -7,8 +7,8 @@ import { setMetadata } from '../util';
 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);
+    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);
   };

packages/reactant-model/test/index.test.ts

@@ -58,6 +58,7 @@ test('base model with `useValue`', () => {
     load: (...args: any[]) => {
       //
     },
+    dynamicModules: new Map(),
     pluginHooks: {
       middleware: [],
       beforeCombineRootReducers: [],
@@ -128,6 +129,7 @@ test('base model with `useFactory`', () => {
     ServiceIdentifiers,
     loadedModules: new Set(),
     load: (...args: any[]) => {},
+    dynamicModules: new Map(),
     pluginHooks: {
       middleware: [],
       beforeCombineRootReducers: [],
@@ -202,6 +204,7 @@ test('base model with `useValue` and `enablePatches`', () => {
     load: (...args: any[]) => {
       //
     },
+    dynamicModules: new Map(),
     pluginHooks: {
       middleware: [],
       beforeCombineRootReducers: [],

packages/reactant-module/src/constants/moduleKeys.ts

@@ -3,3 +3,4 @@ export const identifierKey: unique symbol = Symbol('identifier');
 export const modulesKey: unique symbol = Symbol('modules');
 export const nameKey: unique symbol = Symbol('name');
 export const initStateKey: unique symbol = Symbol('initState');
+export const dynamicModulesKey: unique symbol = Symbol('dynamicModules');

packages/reactant-module/src/core/createStore.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable default-param-last */
 /* eslint-disable guard-for-in */
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -38,10 +39,12 @@ import {
   initStateKey,
   subscriptionsKey,
   enableInspectorKey,
+  dynamicModulesKey,
 } from '../constants';
 import { getStagedState } from '../decorators';
-import {
+import type {
   DevOptions,
+  DynamicModules,
   Loader,
   ModulesMap,
   PluginHooks,
@@ -60,6 +63,7 @@ interface CreateStoreOptions<T> {
   ServiceIdentifiers: ServiceIdentifiersMap;
   loadedModules: Set<any>;
   load: (...args: Parameters<Loader>) => void;
+  dynamicModules: DynamicModules;
   pluginHooks: PluginHooks;
   preloadedState?: PreloadedState<T>;
   devOptions?: DevOptions;
@@ -74,6 +78,7 @@ export function createStore<T = any>({
   ServiceIdentifiers,
   loadedModules,
   load,
+  dynamicModules,
   pluginHooks,
   preloadedState,
   devOptions = {},
@@ -97,6 +102,15 @@ export function createStore<T = any>({
     }
   }
 
+  dynamicModules.forEach((module, key) => {
+    try {
+      const services = container!.getAll(key);
+      module.value = !module.multiple ? services[0] : services;
+    } catch (e) {
+      //
+    }
+  });
+
   // add Non-dependent `modules` to ServiceIdentifiers config.
   for (const module of modules) {
     const moduleIdentifier =
@@ -296,7 +310,13 @@ export function createStore<T = any>({
                 return container;
               },
             },
-            // loader for dynamic modules.
+            // dynamic modules cache
+            [dynamicModulesKey]: {
+              enumerable: false,
+              configurable: false,
+              value: dynamicModules,
+            },
+            // loader for dynamic modules
             [loaderKey]: {
               enumerable: false,
               configurable: false,

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

@@ -0,0 +1,68 @@
+/* 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 type { DynamicModules, PropertyDescriptor } from '../interfaces';
+
+type Dynamic = <M extends boolean = false>(
+  serviceIdentifier: ServiceIdentifier<unknown>,
+  options?: {
+    /**
+     * Whether to inject multiple instances.
+     */
+    multiple?: boolean;
+  }
+) => (
+  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) {
+      throw new Error(
+        `The property '${key.toString()}' is not readable when 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;
+};

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

@@ -3,4 +3,5 @@ export * from './autobind';
 export * from './state';
 export * from './computed';
 export * from './lazy';
+export * from './dynamic';
 export * from './injectable';

packages/reactant-module/src/interfaces.ts

@@ -270,3 +270,5 @@ export type ImportClass<T, K extends keyof T> = T extends Record<K, infer S>
     : never
   : never;
 export type Store = ReduxStore;
+
+export type DynamicModules = Map<any, { multiple: boolean; value: any }>;

packages/reactant-module/test/core/createState.test.ts

@@ -35,6 +35,7 @@ test('`createState` with type', () => {
     ServiceIdentifiers,
     loadedModules: new Set(),
     load: (...args: any[]) => {},
+    dynamicModules: new Map(),
     pluginHooks: {
       middleware: [],
       beforeCombineRootReducers: [],

packages/reactant-module/test/core/createStore.test.ts

@@ -34,6 +34,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],
@@ -73,6 +74,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],
@@ -130,6 +132,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],
@@ -191,6 +194,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],
@@ -240,6 +244,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],
@@ -297,6 +302,7 @@ describe('createStore', () => {
       load: (...args: any[]) => {
         //
       },
+      dynamicModules: new Map(),
       pluginHooks: {
         middleware: [],
         beforeCombineRootReducers: [],