feat: add cjs and esm build

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
 node_modules
+dist
+pnpm-debug.log*

README.md

@@ -55,28 +55,32 @@ The Vue Barcode Reader works out of the box by just including it.
 
 Once a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.
 
-```js
-import { StreamBarcodeReader } from "vue-barcode-reader";
-```
+```html
+<script setup>
+import { StreamBarcodeReader } from 'vue-barcode-reader'
+</script>
 
-In your template you can use this syntax:
+<StreamBarcodeReader @decode="onDecode" @loaded="onLoaded" />
 
-```html
-<StreamBarcodeReader @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
+<style lang="scss" scoped>
+@import 'vue-barcode-reader/style.css';
+</style>
 ```
 
 ### Scanning from Image
 
 The component renders to a simple file picker input element. Clicking opens a file dialog. On supporting mobile devices the camera is started to take a picture. The selected images are directly scanned and positive results are indicated by the `decode` event.
 
-```js
-import { ImageBarcodeReader } from "vue-barcode-reader";
-```
+```html
+<script setup>
+import { ImageBarcodeReader } from 'vue-barcode-reader'
+</script>
 
-In your template you can use this syntax:
+<ImageBarcodeReader @decode="onDecode" @error="onError" />
 
-```html
-<ImageBarcodeReader @decode="onDecode" @error="onError"></ImageBarcodeReader>
+<style lang="scss" scoped>
+@import 'vue-barcode-reader/style.css';
+</style>
 ```
 
 ```html

dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@zxing/library"),r=require("vue"),d=(e,t)=>{const a=e.__vccOpts||e;for(const[o,n]of t)a[o]=n;return a},m={name:"image-barcode-reader",data(){return{codeReader:new s.BrowserMultiFormatReader}},methods:{onChangeInput(e){const t=e.target.files||e.dataTransfer.files;if(!t.length)return;const a=new FileReader;a.onload=this.processFile,a.readAsDataURL(t[0])},processFile(e){this.$el.innerHTML+=`<img id="image" src="${e.target.result}"/>`,this.codeReader.decodeFromImage("image").then(t=>{this.$emit("decode",t.text),this.$emit("result",t)}).catch(t=>this.$emit("error",t))}}};function u(e,t,a,o,n,i){return r.openBlock(),r.createElementBlock("input",{onChange:t[0]||(t[0]=(...l)=>i.onChangeInput&&i.onChangeInput(...l)),type:"file",name:"image",accept:"image/*",capture:"environment"},null,32)}const p=d(m,[["render",u]]);const h={name:"stream-barcode-reader",data(){return{isLoading:!0,codeReader:new s.BrowserMultiFormatReader,isMediaStreamAPISupported:navigator&&navigator.mediaDevices&&"enumerateDevices"in navigator.mediaDevices}},mounted(){if(!this.isMediaStreamAPISupported)throw new s.Exception("Media Stream API is not supported");this.start(),this.$refs.scanner.oncanplay=e=>{this.isLoading=!1,this.$emit("loaded")}},beforeUnmount(){this.codeReader.reset()},methods:{start(){this.codeReader.decodeFromVideoDevice(void 0,this.$refs.scanner,(e,t)=>{e&&(this.$emit("decode",e.text),this.$emit("result",e))})}}},c=e=>(r.pushScopeId("data-v-ec9cd3e6"),e=e(),r.popScopeId(),e),_={class:"scanner-container"},g={poster:"data:image/gif,AAAA",ref:"scanner"},v=c(()=>r.createElementVNode("div",{class:"overlay-element"},null,-1)),f=c(()=>r.createElementVNode("div",{class:"laser"},null,-1));function $(e,t,a,o,n,i){return r.openBlock(),r.createElementBlock("div",_,[r.withDirectives(r.createElementVNode("div",null,[r.createElementVNode("video",g,null,512),v,f],512),[[r.vShow,!n.isLoading]])])}const R=d(h,[["render",$],["__scopeId","data-v-ec9cd3e6"]]);exports.ImageBarcodeReader=p;exports.StreamBarcodeReader=R;

dist/index.js

@@ -0,0 +1,85 @@
+import { BrowserMultiFormatReader as s, Exception as h } from "@zxing/library";
+import { openBlock as d, createElementBlock as c, withDirectives as _, createElementVNode as n, vShow as u, pushScopeId as f, popScopeId as g } from "vue";
+const m = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, a] of t)
+    r[o] = a;
+  return r;
+}, v = {
+  name: "image-barcode-reader",
+  data() {
+    return {
+      codeReader: new s()
+    };
+  },
+  methods: {
+    onChangeInput(e) {
+      const t = e.target.files || e.dataTransfer.files;
+      if (!t.length)
+        return;
+      const r = new FileReader();
+      r.onload = this.processFile, r.readAsDataURL(t[0]);
+    },
+    processFile(e) {
+      this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`, this.codeReader.decodeFromImage("image").then((t) => {
+        this.$emit("decode", t.text), this.$emit("result", t);
+      }).catch((t) => this.$emit("error", t));
+    }
+  }
+};
+function $(e, t, r, o, a, i) {
+  return d(), c("input", {
+    onChange: t[0] || (t[0] = (...l) => i.onChangeInput && i.onChangeInput(...l)),
+    type: "file",
+    name: "image",
+    accept: "image/*",
+    capture: "environment"
+  }, null, 32);
+}
+const D = /* @__PURE__ */ m(v, [["render", $]]);
+const I = {
+  name: "stream-barcode-reader",
+  data() {
+    return {
+      isLoading: !0,
+      codeReader: new s(),
+      isMediaStreamAPISupported: navigator && navigator.mediaDevices && "enumerateDevices" in navigator.mediaDevices
+    };
+  },
+  mounted() {
+    if (!this.isMediaStreamAPISupported)
+      throw new h("Media Stream API is not supported");
+    this.start(), this.$refs.scanner.oncanplay = (e) => {
+      this.isLoading = !1, this.$emit("loaded");
+    };
+  },
+  beforeUnmount() {
+    this.codeReader.reset();
+  },
+  methods: {
+    start() {
+      this.codeReader.decodeFromVideoDevice(void 0, this.$refs.scanner, (e, t) => {
+        e && (this.$emit("decode", e.text), this.$emit("result", e));
+      });
+    }
+  }
+}, p = (e) => (f("data-v-ec9cd3e6"), e = e(), g(), e), R = { class: "scanner-container" }, S = {
+  poster: "data:image/gif,AAAA",
+  ref: "scanner"
+}, w = /* @__PURE__ */ p(() => /* @__PURE__ */ n("div", { class: "overlay-element" }, null, -1)), x = /* @__PURE__ */ p(() => /* @__PURE__ */ n("div", { class: "laser" }, null, -1));
+function A(e, t, r, o, a, i) {
+  return d(), c("div", R, [
+    _(n("div", null, [
+      n("video", S, null, 512),
+      w,
+      x
+    ], 512), [
+      [u, !a.isLoading]
+    ])
+  ]);
+}
+const F = /* @__PURE__ */ m(I, [["render", A], ["__scopeId", "data-v-ec9cd3e6"]]);
+export {
+  D as ImageBarcodeReader,
+  F as StreamBarcodeReader
+};

package.json

@@ -2,8 +2,19 @@
   "name": "vue-barcode-reader",
   "version": "1.0.3",
   "description": "Vue barcodes and QR codes scanner",
-  "main": "src/index.js",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
   "scripts": {
+    "build": "vite build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -23,6 +34,11 @@
   },
   "homepage": "https://github.com/olefirenko/vue-barcode-reader#readme",
   "dependencies": {
-    "@zxing/library": "^0.19.1"
+    "@zxing/library": "^0.19.1",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "vite": "^4.1.4"
   }
 }