Make instascan module-friendly and greatly reduce package size

.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
   - '6'
-install: npm install
+install:
+  - npm install
+  - npm i -g gulp
 script: gulp release
 env:
   global:

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
+    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
+}

.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "gulp",
+            "task": "build",
+            "problemMatcher": [
+                "$gulp-tsc"
+            ],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}

README.md

@@ -9,8 +9,28 @@ Real-time webcam-driven HTML5 QR code scanner. [Try the live demo](https://schmi
 
 `npm install --save instascan`
 
+JavaScript:
+
 ```javascript
 const Instascan = require('instascan');
+
+...
+
+Instascan.Camera.getCameras().then(cameras => {
+  // do something with the camera list
+});
+```
+
+TypeScript
+
+```typescript
+import { Camera, Scanner } from "instascan";
+
+...
+
+let cameras: Camera[] = await Camera.getCameras();
+
+// do something with the camera list
 ```
 
 ### Bower
@@ -43,7 +63,8 @@ Copy `instascan.min.js` from the [releases](https://github.com/schmich/instascan
       });
       Instascan.Camera.getCameras().then(function (cameras) {
         if (cameras.length > 0) {
-          scanner.start(cameras[0]);
+          scanner.camera = cameras[0];
+          scanner.start();
         } else {
           console.error('No cameras found.');
         }
@@ -67,6 +88,10 @@ let opts = {
   // If true, the scanner emits the "scan" event when a QR code is scanned. Default true.
   continuous: true,
 
+  // The camera to use for scanning. This can either be specified here in the options, or it
+  // can be set at a later time by setting the "scanner.camera" property.
+  camera: null,
+
   // The HTML element to use for the camera's video preview. Must be a <video> element.
   // When the camera is active, this element will have the "active" CSS class, otherwise,
   // it will have the "inactive" class. By default, an invisible element will be created to
@@ -89,17 +114,17 @@ let opts = {
   // will be recognized in succession. Default 5000 (5 seconds).
   refractoryPeriod: 5000,
 
-  // Only applies to continuous mode. The period, in rendered frames, between scans. A lower scan period
-  // increases CPU usage but makes scan response faster. Default 1 (i.e. analyze every frame).
+  // Only applies to continuous mode. The period, in milliseconds, between scans. A lower scan
+  // period increases CPU usage but makes scan response faster. Default 500 (analyze every
+  // half-second)
   scanPeriod: 1
 };
 ```
 
-### scanner.start(camera)
+### scanner.start()
 
-- Activate `camera` and start scanning using it as the source. Returns promise.
-- This must be called in order to use [`scanner.scan`](#let-result--scannerscan) or receive [`scan`](#scanneraddlistenerscan-callback) events.
-- `camera`: Instance of `Instascan.Camera` from [`Instascan.Camera.getCameras`](#instascancameragetcameras).
+- Activate and start scanning using the currently set camera as the source. Returns promise.
+- This must be called in order to use [`scanner.scan`](#let-result--scannerscan) or receive [`scan`](#scanneraddlistenerscan-callback) events.(#instascancameragetcameras).
 - `.then(function () { ... })`: called when camera is active and scanning has started.
 - `.catch(function (err) { ... })`
   - Called when an error occurs trying to initialize the camera for scanning.

docs/app.js

@@ -16,7 +16,8 @@ var app = new Vue({
       self.cameras = cameras;
       if (cameras.length > 0) {
         self.activeCameraId = cameras[0].id;
-        self.scanner.start(cameras[0]);
+        self.scanner.camera = cameras[0];
+        self.scanner.start();
       } else {
         console.error('No cameras found.');
       }
@@ -30,7 +31,8 @@ var app = new Vue({
     },
     selectCamera: function (camera) {
       this.activeCameraId = camera.id;
-      this.scanner.start(camera);
+      this.scanner.camera = camera;
+      this.scanner.start();
     }
   }
 });

gulpfile.js

@@ -1,40 +1,74 @@
-var gulp = require('gulp');
-var rename = require('gulp-rename');
-var browserify = require('browserify');
-var source = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var uglify = require('gulp-uglify');
-var babelify = require('babelify');
-
-gulp.task('default', ['build', 'watch']);
-
-gulp.task('watch', function () {
-  gulp.watch('./src/*.js', ['build']);
-  gulp.watch('./*.js', ['build']);
-});
+const gulp = require("gulp");
+const uglify = require("gulp-uglify-es").default;
+const ts = require("gulp-typescript");
+const tsify = require("tsify");
+const browserify = require("browserify");
+const rename = require("gulp-rename");
+const source = require("vinyl-source-stream");
+const buffer = require("vinyl-buffer");
+const shakeify = require("common-shakeify");
+const { merge } = require("event-stream");
+
+function bundle(file, release) {
+    const options = { project: "tsconfig.json" };
+
+    if (release)
+        options.target = "es5";
+
+    return browserify(file)
+        .plugin(tsify, options)
+        .plugin(shakeify)
+        .bundle()
+        .pipe(source("instascan.js"));
+}
+
+function build(opts) {
+    const project = ts.createProject("tsconfig.json", opts);
 
-function build(file) {
-  return browserify(file, {
-      noParse: [require.resolve('./src/zxing')]
-    })
-    .transform(babelify, {
-      ignore: /zxing\.js$/i,
-      presets: ['es2015'],
-      plugins: ['syntax-async-functions', 'transform-regenerator']
-    })
-    .bundle()
-    .pipe(source('instascan.js'));
+    return gulp.src(["./src/**.ts", "!./src/instascan.ts"])
+        .pipe(project());
 }
 
-gulp.task('release', function () {
-  return build('./export.js')
-    .pipe(buffer())
-    .pipe(uglify())
-    .pipe(rename({ suffix: '.min' }))
-    .pipe(gulp.dest('./dist/'));
+gulp.task("default", ["build"]);
+
+gulp.task("watch", ["build"], function () {
+    gulp.watch("./src/*.ts", ["build"]);
 });
 
-gulp.task('build', function () {
-  return build('./export.js')
-    .pipe(gulp.dest('./dist/'));
+gulp.task("release", function () {
+    const tsOptions = {
+        target: "es5",
+        declaration: true,
+        declarationDir: "./dist"
+    };
+    const uglifyOptions = {
+        toplevel: true,
+        compress: {
+            toplevel: true
+        },
+        nameCache: {}
+    };
+    const { js, dts } = build(tsOptions);
+    const jsStream = js
+        .pipe(uglify(uglifyOptions))
+        .pipe(gulp.dest("./dist"));
+    const dtsStream = dts
+        .pipe(gulp.dest("./dist"));
+    const bundleStream = bundle("./src/instascan.ts")
+        .pipe(buffer())
+        .pipe(uglify(uglifyOptions))
+        .pipe(rename({ suffix: ".min" }))
+        .on("error", function (err) { console.log(err.toString()); })
+        .pipe(gulp.dest("./dist"));
+
+    return merge([jsStream, dtsStream, bundleStream]);
+});
+
+gulp.task("build", function () {
+    const { js, dts } = build();
+    const jsStream = js.pipe(gulp.dest("./dist"));
+    const dtsStream = dts.pipe(gulp.dest("./dist"));
+    const bundleStream = bundle("./src/instascan.ts").pipe(gulp.dest("./dist"));
+
+    return merge([jsStream, dtsStream, bundleStream]);
 });

package.json

@@ -1,14 +1,14 @@
 {
   "name": "instascan",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Webcam-driven QR code scanner.",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
-    "src/",
-    "index.js"
+    "src/"
   ],
   "repository": {
     "type": "git",
@@ -31,21 +31,28 @@
   },
   "homepage": "https://github.com/schmich/instascan",
   "devDependencies": {
-    "babel-plugin-syntax-async-functions": "^6.8.0",
-    "babel-plugin-transform-regenerator": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babelify": "^7.3.0",
-    "browserify": "^13.0.1",
+    "@types/events": "^1.2.0",
+    "@types/node": "^10.7.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "browserify": "^16.2.2",
+    "common-shakeify": "^0.5.0",
+    "event-stream": "^3.3.4",
     "gulp": "^3.9.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.4",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0"
+    "gulp-rename": "^1.4.0",
+    "gulp-typescript": "^5.0.0-alpha.3",
+    "gulp-uglify-es": "^1.0.4",
+    "ts-node": "^7.0.1",
+    "tsify": "^4.0.0",
+    "typescript": "^3.0.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   },
   "dependencies": {
-    "babel-polyfill": "^6.9.1",
+    "@zxing/library": "^0.8.0",
     "fsm-as-promised": "^0.13.0",
+    "regenerator-runtime": "^0.12.1",
     "visibilityjs": "^1.2.3",
-    "webrtc-adapter": "^1.4.0"
+    "webrtc-adapter": "^6.3.2"
   }
 }