Added dependency injection handling.

Author: azaslonov

package.json

@@ -14,6 +14,7 @@
     ],
     "dependencies": {
         "@paperbits/common": "0.1.529",
+        "inversify-react": "^1.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

src/bindings/reactComponentBinder.ts

@@ -9,13 +9,26 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { ComponentBinder } from "@paperbits/common/editing/componentBinder";
+import { IInjector } from "@paperbits/common/injection";
+import { ReactComponentWrapper } from "./reactComponentWrapper";
 
 
 export class ReactComponentBinder implements ComponentBinder {
+    constructor(private readonly injector: IInjector) { }
+
     public async bind<TInstance>(element: Element, componentDefinition: any, componentParams: unknown): Promise<TInstance> {
-        const reactElement = React.createElement(componentDefinition, componentParams || {});
-        const reactComponentInstance = ReactDOM.render(reactElement, element);
+        const params = componentParams || {};
+        const componentReference = React.createRef<TInstance>();
+        params["ref"] = componentReference
+
+        const reactElement = React.createElement(ReactComponentWrapper, {
+            inversifyContainer: this.injector["container"], // hack to access private property
+            childComponents: React.createElement(componentDefinition, params)
+        });
+
+        ReactDOM.render(reactElement, element);
 
+        const reactComponentInstance = componentReference.current;
         return reactComponentInstance;
     }
 

src/bindings/reactComponentWrapper.tsx

@@ -0,0 +1,11 @@
+import "reflect-metadata";
+import * as React from "react";
+import { Provider } from "inversify-react";
+
+export function ReactComponentWrapper({ inversifyContainer, childComponents }) {
+    return (
+        <Provider container={inversifyContainer}>
+            {childComponents}
+        </Provider>
+    );
+}

src/decorators/index.ts

@@ -7,4 +7,5 @@
  */
 
 export * from "./runtimeComponent.decorator";
-export * from "./reactRuntimeComponentConfig";
+export * from "./reactRuntimeComponentConfig";
+export * from "./resolve";

src/decorators/resolve.ts

@@ -0,0 +1,2 @@
+import { resolve } from "inversify-react";
+export const Resolve = resolve;