angular-ui-date - npm Package Compare versions

Comparing version 0.0.11 to 1.0.0-beta.0

bower.json

 {
   "name": "angular-ui-date",
-  "version": "0.0.11",
+  "version": "1.0.0-beta.0",
   "description": "This directive allows you to add a date-picker to your form elements.",
@@ -8,3 +8,3 @@ "author": "https://github.com/angular-ui/ui-date/graphs/contributors",
   "homepage": "http://angular-ui.github.com/ui-date",
-  "main": "./src/date.js",
+  "main": "./dist/date.js",
   "ignore": [
@@ -22,6 +22,3 @@ "**/.*",
     "jquery-ui": "^1.9"
-  },
-  "devDependencies": {
-    "angular-mocks": "~1.x"
   }
 }

CHANGELOG.md

@@ -0,1 +1,7 @@
+<a name="1.0.0-beta.0"></a>
+# [1.0.0-beta.0](https://github.com/angular-ui/ui-date/compare/0.0.11...v1.0.0-beta.0) (2015-12-09)
+
+Update build to support umd and webpack.
+
+
 <a name="0.0.11"></a>
@@ -97,4 +103,1 @@ ## [0.0.11](https://github.com/Nexxa/ui-date/compare/0.0.10...v0.0.11) (2015-12-03)
 * **tests:** Added image for build status ([aad7b9f](https://github.com/Nexxa/ui-date/commit/aad7b9f))
-
-
-

karma.conf.js

 // Karma configuration
 //
+var webpack = require('webpack');
 module.exports = function(config) {
-  'use strict';
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jasmine'],
 
-    // list of files / patterns to load in the browser
     files: [
-      'bower_components/jquery/dist/jquery.min.js',
-      'bower_components/jquery-ui/jquery-ui.min.js', // would require a pre-processor for the npm version
-      'bower_components/angular/angular.min.js',
-      'bower_components/angular-mocks/angular-mocks.js',
-      'src/**/*.js',
-      'test/**/*.js'
+      'src/*.spec.js',
     ],
 
+    preprocessors: {
+      // add webpack as preprocessor
+      'src/*.spec.js': ['webpack'],
+    },
+
+    webpack: {
+      plugins: [
+        new webpack.ProvidePlugin({
+          // $: 'jquery',
+          // jQuery: 'jquery',
+          'window.jQuery': 'jquery',
+        }),
+      ],
+      module: {
+        loaders: [
+          // it helps angular to have jQuery exposed so that it uses $ instead of jqLite
+          // this is an alternative to using a webpack provide plugin
+          // {
+          //   test: require.resolve('jquery'),
+          //   loader: 'expose?$!expose?jQuery',
+          // },
+          {
+            test: /(\.js$)/,
+            exclude: /(node_modules|bower_components)/,
+            loader: 'babel',
+            query: {
+              presets: ['es2015'],
+            },
+          },
+        ],
+      },
+    },
+
     // test results reporter to use
@@ -28,3 +52,3 @@ // possible values: 'dots', 'progress'
 
-    reportSlowerThan: 100,
+    reportSlowerThan: 200,
 
@@ -50,3 +74,5 @@ // web server port
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false
+    singleRun: false,
+
+
   });
@@ -59,3 +85,3 @@
       autoWatch: false,
-      singleRun: true
+      singleRun: true,
     });
@@ -62,0 +88,0 @@ }

package.json

 {
   "name": "angular-ui-date",
-  "version": "0.0.11",
+  "version": "1.0.0-beta.0",
   "description": "This directive allows you to add a date-picker to your form elements.",
-  "main": "src/date.js",
+  "main": "dist/date.js",
   "scripts": {
+    "build": "npm run test && webpack",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w",
     "commit": "git-cz",
-    "lint": "eslint src/** test/** --ext .js",
+    "lint": "eslint src/** --ext .js",
     "update": "bower update",
-    "pretest": "npm run update",
+    "start": "webpack-dev-server",
     "test": "npm run lint && karma start --single-run",
     "test:watch": "karma start",
-    "test:single": "karma start --single-run"
+    "test:single": "karma start --single-run",
+    "test:ci": "TRAVIS=true npm run test"
   },
@@ -32,2 +34,7 @@ "repository": {
   "devDependencies": {
+    "angular": "^1.4.0",
+    "angular-mocks": "^1.4.0",
+    "babel-core": "6.3.15",
+    "babel-loader": "6.2.0",
+    "babel-preset-es2015": "6.3.13",
     "bower": "^1.7.0",
@@ -38,7 +45,14 @@ "commitizen": "^2.4.6",
     "eslint": "^1.10.3",
+    "exports-loader": "0.6.2",
+    "expose-loader": "0.7.1",
     "jasmine-core": "^2.4.1",
+    "jquery": "2.1.4",
+    "jquery-ui": "1.10.5",
     "karma": "^0.13.15",
     "karma-chrome-launcher": "^0.2.2",
     "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.6"
+    "karma-jasmine": "^0.3.6",
+    "karma-webpack": "1.7.0",
+    "webpack": "1.12.9",
+    "webpack-dev-server": "1.14.0"
   },
@@ -45,0 +59,0 @@ "config": {

README.md

@@ -1,2 +0,2 @@
-# ui-date directive [![Build Status](https://travis-ci.org/angular-ui/ui-date.svg)](https://travis-ci.org/angular-ui/ui-date)
+# ui-date directive [![Build Status](https://travis-ci.org/angular-ui/ui-date.svg)](https://travis-ci.org/angular-ui/ui-date)]
 
@@ -33,3 +33,3 @@ This directive allows you to add a date-picker to your form elements.
     <script type="text/javascript" src="bower_components/angular/angular.js"></script>
-    <script type="text/javascript" src="bower_components/angular-ui-date/src/date.js"></script>
+    <script type="text/javascript" src="bower_components/angular-ui-date/dist/date.js"></script>
 
@@ -94,2 +94,49 @@ Add the date module as a dependency to your application module:
 
+## Usage with webpack
+
+Install with npm:
+
+    npm install --save-dev jquery jquery-ui angular angular-ui-date
+
+Use in your app:
+
+```javascript
+import angular from 'angular';
+import uiDate from 'angular-ui-date';
+
+require('jquery-ui/themes/base/minified/jquery-ui.min.css');
+
+angular.module('MyTest', [uiDate.name])
+.controller('MyCtrl', ['$scope', function($scope) {
+    $scope.myDate = new Date('2015-11-17');
+}]);
+```
+
+It is also good to ensure that jQuery is available so that angular and jquery ui can attach to it.
+
+```javascript
+    webpack: {
+      plugins: [
+        new webpack.ProvidePlugin({
+          'window.jQuery': 'jquery',
+        }),
+      ]
+    }
+```
+
+another method of making jQuery recognized is to use the webpack expose-loader to expose it both as $ and jQuery
+
+```javascript
+    webpack: {
+      module: {
+        loaders: [
+                  // it helps angular to have jQuery exposed so that it uses $ instead of jqLite      
+                   {
+                     test: require.resolve('jquery'),
+                     loader: 'expose?$!expose?jQuery',
+                   },
+                ]
+              }
+            }
+```
 ## Need help?
@@ -96,0 +143,0 @@ Need help using UI date?

src/date.js

@@ -1,204 +0,194 @@
-/**
- * @file jQuery UI Datepicker plugin wrapper
- * @param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto uiDateConfig
- */
+import jQuery from 'jquery';
+import angular from 'angular';
+import _datePicker from 'jquery-ui/datepicker'; // sets up jQuery with the datepicker plugin
 
-/*global angular, jQuery, module, exports*/
+export default angular.module('ui.date', [])
+  .constant('uiDateConfig', {})
+  .constant('uiDateFormatConfig', '')
+  .factory('uiDateConverter', ['uiDateFormatConfig', function(uiDateFormatConfig) {
+    return {
+      stringToDate: stringToDate,
+      dateToString: dateToString,
+    };
 
-// commonjs package manager support
-if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
-  module.exports = 'ui.date';
-}
+    function dateToString(dateFormat, value) {
+      dateFormat = dateFormat || uiDateFormatConfig;
+      if (value) {
+        if (dateFormat) {
+          try {
+            return jQuery.datepicker.formatDate(dateFormat, value);
+          } catch (formatException) {
+            return undefined;
+          }
+        }
 
-(function(angular) {
-  'use strict';
-  angular
-    .module('ui.date', [])
-    .constant('uiDateConfig', {})
-    .constant('uiDateFormatConfig', '')
+        if (value.toISOString) {
+          return value.toISOString();
+        }
 
-    .factory('uiDateConverter', ['uiDateFormatConfig', function(uiDateFormatConfig) {
-      return {
-        stringToDate: stringToDate,
-        dateToString: dateToString
-      };
+      }
+      return null;
+    }
 
-      function dateToString(dateFormat, value) {
-        dateFormat = dateFormat || uiDateFormatConfig;
-        if (value) {
-          if (dateFormat) {
-            try {
-              return jQuery.datepicker.formatDate(dateFormat, value);
-            } catch (formatException) {
-              return undefined;
-            }
-          }
+    function stringToDate(dateFormat, valueToParse) {
+      dateFormat = dateFormat || uiDateFormatConfig;
 
-          if (value.toISOString) {
-            return value.toISOString();
-          }
+      if (angular.isDate(valueToParse) && !isNaN(valueToParse)) {
+        return valueToParse;
+      }
 
+      if (angular.isString(valueToParse)) {
+        if (dateFormat) {
+          return jQuery.datepicker.parseDate(dateFormat, valueToParse);
         }
-        return null;
+
+        var isoDate = new Date(valueToParse);
+        return isNaN(isoDate.getTime()) ? null : isoDate;
+
       }
 
-      function stringToDate(dateFormat, valueToParse) {
-        dateFormat = dateFormat || uiDateFormatConfig;
+      if (angular.isNumber(valueToParse)) {
+        // presumably timestamp to date object
+        return new Date(valueToParse);
+      }
 
-        if (angular.isDate(valueToParse) && !isNaN(valueToParse)) {
-          return valueToParse;
-        }
+      return null;
+    }
+  }])
 
-        if (angular.isString(valueToParse)) {
-          if (dateFormat) {
-            return jQuery.datepicker.parseDate(dateFormat, valueToParse);
-          }
+  .directive('uiDate', ['uiDateConfig', 'uiDateConverter', function uiDateDirective(uiDateConfig, uiDateConverter) {
 
-          var isoDate = new Date(valueToParse);
-          return isNaN(isoDate.getTime()) ? null : isoDate;
+    return {
+      require: '?ngModel',
+      link: function link(scope, element, attrs, controller) {
 
-        }
+        var $element = jQuery(element);
 
-        if (angular.isNumber(valueToParse)) {
-          // presumably timestamp to date object
-          return new Date(valueToParse);
-        }
+        var getOptions = function() {
+          return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
+        };
+        var initDateWidget = function() {
+          var showing = false;
+          var opts = getOptions();
 
-        return null;
-      }
-    }])
+          function setVal() {
+            var keys = ['Hours', 'Minutes', 'Seconds', 'Milliseconds'];
+            var isDate = angular.isDate(controller.$modelValue);
+            var preserve = {};
 
-    .directive('uiDate', ['uiDateConfig', 'uiDateConverter', function(uiDateConfig, uiDateConverter) {
+            if (isDate && controller.$modelValue.toDateString() === $element.datepicker('getDate').toDateString()) {
+              return;
+            }
 
-      return {
-        require: '?ngModel',
-        link: function(scope, element, attrs, controller) {
-          var getOptions = function() {
-            return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
-          };
-          var initDateWidget = function() {
-            var showing = false;
-            var opts = getOptions();
+            if (isDate) {
+              angular.forEach(keys, function(key) {
+                preserve[key] = controller.$modelValue['get' + key]();
+              });
+            }
 
-            function setVal() {
-              var keys = ['Hours', 'Minutes', 'Seconds', 'Milliseconds'];
-              var isDate = angular.isDate(controller.$modelValue);
-              var preserve = {};
+            var newViewValue = $element.datepicker('getDate');
 
-              if (isDate && controller.$modelValue.toDateString() === element.datepicker('getDate').toDateString()) {
-                return;
-              }
+            if (isDate) {
+              angular.forEach(keys, (key) => {
+                newViewValue['set' + key](preserve[key]);
+              });
+            }
 
-              if (isDate) {
-                angular.forEach(keys, function(key) {
-                  preserve[key] = controller.$modelValue['get' + key]();
-                });
-              }
+            controller.$setViewValue(newViewValue);
+          }
 
-              var newViewValue = element.datepicker('getDate');
+          // If we have a controller (i.e. ngModelController) then wire it up
+          if (controller) {
+            // Set the view value in a $apply block when users selects
+            // (calling directive user's function too if provided)
+            var _onSelect = opts.onSelect || angular.noop;
+            opts.onSelect = function(value, picker) {
+              scope.$apply(function() {
+                showing = true;
+                setVal();
+                _onSelect(value, picker);
+                $element.blur();
+              });
+            };
 
-              if (isDate) {
-                angular.forEach(keys, function(key) {
-                  newViewValue['set' + key](preserve[key]);
-                });
-              }
+            var _beforeShow = opts.beforeShow || angular.noop;
+            opts.beforeShow = function(input, picker) {
+              showing = true;
+              _beforeShow(input, picker);
+            };
 
-              controller.$setViewValue(newViewValue);
-            }
+            var _onClose = opts.onClose || angular.noop;
+            opts.onClose = function(value, picker) {
+              showing = false;
+              _onClose(value, picker);
+            };
 
-            // If we have a controller (i.e. ngModelController) then wire it up
-            if (controller) {
-
-              // Set the view value in a $apply block when users selects
-              // (calling directive user's function too if provided)
-              var _onSelect = opts.onSelect || angular.noop;
-              opts.onSelect = function(value, picker) {
+            $element.off('blur.datepicker').on('blur.datepicker', function() {
+              if (!showing) {
                 scope.$apply(function() {
-                  showing = true;
+                  $element.datepicker('setDate', $element.datepicker('getDate'));
                   setVal();
-                  _onSelect(value, picker);
-                  element.blur();
                 });
-              };
+              }
+            });
 
-              var _beforeShow = opts.beforeShow || angular.noop;
-              opts.beforeShow = function(input, picker) {
-                showing = true;
-                _beforeShow(input, picker);
-              };
+            controller.$validators.uiDateValidator = function uiDateValidator(modelValue, viewValue) {
+              return angular.isDate(uiDateConverter.stringToDate(attrs.uiDateFormat, viewValue));
+            };
 
-              var _onClose = opts.onClose || angular.noop;
-              opts.onClose = function(value, picker) {
-                showing = false;
-                _onClose(value, picker);
-              };
+            controller.$parsers.push(function uiDateParser(valueToParse) {
+              return uiDateConverter.stringToDate(attrs.uiDateFormat, valueToParse);
+            });
 
-              element.off('blur.datepicker').on('blur.datepicker', function() {
-                if (!showing) {
-                  scope.$apply(function() {
-                    element.datepicker('setDate', element.datepicker('getDate'));
-                    setVal();
-                  });
-                }
-              });
+            // Update the date picker when the model changes
+            controller.$render = function() {
+              $element.datepicker('setDate', controller.$modelValue);
+            };
+          }
+          // Check if the $element already has a datepicker.
+          //
 
-              controller.$validators.uiDateValidator = function uiDateValidator(modelValue, viewValue) {
-                return angular.isDate(uiDateConverter.stringToDate(attrs.uiDateFormat, viewValue));
-              };
+          if ($element.data('datepicker')) {
+            // Updates the datepicker options
+            $element.datepicker('option', opts);
+            $element.datepicker('refresh');
+          } else {
+            // Creates the new datepicker widget
+            $element.datepicker(opts);
 
-              controller.$parsers.push(function uiDateParser(valueToParse) {
-                return uiDateConverter.stringToDate(attrs.uiDateFormat, valueToParse);
-              });
+            // Cleanup on destroy, prevent memory leaking
+            $element.on('$destroy', function() {
+              $element.datepicker('hide');
+              $element.datepicker('destroy');
+            });
+          }
 
-              // Update the date picker when the model changes
-              controller.$render = function() {
-                element.datepicker('setDate', controller.$modelValue);
-              };
-            }
-            // Check if the element already has a datepicker.
-            if (element.data('datepicker')) {
-              // Updates the datepicker options
-              element.datepicker('option', opts);
-              element.datepicker('refresh');
-            } else {
-              // Creates the new datepicker widget
-              element.datepicker(opts);
+          if (controller) {
+            // Force a render to override whatever is in the input text box
+            controller.$render();
+          }
+        };
 
-              //Cleanup on destroy, prevent memory leaking
-              element.on('$destroy', function() {
-                element.datepicker('hide');
-                element.datepicker('destroy');
-              });
-            }
+        // Watch for changes to the directives options
+        scope.$watch(getOptions, initDateWidget, true);
+      },
+    };
+  }])
 
-            if (controller) {
-              // Force a render to override whatever is in the input text box
-              controller.$render();
-            }
-          };
+  .directive('uiDateFormat', ['uiDateConverter', function(uiDateConverter) {
+    return {
+      require: 'ngModel',
+      link: function(scope, element, attrs, modelCtrl) {
+        var dateFormat = attrs.uiDateFormat;
 
-          // Watch for changes to the directives options
-          scope.$watch(getOptions, initDateWidget, true);
-        }
-      };
-    }])
+        // Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
+        modelCtrl.$formatters.unshift(function(value) {
+          return uiDateConverter.stringToDate(dateFormat, value);
+        });
 
-    .directive('uiDateFormat', ['uiDateConverter', function(uiDateConverter) {
-      return {
-        require: 'ngModel',
-        link: function(scope, element, attrs, modelCtrl) {
-          var dateFormat = attrs.uiDateFormat;
-
-          // Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
-          modelCtrl.$formatters.unshift(function(value) {
-            return uiDateConverter.stringToDate(dateFormat, value);
-          });
-
-          modelCtrl.$parsers.push(function(value) {
-            return uiDateConverter.dateToString(dateFormat, value);
-          });
-        }
-      };
-    }]);
-
-})(angular);
+        modelCtrl.$parsers.push(function(value) {
+          return uiDateConverter.dateToString(dateFormat, value);
+        });
+      },
+    };
+  }]);

New alerts

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66581

increased by52.43%

Number of package files

19

increased by46.15%

Lines of code

996

increased by40.48%

Number of lines in readme file

153

increased by44.34%

Worsened metrics

Dev dependency count

22

increased by120%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes