0.3.4

.github/workflows/ci.yml

@@ -0,0 +1,108 @@
+name: CI
+
+env:
+  NODE_OPTIONS: --max-old-space-size=6144
+  # install playwright binary manually (because pnpm only runs install script once)
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - release/*
+      - feat/*
+      - fix/*
+      - perf/*
+      - v1
+      - v2
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    timeout-minutes: 20
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node_version: [16]
+      fail-fast: false
+
+    name: "Build&Test: node-${{ matrix.node_version }}, ${{ matrix.os }}"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+
+      - name: Set node version to ${{ matrix.node_version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: "pnpm"
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+  test:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    name: "Lint: node-16, ubuntu-latest"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+
+      - name: Set node version to 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "pnpm"
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Test
+        run: pnpm run test
+
+  lint:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    name: "Lint: node-16, ubuntu-latest"
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+
+      - name: Set node version to 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "pnpm"
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Check formatting
+        run: pnpm run prettier

.npmrc

@@ -1 +1,3 @@
-package-lock=false
+shamefully-hoist=true
+strict-peer-dependencies=true
+auto-install-peers=true

README.md

@@ -23,10 +23,10 @@ A tool for decoding qrcode.
 
 ## Guide
 
-Use `npm` to install.
+Use `pnpm` to install.
 
 ```bash
-$ npm install --save qrcode-decoder
+$ pnpm install --save qrcode-decoder
 ```
 
 Using in webpack:
@@ -96,31 +96,31 @@ Stops the current `qr` from searching for a QRCode.
 Install dependencies:
 
 ```bash
-$ npm install
+$ pnpm install
 ```
 
 Build code:
 
 ```bash
-$ npm run build
+$ pnpm run build
 ```
 
 Run unit test:
 
 ```bash
-$ npm test
+$ pnpm test
 ```
 
 Modify version in `package.json`, run `release` script:
 
 ```bash
-$ npm run release
+$ pnpm run release
 ```
 
 Publish
 
 ```bash
-$ npm publish
+$ pnpm publish
 ```
 
 ## License

README.zh-CN.md

@@ -23,10 +23,10 @@
 
 ## 使用者指南
 
-通过 npm 下载安装代码
+通过 pnpm 下载安装代码
 
 ```bash
-$ npm install --save qrcode-decoder
+$ pnpm install --save qrcode-decoder
 ```
 
 如果你是 webpack 等环境
@@ -96,31 +96,31 @@ qr.decodeFromCamera(videoElem).then((res) => {
 首次运行需要先安装依赖
 
 ```bash
-$ npm install
+$ pnpm install
 ```
 
 一键打包生成生产代码
 
 ```bash
-$ npm run build
+$ pnpm run build
 ```
 
 运行单元测试，浏览器环境需要手动测试，位于`test/browser`
 
 ```bash
-$ npm test
+$ pnpm test
 ```
 
 修改 package.json 中的版本号，修改 README.md 中的版本号，修改 CHANGELOG.md，然后发布新版
 
 ```bash
-$ npm run release
+$ pnpm run release
 ```
 
-将新版本发布到 npm
+将新版本发布到 pnpm
 
 ```bash
-$ npm publish
+$ pnpm publish
 ```
 
 ## License

TODO.md

@@ -2,4 +2,4 @@
 
 Rewrite unit test.
 
-- [] Rewrite unit test.
+- [x] Rewrite unit test.

__tests__/index.test.ts

@@ -0,0 +1,26 @@
+import QrcodeDecoder from '../';
+
+describe('QrcodeDecoder', () => {
+  test('use', async () => {
+    const res = await import('../dist');
+
+    expect(res.default).toEqual(QrcodeDecoder);
+  });
+
+  test('new QrcodeDecoder()', async () => {
+    const qr = new QrcodeDecoder();
+
+    expect(qr).toBeDefined();
+    expect(qr.videoConstraints).toEqual({
+      video: {
+        width: { min: 360, ideal: 720, max: 1080 },
+        height: { min: 360, ideal: 720, max: 1080 },
+        facingMode: { exact: 'environment' },
+      },
+      audio: false,
+    });
+    expect(qr.decodeFromImage).toBeDefined();
+    expect(qr.decodeFromCamera).toBeDefined();
+    expect(qr.decodeFromVideo).toBeDefined();
+  });
+});

demo/camera.html

@@ -20,7 +20,7 @@
     var vConsole = new VConsole();
     console.log('Hello world');
     function main() {
-      var qr = new QrcodeDecoder();
+      var qr = new QrcodeDecoder.default();
       var video = document.querySelector('#video');
       var start = document.querySelector('#start');
       var stop = document.querySelector('#stop');

demo/image.html

@@ -30,7 +30,7 @@
   <script type="module">
     var vConsole = new VConsole();
     function main() {
-      var qr = new QrcodeDecoder();
+      var qr = new QrcodeDecoder.default();
 
       var btn1 = document.querySelector('button#decode1');
       var btn2 = document.querySelector('button#decode2');

demo/video.html

@@ -22,7 +22,7 @@
       var result = document.querySelector('#result');
       var start = document.querySelector('#start');
       var stop = document.querySelector('#stop');
-      var qr = new QrcodeDecoder();
+      var qr = new QrcodeDecoder.default();
 
       start.onclick = startScan;
 

jest.config.js

@@ -1,5 +1,11 @@
+const isDebug = process.env.DEBUG === 'true';
+
 module.exports = {
   verbose: true,
+  silent: !isDebug,
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
   testTimeout: 60000,
   transform: {
     '^.+\\.tsx?$': 'ts-jest',

package.json

@@ -1,14 +1,17 @@
 {
   "name": "qrcode-decoder",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "Tool for decoding qrcode",
   "main": "dist/index.js",
   "browser": "dist/index.min.js",
   "unpkg": "dist/index.min.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
+  "packageManager": "pnpm@7.11.0",
   "scripts": {
-    "build": "ts-node -P scripts/tsconfig.json scripts/bundle.ts umd,esm,aio && npm run copy-file",
+    "build": "ts-node -P scripts/tsconfig.json scripts/bundle.ts commonjs,esm,aio && pnpm run dts && pnpm run copy-file",
+    "dts": "tsc src/index.ts --declaration --emitDeclarationOnly --outDir './dist'",
     "prettier": "prettier --check '**/*.{ts,tsx,md}' --config .prettierrc",
     "prettier:fix": "prettier --write '**/*.{ts,tsx,md}' --config .prettierrc",
     "test": "jest",
@@ -25,7 +28,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx,md}": [
-      "npm run prettier:fix",
+      "pnpm run prettier:fix",
       "git add ."
     ]
   },
@@ -76,7 +79,7 @@
     "ts-node": "^8.4.1",
     "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.7.5"
+    "typescript": "^4.4.3"
   },
   "license": "MIT",
   "repository": {

scripts/bundle.ts

@@ -59,6 +59,25 @@ async function bundleUmd() {
   });
 }
 
+async function bundleCommonjs() {
+  const bundle = await rollup.rollup({
+    input: path.join(process.cwd(), 'src/index.ts'),
+    plugins: [...plugins],
+    external: ['jsqr'],
+  });
+  await bundle.write({
+    file: 'dist/index.js',
+    exports: 'named',
+    name: 'QrcodeDecoder',
+    format: 'commonjs',
+    sourcemap: false,
+    globals: {
+      jsqr: 'jsqr',
+      tslib: 'tslib',
+    },
+  });
+}
+
 async function bundleAio() {
   const bundle = await rollup.rollup({
     input: path.join(process.cwd(), 'src/index.ts'),
@@ -100,6 +119,14 @@ async function bundle() {
       await bundleUmd();
     }
 
+    if (outputs.indexOf('commonjs') === -1) {
+      logBundle(`Skipping commonjs`);
+    } else {
+      logBundle(`Creating commonjs`);
+
+      await bundleCommonjs();
+    }
+
     if (outputs.indexOf('aio') === -1) {
       logBundle(`Skipping umd aio`);
     } else {

src/index.ts

@@ -1,12 +1,13 @@
-import { Options } from 'jsqr';
+import jsQR, { QRCode, Options } from 'jsqr';
-import jsQR from 'jsqr';
+
+export type CodeResult = QRCode | null;
 
 const videoSize = {
   width: { min: 360, ideal: 720, max: 1080 },
   height: { min: 360, ideal: 720, max: 1080 },
 };
 
-class QrcodeDecoder {
+export class QrcodeDecoder {
   timerCapture: null | NodeJS.Timeout;
   canvasElem: null | HTMLCanvasElement;
   gCtx: null | CanvasRenderingContext2D;
@@ -100,7 +101,10 @@ class QrcodeDecoder {
    *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
    *  refer to jsqr options: https://github.com/cozmo/jsQR
    */
-  async _captureToCanvas(videoElem: HTMLVideoElement, options: Options) {
+  async _captureToCanvas(
+    videoElem: HTMLVideoElement,
+    options: Options,
+  ): Promise<CodeResult> {
     if (this.timerCapture) {
       clearTimeout(this.timerCapture);
     }
@@ -142,7 +146,7 @@ class QrcodeDecoder {
 
     const result = await proms();
 
-    return result;
+    return result as CodeResult;
   }
 
   /**
@@ -155,7 +159,10 @@ class QrcodeDecoder {
    *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
    *  refer to jsqr options: https://github.com/cozmo/jsQR
    */
-  async decodeFromCamera(videoElem: HTMLVideoElement, options: any = {}) {
+  async decodeFromCamera(
+    videoElem: HTMLVideoElement,
+    options: any = {},
+  ): Promise<CodeResult> {
     const opts = {
       ...this.defaultOption,
       ...options,
@@ -197,6 +204,8 @@ class QrcodeDecoder {
       const code = await this.decodeFromVideo(videoElem, opts);
       return code;
     }
+
+    return null;
   }
 
   /**
@@ -207,7 +216,10 @@ class QrcodeDecoder {
    *  inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst)
    *  refer to jsqr options: https://github.com/cozmo/jsQR
    */
-  async decodeFromVideo(videoElem: HTMLVideoElement, options = {}) {
+  async decodeFromVideo(
+    videoElem: HTMLVideoElement,
+    options = {},
+  ): Promise<CodeResult> {
     const opts = {
       ...this.defaultOption,
       ...options,
@@ -229,20 +241,16 @@ class QrcodeDecoder {
    *  refer to jsqr options: https://github.com/cozmo/jsQR
    */
   async decodeFromImage(
-    img: HTMLImageElement,
+    img: HTMLImageElement | string,
     options: { crossOrigin?: string } = {},
-  ) {
+  ): Promise<CodeResult> {
     let imgDom: HTMLImageElement | null = null;
     const opts = {
       ...this.defaultOption,
       ...options,
     };
-    if (+img.nodeType > 0) {
+
-      if (!img.src) {
+    if (typeof img === 'string') {
-        throw new Error('The ImageElement must contain a src');
-      }
-      imgDom = img;
-    } else if (typeof img === 'string') {
       imgDom = document.createElement('img');
       if (options.crossOrigin) {
         imgDom.crossOrigin = options.crossOrigin;
@@ -253,6 +261,11 @@ class QrcodeDecoder {
           imgDom!.onload = () => resolve(true);
         });
       await proms();
+    } else if (+img.nodeType > 0) {
+      if (!img.src) {
+        throw new Error('The ImageElement must contain a src');
+      }
+      imgDom = img;
     }
 
     let code = null;
@@ -279,7 +292,7 @@ class QrcodeDecoder {
       return code;
     }
 
-    return false;
+    return null;
   }
 
   /**

tsconfig.json

@@ -11,7 +11,10 @@
     "experimentalDecorators": true,
     "preserveConstEnums": true,
     "importHelpers": false,
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "module": "ESNext",
     "moduleResolution": "node",
     "sourceMap": false,