electron+angular+angular-decoratorsで遊んでいて、メインプロセスとレンダープロセスでインジェクトの方式が違うのがなんかシャクなのでカッとなって作ってみました。

inject-decorators

モチベーション

レンダープロセス側のangularではangular-decoratorsを使うと

@Component({ selector : 'application' })
@View({ template: `
  <sidebar></sidebar>
  <content></content>
`})
@Inject('ipc')
class ApplicationComponent {
  constructor(ipc){
    this.ipc = ipc;
  }
}


var m = Module('module', [
  ApplicationComponent
]);
angular.module('app', [m])
       .factory('ipc', () => require('ipc'));

のように書けるのですが、これはangular用のライブラリなのでメインプロセス側では使用することができません。
ついでにelectronのipcやnode標準のfsなどオブジェクトのために、わざわざfactoryを書くのが面倒臭い・・・というところがモチベーションです。

使い方

@Component({ selector : 'application' })
@View({ template: `
  <sidebar></sidebar>
  <content></content>
`})
@Inject(require('ipc'))
class ApplicationComponent {
  constructor(ipc){
    this.ipc = ipc;
  }
}


var m = Module('module', [
  ApplicationComponent
]);

みたいにオブジェクトを突っ込んだり

@Inject(app, MainWindow)
export default class Application {

  constructor(app, window) {
    this.app = app;
    this.window = window;

  }
}

のようにクラスを入れるとインスタンス化します。

困っている話

@Inject(1)
class Foo {
  constructor(num1) {
    this.num1 = num1;
  }
};
@Inject(2)
class Bar extends Foo {
  constructor(num1, num2) {
    super(num1);

    this.num2 = num2;
  }
} 

let bar = new Bar();

assert(bar.num1 === 1);
assert(bar.num2 === 1);

ES7 Decoratorsを使ったインジェクトの場合に継承の話題を全然見ませんが、スーパークラスとサブクラスの両方に指定した場合はどういう挙動するのが良いんでしょう？
自分は実際にコードを書いていて↑の形が嬉しかったのでそうしてみましたが、正直わかりやすいとは言い難いなと思ってます。

このあたりどうなると良いとかあればご意見ください！

まとめ

正直、筋が良い方式でも実装でもないとは思いすが、テストのときに差し替えれて、お手軽に使えれば良いやというスタンスの自分にはこれで十分な感じです。
これで困るパターンが出てきたら、他にもいくつかDIライブラリが出ているのでそちらに移行しようかなと思います。

ES7 DecoratorsでInjectorを作ってみた

モチベーション

使い方

困っている話

まとめ