@granite-elements/granite-qrcode-decoder - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

package.json

 {
   "name": "@granite-elements/granite-qrcode-decoder",
+  "version": "3.0.0",
   "description": "An element to scan a QR Code using the device camera",
@@ -19,16 +20,53 @@ "keywords": [
   "license": "MIT",
+  "main": "index.js",
+  "module": "index.js",
+  "scripts": {
+    "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
+    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "test": "karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false",
+    "storybook": "start-storybook",
+    "storybook:build": "build-storybook"
+  },
   "dependencies": {
     "@lostinbrittany/jsqrcode": "^2.0.0",
-    "lit-element": "^2.0.0"
+    "lit-html": "^1.1.2",
+    "lit-element": "^2.2.1"
   },
   "devDependencies": {
-    "@polymer/app-media": "^3.0.1",
-    "@lostinbrittany/iron-demo-helpers": "^3.0.2",
-    "@webcomponents/webcomponentsjs": "^2.2.7",
-    "wct-browser-legacy": "^1.0.2",
-    "web-component-tester": "^6.9.2"
+    "es-dev-server": "^1.23.0",
+    "eslint": "^6.1.0",
+    "@open-wc/eslint-config": "^2.0.0",
+    "@open-wc/prettier-config": "^0.1.10",
+    "husky": "^1.0.0",
+    "lint-staged": "^8.0.0",
+    "@open-wc/testing-karma": "^3.0.0",
+    "deepmerge": "^3.2.0",
+    "@open-wc/testing": "^2.0.0",
+    "@open-wc/demoing-storybook": "^2.0.0"
   },
-  "main": "granite-qrcode-decoder.js",
-  "module": "granite-qrcode-decoder.js",
-  "version": "2.0.1"
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": "@open-wc/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
 }

README.md

@@ -5,14 +5,19 @@ [![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/LostInBrittanygranite-qrcode-decoder)
 
-# granite-qrcode-decoder
+# \<granite-qrcode-decoder>
 
-> An element to decode a QR Code from an image. 
-> using [a modified version](https://github.com/LostInBrittany/jsqrcode) of [Lazersoft's jsqrcode](https://github.com/LazerSoft/jsqrcode) library, to allow `jsqrcode` to deal with ShadowDOM
->
-> Built on [lit-element](https://github.com/Polymer/lit-element)
->
+A custom element to decode a QR Code from an image, using [a modified version](https://github.com/LostInBrittany/jsqrcode) of [Lazersoft's jsqrcode](https://github.com/LazerSoft/jsqrcode) library, to allow `jsqrcode` to deal with ShadowDOM
+
+Built on [lit-element](https://github.com/Polymer/lit-element) following the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
 > The old Polymer 2.x-1.x version is available on the [`polymer-hybrid` branch](https://github.com/LostInBrittany/granite-qrcode-decoder/tree/polymer-hybrid).
 
 
-## Doc & demo
+## Installation
 
+```bash
+npm i granite-qrcode-decoder
+```
+
+## Usage
+
 The element can decode several sources of images:
@@ -24,60 +29,78 @@
 
-[https://lostinbrittany.github.io/granite-qrcode-decoder](https://lostinbrittany.github.io/granite-qrcode-decoder)
 
+```html
+<script type="module">
+  import 'granite-qrcode-decoder/granite-qrcode-decoder.js';
+</script>
 
-## Usage example
+<granite-qrcode-decoder
+    @qrcode-decoded="${method_listening_for_data}"
+    data-url="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAAFyAQMAAADS6sNKAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABn0lEQVR4nO2aS46EMAxELXEAjsTVcyQO0FJ6sF0xBBazmlGhqoW7SV6ywYk/3WaSJEmSJP2Peupjtu3H42GaLd1sxVwTz8vHw/qxAFpRPlaIeE5+zTl3ijDTmPg38Lb9fCkj/m28DeOLTPwreP9YM17DLL+4/8Uz8Cm/xSeDOfG8/GXlNWg/UuK5eAA9Uu2soo7z7jWW4dCLJ+Uj7dozcjtfE1FDN/G8/EmneA1HiWxNPDOPVMy8y+Vjno9ZGjPxzDxqp2Z+toHmRsuD/4jn4ROAF/RRTw1HEU/M+1w0uFwRpZGK4eSLZ+UvpxzHf8Tr2M3EE/Nr3ufoYjq/ZHn1cJ+LZ+LrjdfKdAUY8cR8NTCnUgqucPcf8UR8lVJxlfse2e86NN/n4rn4fOPV5fKVg282STwXf14ZrepLenbrd4nn4nGuP8MzvJTqHY3s+f4Xz8XHw+h3HaosTDw/f3n36ILAUVptKZ6bv/9LKwO5+FfwMbwhXlvk4A+/L4un4v0jvKAPqtCn/qd4Hj6FAO3Ltx2L7v0T8VS8JEmSJEl/qS/3CycsizQPTAAAAABJRU5ErkJggg==" 
+    debug></granite-qrcode-decoder>
+```
 
-<!--
+## Linting with ESLint, Prettier, and Types
+To scan the project for linting errors, run
+```bash
+npm run lint
 ```
-<custom-element-demo>
-  <template>
-    <script src="@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    <script src="@granite-elements/granite-qrcode-decoder/granite-qrcode-decoder.js"></script>
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
+
+You can lint with ESLint and Prettier individually as well
+```bash
+npm run lint:eslint
 ```
--->
-```html
-    <granite-qrcode-decoder
-        @qrcode-decoded="${method_listening_for_data}"
-        data-url="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAAFyAQMAAADS6sNKAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABn0lEQVR4nO2aS46EMAxELXEAjsTVcyQO0FJ6sF0xBBazmlGhqoW7SV6ywYk/3WaSJEmSJP2Peupjtu3H42GaLd1sxVwTz8vHw/qxAFpRPlaIeE5+zTl3ijDTmPg38Lb9fCkj/m28DeOLTPwreP9YM17DLL+4/8Uz8Cm/xSeDOfG8/GXlNWg/UuK5eAA9Uu2soo7z7jWW4dCLJ+Uj7dozcjtfE1FDN/G8/EmneA1HiWxNPDOPVMy8y+Vjno9ZGjPxzDxqp2Z+toHmRsuD/4jn4ROAF/RRTw1HEU/M+1w0uFwRpZGK4eSLZ+UvpxzHf8Tr2M3EE/Nr3ufoYjq/ZHn1cJ+LZ+LrjdfKdAUY8cR8NTCnUgqucPcf8UR8lVJxlfse2e86NN/n4rn4fOPV5fKVg282STwXf14ZrepLenbrd4nn4nGuP8MzvJTqHY3s+f4Xz8XHw+h3HaosTDw/f3n36ILAUVptKZ6bv/9LKwO5+FfwMbwhXlvk4A+/L4un4v0jvKAPqtCn/qd4Hj6FAO3Ltx2L7v0T8VS8JEmSJEl/qS/3CycsizQPTAAAAABJRU5ErkJggg==" 
-        debug></granite-qrcode-decoder>
+```bash
+npm run lint:prettier
 ```
 
+To automatically fix many linting errors, run
+```bash
+npm run format
+```
 
-## Install
+You can format using ESLint and Prettier individually as well
+```bash
+npm run format:eslint
+```
+```bash
+npm run format:prettier
+```
 
+## Testing with Karma
+To run the suite of karma tests, run
+```bash
+npm run test
+```
 
+To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
 
-Install the component using [npm](https://www.npmjs.com/):
+```bash
+npm run test:watch
+```
 
-```sh
-$ npm i @granite-elements//granite-qrcode-decoder 
+## Demoing with Storybook
+To run a local instance of Storybook for your component, run
+```bash
+npm run storybook
 ```
 
-Once installed, import it in your application:
+To build a production version of Storybook, run
+```bash
+npm run storybook:build
+```
 
-import '@granite-elements/granite-qrcode-decoder/granite-qrcode-decoder.js';
 
+## Tooling configs
 
-## Running demos and tests in browser
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
 
-1. Fork the `granite-qrcode-decoder` repository and clone it locally.
+If you customize the configuration a lot, you can consider moving them to individual files.
+\
+## Local Demo with `es-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`
 
-1. Make sure you have [npm](https://www.npmjs.com/) 
-and the [Polymer CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli) installed.
 
-1. When in the `granite-qrcode-decoder` directory, run `npm install` to install dependencies.
-
-1. Serve the project using Polyumer CLI:
-
-    `polymer serve --npm`
-
-1. Open the demo in the browser
-
-    - http://127.0.0.1:8080/components/@greanite-elements/granite-qrcode-decoder/demo
-
-
-
 ## Contributing
@@ -94,2 +117,1 @@
 [MIT License](http://opensource.org/licenses/MIT)
-

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

Network access

Supply chain risk

This module accesses the network.

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

30396

increased by60.62%

Number of package files

14

increased by75%

Lines of code

257

increased by72.48%

Number of lines in readme file

115

increased by23.66%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

10

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedlit-html@^1.1.2

• Updatedlit-element@^2.2.1