angular-es6 - npm Package Compare versions

Comparing version 1.0.3 to 2.0.2

package.json

 {
   "name": "angular-es6",
   "description": "ECMAScript 6 boilerplate for angular source code and webpack",
-  "version": "1.0.3",
+  "version": "2.0.2",
   "private": false,
@@ -15,8 +15,14 @@ "author": {
   },
+  "license": "MIT",
   "keywords": [
     "angular",
+    "class",
+    "extend",
     "es6",
     "boilerplate",
     "ecmascript",
-    "ecmascript6"
+    "ecmascript6",
+    "object",
+    "babel",
+    "webpack"
   ],
@@ -27,25 +33,29 @@ "engines": {
   "scripts": {
-    "dev": "node webpack.development.js",
-    "build" : "node webpack.production.js"
+    "prepublish": "npm run build",
+    "test": "babel-node ./node_modules/gulp/bin/gulp.js test",
+    "build": "node ./node_modules/gulp/bin/gulp.js build",
+    "eslint": "node ./node_modules/eslint/bin/eslint.js --ext .js,.jsx ./src/"
   },
+  "main": "./dist/index.js",
   "dependencies": {
+    "lodash": "^3.10.1"
   },
+  "peerDependencies": {
+    "angular": "^1.2.0"
+  },
   "devDependencies": {
-    "webpack": "~1.7.3",
-    "exports-loader": "~0.6.2",
-    "imports-loader": "~0.6.3",
-    "script-loader": "~0.6.1",
-    "html-loader": "~0.2.3",
-    "less-loader": "~2.1.0",
-    "babel-loader": "~4.2.0",
-    "css-loader": "~0.9.1",
-    "style-loader": "~0.8.3",
-    "url-loader": "~0.5.5",
-    "babel": "~4.7.12",
-    "node.extend": "~1.1.3",
-    "angular": "~1.3.14",
-    "angular-route": "~1.3.14",
-    "angular-cookies": "~1.3.14",
-    "angular-resource": "~1.3.14"
+    "babel-loader": "^5.4.0",
+    "babel": "^5.8.34",
+    "babel-eslint": "^4.1.3",
+    "eslint": "^1.8.0",
+    "eslint-config-airbnb": "^0.1.0",
+    "eslint-loader": "^1.1.1",
+    "eslint-plugin-react": "^3.6.3",
+    "webpack": "^1.12.6",
+    "gulp": "^3.9.0",
+    "gulp-mocha": "^2.1.3",
+    "gulp-babel": "^5.2.1",
+    "gulp-util": "^3.0.7",
+    "should": "^7.1.1"
   }
 }

README.md

@@ -1,7 +0,12 @@
-# Angular ECMAScript 6 boilerplate
+# Angular ECMAScript 6 config and boilerplate
 
 Do you want to use ES6 with angular and webpack?
-Here is a simple project with everything what you need at the beginning
+Here is a simple project with everything what you need at the beginning.
 
+## What you will get
 
+ - You can write directives like a class
+ - Autoload directives, controllers, services, filters and factories
+
+
 ## Instalation
@@ -21,26 +26,24 @@
 export default class NiceDirective {
-    constructor($http) {
-    	this.$http = $http;
+  static $inject = ['$http'];
 
-        this.template = '<div>{{computeName('NICE')}}</div>'; 
-        this.restrict = 'E'; 
-        this.scope = {
-        	name: '='
-    	};
-    } 
+  constructor($http) {
+    this.template = '<div>{{computeName('NICE')}}</div>';
+    this.restrict = 'E';
+    this.scope = {
+      name: '=',
+    };
+  }
 
-    link($scope, element, attrs) { 
-        this.$scope = $scope;
+  link(scope) {
+    scope.computeName = suffix => computeName(suffix);
+  }
 
-        $scope.computeName = suffix => computeName(suffix);
-    } 
+  computeName(suffix = '') {
+    const { $http } = this.$inject;
+    const { scope } = this.link.$inject;
 
-    computeName(suffix = '') {
-    	const $scope = this.$scope;
-
-    	return 'Mr.' + $scope.name + ' ' +  suffix;
-    }
+    return 'Mr.' + $scope.name + ' ' +  suffix;
+  }
 }
 
-NiceDirective.$inject = ['$http'];
 ```
@@ -53,11 +56,68 @@
 export default class MainController {
-	constructor($scope) {
-		this.$scope = $scope;
-	}
+  static $inject = [$scope, '$http'];
+
+  constructor($scope) {
+    $scope.doThis = () => this.doThis();
+  }
+
+  doThis() {
+    const { $http } = this.$inject;
+    ...
+  }
 }
 
-MainController.$inject = ['$scope'];
 ```
 
+It is safe to use this.$inject because this object is initialized immediately after the constructor.
+If you want to use $injected object in constructor you can use arguments or extend class Inject.
 
+
+### class Inject
+
+Object this.$inject is initialized after class constructor.
+If you want to use this.$inject in your constructor you need to extend Inject class.
+
+In next example is called function doThis from the constructor.
+You can use this.$inject because this object was initialized by Inject constructor.
+
+```js
+import { Inject } from 'angular-es6';
+
+export default class MainController extends Inject {
+  static $inject = ['$http'];
+
+  constructor(...args) {
+    super(...args);
+
+    this.doThis();
+  }
+
+  doThis() {
+    const { $http } = this.$inject;
+  }
+}
+
+```
+
+
+### Auto load directives
+
+Each directory need to have file index.js with content like this:
+
+```js
+import { load } from 'angular-es6';
+
+load.directives(require.context('./', true, /.*\.js$/));
+```
+
+
+More examples you can find in the example directory.
+
+
+
+## Pull request
+
+Pull requests are welcome
+
+
 ## Run build for production
@@ -74,2 +134,2 @@
 npm run dev
-```
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28006

increased by184.24%

Dev dependency count

13

decreased by-18.75%

Number of package files

35

increased by66.67%

Lines of code

587

increased by249.4%

Number of lines in readme file

133

increased by84.72%

Worsened metrics

Dependency count

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash@^3.10.1

• + Addedangular@1.8.3(transitive)

• + Addedlodash@3.10.1(transitive)