Merge pull request #31 from bitjson/feature/browser-lib

Add build process, release browser platform as a UMD library

.gitignore

@@ -1 +1,6 @@
 node_modules/
+dist/
+
+# generated files
+src/browser/plugin.min.js
+www/www.min.js

.travis.yml

@@ -2,3 +2,4 @@ language: node_js
 sudo: false
 node_js:
   - "4"
+  - "6"

gulpfile.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const gulp = require('gulp');
+const insert = require('gulp-insert');
+const fs= require('fs');
+
+const remap = fs.readFileSync('src/common/src/cordova-remap.js', 'utf-8');
+
+function webpack(config, callback){
+  const exec = require('child_process').exec;
+  exec('node_modules/.bin/webpack --config ' + config, (error, stdout, stderr) => {
+    console.log(stdout);
+    console.log(stderr);
+    callback(error);
+  });
+}
+
+gulp.task('prepack', function(cb){
+  webpack('webpack.prepack.config.js', cb);
+});
+
+gulp.task('webpack-cordova', ['prepack'], function(cb){
+  webpack('webpack.cordova.config.js', cb);
+});
+
+gulp.task('dist', ['prepack'], function(cb){
+  webpack('webpack.library.config.js', cb);
+});
+
+gulp.task('remap', ['webpack-cordova'], function () {
+  return gulp.src(['dist/plugin.min.js', 'dist/www.min.js'])
+  .pipe(insert.prepend(remap))
+  .pipe(gulp.dest('dist'));
+});
+
+gulp.task('plugin', ['remap'], function () {
+  return gulp.src(['dist/plugin.min.js'])
+  .pipe(gulp.dest('src/browser'));
+});
+
+gulp.task('www', ['remap'], function () {
+  return gulp.src(['dist/www.min.js'])
+  .pipe(gulp.dest('www'));
+});
+
+gulp.task('default', ['dist', 'plugin', 'www']);

package.json

@@ -9,20 +9,22 @@
     ]
   },
   "scripts": {
+    "build": "gulp && npm run clean-build",
+    "clean-build": "trash dist/plugin.min.js && trash dist/www.min.js && trash src/browser/worker.min.js",
+    "install": "npm run build",
     "test": "npm run jshint",
-    "jshint": "jshint www && jshint src && jshint tests",
-    "update": "npm update && npm run update:qrcode-reader && npm run update:adapter.js",
-    "update:qrcode-reader": "ncp node_modules/qrcode-reader/dist/index.js src/browser/qrcode-reader.js",
-    "update:adapter.js": "ncp node_modules/webrtc-adapter/out/adapter_no_edge.js src/browser/adapter.js",
-    "gen-tests": "npm run clean-platform-tests && npm run mkdirp-platform-tests && npm run copy-platform-tests && npm run install-platform-tests",
+    "jshint": "jshint src/browser/src && jshint src/common/src && jshint tests",
+    "gen-tests": "npm run build && npm run clean-platform-tests && npm run mkdirp-platform-tests && npm run copy-platform-tests && npm run install-platform-tests",
     "clean-platform-tests": "trash ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests",
     "mkdirp-platform-tests": "mkdirp ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests",
     "copy-platform-tests": "ncp tests/project ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests",
     "install-platform-tests": "cd ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests && npm install",
     "test:ios": "cd ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests && npm run test:ios",
     "test:android": "cd ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests && npm run test:android",
     "test:browser": "cd ../cordova-plugin-test-projects/cordova-plugin-qrscanner-tests && npm run test:browser",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+    "test:library": "npm run build && node tests/library/test.js",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "prep-release": "git clean -dfx && npm install && npm run changelog"
   },
   "repository": {
     "type": "git",
@@ -44,18 +46,23 @@
   },
   "homepage": "https://github.com/bitpay/cordova-plugin-qrscanner",
   "dependencies": {
-    "qrcode-reader": "^0.2.1",
-    "webrtc-adapter": "^2.0.2",
-    "xcode": "^0.8.8"
+    "qrcode-reader": "^0.2.2",
+    "webrtc-adapter": "^2.0.3",
+    "xcode": "^0.8.9"
   },
   "devDependencies": {
     "cz-conventional-changelog": "^1.1.6",
+    "express": "^4.14.0",
     "ghooks": "^1.3.2",
+    "gulp": "^3.9.1",
+    "gulp-insert": "^0.5.0",
     "jshint": "^2.9.2",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
+    "raw-loader": "^0.5.1",
     "trash-cli": "^1.3.0",
-    "validate-commit-msg": "^2.6.1"
+    "validate-commit-msg": "^2.6.1",
+    "webpack": "^2.1.0-beta.22"
   },
   "config": {
     "commitizen": {

plugin.xml

@@ -9,9 +9,7 @@
     <engine name="cordova" version=">=3.4.0"/>
   </engines>
 
-  <asset src="www/QRScanner.js" target="js/QRScanner.js"/>
-
-  <js-module src="www/QRScanner.js" name="QRScanner">
+  <js-module src="www/www.min.js" name="QRScanner">
     <clobbers target="QRScanner" />
   </js-module>
 
@@ -39,22 +37,20 @@
     </config-file>
     <header-file src="src/ios/QRScanner-Bridging-Header.h" />
     <source-file src="src/ios/QRScanner.swift"/>
+    <config-file target="*-Info.plist" parent="NSCameraUsageDescription">
+      <string></string>
+    </config-file>
   </platform>
 
   <platform name="browser">
-      <config-file target="config.xml" parent="/*">
-          <feature name="QRScanner">
-              <param name="browser-package" value="QRScanner" />
-          </feature>
-      </config-file>
-      <js-module src="src/browser/QRScannerProxy.js" name="QRScannerProxy">
-          <runs />
-      </js-module>
-      <source-file src="src/browser/worker.js" target-dir="platform_www/plugins/cordova-plugin-qrscanner/src/browser" />
-      <source-file src="src/browser/qrcode-reader.js" target-dir="platform_www/plugins/cordova-plugin-qrscanner/src/browser" />
-      <js-module src="src/browser/adapter.js" name="AdapterJs">
-          <clobbers target="window.getUserMedia" />
-      </js-module>
+    <config-file target="config.xml" parent="/*">
+      <feature name="QRScanner">
+          <param name="browser-package" value="QRScanner" />
+      </feature>
+    </config-file>
+    <js-module src="src/browser/plugin.min.js" name="QRScannerProxy">
+      <runs />
+    </js-module>
   </platform>
 
 </plugin>

readme.md

@@ -125,6 +125,24 @@ A project can only have one bridging header. If your app uses plugins other than
 ```
 Copy the script from `cordova-plugin-qrscanner/scripts/swift-support.js` into your project (eg. into the `hooks` folder), and modify the `BRIDGING_HEADER_END` variable to point to your new bridging header. Finally, remove and re-add the ios platform to trigger the hook. See [this issue](https://github.com/eface2face/cordova-plugin-iosrtc/issues/9) for more information.
 
+### Electron or NW.js usage without `cordova-browser`
+
+If your app uses the Cordova Browser platform, simply adding the plugin to the Cordova project will make the `window.QRScanner` global object available once the `deviceready` event propagates. For apps not using `cordova-browser`, this plugin is also available as a simple javascript library.
+
+The library uses the [Universal Module Definition API](https://github.com/umdjs/umd), so it can simply be required by most build systems.
+
+```js
+var QRScanner = require('QRScanner');
+```
+
+Or alternatively, the library can be included in a page as-is, and the QRScanner will be made available at `window.QRScanner`.
+
+```html
+<script src="path/to/qrscanner/library.bundle.min.js"></script>
+```
+
+On the browser platform, performance is improved by running the processing-intensive scanning operation in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). For more information about the browser platform, see [Browser Platform Specific Details](#browser).
+
 ## API
 With the exception of `QRScanner.scan(callback)`, all callbacks are optional.
 
@@ -307,7 +325,7 @@ Name                             | Description
 `lightEnabled`                   | A boolean value which is true if the light is enabled.
 `canOpenSettings`                | A boolean value which is true only if the users' operating system is able to `QRScanner.openSettings()`.
 `canEnableLight`                 | A boolean value which is true only if the users' device can enable a light in the direction of the currentCamera.
-`canChangeCamera`                | A boolean value which is true only if the current device "should" have a front camera. The camera may still not be capturable, which would emit error code 3, 4, or 5 when the switch is attempted.
+`canChangeCamera`                | A boolean value which is true only if the current device "should" have a front camera. The camera may still not be capturable, which would emit error code 3, 4, or 5 when the switch is attempted. (On the browser platform, this value is false until the `prepare` method is called.)
 `currentCamera`                  | A number representing the index of the currentCamera. `0` is the back camera, `1` is the front.
 
 
@@ -397,7 +415,7 @@ For this same reason, scanning requires the video preview to be active, and the
 
 ### Camera Selection
 
-The browser platform attempts to select the best camera as the "back" camera (the default camera). If a "next-best" camera is available, that camera will be selected as the "front" camera. Camera switching is intended to be "togglable", so this plugin has no plans to support access to more than 2 cameras.
+When the `prepare` method runs, the browser platform attempts to select the best camera as the "back" camera (the default camera). If a "next-best" camera is available, that camera will be selected as the "front" camera. Camera switching is intended to be "togglable", so this plugin has no plans to support access to more than 2 cameras.
 
 The "back" camera is selected by the following criteria:
 1. [**facingMode**](http://w3c.github.io/mediacapture-main/#dfn-facingmode) – if a camera with a facingMode of `environment` exists, we use this one.
@@ -411,12 +429,6 @@ The browser platform always returns the boolean `status.canEnableLight` as `fals
 
 `status.canEnableLight` is camera specific, meaning it will return `false` if the camera in use does not have a flash.
 
-### Using with Electron or NW.js
-
-This plugin should work out-of-the box with the Cordova browser platform. As of now, there is no clear "best-way" of using the cordova browser build inside an Electron or NW.js application. This plugin attempts to provide an as-clean-as-possible source such that implementations can choose to either:
- - fully implement the cordova platform (please [let us know](https://github.com/bitpay/cordova-plugin-qrscanner/issues/new) how you do it so we can add documentation!), or
- - import this plugin's source into the Electron or NW.js project and re-bundle it manually.
-
 #### Using Status.authorized
 
 Both Electron and NW.js automatically provide authorization to access the camera (without user confirmation) to bundled applications. This difference can't be detected via an API this plugin can implement, so the `authorized` property on any returned Status objects will be `false` on startup, even when it should be `true`. You should adjust your code to assume that these platforms are always authorized. (ie: Skip "permission priming" on these platforms.)