choices.js - npm Package Compare versions

Comparing version 7.1.1 to 7.1.3

package.json

 {
   "name": "choices.js",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "description": "A vanilla JS customisable text input/select box plugin",
@@ -9,3 +9,3 @@ "main": "./public/assets/scripts/choices.min.js",
     "start": "run-p js:watch css:watch",
-    "build": "npm run js:build && npm run css:build",
+    "build": "run-p js:build css:build",
     "lint": "eslint src/scripts",
@@ -16,3 +16,4 @@ "coverage": "nyc --reporter=lcov --reporter=text --reporter=text-summary mocha",
     "cypress:open": "$(npm bin)/cypress open",
-    "test": "npm run test:unit && npm run test:e2e",
+    "cypress:ci": "cypress run --record --group --ci-build-id $GITHUB_SHA",
+    "test": "run-s test:unit test:e2e",
     "test:unit": "mocha",
@@ -24,9 +25,8 @@ "test:unit:watch": "mocha --watch --inspect=5556",
     "css:watch": "nodemon -e scss -x \"npm run css:build\"",
-    "css:build": "run-p css:sass css:prefix css:min",
-    "css:sass": "node-sass --output-style expanded --include-path  scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
+    "css:build": "run-s css:sass css:prefix css:min",
+    "css:sass": "node-sass --output-style expanded --include-path scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
     "css:prefix": "postcss public/assets/styles/*.css --use autoprefixer --no-map --env prod --dir public/assets/styles",
-    "css:min": "csso public/assets/styles/base.css public/assets/styles/base.min.css && csso public/assets/styles/choices.css public/assets/styles/choices.min.css",
+    "css:min": "csso public/assets/styles/base.css --output public/assets/styles/base.min.css && csso public/assets/styles/choices.css --output public/assets/styles/choices.min.css",
     "deploy": "git subtree push --prefix public origin gh-pages",
-    "prepush": "run-p lint test:unit && npm run bundlesize",
-    "preversion": "npm test",
+    "prepush": "run-s lint test:unit bundlesize",
     "postversion": "git push --no-verify --atomic",
@@ -62,12 +62,9 @@ "prepublishOnly": "npm run build"
     "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/plugin-transform-spread": "^7.2.2",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/register": "^7.0.0",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/register": "^7.6.2",
     "autoprefixer": "^9.6.5",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.0.6",
     "bundlesize": "^0.18.0",
     "chai": "^4.2.0",
-    "csso": "^1.8.2",
+    "csso-cli": "^3.0.0",
     "cypress": "3.2.0",
@@ -85,23 +82,19 @@ "eslint": "^6.5.1",
     "mocha": "^6.2.2",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "nodemon": "^1.18.10",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
-    "opn": "^5.4.0",
     "postcss-cli": "^6.1.3",
     "prettier": "^1.16.4",
     "sinon": "^7.5.0",
-    "unminified-webpack-plugin": "^2.0.0",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-middleware": "^3.5.2",
-    "webpack-hot-middleware": "^2.24.3",
-    "whatwg-fetch": "^1.0.0",
-    "wrapper-webpack-plugin": "^2.1.0"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-middleware": "^3.7.2",
+    "webpack-hot-middleware": "^2.25.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "deepmerge": "^2.2.1",
+    "deepmerge": "^4.2.0",
     "fuse.js": "3.4.2",
-    "redux": "^3.3.1"
+    "redux": "^4.0.4"
   },
@@ -129,9 +122,9 @@ "npmName": "choices.js",
       "path": "public/assets/scripts/choices.min.js",
-      "maxSize": "25 kB"
+      "maxSize": "20 kB"
     },
     {
       "path": "public/assets/styles/choices.min.css",
-      "maxSize": "2 kB"
+      "maxSize": "1.8 kB"
     }
   ]
 }

README.md

 # Choices.js [![Actions Status](https://github.com/jshjohnson/Choices/workflows/Unit%20Tests/badge.svg)](https://github.com/jshjohnson/Choices/actions) [![npm](https://img.shields.io/npm/v/choices.js.svg)](https://www.npmjs.com/package/choices.js) [![codebeat badge](https://codebeat.co/badges/55120150-5866-42d8-8010-6aaaff5d3fa1)](https://codebeat.co/projects/github-com-jshjohnson-choices-master)
-A vanilla, lightweight (~22kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
+A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
 
@@ -156,7 +156,7 @@ [Demo](https://joshuajohnson.co.uk/Choices/)
 ## Terminology
-| Word   | Definition |
-| ------ | ---------- |
-| Choice | A choice is a value a user can select. A choice would be equivalent to the `<option></option>` element within a select input.  |
-| Group  | A group is a collection of choices. A group should be seen as equivalent to a `<optgroup></optgroup>` element within a select input.|
-| Item   | An item is an inputted value (text input) or a selected choice (select element). In the context of a select element, an item is equivalent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivalent to `<input type="text" value="Hello">`|
+| Word   | Definition                                                                                                                                                                                                                                                                                                              |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Choice | A choice is a value a user can select. A choice would be equivalent to the `<option></option>` element within a select input.                                                                                                                                                                                           |
+| Group  | A group is a collection of choices. A group should be seen as equivalent to a `<optgroup></optgroup>` element within a select input.                                                                                                                                                                                    |
+| Item   | An item is an inputted value (text input) or a selected choice (select element). In the context of a select element, an item is equivalent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivalent to `<input type="text" value="Hello">` |
 
@@ -950,14 +950,14 @@
 ### NPM tasks
-| Task                 | Usage                                                        |
-| -------------------- | ------------------------------------------------------------ |
-| `npm run start`      | Fire up local server for development                         |
-| `npm run test:unit`  | Run sequence of tests once                                   |
-| `npm run test:unit:watch` | Fire up test server and re-test on file change          |
-| `npm run test:e2e`    | Run sequence of e2e tests (with local server)               |
-| `npm run test`    | Run both unit and e2e tests                                     |
-| `npm run cypress:open`    | Run Cypress e2e tests (GUI)                        |
-| `npm run cypress:run`    | Run Cypress e2e tests (CLI)                                  |
-| `npm run js:build`   | Compile Choices to an uglified JavaScript file               |
-| `npm run css:watch`  | Watch SCSS files for changes. On a change, run build process |
-| `npm run css:build`  | Compile, minify and prefix SCSS files to CSS                 |
+| Task                      | Usage                                                        |
+| ------------------------- | ------------------------------------------------------------ |
+| `npm run start`           | Fire up local server for development                         |
+| `npm run test:unit`       | Run sequence of tests once                                   |
+| `npm run test:unit:watch` | Fire up test server and re-test on file change               |
+| `npm run test:e2e`        | Run sequence of e2e tests (with local server)                |
+| `npm run test`            | Run both unit and e2e tests                                  |
+| `npm run cypress:open`    | Run Cypress e2e tests (GUI)                                  |
+| `npm run cypress:run`     | Run Cypress e2e tests (CLI)                                  |
+| `npm run js:build`        | Compile Choices to an uglified JavaScript file               |
+| `npm run css:watch`       | Watch SCSS files for changes. On a change, run build process |
+| `npm run css:build`       | Compile, minify and prefix SCSS files to CSS                 |
 
@@ -964,0 +964,0 @@ ## License

src/scripts/choices.js

@@ -1709,5 +1709,3 @@ import Fuse from 'fuse.js';
     const choiceId = choices ? choices.length + 1 : 1;
-    const choiceElementId = `${this._baseId}-${
-      this._idNames.itemChoice
-    }-${choiceId}`;
+    const choiceElementId = `${this._baseId}-${this._idNames.itemChoice}-${choiceId}`;
 
@@ -2090,3 +2088,3 @@ this._store.dispatch(
 Choices.userDefaults = {};
-// We cannot export default here due to Webpack: https://github.com/webpack/webpack/issues/3929
-module.exports = Choices;
+
+export default Choices;

src/scripts/components/wrapped-element.js

@@ -18,2 +18,7 @@ import { dispatchEvent, isElement } from '../lib/utils';
 
+  set value(value) {
+    // you must define setter here otherwise it will be readonly property
+    this.element.value = value;
+  }
+
   conceal() {
@@ -20,0 +25,0 @@ // Hide passed input

src/scripts/components/wrapped-input.js

@@ -17,6 +17,5 @@ import WrappedElement from './wrapped-element';
 
-  // @todo figure out why we need this? Perhaps a babel issue
   get value() {
-    return super.value;
+    return this.element.value;
   }
 }

No alert changes

Improved metrics

Dev dependency count

31

decreased by-18.42%

Worsened metrics

Total package byte prevSize

467569

decreased by-8.14%

Lines of code

9757

decreased by-8.56%

Dependency changes

• + Added@babel/runtime@7.26.7(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addedredux@4.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removeddeepmerge@2.2.1(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedlodash-es@4.17.21(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedredux@3.7.2(transitive)

• - Removedsymbol-observable@1.2.0(transitive)

• Updateddeepmerge@^4.2.0

• Updatedredux@^4.0.4