chore: use Vue CLI provided config boilerplate

Issue: #51

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+ie >= 10

.eslintrc.js

@@ -1,24 +1,25 @@
 module.exports = {
   root: true,
-  parser: "babel-eslint",
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    sourceType: "module"
+    parser: "babel-eslint"
   },
-  extends: "prettier",
-  // required to lint *.vue files
-  plugins: ["html"],
-  env: {
-    browser: true
-  }
-  // add your custom rules here
-  // 'rules': {
-  //   // allow paren-less arrow functions
-  //   'arrow-parens': 0,
-  //   // allow async-await
-  //   'generator-star-spacing': 0,
-  //   // allow debugger during development
-  //   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-  //   // trailing comma
-  //   'comma-dangle': ['error', 'always-multiline'],
-  // }
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
 };

.gitignore

@@ -1,5 +1,25 @@
-node_modules/
-dist/
-npm-debug.log
-yarn-error.log
-package-lock.json
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -118,15 +118,15 @@ The newest API these components depend on is the [FileReader API](https://canius
 
 # Installation :package:
 
-## Module import
+## With NPM
 
-Run:
+Run
 
 ```bash
 npm install vue-qrcode-reader
 ```
 
-Either import the components independantly for local registration:
+You can import the components independantly
 
 ```javascript
 import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
@@ -143,7 +143,7 @@ const MyComponent = {
 ))
 ```
 
-Or register all of them globally right away:
+or register all of them globally right away
 
 ```javascript
 import Vue from "vue";
@@ -152,14 +152,35 @@ import VueQrcodeReader from "vue-qrcode-reader";
 Vue.use(VueQrcodeReader);
 ```
 
-**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
+## Without NPM
 
-## Classic import
+<!--
+CHANGE NEXT RELEASE:
 
-Vue itself must be included first. Then add the following CSS and JS file:
+Include the following JS files:
 
-- `<link href="`[vue-qrcode-reader.css](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.css)`" rel="stylesheet">`
-- `<script src="`[vue-qrcode-reader.browser.js](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.browser.js)`"></script>`
+https://unpkg.com/vue-qrcode-reader/dist/VueQrcodeReader.umd.min.js
+https://unpkg.com/vue-qrcode-reader/dist/VueQrcodeReader.umd.min.1.js
+
+Make sure to include them after Vue:
+
+```html
+<script src="./vue.js"></script>
+<script src="./VueQrcodeReader.umd.min.js"></script>
+<script src="./VueQrcodeReader.umd.min.1.js"></script>
+```
+-->
+
+Include the following JS file:
+
+https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.browser.js
+
+Make sure to include it after Vue:
+
+```html
+<script src="./vue.js"></script>
+<script src="./vue-qrcode-reader.browser.js"></script>
+```
 
 All components are automatically registered globally.
 Use kebab-case to reference them in your templates:

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

demos/Demo.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <p>
+      Last result: <b>{{ decodedContent }}</b>
+    </p>
+
+    <p class="error">
+      {{ errorMessage }}
+    </p>
+
+    <qrcode-stream
+      @decode="onDecode"
+      :torch="torch"
+      @init="onInit"
+    ></qrcode-stream>
+
+    <button @click="torch = !torch">Torch On/Off</button>
+  </div>
+</template>
+
+<script>
+import QrcodeStream from "../src/components/QrcodeStream";
+
+export default {
+
+  components: { QrcodeStream },
+
+  data() {
+    return {
+      decodedContent: "",
+      errorMessage: "",
+      torch: false
+    };
+  },
+
+  methods: {
+    onDecode(content) {
+      this.decodedContent = content;
+    },
+
+    onInit(promise) {
+      promise
+        .then(({ capabilities }) => {
+          console.log("Successfully initilized! Ready for scanning now!");
+          console.log(capabilities)
+        })
+        .catch(error => {
+          if (error.name === "NotAllowedError") {
+            this.errorMessage = "Hey! I need access to your camera";
+          } else if (error.name === "NotFoundError") {
+            this.errorMessage = "Do you even have a camera on your device?";
+          } else if (error.name === "NotSupportedError") {
+            this.errorMessage =
+              "Seems like this page is served in non-secure context (HTTPS, localhost or file://)";
+          } else if (error.name === "NotReadableError") {
+            this.errorMessage =
+              "Couldn't access your camera. Is it already in use?";
+          } else if (error.name === "OverconstrainedError") {
+            this.errorMessage =
+              "Constraints don't match any installed camera. Did you asked for the front camera although there is none?";
+          } else {
+            this.errorMessage = "UNKNOWN ERROR: " + error.message;
+          }
+        });
+    }
+  }
+};
+</script>