Es6 refactor

README.md

@@ -9,12 +9,12 @@ The codesy.io widget is an add-on for Firefox, Chrome, and Opera that adds codes
   * `git clone https://github.com/codesy/widgets.git`
 2. Install requirements:
   * `cd widgets`
-  * `npm install`
+  * `npm install` (You can install globally with `npm install -g`)
 3. Run these gulp tasks to watch changes to files and compile extensions.
-  * gulp dev-chrome-unpacked - creates addon directory and watches for changes
-  * gulp dev-chrome-packed - creates addon zip file and watches for changes
-  * gulp dev-firefox-unpacked - creates addon directory and watches for changes
-  * gulp dev-firefox-packed - creates addon xpi file and watches for changes
+  * gulp dev-chrome-unpacked - creates chrome/ directory and watches for changes
+  * gulp dev-chrome-packed - creates a zip file in /chrome and watches for changes
+  * gulp dev-firefox-unpacked - creates firefox/ directory and watches for changes
+  * gulp dev-firefox-packed - creates an xpi in firefox/ file and watches for changes
 
 combined tasks:
   * gulp dev-packed - creates addon packages and watches for changes
@@ -36,14 +36,12 @@ combined tasks:
 
 ### Chrome and Opera
 1. Run 'gulp publish-chrome'
-  * Runs gulp coffee to compile .js files
   * Removes debug lines from .js files e.g. console.log
   * Creates a zip file for uploading to the chrome store.  The zip file contains the manifest.json file.
 2. Upload the codesy.zip file to the chrome or opera store
 
 ### Firefox
 1. Run 'gulp publish-firefox'
-  * Runs gulp coffee to compile .js files
   * Removes debug lines from .js files e.g. console.log
   * Creates an xpi file for uploading to the moz store.  The file contains the manifest.json file.
 2. Upload the xpi file to the moz store

gulpfile.js

@@ -1,20 +1,19 @@
-var fs = require('fs');
-var gulp = require('gulp');
-var gutil = require('gulp-util');
-var coffee = require('gulp-coffee');
-var stripDebug = require('gulp-strip-debug');
-var mergeStream = require('merge-stream');
-var mergeJSON = require('gulp-merge-json');
-var zip = require('gulp-zip');
-var jeditor = require("gulp-json-editor");
-var rename = require('gulp-rename')
+const fs = require('fs');
+const gulp = require('gulp');
+const stripDebug = require('gulp-strip-debug');
+const mergeStream = require('merge-stream');
+const mergeJSON = require('gulp-merge-json');
+const zip = require('gulp-zip');
+const jeditor = require("gulp-json-editor");
+const rename = require('gulp-rename')
+const headerComment = require('gulp-header-comment');
 
 // Settings for building packages
-var settings = {
+const settings = {
     name: 'codesy',
-    version: '0.0.0.5',
+    version: '0.0.0.6',
     source: './src',
-    destination: './build',
+    destination: './dist',
     static_files: {
         source: './static',
         glob: ['css/*', 'js/*.js', 'img/*.png']
@@ -26,12 +25,12 @@ var settings = {
     firefox: {
         source: './src/firefox',
         destination: 'firefox',
-        extension: '.xpi'
+        extension: 'xpi'
     },
     chrome: {
         source: './src/chrome',
         destination: 'chrome',
-        extension: '.zip'
+        extension: 'zip'
 
     }
 }
@@ -42,112 +41,104 @@ var settings = {
 //    destination: (optional) path where files will go.  If destination is not included,
 //                  the functions will return a stream of files.
 
-compile_coffee = function(options) {
-    this.source = options.source
-    this.destination = options.destination
+javascript_src = function(options) {
     return (
-        function(_this) {
+        function({source, destination}) {
             return function() {
-                console.log("compile "+_this.source + "/*.coffee files")
-            // next line compile coffee files in source directory and ./src root
-                var compiled_stream = gulp.src([_this.source + '/*.coffee', settings.source +'/*.coffee'])
-                                            .pipe(coffee({bare: true}).on('error', gutil.log))
-                if (_this.destination){
-                    return compiled_stream.pipe(gulp.dest(_this.destination + '/js'))
+                console.log(`gather src ${source}/*.js files`)
+                console.log(`gather src ${settings.source}/*.js files`)
+
+                const js_files = gulp.src([`${source}/*.js`, `${settings.source}/*.js`])
+                    .pipe(headerComment(`codesy widget version ${settings.version}`))
+
+                if (destination){
+                    console.log(` destination ${destination}/js`);
+                    return js_files.pipe(gulp.dest(`${destination}/js`))
                 } else {
-                    return compiled_stream
+                    return js_files
                 }
             }
         }
-    )(this)
+    )(options)
 }
 
 static_files = function(destination) {
-  this.destination = destination
-  return (
-    function(_this) {
-      return function() {
-        var static_stream = gulp.src(settings.static_files.glob,
-                                      { base: settings.static_files.source,
-                                        cwd: settings.static_files.source
-                                      })
-        if (_this.destination){
-          return static_stream.pipe(gulp.dest( _this.destination ))
-        } else {
-          return static_stream
+    return (
+        function(destination,{glob, source}) {
+            return function() {
+                const static_stream = gulp.src(glob, { base: source, cwd: source })
+                if (destination){
+                    return static_stream.pipe(gulp.dest( destination ))
+                } else {
+                    return static_stream
+                }
+            }
         }
-      }
-    }
-  )(this)
+    )(destination,settings.static_files)
 }
 
 // this function needs to include dev server details in the options object:
 //    dev_server: object with domain and port
 
-var manifest = function (options){
-  this.options = options
+const manifest = function (options){
   return (
-    function(_this) {
+    function({source, destination}) {
         return function() {
-            var common = gulp.src(settings.source + '/manifest.json')
-            var additions = gulp.src(_this.options.source+'/manifest_additions.json')
+            const common = gulp.src(`${settings.source}/manifest.json`)
+            const additions = gulp.src(`${source}/manifest_additions.json`)
             manifest_stream = mergeStream(additions, common)
             .pipe(mergeJSON('manifest.json'))
             .pipe(jeditor(function(json) {
                 json.version=settings.version
                 return json
             }))
-            if (_this.destination){
-                return manifest_stream.pipe(gulp.dest(_this.destination));
+            if (destination){
+                return manifest_stream.pipe(gulp.dest(destination));
             } else {
                 return manifest_stream
             }
         }
-    })(this)
+    })(options)
 }
 
-var add_dev_server = function (manifest_stream) {
-    var warning = ['THIS IS NOT the production manifest.'],
-    dev_permission =["https://",settings.dev_server.domain,":",settings.dev_server.port,"/"],
-    dev_match =["https://",settings.dev_server.domain,"/"]
+const add_dev_server = function (manifest_stream) {
+    ({domain, port} = settings.dev_server)
+    const warning = 'THIS IS NOT the production manifest.',
+    dev_permission =`https://${domain}:${port}/`,
+    dev_match =`https://${domain}/`
     return manifest_stream
         .pipe(jeditor(function(json) {
-            json.DEV_WARNING=warning.join("")
-            json.permissions.push(dev_permission.join(""))
-            json.content_scripts[1].matches.push(dev_match.join(""))
+            json.DEV_WARNING=warning
+            json.permissions.push(dev_permission)
+            json.content_scripts[1].matches.push(dev_match)
             return json
         }))
 }
 
-var package = function (options, zipped, for_dev){
-    this.options = options
-    this.zipped = zipped
-    this.for_dev = for_dev
+const package = function (options, zipped, for_dev){
     return (
-        function(_this) {
+            function({source, destination: dest, extension: ext}, zipped, for_dev) {
             return function() {
-                var package_name, destination, package_stream
-                var static_stream = (new static_files())()
-                var manifest_stream = (new manifest({source:_this.options.source}))()
-                var js_stream = (new compile_coffee({source:_this.options.source}))()
-                    .pipe(rename(function (path) {
-                        path.dirname += "/js";
-                    }))
-
-                if (_this.for_dev){
+                console.log(`package source: ${source}`);
+                let package_name, destination, package_stream;
+                let static_stream = (new static_files())()
+                let manifest_stream = (new manifest({source}))()
+                const js_stream = (new javascript_src( {source} ))()
+                    .pipe(rename( (path)=>path.dirname += "/js" ))
+
+                if (for_dev){
                     manifest_stream = add_dev_server (manifest_stream)
-                    package_name = settings.name + '-dev' + _this.options.extension
-                    destination = _this.options.destination
-
+                    package_name = `${settings.name}-${settings.version}.dev.${ext}`
                 } else {
                     js_stream.pipe(stripDebug())
-                    package_name = settings.name + '-' + settings.version + _this.options.extension
-                    destination = settings.destination
+                    package_name = `${settings.name}-${settings.version}.${ext}`
                 }
+                destination = for_dev ? dest : settings.destination
+                console.log(`package dest: ${destination}`);
 
                 package_stream = mergeStream (manifest_stream,js_stream,static_stream)
 
-                if (_this.zipped) {
+                if (zipped) {
                     package_stream
                         .pipe(zip(package_name))
                         .pipe(gulp.dest(destination))
@@ -157,22 +148,19 @@ var package = function (options, zipped, for_dev){
                 }
             }
         }
-    )(this)
+    )(options, zipped, for_dev)
 }
 
-var watch_dev = function (options, task) {
+const watch_dev = function ({source}, task) {
     console.log("start watching");
-    var manifest_files = [settings.source + '/manifest.json',options.source + '/manifest_additions.json']
-    var coffee_files = [options.source + '/*.coffee', settings.source + '/*.coffee']
-    // watch static files
-    gulp.watch(settings.static_files.source + '/**', task)
-    // watch manifest files
+    const manifest_files = [`${settings.source}/manifest.json`,`${source}/manifest_additions.json`]
+    const js_files = [`${source}/*.js`, `${settings.source}/*.js`]
+    gulp.watch(`${settings.static_files.source}/**`, task)
     gulp.watch(manifest_files, task)
-    gulp.watch(coffee_files, task)
+    gulp.watch(js_files, task)
 }
 
 // DEV TASKS
-
 gulp.task('dev-chrome-unpacked', ['chrome-unpacked'], function() {
     watch_dev(settings.chrome,['chrome-unpacked'])
 })
@@ -182,16 +170,18 @@ gulp.task('dev-chrome-packed', ['chrome-dev-zip'], function() {
 })
 
 gulp.task('dev-firefox-unpacked', ['firefox-unpacked'], function() {
-    watch_dev(settings.chrome,['firefox-unpacked'])
+    watch_dev(settings.firefox,['firefox-unpacked'])
 })
 
 gulp.task('dev-firefox-packed', ['firefox-dev-xpi'], function() {
-    watch_dev(settings.chrome,['firefox-dev-xpi'])
+    watch_dev(settings.firefox,['firefox-dev-xpi'])
 })
 
 gulp.task('dev-unpacked',['dev-chrome-unpacked','dev-firefox-unpacked'])
 gulp.task('dev-packed',['dev-chrome-packed','dev-firefox-packed'])
 
+// FF dev must use file
+gulp.task('dev-mixed',['dev-chrome-unpacked','dev-firefox-packed'])
 
 
 // FILE BUILDING TASKS
@@ -208,11 +198,10 @@ gulp.task('chrome-dev-zip', (new package(settings.chrome, true, true)))
 // create chrome dev directroy in the chrome.source directory with dev settings
 gulp.task('chrome-unpacked', (new package(settings.chrome, false, true)))
 
-
 // create xpi for FF prod
 gulp.task('publish-firefox', (new package(settings.firefox, true, false)))
 
-// create zip for chrome
+// create zip for chrome and opera
 gulp.task('publish-chrome', (new package(settings.chrome, true, false)))
 
 gulp.task('publish-all',['publish-firefox','publish-chrome'])

package.json

@@ -13,13 +13,14 @@
   "dependencies": {
     "gulp": "^3.9.0",
     "gulp-coffee": "2.3.1",
+    "gulp-header-comment": "^0.1.0",
     "gulp-json-editor": "2.2.1",
+    "gulp-merge-json": "0.5.0",
     "gulp-rename": "^1.2.0",
     "gulp-strip-debug": "1.0.2",
-    "gulp-util": "^3.0.1",
     "gulp-zip": "2.0.3",
-    "merge-stream": "0.1.7",
-    "gulp-merge-json":"0.5.0"
+    "jquery": "3.2.0",
+    "merge-stream": "0.1.7"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

src/chrome/manifest_additions.json

@@ -1,9 +1,3 @@
 {
-    "background": {
-        "persistent": true,
-        "scripts": [
-            "js/csp.js"
-        ]
-    },
     "version_name": "invitation-only beta"
 }