Added inversify support.

Author: Patrick Housley

README.md

@@ -1,2 +1,2 @@
 # inversify-vue-test
-Test of using InverisfyJS with VueJS and Vuex.
+Test of using InverisfyJS with VueJS.

package-lock.json

@@ -4,7 +4,8 @@
   "description": "Test of using InverisfyJS with VueJS and Vuex.",
   "scripts": {
     "start": "webpack-dev-server --inline --progress",
-    "build": "webpack --progress --profile --bail --display-optimization-bailout"
+    "build": "webpack --progress --profile --bail --display-optimization-bailout",
+    "lint": "tslint --type-check --project tsconfig.json 'src/**/*.ts'"
   },
   "engines": {
     "node": ">=8"
@@ -21,8 +22,10 @@
   "homepage": "https://github.com/patrickhousley/inversify-vue-test#readme",
   "dependencies": {
     "inversify": "4.1.1",
+    "reflect-metadata": "0.1.10",
     "vue": "2.3.4",
     "vue-class-component": "5.0.1",
+    "vue-property-decorator": "5.1.0",
     "vuex": "2.3.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,4 @@
+<div>
+  <div>Application Name: {{name}}</div>
+  <div>Application Version: {{version}}</div>
+</div>

src/app/additional-info/additional-info.component.html

@@ -0,0 +1,16 @@
+import { Component, Vue } from 'vue-property-decorator';
+import { injectable } from 'inversify';
+import * as Template from './additional-info.component.html?style=./additional-info.component.scss';
+
+@Template
+@Component
+@injectable()
+export class AdditionalInfoComponent extends Vue {
+  public name = 'Inversify Vue Test';
+  public version = '0.0.1';
+
+  constructor() {
+    super();
+    console.log('Constructing additional info');
+  }
+}

src/app/additional-info/additional-info.component.scss

@@ -1,4 +1,5 @@
 <div>
   <h1>Vue Test</h1>
   <h3>{{ message }}</h3>
+  <additional-info></additional-info>
 </div>

src/app/additional-info/additional-info.component.ts

@@ -0,0 +1,15 @@
+import { Component, Vue } from 'vue-property-decorator';
+import { injectable } from 'inversify';
+import { appContainer, containerTypes, componentResolver, VueClass } from 'src/app/app.container';
+import * as Template from './app.component.html?style=./app.component.scss';
+
+@Template
+@Component({
+  components: {
+    'additional-info': componentResolver(() => appContainer.get<VueClass>(containerTypes.AdditionalInfoComponent))
+  }
+})
+@injectable()
+export class AppComponent extends Vue {
+  public message = 'Hello Vue.js!';
+}

src/components/app/app.component.html src/app/app.component.html

@@ -0,0 +1,16 @@
+import { Container } from 'inversify';
+
+import { containerTypes } from 'src/app/app.types';
+import { VueClass } from 'src/lib/component-resolver';
+import { GoodbyAppComponent } from 'src/app/goodby-app.component';
+import { AdditionalInfoComponent } from 'src/app/additional-info/additional-info.component';
+
+const appContainer = new Container();
+
+// Components need to be bound as a constructor
+appContainer.bind<VueClass>(containerTypes.AppComponent).toConstructor(GoodbyAppComponent);
+appContainer.bind<VueClass>(containerTypes.AdditionalInfoComponent).toConstructor(AdditionalInfoComponent);
+
+export { appContainer };
+export { containerTypes } from 'src/app/app.types';
+export { componentResolver, VueClass } from 'src/lib/component-resolver';

src/components/app/app.component.scss src/app/app.component.scss

@@ -0,0 +1,4 @@
+export const containerTypes = {
+  AppComponent: Symbol('AppComponent'),
+  AdditionalInfoComponent: Symbol('AdditionalInfoComponent')
+};

src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component, Vue } from 'vue-property-decorator';
+import { injectable } from 'inversify';
+import { appContainer, containerTypes, componentResolver, VueClass } from 'src/app/app.container';
+import * as Template from './app.component.html?style=./app.component.scss';
+
+@Template
+@Component({
+  components: {
+    'additional-info': componentResolver(() => appContainer.get<VueClass>(containerTypes.AdditionalInfoComponent))
+  }
+})
+@injectable()
+export class GoodbyAppComponent extends Vue {
+  public message = 'Goodby Vue.js!';
+}

src/app/app.container.ts

@@ -5,6 +5,8 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>inversify-vue-test</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.js"></script>
 </head>
 
 <body>

src/app/app.types.ts

@@ -0,0 +1,12 @@
+import { VueClass } from 'vue-class-component/lib/declarations';
+export { VueClass } from 'vue-class-component/lib/declarations';
+
+export function componentResolver<V extends VueClass>(componentConstructor: () => V) {
+  return (resolve: (component: V) => void, reject: (error: Error) => void) => {
+    try {
+      resolve(componentConstructor());
+    } catch (error) {
+      reject(error as Error);
+    }
+  };
+}

src/app/goodby-app.component.ts

@@ -1,7 +1,9 @@
 import Vue from 'vue';
-import { AppComponent } from 'src/components/app/app.component';
+import { containerTypes } from 'src/app/app.types';
+import { appContainer } from 'src/app/app.container';
 
+/* tslint:disable:no-unused-expression */
 new Vue({
   el: '#app-main',
-  render: r => r(AppComponent)
-});
+  render: r => r(appContainer.get(containerTypes.AppComponent))
+});

src/components/app/app.component.ts

@@ -0,0 +1,128 @@
+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [],
+  "defaultSeverity": "error",
+  "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements",
+        "arguments",
+        "elements"
+      ]
+    },
+    "arrow-parens": {
+      "options": ["ban-single-arg-parens"]
+    },
+    "comment-format": false,
+    "curly": {
+      "options": ["ignore-same-line"]
+    },
+    "indent": {
+      "options": ["spaces", 2]
+    },
+    "interface-name": {
+      "options": ["never-prefix"]
+    },
+    "jsdoc-format": false,
+    "max-line-length": false,
+    "member-ordering": {
+      "options": {
+        "order": [
+          "private-static-field",
+          "protected-static-field",
+          "public-static-field",
+          "public-static-method",
+          "protected-static-method",
+          "private-static-method",
+          "private-instance-field",
+          "protected-instance-field",
+          "public-instance-field",
+          "public-constructor",
+          "protected-constructor",
+          "private-constructor",
+          "public-instance-method",
+          "protected-instance-method",
+          "private-instance-method"
+        ]
+      }
+    },
+    "no-any": true,
+    "no-console": false,
+    "no-duplicate-variable": true,
+    "no-inferrable-types": false,
+    "no-invalid-this": true,
+    "no-switch-case-fall-through": true,
+    "object-literal-sort-keys": false,
+    "quotemark": {
+      "options": [
+        "single",
+        "jsx-double"
+      ]
+    },
+    "trailing-comma": {
+      "options":[
+        {
+          "multiline": "never",
+          "singleline": "never"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case",
+        "allow-leading-underscore"
+      ]
+    },
+
+    "array-type": {
+      "options": ["array"]
+    },
+    "await-promise": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "binary-expression-operand-order": true,
+    "import-blacklist": {
+      "options": ["rxjs"]
+    },
+    "linebreak-style": {
+      "options": ["LF"]
+    },
+    "no-boolean-literal-compare": true,
+    "no-default-export": true,
+    "no-floating-promises": true,
+    "no-for-in-array": true,
+    "no-import-side-effect": true,
+    "no-inferred-empty-object-type": true,
+    "no-invalid-template-strings": true,
+    "no-irregular-whitespace": true,
+    "no-magic-numbers": {
+      "severity": "warn"
+    },
+    "no-require-imports": true,
+    "no-non-null-assertion": true,
+    "no-null-keyword": false,
+    "no-object-literal-type-assertion": true,
+    "no-unnecessary-type-assertion": true,
+    "no-sparse-arrays": true,
+    "no-unbound-method": {
+      "options": ["ignore-static"]
+    },
+    "no-unnecessary-callback-wrapper": true,
+    "no-unsafe-any": true,
+    "no-void-expression": true,
+    "ordered-imports": false,
+    "prefer-conditional-expression": true,
+    "prefer-method-signature": true,
+    "prefer-object-spread": true,
+    "prefer-switch": true,
+    "prefer-template": true,
+    "promise-function-async": true,
+    "restrict-plus-operands": true,
+    "type-literal-delimiter": true,
+    "use-default-type-parameter": true
+  }
+}