Configure mobx & IoC

package.json

@@ -6,15 +6,23 @@
   "scripts": {
     "start": "webpack-dev-server --mode development --open --hot"
   },
-  "author": "",
+  "author": "arturdedela",
   "license": "ISC",
   "dependencies": {
+    "inversify": "latest",
+    "inversify-binding-decorators": "latest",
+    "mobx": "^5.9.0",
+    "mobx-react": "^5.4.3",
+    "mobx-react-router": "latest",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
+    "react-router": "^4.3.1",
+    "reflect-metadata": "^0.1.13",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.85.0"
   },
   "devDependencies": {
+    "@types/history": "^4.7.2",
     "@types/react": "^16.8.6",
     "@types/react-dom": "^16.8.2",
     "awesome-typescript-loader": "^5.2.1",

src/App.tsx

@@ -2,38 +2,24 @@ import * as React from "react";
 import { Segment } from "semantic-ui-react";
 
 import './App.scss';
+import {observer} from 'mobx-react';
+import {lazyInject} from './IoC';
+import {CounterStore} from './CounterStore';
 
-interface IProps {
-    startCount?: number;
-}
-
-interface IState {
-    counter: number;
-}
-
-class App extends React.Component<IProps, IState> {
-
-    constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            counter: props.startCount
-        }
-    }
+@observer
+class App extends React.Component {
+    @lazyInject(CounterStore)
+    counterStore: CounterStore;
 
     render() {
         return (
             <Segment>
                 <h1>React webpack</h1>
-                <p>Counter: {this.state.counter}</p>
-                <button onClick={() => this.setState({ counter: this.state.counter + 1 })}>Plus</button>
+                <p>Counter: {this.counterStore.counter}</p>
+                <button onClick={this.counterStore.increment}>Plus</button>
             </Segment>
         );
     }
-
-    static defaultProps: IProps = {
-        startCount: 0
-    }
 }
 
 export default App;

src/CounterStore.ts

@@ -0,0 +1,12 @@
+import {observable, action} from "mobx";
+import { provide } from './IoC';
+
+@provide.singleton()
+export class CounterStore {
+    @observable counter: number = 0;
+
+    @action.bound
+    increment() {
+        this.counter++;
+    }
+}

src/IoC.ts

@@ -0,0 +1,62 @@
+import 'reflect-metadata';
+import { Container, ContainerModule, interfaces } from 'inversify';
+import { fluentProvide } from 'inversify-binding-decorators';
+import { RouterStore } from 'mobx-react-router';
+
+const container = new Container({
+  autoBindInjectable: true,
+  defaultScope: 'Singleton',
+});
+
+// You can add here external services to container
+container.bind(RouterStore).toConstantValue(new RouterStore());
+
+const provide = {
+  singleton: () => (target: any) =>
+    fluentProvide(target)
+      .inSingletonScope()
+      .done()(target),
+
+  transient: () => (target: any) =>
+    fluentProvide(target)
+      .inTransientScope()
+      .done()(target),
+};
+
+interface IProvideSyntax {
+  constraint: (bind: interfaces.Bind, target: any) => any;
+  implementationType: any;
+}
+
+const PROVIDE_METADATA_KEY = 'inversify-binding-decorators:provide';
+
+const lazyInject = (identifier: any) => (target: any, key: string) => {
+  debugger;
+  const isBound = container.isBound(identifier);
+  if (!isBound) {
+    const provideMetadata = (
+      Reflect.getMetadata(PROVIDE_METADATA_KEY, Reflect) || []
+    ).filter(
+      (metadata: IProvideSyntax) => metadata.implementationType === identifier
+    );
+
+    if (provideMetadata.length === 0) {
+      throw new Error(`Provided identifier isn't registered: ${identifier}`);
+    }
+
+    container.load(
+      new ContainerModule((bind: any) => {
+        provideMetadata.forEach((metadata: IProvideSyntax) =>
+          metadata.constraint(bind, metadata.implementationType)
+        );
+      })
+    );
+  }
+
+  Object.defineProperty(target, key, {
+    get: () => container.get(identifier),
+    enumerable: true,
+  });
+};
+
+export { container, provide, lazyInject };

tsconfig.json

@@ -2,10 +2,13 @@
     "compilerOptions": {
         "outDir": "./dist/",
         "sourceMap": true,
-        "noImplicitAny": true,
+        "lib": ["es6", "dom"],
         "module": "commonjs",
         "target": "es5",
-        "jsx": "react"
+        "jsx": "react",
+        "noImplicitAny": true,
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true
     },
     "include": [
         "./src/**/*"