Merge pull request #91 from hannu/fix-socketio-paths

Find sass variables with config parameter instead of magic file. Fix socket.io target paths

Author: anttisalo

README.md

@@ -156,6 +156,11 @@ When using the build as a subfolder of your application, tune your server to res
 will let Angular application to deal with routing itself. However, the static files should be resolved as they are
 stored.
 
+**sassVariables** (string, optional) **(Experimental feature)**
+
+Path to the file that contains SASS variables editable in the designer mode.
+Note: Designer mode is enabled only when running styleguide's built-in server.
+
 ## Demo
 
 Build demo styleguide and start a server

bin/styleguide

@@ -16,7 +16,8 @@ var styleguide = require(__dirname + '/../lib/styleguide.js'),
   configPath,
   sourcePath,
   sourceFiles,
-  outputPath;
+  outputPath,
+  options;
 
 argv = yargs
   .usage('This is how ' + chalk.cyan.bold('YOU') + ' can generate ' +
@@ -41,24 +42,31 @@ outputPath = path.resolve(argv.output);
 configPath = argv.config ? path.resolve(argv.config) : undefined;
 config = configPath ? require(configPath) : {};
 
-gulp.task('styleguide', function() {
-  // Resolve overviewPath in relation to config file location
-  if (config.overviewPath) {
-    config.overviewPath = path.resolve(path.dirname(argv.config), config.overviewPath);
+// Resolve overviewPath and sassVariables files in relation to config file location
+if (config.overviewPath) {
+  config.overviewPath = path.resolve(path.dirname(argv.config), config.overviewPath);
+}
+if (config.sassVariables) {
+  config.sassVariables = path.resolve(path.dirname(argv.config), config.sassVariables);
+}
+options = extend({
+  socketIo: !!argv.server,
+  sass: {
+    loadPath: neat.includePaths
   }
-  var defaultConfig = {
-    socketIo: !!argv.server,
-    sass: {
-      loadPath: neat.includePaths
-    }
-  };
+}, config);
+
+gulp.task('styleguide', function() {
   gulp.src(sourceFiles)
-    .pipe(styleguide(extend(defaultConfig, config)))
+    .pipe(styleguide(options))
     .pipe(gulp.dest(outputPath));
 });
 
 gulp.task('serve', function() {
-  var serverModule = require('../lib/server')(sourcePath, outputPath),
+  var serverModule = require('../lib/server')({
+    rootPath: outputPath,
+    sassVariables: options.sassVariables
+  }),
     app = serverModule.app,
     server = serverModule.server;
 

demo/source/styleguide_config.json

@@ -1,5 +1,6 @@
 {
   "title": "Demo Styleguide",
   "overviewPath": "overview.md",
-  "commonClass": ["custom-class-1", "custom-class-2"]
+  "commonClass": ["custom-class-1", "custom-class-2"],
+  "sassVariables": "styles/_styleguide_variables.scss"
 }

demo/source/styles/_styleguide_variables.scss

@@ -1,7 +1,6 @@
-$color-turtle: #00cc00;
 $color-donatello: #841d85;
 $color-leonardo: #0000ff;
 $color-michelangelo: #FFA500;
 $color-raphael: #ff0000;
-
+$color-turtle: #00cc00;
 $font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;

gulpfile.js

@@ -15,15 +15,39 @@ var gulp = require('gulp'),
     distPath = './lib/dist',
     fs = require('fs'),
     chalk = require('chalk'),
+    extend = require('node.extend'),
     configPath = util.env.config ? util.env.config.replace(/\/$/, '') : null,
     outputPath = util.env.output ? util.env.output.replace(/\/$/, '') : '',
     sourcePath = util.env.source ? util.env.source.replace(/\/$/, '') : '',
-    config = configPath ? require(configPath) : {},
-    socketIo = false;
+    options = {};
+
+function parseOptions() {
+  var config = configPath ? require(configPath) : {};
+  // Resolve overviewPath in relation to config file location
+  if (config.overviewPath) {
+    config.overviewPath = path.resolve(path.dirname(configPath), config.overviewPath);
+  }
+  if (config.sassVariables) {
+    config.sassVariables = path.resolve(path.dirname(configPath), config.sassVariables);
+  }
+  options = extend({
+    sass: {
+      loadPath: neat.includePaths
+    },
+    socketIo: false
+  }, config);
+}
+
+parseOptions();
 
 /* Tasks for development */
 gulp.task('serve', function() {
-  var serverModule = require('./lib/server')(sourcePath, outputPath),
+  // Since we are running our own server we can enable socketIO
+  options.socketIo = true;
+  var serverModule = require('./lib/server')({
+    rootPath: outputPath,
+    sassVariables: options.sassVariables
+  }),
     app = serverModule.app,
     server = serverModule.server;
 
@@ -52,20 +76,8 @@ gulp.task('styleguide', function() {
     process.exit(1)
     return 1;
   }
-  // Resolve overviewPath in relation to config file location
-  var overviewPath;
-  if (config.overviewPath) {
-    overviewPath = path.resolve(path.dirname(configPath), config.overviewPath);
-  }
   return gulp.src([sourcePath + '/**/*.scss'])
-    .pipe(styleguide({
-      extraHead: config.extraHead,
-      overviewPath: overviewPath,
-      socketIo: socketIo,
-      sass: {
-        loadPath: neat.includePaths
-      }
-    }))
+    .pipe(styleguide(options))
     .pipe(gulp.dest(outputPath));
 });
 
@@ -110,7 +122,10 @@ gulp.task('demo', function() {
   configPath = __dirname + '/demo/source/styleguide_config.json';
   outputPath = __dirname + '/demo/output';
   sourcePath = __dirname + '/demo/source';
-  return runSequence('styleguide', 'serve');
+  // We need to re-parse options since configPath has changed
+  parseOptions();
+  // Run serve first so socketIO options is enabled when building styleguide
+  return runSequence('serve', 'styleguide');
 });
 
 gulp.task('html', function() {
@@ -125,7 +140,6 @@ gulp.task('assets', function() {
 
 gulp.task('watch', [], function() {
   // Do intial full build and create styleguide
-  socketIo = true;
   runSequence(['serve', 'build'], 'styleguide');
 
   gulp.watch('lib/app/sass/**/*.scss', function() {

lib/app/js/directives/design.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('sgApp')
-  .directive('sgDesign', function($rootScope) {
+  .directive('sgDesign', function($rootScope, Variables) {
     return {
       replace: true,
       restrict: 'A',
@@ -11,6 +11,7 @@ angular.module('sgApp')
       templateUrl: 'views/partials/design.html',
       link: function(scope) {
         scope.onChange = function(key, value) {
+          Variables.setValue('$' + key, value);
           $rootScope.config.settings[key] = value;
         };
 

lib/app/js/services/Variables.js

@@ -4,8 +4,7 @@
 
   var Variables = function() {
 
-    var settingsUrl = '../../sass/_styleguide_variables.scss',
-      socket,
+    var socket,
       values = {};
 
     this.getValue = function(valueName) {
@@ -63,7 +62,6 @@
         socket.on('variables saved to server', function(data) {
           console.log('EVENT: variables saved to server');
           console.log(data);
-          console.log(that);
         });
       }
 

lib/io.js

@@ -1,12 +1,17 @@
 var fs = require('fs');
 
-module.exports = function(io, sourcePath, outputPath) {
+module.exports = function(io, options) {
 
   var loadVariables, saveVariables;
 
+  if (!fs.existsSync(options.sassVariables)) {
+    console.error('Could not find SASS variables file', options.sassVariables);
+    return;
+  }
+
   loadVariables = function(socket) {
     return function() {
-      fs.readFile(sourcePath + '/styles/_styleguide_variables.scss', {encoding: 'utf8'}, function(err, data) {
+      fs.readFile(options.sassVariables, {encoding: 'utf8'}, function(err, data) {
         var line, splitData, values = {};
         if (err) {
           return console.error(err);
@@ -40,10 +45,10 @@ module.exports = function(io, sourcePath, outputPath) {
       sassVariableNames.sort();
 
       for (var i = 0;i < sassVariableNames.length;i++) {
-        lines.push(sassVariableNames[i] + ': ' + sassVariables[sassVariableNames[i]]);
+        lines.push(sassVariableNames[i] + ': ' + sassVariables[sassVariableNames[i]] + ';');
       }
 
-      fs.writeFile(outputPath + '/styles/_styleguide_variables.scss', lines.join('\n'), function(err, data) {
+      fs.writeFile(options.sassVariables, lines.join('\n'), function(err, data) {
         if (err) {
           return console.error(err);
         }

lib/server.js

@@ -1,4 +1,4 @@
-module.exports = function(sourcePath, outputPath) {
+module.exports = function(options) {
   var app,
     cookieParser = require('cookie-parser'),
     bodyParser = require('body-parser'),
@@ -19,12 +19,11 @@ module.exports = function(sourcePath, outputPath) {
     extended: true
   }));
   app.use(cookieParser());
-  app.use(express.static(outputPath));
+  app.use(express.static(options.rootPath));
 
   // Let Angular handle all routing
   app.all('/*', function(req, res) {
-    var rootPath = __dirname + '/..';
-    res.sendFile(path.resolve(outputPath + '/index.html'));
+    res.sendFile(path.resolve(options.rootPath + '/index.html'));
   });
 
   // catch 404 and forward to error handler
@@ -37,7 +36,7 @@ module.exports = function(sourcePath, outputPath) {
   // Setup socket.io
   server = require('http').Server(app);
   io = require('socket.io')(server);
-  require('./io')(io, sourcePath, outputPath);
+  require('./io')(io, options);
 
   return {
     app: app,

lib/styleguide.js

@@ -33,22 +33,20 @@ module.exports = function(opt) {
   if (!opt) opt = {};
   opt = {
     title: opt.title || 'Styleguide Generator',
-    outputPath: opt.outputPath,
     sass: opt.sass || {},
     overviewPath: opt.overviewPath || __dirname + '/overview.md',
     extraHead: opt.extraHead || '',
     appRoot: opt.appRoot || '',
     commonClass: opt.commonClass || '',
-    socketIo: opt.socketIo
+    socketIo: opt.socketIo,
+    sassVariables: opt.sassVariables || ''
   };
 
   if (typeof opt.extraHead === 'object') opt.extraHead = opt.extraHead.join('\n');
   if (!opt.kssOpt) opt.kssOpt = {};
 
   // Files object acts as our buffer
-  var filesBuffer = {},
-    settingsStr = '',
-    settingsRe = new RegExp('_styleguide_variables.scss');
+  var filesBuffer = {};
 
   // A stream through which each file will pass
   // We have 4 different streams that we have to wait until the whole process is completed
@@ -72,11 +70,6 @@ module.exports = function(opt) {
         return console.error('Styleguide does not support streams!');
       }
 
-      if (settingsRe.test(file.path)) {
-        console.log('_styleguide_variables.scss found! Generating settings.');
-        settingsStr = file.contents.toString();
-      }
-
       filesBuffer[file.path] = file.contents.toString('utf8');
 
       // Make sure file goes through the next gulp plugin
@@ -105,8 +98,8 @@ module.exports = function(opt) {
         delete styleguide.config.outputPath
 
         // If settings file is found, generate settings object
-        if (settingsStr) {
-          styleguide.config.settings = parseSettings(settingsStr);
+        if (opt.sassVariables) {
+          styleguide.config.settings = parseSettings(fs.readFileSync(opt.sassVariables));
         }
 
         // Create JSON containing KSS data

test/project/source/styleguide_config.json

@@ -3,5 +3,6 @@
     "<!-- extraHead comment -->"
   ],
   "overviewPath": "overview.md",
-  "commonClass": ["custom-class-1", "custom-class-2"]
+  "commonClass": ["custom-class-1", "custom-class-2"],
+  "sassVariables": "styles/_styleguide_variables.scss"
 }

test/project/source/styles/_styleguide_variables.scss

@@ -1,7 +1,3 @@
-$color-turtle: #00cc00;
-$color-donatello: #841d85;
-$color-leonardo: #0000ff;
-$color-michelangelo: #FFA500;
-$color-raphael: #ff0000;
-
-$font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$color-red: #ff0000;
+$color-green: #00ff00;
+$color-blue: #0000ff;

test/project/source/styles/style.scss

@@ -5,11 +5,9 @@
 // This section demonstrates how to present your color variables using
 // styleguide
 //
-// $color-turtle - Heroes in a half-shell
-// $color-leonardo - Leads
-// $color-donatello - Does machines
-// $color-raphael - Cool but crude
-// $color-michelangelo - Party dude
+// $color-red - Red test color
+// $color-green - Green test color
+// $color-blue - Blue test color
 //
 // Markup:
 // <div class="styleguide-color" style="background: {$modifiers};"></div>
@@ -90,10 +88,10 @@ small, .font_small {font-size: 0.707em;}
   border-radius: 5px;
 
   &.green {
-    background: $color-turtle;
+    background: $color-green;
   }
   &.red {
-    background: $color-raphael;
+    background: $color-red;
   }
   &:hover {
     background: yellow;

test/structure.js

@@ -15,6 +15,7 @@ var gulp = require('gulp'),
       '<script src="your/custom/script.js"></script>'
     ],
     commonClass: ['custom-class-1', 'custom-class-2'],
+    sassVariables: './test/project/source/styles/_styleguide_variables.scss',
     sass: {
       // Options passed to gulp-ruby-sass
     }
@@ -157,6 +158,15 @@ describe('styleguide.json', function() {
     jsonData.config.commonClass.should.eql(['custom-class-1', 'custom-class-2']);
   });
 
+  it('should contain all SASS variables from defined file', function() {
+    var sassData = {
+      'color-red': '#ff0000',
+      'color-green': '#00ff00',
+      'color-blue': '#0000ff'
+    }
+    jsonData.config.settings.should.eql(sassData);
+  })
+
   it('should not reveal outputPath', function() {
     should.not.exist(jsonData.config.outputPath);
   });