Skip to content

Commit 4ce2bbc

Browse files
gruhngruhn
committed
build: install and apply prettier 
1 parent 6b165bc commit 4ce2bbc

File tree

15 files changed

+771
-346
lines changed

15 files changed

+771
-346
lines changed

‎README.md‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@
3030

3131
<br>
3232

33+
<a href="https://github.com/semantic-release/semantic-release">
34+
<img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="uses semantic release">
35+
</a>
36+
37+
<a href="https://github.com/prettier/prettier">
38+
<img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier">
39+
</a>
40+
41+
<br>
42+
3343
<a href="https://bundlephobia.com/result?p=vue-qrcode-reader">
3444
<img src="https://badgen.net/bundlephobia/minzip/vue-qrcode-reader" alt="size minified + gzipped">
3545
</a>
@@ -40,10 +50,6 @@
4050

4151
<br>
4252

43-
<a href="https://github.com/semantic-release/semantic-release">
44-
<img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="uses semantic release">
45-
</a>
46-
4753
<br>
4854
<br>
4955
<a href="https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html">documentation</a> |
@@ -52,22 +58,24 @@
5258

5359
A set of Vue.js components, allowing you to detect and decode QR codes, without leaving the browser.
5460

55-
* :movie_camera: `QrcodeStream` accesses the device camera and continuously scans incoming frames.
56-
* :put_litter_in_its_place: `QrcodeDropZone` renders to an empty region where you can drag-and-drop images to be decoded.
57-
* :open_file_folder: `QrcodeCapture` is a classic file upload field, instantly scanning all files you select.
61+
- :movie_camera: `QrcodeStream` accesses the device camera and continuously scans incoming frames.
62+
- :put_litter_in_its_place: `QrcodeDropZone` renders to an empty region where you can drag-and-drop images to be decoded.
63+
- :open_file_folder: `QrcodeCapture` is a classic file upload field, instantly scanning all files you select.
5864

5965
All components are responsive. Beyond that, close to zero styling. Make them fit your layout. Usage is simple and straight forward:
6066

6167
```html
6268
<qrcode-stream @decode="onDecode"></qrcode-stream>
6369
```
70+
6471
```js
6572
methods: {
6673
onDecode (decodedString) {
6774
// ...
6875
}
6976
}
7077
```
78+
7179
### Screenshots
7280

7381
<p align="center">
@@ -83,40 +91,41 @@ methods: {
8391
This component fundamentally depends on the [Stream API](https://caniuse.com/#feat=stream).
8492

8593
| ![Internet Explorer](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/ie_32x32.png) | ![Edge](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/edge_32x32.png) | ![Firefox](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/firefox_32x32.png) | ![Chrome](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/chrome_32x32.png) | ![Safari](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/safari_32x32.png) |
86-
|:--:|:---:|:---:|:---:|:---:|
87-
| No | Yes | Yes | Yes | 11+ |
94+
| :---------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
95+
| No | Yes | Yes | Yes | 11+ |
8896

89-
* Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see _Troubleshooting_ for help)
90-
* Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48))
91-
* on iOS it **only** works with Safari
92-
* *Chrome for iOS*, *Firefox for iOS* and so on are not supported (see [#29](../../issues/29))
93-
* even web apps added to home screen are not supported (see [#76](../../issues/76))
97+
- Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see _Troubleshooting_ for help)
98+
- Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48))
99+
- on iOS it **only** works with Safari
100+
- _Chrome for iOS_, _Firefox for iOS_ and so on are not supported (see [#29](../../issues/29))
101+
- even web apps added to home screen are not supported (see [#76](../../issues/76))
94102

95103
#### `QrcodeDropZone` and `QrcodeCapture`
96104

97105
The newest API these components depend on is the [FileReader API](https://caniuse.com/#feat=filereader).
98106

99107
| ![Internet Explorer](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/ie_32x32.png) | ![Edge](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/edge_32x32.png) | ![Firefox](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/firefox_32x32.png) | ![Chrome](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/chrome_32x32.png) | ![Safari](https://raw.githubusercontent.com/gruhn/vue-qrcode-reader/master/.github/safari_32x32.png) |
100-
|:--:|:---:|:---:|:---:|:---:|
101-
| 10+ | Yes | Yes | Yes | Yes |
108+
| :---------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
109+
| 10+ | Yes | Yes | Yes | Yes |
102110

103-
* Drag-and-drop is not supported on mobile
111+
- Drag-and-drop is not supported on mobile
104112

105113
# Troubleshooting
106114

107-
* I don't see the camera when using `QrcodeStream`.
108-
* Check if it works on the demo page. Especially the [Decode All](https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html) demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
109-
* Demo works but not locally: Listen for the `init` event to investigate errors.
110-
* Demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
111-
* I'm running a dev server on localhost. How to test on my mobile device without HTTPS?
112-
* If your setup is Desktop Chrome + Android Chrome, use [Remote Debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/) which allows your Android device to [access your local server as localhost](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server).
113-
* Otherwise use a reverse proxy like [ngrok](https://ngrok.com/) or [serveo](https://serveo.net/) to temporarily make your local server publicly available with HTTPS.
115+
- I don't see the camera when using `QrcodeStream`.
116+
- Check if it works on the demo page. Especially the [Decode All](https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html) demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
117+
- Demo works but not locally: Listen for the `init` event to investigate errors.
118+
- Demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
119+
- I'm running a dev server on localhost. How to test on my mobile device without HTTPS?
120+
- If your setup is Desktop Chrome + Android Chrome, use [Remote Debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/) which allows your Android device to [access your local server as localhost](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server).
121+
- Otherwise use a reverse proxy like [ngrok](https://ngrok.com/) or [serveo](https://serveo.net/) to temporarily make your local server publicly available with HTTPS.
114122

115123
# Installation
116124

117125
```bash
118126
npm install vue-qrcode-reader
119127
```
128+
120129
or with Yarn:
121130

122131
```bash
@@ -145,10 +154,10 @@ Vue.component('my-component', {
145154
Or alternatively register all of them globally right away:
146155
147156
```javascript
148-
import Vue from 'vue'
149-
import VueQrcodeReader from 'vue-qrcode-reader'
157+
import Vue from "vue";
158+
import VueQrcodeReader from "vue-qrcode-reader";
150159

151-
Vue.use(VueQrcodeReader)
160+
Vue.use(VueQrcodeReader);
152161
```
153162
154163
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
@@ -158,15 +167,16 @@ Vue.use(VueQrcodeReader)
158167
> All the examples on the demo page utilize [single-file components](https://vuejs.org/v2/guide/single-file-components.html). To use them in your project you need a build tool like webpack. Check out [this fiddle](https://jsfiddle.net/2bfohnax/) for a simpler example you can use right in the browser.
159168
160169
Besides Vue you need to include the following CSS and JS file:
161-
* `<link href="`[vue-qrcode-reader.css](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.css)`" rel="stylesheet">`
162-
* `<script src="`[vue-qrcode-reader.browser.js](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.browser.js)`"></script>`
170+
171+
- `<link href="`[vue-qrcode-reader.css](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.css)`" rel="stylesheet">`
172+
- `<script src="`[vue-qrcode-reader.browser.js](https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.browser.js)`"></script>`
163173
164174
The global variable `window.VueQrcodeReader` should now be available.
165175
166176
All components should be automatically registered globally. If not, you can do it like this:
167177
168178
```javascript
169-
Vue.use(VueQrcodeReader)
179+
Vue.use(VueQrcodeReader);
170180
```
171181
172182
You can also register specific components locally, in one of your components:

‎package.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,17 @@
3737
"url": "https://github.com/gruhn/vue-qrcode-reader/issues"
3838
},
3939
"homepage": "https://github.com/gruhn/vue-qrcode-reader#readme",
40+
"husky": {
41+
"hooks": {
42+
"pre-commit": "lint-staged"
43+
}
44+
},
45+
"lint-staged": {
46+
"*.{js,json,css,md,vue}": [
47+
"prettier --write",
48+
"git add"
49+
]
50+
},
4051
"devDependencies": {
4152
"babel-core": "^6.0.0",
4253
"babel-eslint": "^7.1.1",
@@ -57,6 +68,7 @@
5768
"eslint-plugin-promise": "^3.4.0",
5869
"eslint-plugin-standard": "^2.0.1",
5970
"extract-text-webpack-plugin": "^2.0.0-beta.4",
71+
"husky": "^1.3.1",
6072
"inject-loader": "^3.0.0",
6173
"karma": "^1.7.1",
6274
"karma-coverage": "^1.1.1",
@@ -67,11 +79,12 @@
6779
"karma-sourcemap-loader": "^0.3.7",
6880
"karma-spec-reporter": "0.0.31",
6981
"karma-webpack": "^2.0.2",
82+
"lint-staged": "^8.1.4",
7083
"mocha": "^3.2.0",
7184
"nightwatch": "^0.9.12",
7285
"node-sass": "^4.0.0",
7386
"phantomjs-prebuilt": "^2.1.14",
74-
"sass-loader": "^4.1.0",
87+
"prettier": "1.16.4",
7588
"selenium-server": "^3.0.1",
7689
"semantic-release": "^15.9.9",
7790
"sinon": "^2.1.0",

‎src/components/QrcodeCapture.vue‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,34 @@
55
name="image"
66
accept="image/*"
77
capture="environment"
8-
multiple>
8+
multiple
9+
/>
910
</template>
1011

1112
<script>
12-
import { scan } from '../misc/scanner.js'
13-
import { imageDataFromFile } from '../misc/image-data.js'
14-
import CommonAPI from '../mixins/CommonAPI.vue'
13+
import { scan } from "../misc/scanner.js";
14+
import { imageDataFromFile } from "../misc/image-data.js";
15+
import CommonAPI from "../mixins/CommonAPI.vue";
1516
1617
export default {
17-
18-
mixins: [ CommonAPI ],
18+
mixins: [CommonAPI],
1919
2020
methods: {
21-
onChangeInput (event) {
22-
const files = [...event.target.files]
23-
const resultPromises = files.map(this.processFile)
21+
onChangeInput(event) {
22+
const files = [...event.target.files];
23+
const resultPromises = files.map(this.processFile);
2424
25-
resultPromises.forEach(this.onDetect)
25+
resultPromises.forEach(this.onDetect);
2626
27-
console.log(Promise.all(resultPromises))
27+
console.log(Promise.all(resultPromises));
2828
},
2929
30-
async processFile (file) {
31-
const imageData = await imageDataFromFile(file)
32-
const scanResult = await scan(imageData)
33-
34-
return { source: 'file', ...scanResult }
35-
},
36-
},
30+
async processFile(file) {
31+
const imageData = await imageDataFromFile(file);
32+
const scanResult = await scan(imageData);
3733
38-
}
34+
return { source: "file", ...scanResult };
35+
}
36+
}
37+
};
3938
</script>

‎src/components/QrcodeDropZone.vue‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,60 @@
33
@drop.prevent.stop="onDrop"
44
@dragenter.prevent.stop="onDragOver(true)"
55
@dragleave.prevent.stop="onDragOver(false)"
6-
@dragover.prevent.stop>
6+
@dragover.prevent.stop
7+
>
78
<slot></slot>
89
</div>
910
</template>
1011

1112
<script>
12-
import { scan } from '../misc/scanner.js'
13-
import { imageDataFromFile, imageDataFromUrl } from '../misc/image-data.js'
14-
import CommonAPI from '../mixins/CommonAPI.vue'
13+
import { scan } from "../misc/scanner.js";
14+
import { imageDataFromFile, imageDataFromUrl } from "../misc/image-data.js";
15+
import CommonAPI from "../mixins/CommonAPI.vue";
1516
1617
export default {
17-
18-
mixins: [ CommonAPI ],
18+
mixins: [CommonAPI],
1919
2020
methods: {
21-
onDragOver (isDraggingOver) {
22-
this.$emit('dragover', isDraggingOver)
21+
onDragOver(isDraggingOver) {
22+
this.$emit("dragover", isDraggingOver);
2323
},
2424
25-
onDrop ({ dataTransfer }) {
26-
this.onDragOver(false)
25+
onDrop({ dataTransfer }) {
26+
this.onDragOver(false);
2727
28-
const droppedFiles = [...dataTransfer.files]
29-
const droppedUrl = dataTransfer.getData('text')
28+
const droppedFiles = [...dataTransfer.files];
29+
const droppedUrl = dataTransfer.getData("text");
3030
3131
droppedFiles.forEach(file => {
32-
this.onDetect(this.processFile(file))
33-
})
32+
this.onDetect(this.processFile(file));
33+
});
3434
35-
if (droppedUrl !== '') {
36-
this.onDetect(this.processUrl(droppedUrl))
35+
if (droppedUrl !== "") {
36+
this.onDetect(this.processUrl(droppedUrl));
3737
}
3838
},
3939
40-
async processFile (file) {
41-
const imageData = await imageDataFromFile(file)
42-
const scanResult = await scan(imageData)
40+
async processFile(file) {
41+
const imageData = await imageDataFromFile(file);
42+
const scanResult = await scan(imageData);
4343
44-
return { source: 'file', ...scanResult }
44+
return { source: "file", ...scanResult };
4545
},
4646
47-
async processUrl (url) {
48-
const imageData = await imageDataFromUrl(url)
49-
const scanResult = await scan(imageData)
47+
async processUrl(url) {
48+
const imageData = await imageDataFromUrl(url);
49+
const scanResult = await scan(imageData);
5050
51-
return { source: 'url', ...scanResult }
51+
return { source: "url", ...scanResult };
5252
},
5353
54-
},
54+
async processUrl(url) {
55+
const imageData = await imageDataFromUrl(url);
56+
const scanResult = await scan(imageData);
5557
56-
}
58+
return scanResult;
59+
}
60+
}
61+
};
5762
</script>

0 commit comments

Comments
 (0)