vue-inject

Author: JackEllis

README.md

@@ -0,0 +1,89 @@
+# vue-inject
+Dependency Injection for vue
+
+Install...  
+```
+npm install vue-inject --save
+```
+
+Tell Vue about vue-inject...  
+```javascript
+// main.js
+import injector from 'vue-inject';
+import Vue from 'vue';
+Vue.use(injector);
+```
+
+
+Register your services...  
+```javascript
+// myService.js
+import injector from 'vue-inject';
+class MyService{
+  // ...
+}
+injector.service('myService', MyService);
+```
+
+Declare your dependencies...  
+```javascript
+// myComponent.vue
+<script>
+  export default {
+    dependencies : ['myService'],
+    components : ['MyChildComponent'],
+    directive : ['myDirective'],
+    methods : {
+      foo(){
+        return this.myService.something();
+      }
+    }
+  }
+</script>
+```
+
+When the Vue component is initialised, the injector attempts to resolve the values. For dependencies, the resolved value is attached to the component instance, whereas components and directives are passed to Vue to use as normal.  
+
+A dependency can be a string, an array of strings, or an object, or even a combination of them all...
+```javascript
+export default {
+  dependencies : [ 'myService', { myAlias : 'myService', myThingy : '$window' } ],
+  created(){
+    this.myService;
+    this.myAlias;
+    this.myThingy;
+  }
+}
+```
+
+You can mix and match injected and real components and directives:
+```javascript
+import SomeComponent from './components/some.vue';
+export default {
+  components : {
+    SomeComponent : SomeComponent,
+    InjectedComponent : 'InjectedComponent'
+  }
+}
+```
+
+You can also give services their own dependencies...
+```javascript
+// myService.js
+import injector from 'vue-inject';
+class MyService{
+  constructor($window){
+    this.$window = $window; // etc.
+  }
+}
+injector.service('myService', MyService);
+```
+if you declared *myService* as a dependency of your component, it would know that MyService depends on the *$window* service and would attempt to resolve this as well.  
+
+The dependencies are extracted from the function parameters, which means that a minification process can easily break this. To fix this, you can pass a list of string literals into the register function:  
+```javascript
+injector.service('myService', ['$window'], MyService);
+```
+
+
+vue-inject uses [jpex-web](https://www.npmjs.com/package/jpex-web) which in turn is a browser-safe variant of [jpex](https://www.npmjs.com/package/jpex), therefore all of the same functionality is available. The injector object has the ability to register factories, services, constants, and enums. It may be useful to have a read of the jpex documentation in order to understand the differences between these factory types.

app/README.md

@@ -1,42 +1,62 @@
-var $resolve;
 var Jpex = require('jpex-web');
 var Injector = Jpex.extend({
-  dependencies : '$resolve',
-  contructor : function(){
-    $resolve = r;
-  },
-  static : {
-    install : function (Vue, options) {
-      Vue.mixin({
-        beforeCreate : function(){
-          var self = this;
-          var dependencies = this.$options.dependencies;
-          if (!dependencies){
-            return;
-          }
+  dependencies : ['$resolve', '$typeof'],
+  constructor : function ($resolve, $typeof) {
+    function resolveToTarget(dependencies, target, cached) {
+      if (!dependencies){
+        return;
+      }
+      dependencies = [].concat(dependencies);
+
+      dependencies.forEach(function (dependency) {
+        switch ( $typeof(dependency)){
+          case 'string':
+            target[dependency] = $resolve(dependency, cached);
+            break;
+          case 'object':
+            Object.keys(dependency).forEach(function (key) {
+              var value = dependency[key];
+              if ($typeof(value) === 'string'){
+                target[key] = $resolve(dependency[key], cached);
+              };
+            });
+            break;
+        }
+      });
+    }
 
+    this.install = function (Vue, options) {
+      Vue.mixin({
+        beforeCreate : function () {
           var cached = { $context : this };
 
-          // Dependencies can either be a string, an object, or an array of either
-          // 'myService'
-          // ['myService', 'myFactory']
-          // {myAlias : 'myService'}
-          [].concat(dependencies).forEach(function (dependency) {
-            if (typeof dependency === 'object'){
-              Object.keys(dependency).forEach(function (key) {
-                self[key] = $resolve(dependency[key], cached);
-              });
-            }else{
-              self[key] = $resolve(dependency, cached);
-            }
-          });
+          resolveToTarget(this.$options.dependencies, this, cached);
+          resolveToTarget(this.$options.components, this.$options.components, cached);
+          resolveToTarget(this.$options.mixins, this.$options.mixins, cached);
+          resolveToTarget(this.$options.directives, this.$options.directives, cached);
         }
       });
-    }
+    };
+
+    this.service = function () {
+      return Injector.Register.Service.apply(null, arguments);
+    };
+    this.factory = function () {
+      return Injector.Register.Factory.apply(null, arguments);
+    };
+    this.constant = function () {
+      return Injector.Register.Constant.apply(null, arguments);
+    };
+    this.interface = function () {
+      return Injector.Register.Interface.apply(null, arguments);
+    };
+    this.enum = function () {
+      return Injector.Register.Enum.apply(null, arguments);
+    };
   }
 });
 
-Injector();
+var injector = new Injector();
 
-module.exports = Injector;
-module.exports.default = Injector;
+module.exports = injector;
+module.exports.default = injector;

app/index.js

@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "description": "Dependency Injection for Vue",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jackmellis/vue-inject.git"

app/package.json

@@ -0,0 +1,17 @@
+global.window = {};
+const injector = require('vue-inject');
+const Vue = {
+  mixin : function (obj) {
+    var thisObj = {};
+    thisObj.$options = {};
+    thisObj.$options.dependencies = ['$window', '$xhr'];
+    thisObj.$options.components = {
+      injectedComponent : '$promise',
+      realComponent : { template : '<div />' }
+    };
+
+    obj.beforeCreate.call(thisObj);
+  }
+};
+
+injector.install(Vue);