Add support for building for different kind of loaders (#325)

* update dist

* make npm libraries available

* Append js code to make classes global in UMD build

* fix codacy errors

* fix package name

.codacy.yml

@@ -7,3 +7,4 @@ exclude_paths:
   - "third_party/**"
   - "changelog.md"
   - "CODE_OF_CONDUCT.md"
+  - "scripts/**"

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 node_modules/
 package-lock.json
-.vscode/
+.vscode/
+dist/
+src/*.d.ts

package.json

@@ -1,13 +1,28 @@
 {
   "name": "html5-qrcode",
-  "version": "2.0.13",
+  "version": "2.1.0",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
-  "main": "dist/html5-qrcode.min.js",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "esnext": "./es2015/index.js",
+  "unpkg": "./html5-qrcode.min.js",
   "scripts": {
     "build-windows": "scripts\\build-windows.sh",
-    "build": "./scripts/build-default.sh",
     "test": "./scripts/test.sh",
-    "lint-md": "remark ."
+    "lint-md": "remark .",
+    "clean": "rm -Rf ./lib/* ./build/* ./meta/bundlesize/* ./meta/coverage/* ./.rpt2_cache  ./dist/* ./src/*.d.ts",
+    "prebuild": "npm run clean",
+    "postbuild": "cp -R ./third_party ./dist/third_party",
+    "build": "npm run build:es2015 && npm run build:esm && npm run build:esnext && npm run build:cjs && npm run build:umd && npm run build:typing && npm run build:copy",
+    "build:es2015": "tsc --build tsconfig.lib-es2015.json",
+    "build:esm": "tsc --build tsconfig.lib-esm.json",
+    "build:esnext": "tsc --build tsconfig.lib-esm.json",
+    "build:cjs": "tsc --build tsconfig.lib-cjs.json",
+    "build:typing": "tsc --emitDeclarationOnly --outDir ./dist",
+    "build:umd": "./scripts/build-webpack.sh",
+    "build:copy": "cp README.md dist && cp package.json dist && cp LICENSE dist",
+    "release": "npm run build && cd dist && npm publish"
   },
   "repository": {
     "type": "git",
@@ -18,7 +33,10 @@
     "qrcode",
     "html",
     "camera",
-    "scanner"
+    "scanner",
+    "barcode",
+    "barcode 1d",
+    "barcode 2d"
   ],
   "author": "[email protected]",
   "license": "Apache-2.0",
@@ -51,7 +69,7 @@
       "remark-preset-lint-recommended"
     ]
   },
-  "files": [
-    "dist/*"
-  ]
+  "publishConfig": {
+    "access": "public"
+  }
 }

scripts/build-webpack.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+## Build Script
+echo 'Initiating webpack build sequence.'
+
+webpack
+
+## Script copied to dist/html5-qrcode.min.js
+## Fork content of 'webpack_append_data.js' to final js file to
+## make classes global to be backwards compatible.
+cat scripts/webpack_append_data.js >> dist/html5-qrcode.min.js
+
+echo 'Webpack building done.'

scripts/webpack_append_data.js

@@ -0,0 +1,6 @@
+/** Append the libary components to globals for backwards compatibility. */
+if (window && !Html5QrcodeScanner) {
+    var Html5QrcodeScanner = window.__Html5QrcodeLibrary__.Html5QrcodeScanner;
+    var Html5Qrcode = window.__Html5QrcodeLibrary__.Html5Qrcode;
+    var Html5QrcodeSupportedFormats = window.__Html5QrcodeLibrary__.Html5QrcodeSupportedFormats
+}

src/html5-qrcode.ts

@@ -396,37 +396,6 @@ export class Html5Qrcode {
                     .catch((error) => {
                         reject(Html5QrcodeStrings.errorGettingUserMedia(error));
                     });
-            } else if (navigator.getUserMedia) {
-                if (typeof cameraIdOrConfig != "string") {
-                    // TODO(mebjas): Make errors more concrete and categorizable.
-                    throw Html5QrcodeStrings.onlyDeviceSupportedError();
-                }
-                const getCameraConfig: MediaStreamConstraints = {
-                    video: videoConstraints
-                };
-                navigator.getUserMedia(getCameraConfig,
-                    (stream: MediaStream) => {
-                        $this.onMediaStreamReceived(
-                            stream,
-                            internalConfig,
-                            areVideoConstraintsEnabled,
-                            rootElementWidth,
-                            qrCodeSuccessCallback,
-                            qrCodeErrorCallback!)
-                            .then((_) => {
-                                $this.isScanning = true;
-                                resolve(/* Void */ null);
-
-                            })
-                            .catch((error) => {
-                                reject(
-                                    Html5QrcodeStrings.errorGettingUserMedia(
-                                        error));
-
-                            });
-                    }, (error: any) => {
-                        reject(Html5QrcodeStrings.errorGettingUserMedia(error));
-                    });
             } else {
                 reject(Html5QrcodeStrings.cameraStreamingNotSupported());
             }

src/zxing-html5-qrcode-decoder.ts

@@ -10,6 +10,8 @@
  * http://www.denso-wave.com/qrcode/faqpatent-e.html
  */
 
+import * as ZXing from "../third_party/zxing-js.umd";
+
 import {
     QrcodeResult,
     QrcodeResultFormat,
@@ -18,9 +20,6 @@ import {
     QrcodeDecoderAsync
 } from "./core";
 
-// Ambient tag to refer to ZXing library.
-declare const ZXing: any;
-
 /**
  * ZXing based Code decoder.
  */

third_party/zxing-js.umd.d.ts

@@ -0,0 +1,42 @@
+import * as ZXing from "./zxing-js.umd";
+
+declare class HTMLCanvasElementLuminanceSource {
+    constructor(canvas: HTMLCanvasElement);
+}
+
+declare class HybridBinarizer {
+    constructor(luminanceSource: HTMLCanvasElementLuminanceSource);
+}
+
+declare class BinaryBitmap {
+    constructor(binarizer: HybridBinarizer);
+}
+
+declare class MultiFormatReader {
+    constructor(verbosity: boolean, b: any);
+    decode(binaryBitmap: BinaryBitmap): any;
+}
+
+export declare enum DecodeHintType {
+    POSSIBLE_FORMATS = 2
+}
+
+export declare enum BarcodeFormat {
+    AZTEC = 0,
+    CODABAR = 1,
+    CODE_39 = 2,
+    CODE_93 = 3,
+    CODE_128 = 4,
+    DATA_MATRIX = 5,
+    EAN_8 = 6,
+    EAN_13 = 7,
+    ITF = 8,
+    MAXICODE = 9,
+    PDF_417 = 10,
+    QR_CODE = 11,
+    RSS_14 = 12,
+    RSS_EXPANDED = 13,
+    UPC_A = 14,
+    UPC_E = 15,
+    UPC_EAN_EXTENSION = 16
+}

tsconfig.json

@@ -3,7 +3,8 @@
         "target": "es5",
         "module": "ES2015",
         "sourceMap": true,
-        "moduleResolution": "classic",
+        "moduleResolution": "Node",
+        "declaration": true,
         "lib": [
             "es7",
             "dom"
@@ -17,9 +18,20 @@
         "experimentalDecorators": true,
         "removeComments": true,
         "preserveConstEnums": true,
-        "noImplicitAny": true
+        "noImplicitAny": true,
+
+        // Allow javascript source to be built
+        "allowJs": true
     },
     "files": [
         "src/index.ts"
-    ]
+    ],
+    "paths": {
+        "@scanapp/html5-qrcode": [
+            "./dist"
+        ],
+        "@scanapp/html5-qrcode/*": [
+            "./dist/*"
+        ]
+    }
 }

tsconfig.lib-cjs.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "outDir": "dist/cjs"
+    }
+}

tsconfig.lib-es2015.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+        "compilerOptions": {
+        "module": "es2015",
+        "target": "es2015",
+        "outDir": "dist/es2015"
+    }
+}

tsconfig.lib-esm.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "module": "es2015",
+        "target": "es5",
+        "outDir": "dist/esm"
+    }
+}

tsconfig.lib-esnext.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "esnext",
+        "outDir": "dist/esnext"
+    }
+}

tsconfig.test.json

@@ -0,0 +1,20 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "target": "es6",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "lib": [
+            "es7",
+            "dom"
+        ],
+        "outDir": "output/tests"
+    },
+    "include": [
+        "test/**/*.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "src/core"
+    ]
+}

webpack.config.js

@@ -8,12 +8,12 @@ module.exports = {
     // output bundles (location)
     output: {
         path: path.resolve( __dirname, "dist" ),
-        filename: "html5-qrcode.library.min.js",
-        library: "_",
+        filename: "html5-qrcode.min.js",
+        library: "__Html5QrcodeLibrary__",
     },
     // file resolutions
     resolve: {
-        extensions: [ ".ts" ],
+        extensions: [ ".ts", ".js" ],
     },
     target: "web",
     module: {