angular-component - npm Package Compare versions

Comparing version 0.0.8 to 0.1.0

dist/angular-component.js

@@ -1,2 +0,2 @@
-/*! angular-component v0.0.8 | (c) 2016 @toddmotto | https://github.com/toddmotto/angular-component */
+/*! angular-component v0.1.0 | (c) 2016 @toddmotto | https://github.com/toddmotto/angular-component */
 (function () {
@@ -45,2 +45,22 @@
 
+        var oneWayQueue = [];
+
+        function parseBindings(bindings) {
+          var newBindings = {};
+          for (var prop in bindings) {
+            var binding = bindings[prop];
+            if (binding.charAt(0) === '<') {
+              var value = (
+                binding.substring(1) === '' ? prop : binding.substring(1)
+              );
+              oneWayQueue.unshift(value);
+            } else {
+              newBindings[prop] = binding;
+            }
+          }
+          return newBindings;
+        }
+
+        var modifiedBindings = parseBindings(options.bindings);
+
         var requires = [name];
@@ -63,4 +83,4 @@ var ctrlNames = [];
           transclude: options.transclude,
-          scope: options.bindings || {},
-          bindToController: !!options.bindings,
+          scope: modifiedBindings || {},
+          bindToController: !!modifiedBindings,
           restrict: 'E',
@@ -82,2 +102,46 @@ require: requires,
               }
+              var changes;
+              function triggerOnChanges() {
+                self.$onChanges(changes);
+                changes = undefined;
+              }
+              function updateChangeListener(key, newValue, oldValue, flush) {
+                if (typeof self.$onChanges === 'function') {
+                  if (!changes) {
+                    changes = {};
+                  }
+                  if (changes[key]) {
+                    oldValue = changes[key].currentValue;
+                  }
+                  changes[key] = {
+                    currentValue: newValue,
+                    previousValue: oldValue
+                  };
+                  if (flush) {
+                    triggerOnChanges();
+                  }
+                }
+              }
+              if (oneWayQueue.length) {
+                var destroyQueue = [];
+                for (var q = oneWayQueue.length; q--;) {
+                  var prop = oneWayQueue[q];
+                  var unbindParent = $scope.$parent.$watch($attrs[prop], function (newValue, oldValue) {
+                    self[prop] = newValue;
+                    updateChangeListener(prop, newValue, oldValue, true);
+                  });
+                  destroyQueue.unshift(unbindParent);
+                  var unbindLocal = $scope.$watch(function () {
+                    return self[prop];
+                  }, function (newValue, oldValue) {
+                    updateChangeListener(prop, newValue, oldValue, false);
+                  });
+                  destroyQueue.unshift(unbindLocal);
+                }
+                $scope.$on('$destroy', function () {
+                  for (var i = destroyQueue.length; i--;) {
+                    destroyQueue[i]();
+                  }
+                });
+              }
             },
@@ -84,0 +148,0 @@ post: function ($scope, $element, $attrs, $ctrls) {

dist/angular-component.min.js

@@ -1,2 +0,2 @@
-/*! angular-component v0.0.8 | (c) 2016 @toddmotto | https://github.com/toddmotto/angular-component */
-!function(){function n(n,t){if(t&&"string"==typeof t)return t;if("string"==typeof n){var r=/^(\S+)(\s+as\s+(\w+))?$/.exec(n);if(r)return r[3]}}function t(){function t(t,r){function o(e){function o(n){var t=angular.isArray(n);return angular.isFunction(n)||t?function(r,o){return e.invoke(t?n:["$element","$attrs",n],this,{$element:r,$attrs:o})}:n}var i=[t],l=[];if(angular.isObject(r.require))for(var u in r.require)i.push(r.require[u]),l.push(u);return{controller:r.controller||angular.noop,controllerAs:n(r.controller)||r.controllerAs||"$ctrl",template:o(r.template||r.templateUrl?r.template:""),templateUrl:o(r.templateUrl),transclude:r.transclude,scope:r.bindings||{},bindToController:!!r.bindings,restrict:"E",require:i,link:{pre:function(n,t,r,e){for(var o=e[0],i=0;i<l.length;i++)o[l[i]]=e[i+1];"function"==typeof o.$onInit&&o.$onInit(),"function"==typeof o.$onDestroy&&n.$on("$destroy",function(){o.$onDestroy.call(o)})},post:function(n,t,r,e){var o=e[0];"function"==typeof o.$postLink&&o.$postLink()}}}}for(var i in r)"$"===i.charAt(0)&&(o[i]=r[i]);return o.$inject=["$injector"],e.directive(t,o)}var e=r.apply(this,arguments);return e.component?e:(e.component=t,e)}var r=angular.module;angular.module=t}();
+/*! angular-component v0.1.0 | (c) 2016 @toddmotto | https://github.com/toddmotto/angular-component */
+!function(){function n(n,t){if(t&&"string"==typeof t)return t;if("string"==typeof n){var r=/^(\S+)(\s+as\s+(\w+))?$/.exec(n);if(r)return r[3]}}function t(){function t(t,r){function o(e){function o(n){var t=angular.isArray(n);return angular.isFunction(n)||t?function(r,o){return e.invoke(t?n:["$element","$attrs",n],this,{$element:r,$attrs:o})}:n}function i(n){var t={};for(var r in n){var e=n[r];if("<"===e.charAt(0)){var o=""===e.substring(1)?r:e.substring(1);u.unshift(o)}else t[r]=e}return t}var u=[],a=i(r.bindings),c=[t],l=[];if(angular.isObject(r.require))for(var f in r.require)c.push(r.require[f]),l.push(f);return{controller:r.controller||angular.noop,controllerAs:n(r.controller)||r.controllerAs||"$ctrl",template:o(r.template||r.templateUrl?r.template:""),templateUrl:o(r.templateUrl),transclude:r.transclude,scope:a||{},bindToController:!!a,restrict:"E",require:c,link:{pre:function(n,t,r,e){function o(){a.$onChanges(f),f=void 0}function i(n,t,r,e){"function"==typeof a.$onChanges&&(f||(f={}),f[n]&&(r=f[n].currentValue),f[n]={currentValue:t,previousValue:r},e&&o())}for(var a=e[0],c=0;c<l.length;c++)a[l[c]]=e[c+1];"function"==typeof a.$onInit&&a.$onInit(),"function"==typeof a.$onDestroy&&n.$on("$destroy",function(){a.$onDestroy.call(a)});var f;if(u.length){for(var s=[],p=u.length;p--;){var $=u[p],v=n.$parent.$watch(r[$],function(n,t){a[$]=n,i($,n,t,!0)});s.unshift(v);var g=n.$watch(function(){return a[$]},function(n,t){i($,n,t,!1)});s.unshift(g)}n.$on("$destroy",function(){for(var n=s.length;n--;)s[n]()})}},post:function(n,t,r,e){var o=e[0];"function"==typeof o.$postLink&&o.$postLink()}}}}for(var i in r)"$"===i.charAt(0)&&(o[i]=r[i]);return o.$inject=["$injector"],e.directive(t,o)}var e=r.apply(this,arguments);return e.component?e:(e.component=t,e)}var r=angular.module;angular.module=t}();

package.json

 {
   "name": "angular-component",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "main": "./dist/angular-component.min.js",
@@ -5,0 +5,0 @@ "description": "Angular component() polyfill",

README.md

@@ -29,4 +29,4 @@ # angular-component.js
 | `$` prefixed properties such as `$canActivate`        | Yes      |
-| One-way data-binding emulated                         | No, todo |
-| `$onChanges` lifecycle hook                           | No, todo |
+| One-way data-binding emulated                         | Yes      |
+| `$onChanges` lifecycle hook                           | Yes      |
 
@@ -33,0 +33,0 @@ ### Component method usage

src/angular-component.js

@@ -44,2 +44,22 @@ (function () {
 
+        var oneWayQueue = [];
+
+        function parseBindings(bindings) {
+          var newBindings = {};
+          for (var prop in bindings) {
+            var binding = bindings[prop];
+            if (binding.charAt(0) === '<') {
+              var value = (
+                binding.substring(1) === '' ? prop : binding.substring(1)
+              );
+              oneWayQueue.unshift(value);
+            } else {
+              newBindings[prop] = binding;
+            }
+          }
+          return newBindings;
+        }
+
+        var modifiedBindings = parseBindings(options.bindings);
+
         var requires = [name];
@@ -62,4 +82,4 @@ var ctrlNames = [];
           transclude: options.transclude,
-          scope: options.bindings || {},
-          bindToController: !!options.bindings,
+          scope: modifiedBindings || {},
+          bindToController: !!modifiedBindings,
           restrict: 'E',
@@ -81,2 +101,46 @@ require: requires,
               }
+              var changes;
+              function triggerOnChanges() {
+                self.$onChanges(changes);
+                changes = undefined;
+              }
+              function updateChangeListener(key, newValue, oldValue, flush) {
+                if (typeof self.$onChanges === 'function') {
+                  if (!changes) {
+                    changes = {};
+                  }
+                  if (changes[key]) {
+                    oldValue = changes[key].currentValue;
+                  }
+                  changes[key] = {
+                    currentValue: newValue,
+                    previousValue: oldValue
+                  };
+                  if (flush) {
+                    triggerOnChanges();
+                  }
+                }
+              }
+              if (oneWayQueue.length) {
+                var destroyQueue = [];
+                for (var q = oneWayQueue.length; q--;) {
+                  var prop = oneWayQueue[q];
+                  var unbindParent = $scope.$parent.$watch($attrs[prop], function (newValue, oldValue) {
+                    self[prop] = newValue;
+                    updateChangeListener(prop, newValue, oldValue, true);
+                  });
+                  destroyQueue.unshift(unbindParent);
+                  var unbindLocal = $scope.$watch(function () {
+                    return self[prop];
+                  }, function (newValue, oldValue) {
+                    updateChangeListener(prop, newValue, oldValue, false);
+                  });
+                  destroyQueue.unshift(unbindLocal);
+                }
+                $scope.$on('$destroy', function () {
+                  for (var i = destroyQueue.length; i--;) {
+                    destroyQueue[i]();
+                  }
+                });
+              }
             },
@@ -83,0 +147,0 @@ post: function ($scope, $element, $attrs, $ctrls) {

No alert changes

Improved metrics

Total package byte prevSize

21412

increased by33.54%

Lines of code

386

increased by46.21%

No dependency changes