fix: "Simple" workflow

(1) Remove global plugin installation idiom from `src/index.ts` since `Vue.use` was removed in Vue 3 and causes an error when actually executed. See: https://v3-migration.vuejs.org/breaking-changes/global-api.html#a-note-for-plugin-authors (2) Add an additional build artifact `vue-qrcode-reader.umd.js` that is just a copy of `vue-qrcoder-reader.umd.cjs`. Doing a `script`- tag import of `cjs` files, doesn't work if the server doesn't also set the `Content-Type` correctly (as pointed out by @Sec-ant), which is the case with some Unpkg for example. So it seems weird that Vite uses that as the default file type for UMD artifacts. The purpose of UMD is to be both compatible with CommonJS and simple `script` imports. Let's keep both files for backwards- compatibility for now. (3) Instead of theh CodePen implementation of the "Simple" demo just use an (even simpler) HTML file stored in the public assets of the Vitepress page. See: #369 #384
gruhn · Oct 5, 2023 · 892bdc0 · 892bdc0
1 parent 732612c
commit 892bdc0
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 31 deletions.
diff --git a/docs/demos/Simple.md b/docs/demos/Simple.md
@@ -2,22 +2,10 @@
 
 All other demos on this page utilize [single-file components](https://vuejs.org/v2/guide/single-file-components.html).
 To use them in your project you need a bundler like vite.
+For an example that works without a build step and right in the browser:
 
-For simpler example that works without a build step and right in the browser, checkout this:
+<a target="_blank" href="/simple-demo.html">SEE THIS DEMO</a>
 
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="gruhn" data-slug-hash="rNxQPay" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="rNxQPay">
-  <span>See the Pen <a href="https://codepen.io/gruhn/pen/rNxQPay">
-  rNxQPay</a> by Niklas (<a href="https://codepen.io/gruhn">@gruhn</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
+### Source
 
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-onMounted(() => {
-  const script = document.createElement("script");
-  script.src = "https://static.codepen.io/assets/embed/ei.js";
-  script.async = true;
-  document.body.appendChild(script);
-})
-</script>
+<<< @/public/simple-demo.html
diff --git a/docs/public/simple-demo.html b/docs/public/simple-demo.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Simple Demo</title>
+
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script src="https://unpkg.com/vue-qrcode-reader@5/dist/vue-qrcode-reader.umd.js"></script>
+</head>
+<body>
+	<div id="app">
+    <h1>Simple Demo</h1>
+
+    <p style="color: red">{{ error }}</p>
+
+    <p>Last result: <b>{{ result }}</b></p>
+
+    <div style="border: 2px solid black">
+  		<qrcode-stream :track="paintBoundingBox" @detect="onDetect" @error="onError"></qrcode-stream>
+    </div>
+	</div>
+</body>
+<script>
+  const { createApp, ref } = Vue
+
+  const result = ref('')
+  const error = ref('')
+
+  function paintBoundingBox(detectedCodes, ctx) {
+    for (const detectedCode of detectedCodes) {
+      const {
+        boundingBox: { x, y, width, height }
+      } = detectedCode
+
+      ctx.lineWidth = 2
+      ctx.strokeStyle = '#007bff'
+      ctx.strokeRect(x, y, width, height)
+    }
+  }
+
+  function onError(err) {
+    error.value = `[${err.name}]: `
+
+    if (err.name === 'NotAllowedError') {
+      error.value += 'you need to grant camera access permission'
+    } else if (err.name === 'NotFoundError') {
+      error.value += 'no camera on this device'
+    } else if (err.name === 'NotSupportedError') {
+      error.value += 'secure context required (HTTPS, localhost)'
+    } else if (err.name === 'NotReadableError') {
+      error.value += 'is the camera already in use?'
+    } else if (err.name === 'OverconstrainedError') {
+      error.value += 'installed cameras are not suitable'
+    } else if (err.name === 'StreamApiNotSupportedError') {
+      error.value += 'Stream API is not supported in this browser'
+    } else if (err.name === 'InsecureContextError') {
+      error.value += 'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
+    } else {
+      error.value += err.message
+    }
+  }
+
+  function onDetect(detectedCodes) {
+    result.value = JSON.stringify(
+      detectedCodes.map(code => code.rawValue)
+    )
+  }
+
+  const app = createApp({
+    setup() {
+      return { result, error, onDetect, onError, paintBoundingBox }
+    }
+  })
+  app.use(VueQrcodeReader)
+  app.mount('#app')
+</script>
+</html>
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "packageManager": "pnpm@8.3.1",
   "type": "module",
   "scripts": {
-    "build": "pnpm rimraf dist && vite build",
+    "build": "pnpm rimraf dist && vite build && cp dist/vue-qrcode-reader.umd.cjs dist/vue-qrcode-reader.umd.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",

diff --git a/src/index.ts b/src/index.ts
@@ -20,17 +20,3 @@ export { QrcodeStream, QrcodeCapture, QrcodeDropZone, setZXingModuleOverrides }
 const plugin: Plugin = { install }
 
 export { plugin as VueQrcodeReader }
-
-// Auto-install
-let GlobalVue = null
-if (typeof window !== 'undefined') {
-  // @ts-ignore
-  GlobalVue = window.Vue
-  // @ts-ignore
-} else if (typeof global !== 'undefined') {
-  // @ts-ignore
-  GlobalVue = global.Vue
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin)
-}