chore(format): keep code formatted

gruhn · Dec 25, 2023 · 000776c · 000776c
1 parent 33313d5
commit 000776c
Show file tree

Hide file tree

Showing 23 changed files with 464 additions and 276 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
@@ -17,12 +16,14 @@ Please provide a link to a minimal reproduction of the bug. For example on jsFid
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,3 +1,4 @@
 {
-  "*.{js,jsx,vue}": ["pnpm lint --fix", "git add"]
+  "**/*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": ["pnpm lint"],
+  "**/*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts,json,md}": ["pnpm format"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-Your contributions are welcome. 
+Your contributions are welcome.
 Don't hesitate to open an issue if you have trouble.
 
 ### Setup Dev Environment
@@ -12,7 +12,7 @@ Clone the repository and run
 pnpm install
 ```
 
-We use a locally served version of the [demo page](https://vue-qrcode-reader.netlify.app/) during development. 
+We use a locally served version of the [demo page](https://vue-qrcode-reader.netlify.app/) during development.
 To get that started run
 
 ```
@@ -21,5 +21,5 @@ npm run docs:dev
 
 ### Commit Messages
 
-The version number of releases is automatically determined form commit messages. 
+The version number of releases is automatically determined form commit messages.
 This only works if we follow [Angular Commit Message Conventions](https://github.com/semantic-release/semantic-release#commit-message-format).
diff --git a/README.md b/README.md
@@ -44,7 +44,6 @@
     <img src="https://img.shields.io/npm/v/vue-qrcode-reader.svg" alt="npm current version">
   </a>
 
-
   <br>
 
   <a href="https://github.com/vuejs/awesome-vue">
@@ -63,9 +62,9 @@ A set of Vue.js components for detecting QR codes and [various other barcode for
 - :put_litter_in_its_place: `QrcodeDropZone` is an empty region where you can drag-and-drop images to be decoded.
 - :open_file_folder: `QrcodeCapture` is a classic file upload field, instantly scanning all files you select.
 
-All components are responsive. 
-Beyond that, close to zero styling. 
-Make them fit your layout. 
+All components are responsive.
+Beyond that, close to zero styling.
+Make them fit your layout.
 Usage is simple and straight forward:
 
 ```html
@@ -117,10 +116,10 @@ const MyComponent = {
 or register all of them globally right away
 
 ```javascript
-import Vue from "vue";
-import VueQrcodeReader from "vue-qrcode-reader";
+import Vue from 'vue'
+import VueQrcodeReader from 'vue-qrcode-reader'
 
-Vue.use(VueQrcodeReader);
+Vue.use(VueQrcodeReader)
 ```
 
 ## Without NPM
@@ -149,17 +148,17 @@ Use kebab-case to reference them in your templates:
 
 #### I don't see the camera when using `QrcodeStream`.
 
-- Check if it works on the demo page. Especially the [Handle Errors](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html) demo, 
-  since it renders error messages. 
+- Check if it works on the demo page. Especially the [Handle Errors](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html) demo,
+  since it renders error messages.
   - The demo works but it doesn't work in my project: Listen for the `error` event to investigate errors.
-  - The demo doesn't work: Carefully review the Browser Support section above. 
+  - The demo doesn't work: Carefully review the Browser Support section above.
     Maybe your device is just not supported.
 
 #### I'm running a dev server on localhost. How to test on my mobile device without HTTPS?
 
 - 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).
 - 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.
-- There are also loads of serverless/static hosting services that have HTTPS enabled by default and where you can deploy your web app for free (e.g. *GitHub Pages*, *GitLab Pages*, *Google Firebase*, *Netlify*, *Heroku*, *ZEIT Now*, ...)
+- There are also loads of serverless/static hosting services that have HTTPS enabled by default and where you can deploy your web app for free (e.g. _GitHub Pages_, _GitLab Pages_, _Google Firebase_, _Netlify_, _Heroku_, _ZEIT Now_, ...)
 
 #### Some of my QR codes are not being detected.
 
@@ -168,28 +167,28 @@ Use kebab-case to reference them in your templates:
 
 #### How to make it work with Vue 2?
 
-Support is dropped but you can downgrade to vue-qrcode-reader v3.* or lower.
+Support is dropped but you can downgrade to vue-qrcode-reader v3.\* or lower.
 
 #### I get a "Failed to fetch" error at runtime for some Wasm file.
 
-That Wasm file implements the QR code detector. 
+That Wasm file implements the QR code detector.
 Unfortunately, it's not very convenient to bundle this file with the package.
 So by default we fetch it at runtime from a CDN.
-That's an issue for offline applications or applications that run in a network with strict CSP policy. 
+That's an issue for offline applications or applications that run in a network with strict CSP policy.
 For a workaround see: https://github.com/gruhn/vue-qrcode-reader/issues/354
 
-### `torch` is not supported on my device, although it has a flashlight.
+#### `torch` is not supported on my device, although it has a flashlight.
 
 Support for `torch` is inconsistent across devices, cameras and browsers and operating systems.
 On some devices the rear camera supports `torch` but the front camera doesn't,
 even if the front camera actually has a flashlight.
 
-Furthermore, `torch` is not supported on iOS at all (last checked iOS 17.1). 
+Furthermore, `torch` is not supported on iOS at all (last checked iOS 17.1).
 
 Visit [this page](https://vue-qrcode-reader.netlify.app/select-camera-demo.html) with your device.
-The list of links represents all cameras installed on the device. 
-If you click, the camera should be loaded. 
-Below the camera view the JSON object of "capabilities" is printed. 
+The list of links represents all cameras installed on the device.
+If you click, the camera should be loaded.
+Below the camera view the JSON object of "capabilities" is printed.
 If it doesn't contain the key/value pair `"torch": true` then flashlight is not supported for that camera.
 
 This JSON object provided as payload of the [`camera-on` event](https://vue-qrcode-reader.netlify.app/api/QrcodeStream.html#camera-on).
diff --git a/docs/.vitepress/components/demos/CustomTracking.vue b/docs/.vitepress/components/demos/CustomTracking.vue
@@ -3,13 +3,20 @@
     <p>
       Track function:
       <select v-model="selected">
-        <option v-for="option in options" :key="option.text" :value="option">
+        <option
+          v-for="option in options"
+          :key="option.text"
+          :value="option"
+        >
           {{ option.text }}
         </option>
       </select>
     </p>
 
-    <qrcode-stream :track="selected.value" @error="logErrors" />
+    <qrcode-stream
+      :track="selected.value"
+      @error="logErrors"
+    />
   </div>
 </template>
 

diff --git a/docs/.vitepress/components/demos/CustomTrackingWithFormats.vue b/docs/.vitepress/components/demos/CustomTrackingWithFormats.vue
@@ -2,22 +2,37 @@
   <div>
     <p>
       Barcodeformat:
-      <select v-model="selectedBarcodeTypes" multiple>
-        <option v-for="(option, index) in barcodeTypes" :key="index" :value="option">
+      <select
+        v-model="selectedBarcodeTypes"
+        multiple
+      >
+        <option
+          v-for="(option, index) in barcodeTypes"
+          :key="index"
+          :value="option"
+        >
           {{ option }}
         </option>
       </select>
     </p>
     <p>
       Track function:
       <select v-model="selected">
-        <option v-for="option in options" :key="option.text" :value="option">
+        <option
+          v-for="option in options"
+          :key="option.text"
+          :value="option"
+        >
           {{ option.text }}
         </option>
       </select>
     </p>
 
-    <qrcode-stream :formats="selectedBarcodeTypes" :track="selected.value" @error="logErrors" />
+    <qrcode-stream
+      :formats="selectedBarcodeTypes"
+      :track="selected.value"
+      @error="logErrors"
+    />
   </div>
 </template>
 
@@ -37,11 +52,33 @@ export default {
 
     const selected = options[1]
 
-    const barcodeTypes = ["aztec", "code_128", "code_39", "code_93", "codabar", "databar", "databar_expanded", "data_matrix", "dx_film_edge", "ean_13", "ean_8", "itf", "maxi_code", "micro_qr_code", "pdf417", "qr_code", "rm_qr_code", "upc_a", "upc_e", "linear_codes", "matrix_codes"]
+    const barcodeTypes = [
+      'aztec',
+      'code_128',
+      'code_39',
+      'code_93',
+      'codabar',
+      'databar',
+      'databar_expanded',
+      'data_matrix',
+      'dx_film_edge',
+      'ean_13',
+      'ean_8',
+      'itf',
+      'maxi_code',
+      'micro_qr_code',
+      'pdf417',
+      'qr_code',
+      'rm_qr_code',
+      'upc_a',
+      'upc_e',
+      'linear_codes',
+      'matrix_codes'
+    ]
 
-    const selectedBarcodeTypes = ["qr_code"]
+    const selectedBarcodeTypes = ['qr_code']
 
-    return { selected, options, selectedBarcodeTypes, barcodeTypes}
+    return { selected, options, selectedBarcodeTypes, barcodeTypes }
   },
 
   methods: {

diff --git a/docs/.vitepress/components/demos/DeviceId.vue b/docs/.vitepress/components/demos/DeviceId.vue
@@ -2,16 +2,29 @@
   <div>
     <p>
       <select v-model="selected">
-        <option v-for="device in devices" :key="device.label" :value="device">
+        <option
+          v-for="device in devices"
+          :key="device.label"
+          :value="device"
+        >
           {{ device.label }}
         </option>
       </select>
     </p>
 
-		<div>
-	    <qrcode-stream :constraints="{ deviceId: selected.deviceId }" @error="console.error" v-if="selected !== null" />
-			<p v-else class="error">No cameras on this device</p>
-		</div>
+    <div>
+      <qrcode-stream
+        :constraints="{ deviceId: selected.deviceId }"
+        @error="console.error"
+        v-if="selected !== null"
+      />
+      <p
+        v-else
+        class="error"
+      >
+        No cameras on this device
+      </p>
+    </div>
   </div>
 </template>
 
@@ -23,12 +36,13 @@ const selected = ref(null)
 const devices = ref([])
 
 onMounted(async () => {
-  devices.value = (await navigator.mediaDevices.enumerateDevices())
-    .filter(({ kind }) => kind === 'videoinput')
+  devices.value = (await navigator.mediaDevices.enumerateDevices()).filter(
+    ({ kind }) => kind === 'videoinput'
+  )
 
-	if (devices.value.length > 0) {
-		selected.value = devices.value[0]	
-	}
+  if (devices.value.length > 0) {
+    selected.value = devices.value[0]
+  }
 })
 </script>
 

diff --git a/docs/.vitepress/components/demos/DragDrop.vue b/docs/.vitepress/components/demos/DragDrop.vue
@@ -4,12 +4,24 @@
       Last result: <b>{{ result }}</b>
     </p>
 
-    <p v-if="error !== null" class="drop-error">
+    <p
+      v-if="error !== null"
+      class="drop-error"
+    >
       {{ error }}
     </p>
 
-    <qrcode-drop-zone @detect="onDetect" @dragover="onDragOver" @error="logErrors">
-      <div class="drop-area" :class="{ dragover: dragover }">DROP SOME IMAGES HERE</div>
+    <qrcode-drop-zone
+      @detect="onDetect"
+      @dragover="onDragOver"
+      @error="logErrors"
+    >
+      <div
+        class="drop-area"
+        :class="{ dragover: dragover }"
+      >
+        DROP SOME IMAGES HERE
+      </div>
     </qrcode-drop-zone>
   </div>
 </template>
@@ -32,9 +44,7 @@ export default {
     onDetect(detectedCodes) {
       console.log(detectedCodes)
 
-      this.result = JSON.stringify(
-        detectedCodes.map(code => code.rawValue)
-      )
+      this.result = JSON.stringify(detectedCodes.map((code) => code.rawValue))
     },
 
     logErrors(error) {

diff --git a/docs/.vitepress/components/demos/Fullscreen.vue b/docs/.vitepress/components/demos/Fullscreen.vue
@@ -1,8 +1,18 @@
 <template>
-  <div :class="{ fullscreen: fullscreen }" ref="wrapper" @fullscreenchange="onFullscreenChange">
+  <div
+    :class="{ fullscreen: fullscreen }"
+    ref="wrapper"
+    @fullscreenchange="onFullscreenChange"
+  >
     <qrcode-stream @error="logErrors">
-      <button @click="fullscreen = !fullscreen" class="fullscreen-button">
-        <img :src="withBase(fullscreenIcon)" alt="toggle fullscreen" />
+      <button
+        @click="fullscreen = !fullscreen"
+        class="fullscreen-button"
+      >
+        <img
+          :src="withBase(fullscreenIcon)"
+          alt="toggle fullscreen"
+        />
       </button>
     </qrcode-stream>
   </div>