feat: Refactor to support CSS

BREAKING CHANGE: Argument change to middleware class. Now takes 3
arguments instead of 2. jsfiles: array, cssFiles: array, options: object

Author: digitalsadhu

lib/middleware.js

@@ -4,11 +4,12 @@ const EventEmitter = require('events');
 const watchify = require('watchify');
 const devnull = require('dev-null');
 const express = require('express');
-const Writer = require('asset-pipe-js-writer');
+const JsWriter = require('asset-pipe-js-writer');
+const CssWriter = require('asset-pipe-css-writer');
 const emits = require('emits');
 
 module.exports = class Middleware extends EventEmitter {
-    constructor(files = [], options = {}) {
+    constructor(jsFiles = [], cssFiles = [], options = {}) {
         super();
 
         this.options = Object.assign(
@@ -17,17 +18,22 @@ module.exports = class Middleware extends EventEmitter {
                 packageCache: {},
                 debug: true,
                 jsPath: '/js',
+                cssPath: '/css',
             },
             options
         );
 
         this.emits = emits;
-        this.writer = new Writer(files, this.options, true);
-        this.writer.plugin(watchify);
+        this.writers = {
+            js: new JsWriter(jsFiles, this.options, true),
+            css: new CssWriter(cssFiles, this.options),
+        };
+
+        this.writers.js.plugin(watchify);
 
         // On every filechange, drain the stream to keep the cache up to date
-        this.writer.on('update', () => {
-            const bundler = this.writer.bundle();
+        this.writers.js.on('update', () => {
+            const bundler = this.writers.js.bundle();
 
             bundler.on('error', e => {
                 this.emit('error', e);
@@ -36,31 +42,50 @@ module.exports = class Middleware extends EventEmitter {
             bundler.pipe(devnull());
         });
 
-        // Proxy underlaying events
-        this.writer.on('error', this.emits('error'));
-        this.writer.on('update', this.emits('update'));
-        this.writer.on('bytes', this.emits('bytes'));
-        this.writer.on('time', this.emits('time'));
-        this.writer.on('log', this.emits('log'));
+        this.writers.css.on('update', () => {
+            const bundler = this.writers.css.bundle();
+
+            bundler.on('error', e => {
+                this.emit('error', e);
+            });
 
-        this.app = express.Router({ // eslint-disable-line
+            bundler.pipe(devnull());
+        });
+
+        // Proxy underlaying events
+        this.writers.js.on('error', this.emits('error'));
+        this.writers.js.on('update', this.emits('update'));
+        this.writers.js.on('bytes', this.emits('bytes'));
+        this.writers.js.on('time', this.emits('time'));
+        this.writers.js.on('log', this.emits('log'));
+
+        this.writers.css.on('error', this.emits('error'));
+        this.writers.css.on('update', this.emits('update'));
+        this.writers.css.on('bytes', this.emits('bytes'));
+        this.writers.css.on('time', this.emits('time'));
+        this.writers.css.on('log', this.emits('log'));
+
+        // eslint-disable-next-line new-cap
+        this.app = express.Router({
             mergeParams: true,
         });
 
         this.app.get(this.options.jsPath, this.js());
+        this.app.get(this.options.cssPath, this.css());
     }
 
     transform(transform, options) {
-        this.writer.transform(transform, options);
+        this.writers.js.transform(transform, options);
     }
 
     plugin(plugin, options) {
-        this.writer.plugin(plugin, options);
+        this.writers.js.plugin(plugin, options);
     }
 
-    middelware(jsProp = 'js') {
+    middleware(jsProp = 'js', cssProp = 'css') {
         return (req, res, next) => {
             res.locals[jsProp] = this.options.jsPath;
+            res.locals[cssProp] = this.options.cssPath;
             next();
         };
     }
@@ -72,7 +97,26 @@ module.exports = class Middleware extends EventEmitter {
     js() {
         return (req, res, next) => {
             res.writeHead(200, { 'Content-Type': 'application/javascript' });
-            const bundler = this.writer.bundle();
+            const bundler = this.writers.js.bundle();
+
+            bundler.on('error', cleanup);
+
+            const writeStream = bundler.pipe(res).on('error', cleanup);
+
+            function cleanup(e) {
+                res.write(`console.error(${JSON.stringify(e.stack)})`);
+                bundler.pause();
+                bundler.unpipe(writeStream);
+                writeStream.end();
+                next(e);
+            }
+        };
+    }
+
+    css() {
+        return (req, res, next) => {
+            res.writeHead(200, { 'Content-Type': 'text/css' });
+            const bundler = this.writers.css.bundle();
 
             bundler.on('error', cleanup);