refactored into lib

Author: xomaczar

README.md

@@ -6,17 +6,23 @@ Reloads changed styles (css|scss|sass|less|styl) without reloading the entire em
 
 ## Installation
 
-### As an Ember CLI addon
+Run either command below depending on Ember version in your project folder.
 
-In your ember-cli project run
+For Ember CLI >= `0.2.3`:
 
-```bash
-npm install --save-dev ember-cli-styles-reloader
+```shell
+ember install ember-cli-styles-reloader
+```
+
+For Ember CLI < `0.2.3`:
+
+```shell
+ember install:addon ember-cli-styles-reloader
 ```
 
 ## Configurations
 
-* All style changes can be animated to smoothly transition between new/old change sets.
+* All style changes can be animated to smoothly transition between old/new change sets.
 By default this feature is disabled, in order to not interfere with existing transition(s) defined
 in your app. To enable it:
 

addon/.gitkeep

@@ -1,60 +1,54 @@
-/* jshint node: true */
-'use strict';
-
-/* default reload css extensions */
-var styleExtensions = ['css', 'scss', 'sass', 'less', 'styl'];
-var reloadCssPattern = new RegExp('.(' + styleExtensions.join('|') + ')$');
-
-function LiveStyleReloader(options){
-
-    var noop = function(){},
-        options = options,
-        appCssPattern = new RegExp('^' + options.project.root + '/app/styles/*'),
-        ui = options.ui,
-        http = null,
-        liveReloadHost = options.liveReloadHost || options.host
-        liveReloadHostname = [(options.ssl ? 'https://' :'http://'), liveReloadHost, ':', options.liveReloadPort].join(''),
-        reloadCssPattern = options.reloadCssPattern;
-
-    var getDirtyAsset = function(changedFilePath){
-        if (changedFilePath.match(appCssPattern)){
-            return options.project.pkg.name + '.css';
-        }
-        return 'vendor.css';
-    };
-
-    var fileDidChange = function(results){
-        var filePath = results.filePath || '';
-        var dirtyAsset = getDirtyAsset(filePath);
-
-        if (filePath.match(reloadCssPattern)){
-            ui.writeLine("Reloading " + dirtyAsset + " only");
-            http.get(liveReloadHostname + '/changed?files=' + dirtyAsset)
-                .on('error', noop);
-        }
-    };
-
-    this.startObserving = function(watcher){
-        if (options.liveReload){
-            ui.writeLine('StyleReloader watches ' + styleExtensions.join('|'));
-            http = require('http');
-            watcher.on('change', fileDidChange.bind(this));
-        }
-    };
-};
+// /* jshint node: true */
+// 'use strict';
+
+// /* default reload css extensions */
+// var styleExtensions = ['css', 'scss', 'sass', 'less', 'styl'];
+// var reloadCssPattern = new RegExp('.(' + styleExtensions.join('|') + ')$');
+
+// function LiveStyleReloader(options){
+
+//     var noop = function(){},
+//         options = options,
+//         appCssPattern = new RegExp('^' + options.project.root + '/app/styles/*'),
+//         ui = options.ui,
+//         http = null,
+//         liveReloadHost = options.liveReloadHost || options.host
+//         liveReloadHostname = [(options.ssl ? 'https://' :'http://'), liveReloadHost, ':', options.liveReloadPort].join(''),
+//         reloadCssPattern = options.reloadCssPattern;
+
+//     var getDirtyAsset = function(changedFilePath){
+//         if (changedFilePath.match(appCssPattern)){
+//             return options.project.pkg.name + '.css';
+//         }
+//         return 'vendor.css';
+//     };
+
+//     var fileDidChange = function(results){
+//         var filePath = results.filePath || '';
+//         var dirtyAsset = getDirtyAsset(filePath);
+
+//         if (filePath.match(reloadCssPattern)){
+//             ui.writeLine("Reloading " + dirtyAsset + " only");
+//             http.get(liveReloadHostname + '/changed?files=' + dirtyAsset)
+//                 .on('error', noop);
+//         }
+//     };
+
+//     this.startObserving = function(watcher){
+//         if (options.liveReload){
+//             ui.writeLine('StyleReloader watches ' + styleExtensions.join('|'));
+//             http = require('http');
+//             watcher.on('change', fileDidChange.bind(this));
+//         }
+//     };
+// };
 
 module.exports = {
   name: 'ember-cli-styles-reloader',
 
   serverMiddleware: function(config){
-    var options = config.options;
-
-   // Tell ember-cli to ignore files that match reloadCssPattern
-    options.project.liveReloadFilterPatterns.push(reloadCssPattern);
-    options.reloadCssPattern = reloadCssPattern
-
-    var lsReloader = new LiveStyleReloader(options);
-    lsReloader.startObserving(options.watcher);
+    var lsReloader = require('./lib/styles-reloader')(config.options);
+    lsReloader.run();
   },
 
   contentFor: function(type, config){

config/environment.js

@@ -0,0 +1,63 @@
+/* jshint node: true */
+'use strict';
+
+var path = require('path');
+var http = require('http');
+
+/* default reload css extensions */
+var styleExtensions = ['css', 'scss', 'sass', 'less', 'styl'];
+var reloadCssPattern = new RegExp('\.(' + styleExtensions.join('|') + ')$');
+
+var noop = function(){};
+
+module.exports = function StylesReloader(options){
+  var options = options;
+  var liveReloadEnabled = options.liveReload;
+  var fsWatcher = options.watcher;
+  var ui = options.ui;
+
+  // Build app style pattern
+  var appStylePath = options.project.root + path.join('/app', 'styles', '*');
+  var appStylePattern = new RegExp('^' + appStylePath);
+  var appStyleResource = options.project.pkg.name + '.css';
+
+  // Livereload host/port
+  var liveReloadHostname = [
+    (options.ssl ? 'https://' :'http://'),
+    (options.liveReloadHost || options.host),
+    ':',
+    options.liveReloadPort
+  ].join('');
+
+  function getChangedStyle(filePath){
+    if (filePath.match(appStylePattern)){
+      return appStyleResource;
+    }
+    return 'vendor.css';
+  };
+
+  function fileDidChange(results){
+    var filePath = results.filePath || '';
+    var liveReloadFile = getChangedStyle(filePath);
+
+    if (filePath.match(reloadCssPattern)){
+      ui.writeLine('Reloading ' + liveReloadFile + ' only');
+      http.get(liveReloadHostname + '/changed?files=' + liveReloadFile)
+          .on('error', noop);
+    }
+  };
+
+  function updateReloadFilters(){
+    options.project.liveReloadFilterPatterns.push(reloadCssPattern);
+  };
+
+  return {
+    run: function(){
+      if (liveReloadEnabled){
+        ui.writeLine('StylesReloader watches ' + styleExtensions.join('|'));
+        updateReloadFilters();
+        fsWatcher.on('change', fileDidChange.bind(this));
+      }
+    }
+  };
+};

index.js

@@ -1,6 +1,6 @@
 {
   "name": "ember-cli-styles-reloader",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Reloads changed styles (css|scss|sass|less|styl) without reloading the entire ember-cli app",
   "directories": {
     "doc": "doc",