An attpempt to rewrite library in CommonJS style

gulpfile.js

@@ -1,3 +1,6 @@
+var browserify = require('browserify')
+var source = require('vinyl-source-stream')
+var buffer = require('vinyl-buffer')
 var gulp = require('gulp')
 var eslint = require('gulp-eslint')
 var concat = require('gulp-concat')
@@ -33,18 +36,15 @@ gulp.task('lint', function() {
 })
 
 gulp.task('build-core', function() {
-  var streams = ['noframework', 'jquery', 'zepto'].map(function(adapter) {
-    var sources = [
-      'src/waypoint.js',
-      'src/context.js',
-      'src/group.js',
-      'src/adapters/' + adapter + '.js'
-    ]
-    if (['jquery', 'zepto'].indexOf(adapter) > -1) {
-      sources.push('src/adapters/jquery-zepto-fn-extension.js')
-    }
-    return gulp.src(sources)
-    .pipe(concat(adapter + '.waypoints.js', { newLine: ';' }))
+  var streams = ['noframework'/* TODO: , 'jquery', 'zepto'*/].map(function(adapter) {
+    var b = browserify({
+      entries: './src/entries/' + adapter + '.js',
+      debug: true
+    });
+
+    return b.bundle()
+    .pipe(source(adapter + '.waypoints.js'))
+    .pipe(buffer())
     .pipe(header(fileHeader('Waypoints')))
     .pipe(footer(';'))
     .pipe(gulp.dest('lib/'))

package.json

@@ -18,6 +18,7 @@
     "scroll"
   ],
   "devDependencies": {
+    "browserify": "^13.0.0",
     "eslint": "^0.6.2",
     "gulp": "^3.6.2",
     "gulp-concat": "^2.2.0",
@@ -28,7 +29,14 @@
     "gulp-tap": "^0.1.1",
     "gulp-uglify": "^0.3.1",
     "merge-stream": "^0.1.1",
-    "testem": "^0.6.24"
+    "testem": "^0.6.24",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
+  "optionalDependencies": {
+    "jquery": "^1.12.0",
+    "zepto": "^1.0.1"
+  },
+  "main": "entries/noframework",
   "license": "MIT"
 }

src/adapters/jquery-zepto-fn-extension.js

@@ -1,7 +1,5 @@
-(function() {
   'use strict'
-
-  var Waypoint = window.Waypoint
+  var Waypoint = require('../waypoint')
 
   function createExtension(framework) {
     return function() {
@@ -27,10 +25,4 @@
     }
   }
 
-  if (window.jQuery) {
-    window.jQuery.fn.waypoint = createExtension(window.jQuery)
-  }
-  if (window.Zepto) {
-    window.Zepto.fn.waypoint = createExtension(window.Zepto)
-  }
-}())
+  module.exports = createExtension

src/adapters/jquery.js

@@ -1,14 +1,12 @@
-(function() {
   'use strict'
 
-  var $ = window.jQuery
-  var Waypoint = window.Waypoint
+  var jquery = global.jQuery  //require('jquery')
 
   function JQueryAdapter(element) {
-    this.$element = $(element)
+    this.$element = jquery(element)
   }
 
-  $.each([
+  jquery.each([
     'innerHeight',
     'innerWidth',
     'off',
@@ -25,17 +23,15 @@
     }
   })
 
-  $.each([
+  jquery.each([
     'extend',
     'inArray',
     'isEmptyObject'
   ], function(i, method) {
-    JQueryAdapter[method] = $[method]
+    JQueryAdapter[method] = jquery[method]
   })
 
-  Waypoint.adapters.push({
+  module.exports = {
     name: 'jquery',
     Adapter: JQueryAdapter
-  })
-  Waypoint.Adapter = JQueryAdapter
-}())
+  }

src/adapters/noframework.js

@@ -1,8 +1,5 @@
-(function() {
   'use strict'
 
-  var Waypoint = window.Waypoint
-
   function isWindow(element) {
     return element === element.window
   }
@@ -101,7 +98,7 @@
     var computedStyle
 
     if (includeMargin && !isWindow(this.element)) {
-      computedStyle = window.getComputedStyle(this.element)
+      computedStyle = global.getComputedStyle(this.element)
       height += parseInt(computedStyle.marginTop, 10)
       height += parseInt(computedStyle.marginBottom, 10)
     }
@@ -114,7 +111,7 @@
     var computedStyle
 
     if (includeMargin && !isWindow(this.element)) {
-      computedStyle = window.getComputedStyle(this.element)
+      computedStyle = global.getComputedStyle(this.element)
       width += parseInt(computedStyle.marginLeft, 10)
       width += parseInt(computedStyle.marginRight, 10)
     }
@@ -165,9 +162,7 @@
     return true
   }
 
-  Waypoint.adapters.push({
+  module.exports = {
     name: 'noframework',
     Adapter: NoFrameworkAdapter
-  })
-  Waypoint.Adapter = NoFrameworkAdapter
-}())
+  }

src/adapters/zepto.js

@@ -1,15 +1,12 @@
-(function() {
   'use strict'
-
-  var $ = window.Zepto
-  var Waypoint = window.Waypoint
+  var Zepto = global.Zepto  //require('zepto')
 
   function ZeptoAdapter(element) {
     this.element = element
-    this.$element = $(element)
+    this.$element = Zepto(element)
   }
 
-  $.each([
+  Zepto.each([
     'off',
     'on',
     'scrollLeft',
@@ -28,7 +25,7 @@
   }
 
   // Adapted from https://gist.github.com/wheresrhys/5823198
-  $.each([
+  Zepto.each([
     'width',
     'height'
   ], function(i, dimension) {
@@ -41,7 +38,7 @@
           height: ['top', 'bottom']
         }
 
-        $.each(sides[dimension], function(i, side) {
+        Zepto.each(sides[dimension], function(i, side) {
           size += parseInt($element.css('padding-' + side), 10)
           if (includeBorder) {
             size += parseInt($element.css('border-' + side + '-width'), 10)
@@ -54,18 +51,18 @@
       }
     }
 
-    var innerMethod = $.camelCase('inner-' + dimension)
-    var outerMethod = $.camelCase('outer-' + dimension)
+    var innerMethod = Zepto.camelCase('inner-' + dimension)
+    var outerMethod = Zepto.camelCase('outer-' + dimension)
 
     ZeptoAdapter.prototype[innerMethod] = createDimensionMethod(false)
     ZeptoAdapter.prototype[outerMethod] = createDimensionMethod(true)
   })
 
-  $.each([
+  Zepto.each([
     'extend',
     'inArray'
   ], function(i, method) {
-    ZeptoAdapter[method] = $[method]
+    ZeptoAdapter[method] = Zepto[method]
   })
 
   ZeptoAdapter.isEmptyObject = function(obj) {
@@ -76,9 +73,7 @@
     return true
   }
 
-  Waypoint.adapters.push({
+  module.exports = {
     name: 'zepto',
     Adapter: ZeptoAdapter
-  })
-  Waypoint.Adapter = ZeptoAdapter
-}())
+  }

src/context.js

@@ -1,14 +1,13 @@
-(function() {
   'use strict'
+  var Waypoint = require('./waypoint')
 
   function requestAnimationFrameShim(callback) {
-    window.setTimeout(callback, 1000 / 60)
+    global.setTimeout(callback, 1000 / 60)
   }
 
   var keyCounter = 0
   var contexts = {}
-  var Waypoint = window.Waypoint
-  var oldWindowLoad = window.onload
+  var oldWindowLoad = global.onload
 
   /* http://imakewebthings.com/waypoints/api/context */
   function Context(element) {
@@ -282,19 +281,18 @@
     return contexts[element.waypointContextKey]
   }
 
-  window.onload = function() {
+  global.onload = function() {
     if (oldWindowLoad) {
       oldWindowLoad()
     }
     Context.refreshAll()
   }
 
   Waypoint.requestAnimationFrame = function(callback) {
-    var requestFn = window.requestAnimationFrame ||
-      window.mozRequestAnimationFrame ||
-      window.webkitRequestAnimationFrame ||
+    var requestFn = global.requestAnimationFrame ||
+      global.mozRequestAnimationFrame ||
+      global.webkitRequestAnimationFrame ||
       requestAnimationFrameShim
     requestFn.call(window, callback)
   }
-  Waypoint.Context = Context
-}())
+  module.exports = Context

src/debug.js

@@ -1,6 +1,4 @@
-(function() {
   'use strict'
-
   var displayNoneMessage = [
     'You have a Waypoint element with display none. For more information on ',
     'why this is a bad idea read ',
@@ -13,13 +11,13 @@
   ].join('')
 
   function checkWaypointStyles() {
-    var originalRefresh = window.Waypoint.Context.prototype.refresh
+    var originalRefresh = global.Waypoint.Context.prototype.refresh
 
-    window.Waypoint.Context.prototype.refresh = function() {
+    global.Waypoint.Context.prototype.refresh = function() {
       for (var axis in this.waypoints) {
         for (var key in this.waypoints[axis]) {
           var waypoint = this.waypoints[axis][key]
-          var style = window.getComputedStyle(waypoint.element)
+          var style = global.getComputedStyle(waypoint.element)
           if (!waypoint.enabled) {
             continue
           }
@@ -35,5 +33,4 @@
     }
   }
 
-  checkWaypointStyles()
-}())
+  module.exports = checkWaypointStyles

src/entries/debug.js

@@ -0,0 +1,4 @@
+'use strict'
+var Debug = require('../debug')
+Debug()
+module.exports = Debug

src/entries/noframework.js

@@ -0,0 +1,14 @@
+'use strict'
+var Waypoint = require('../waypoint')
+var Context = require('../context')
+var Group = require('../group')
+var NoFrameworkAdapter = require('../adapters/noframework')
+var Inview = require('../shortcuts/inview')
+
+Waypoint.Context = Context
+Waypoint.Group = Group
+Waypoint.adapters.push(NoFrameworkAdapter)
+Waypoint.Adapter = NoFrameworkAdapter.Adapter
+Waypoint.Inview = Inview
+
+module.exports = Waypoint

src/entries/shortcuts.inview.js

@@ -0,0 +1,4 @@
+var InView = require('../shortcuts/inview')
+
+global.Waypoint.Inview = InView
+module.exports = InView

src/group.js

@@ -1,5 +1,5 @@
-(function() {
   'use strict'
+  var Waypoint = require('./waypoint')
 
   function byTriggerPoint(a, b) {
     return a.triggerPoint - b.triggerPoint
@@ -13,7 +13,6 @@
     vertical: {},
     horizontal: {}
   }
-  var Waypoint = window.Waypoint
 
   /* http://imakewebthings.com/waypoints/api/group */
   function Group(options) {
@@ -101,5 +100,4 @@
     return groups[options.axis][options.name] || new Group(options)
   }
 
-  Waypoint.Group = Group
-}())
+  module.exports = Group

src/shortcuts/infinite.js

@@ -1,8 +1,7 @@
-(function() {
   'use strict'
 
-  var $ = window.jQuery
-  var Waypoint = window.Waypoint
+  var $ = global.jQuery  //require('jquery')
+  var Waypoint = global.Waypoint // require('../waypoint')
 
   /* http://imakewebthings.com/waypoints/shortcuts/infinite-scroll */
   function Infinite(options) {
@@ -73,5 +72,4 @@
     onAfterPageLoad: $.noop
   }
 
-  Waypoint.Infinite = Infinite
-}())
+  module.exports = Infinite

src/shortcuts/inview.js

@@ -1,9 +1,8 @@
-(function() {
   'use strict'
+  var Waypoint = global.Waypoint //require('../waypoint')
 
   function noop() {}
 
-  var Waypoint = window.Waypoint
 
   /* http://imakewebthings.com/waypoints/shortcuts/inview */
   function Inview(options) {
@@ -101,13 +100,12 @@
   }
 
   Inview.defaults = {
-    context: window,
+    context: global,
     enabled: true,
     enter: noop,
     entered: noop,
     exit: noop,
     exited: noop
   }
 
-  Waypoint.Inview = Inview
-}())
+  module.exports = Inview