@jetbrains/babel-plugin-angular-annotate

    2.0.3 • Public • Published

    babel-plugin-angular-annotate

    Make angular dependency annotation minification proof

    Build Status

    Compatibility

    The version 2.x uses babel 6.x plugin API, for babel 5.x versions use the babel-plugin-angular-annotate 1.x

    Installation

    npm install babel-plugin-angular-annotate

    Usage

    Via .babelrc (Recommended)

    .babelrc

    {
      "plugins": [
        ["angular-annotate", [configurations...]]
      ]
    }

    Via CLI

    $ babel --plugins angular-annotate script.js

    Via Node API

    require("babel-core").transform("code", {
      plugins: [
        ["angular-annotate", [configurations...]]
      ]
    });

    Known issues

    • Some injections wont work properly when using this plugin in conjuction with babel-preset-es2015. To get it working you need to use "passPerPreset": true in your .babelrc.

    Configuration

    angular-annotate accepts a json like injection configuration starting with an array containing two items in this format: [method call, args].

    method call is expressed as a string with the service name and method call. For instance "$injector.invoke". You can also nest calls. For instance: "$httpProvider.interceptors.push".

    args is where you map each param with the corresponding injection strategy. The two possible are: "$injectFunction" and "$injectObject". Any other value will be ignored.

    $injectFunction will transform:

    function (a, b, c) {
    }

    to

    ['a', 'b', 'c', function (a, b, c) {
    }]

    For instance to create a rule for $injector.invoke you can apply the following configuration: ["$injector.invoke", ["$injectFunction"]].

    So the following will be transformed:

    Before:

    $injector.invoke(function($state) {
      $state.go('somewhere');
    });

    After:

    $injector.invoke(['$state', function($state) {
      $state.go('somewhere');
    }]);

    $injectObject will apply $injectFunction for each object value. This is mainly used in the resolve property from some services. For example:

    The $routeProvider.when configuration can be expressed with the following:

    ["$routeProvider.when", ["_", {
      "controller": "$injectFunction",
      "resolve": "$injectObject"
    }]];

    Before:

    $routeProvider.when('/foo', {
      controller: function($scope) {
        $scope.message = 'foo';
      },
      templateUrl: 'foo.html',
      resolve: {
        store: function (foo) {
        }
      }
    });

    After:

    $routeProvider.when('/foo', {
      controller: ['$scope', function($scope) {
        $scope.message = 'foo';
      }],
      templateUrl: 'foo.html',
      resolve: {
        store: ['foo', function (foo) {
        }]
      }
    });

    Note that since we don't want to do anything in the routeName we use a "_" to ignore it.

    Presets

    Since configuring each service injection can be tedius, this libray includes some presets like: "angular", "ngMaterial", "ngRoute" and "ui.router". So you can simple include the following in .babelrc:

    {
      "plugins": [
        ["angular-annotate", ["angular", "ngMaterial", "ui.router"]]
      ]
    }

    Check the main file to see what injections are currently handled.

    Running Tests

    npm test

    Contributing

    1. Fork it
    2. Create your feature branch (git checkout -b my-new-feature)
    3. Commit your changes (git commit -am 'Add some feature')
    4. Push to the branch (git push origin my-new-feature)
    5. Create new Pull Request

    Keywords

    Install

    npm i @jetbrains/babel-plugin-angular-annotate

    DownloadsWeekly Downloads

    4

    Version

    2.0.3

    License

    MIT

    Last publish

    Collaborators

    • bashor
    • allvo
    • jetbrains-buildserver
    • kisenka
    • princed
    • maksimr
    • kotlin
    • jetbrains-admin